Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

docs: fix styling issues on narrow screens

Browse Source
This commit is contained in:
Thomas Heartman 2022-03-01 08:44:57 +01:00
parent e12aa94695
commit 553b8020fd
4 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
website/src/components/UserFeedback/UserFeedback.stories.jsx
View File

@ -11,6 +11,9 @@ const Template = (args) => <FeedbackWrapper {...args} />;
export const Step1 = Template.bind({}); export const Step1 = Template.bind({});
Step1.args = { Step1.args = {
open: true, open: true,
seedData: {
currentStep: 1,
},
}; };
export const Step2 = Template.bind({}); export const Step2 = Template.bind({});

2
website/src/components/UserFeedback/index.jsx
View File

@ -360,7 +360,7 @@ export const FeedbackWrapper = ({ seedData, open }) => {
</div> </div>
<div className={styles['button-container']}> <div className={styles['button-container']}>
<button type="submit">Submit feedback</button> <button type="submit">Submit</button>
<button <button
className={styles['button-secondary']} className={styles['button-secondary']}
type="button" type="button"

9
website/src/components/UserFeedback/styles.module.css
View File

@ -30,6 +30,7 @@
.user-feedback fieldset { .user-feedback fieldset {
border: none; border: none;
margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
@ -41,15 +42,12 @@
.user-feedback button { .user-feedback button {
border: none; border: none;
border-radius: var(--ifm-global-radius); border-radius: var(--ifm-global-radius);
padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); padding: var(--ifm-spacing-vertical) calc(var(--ifm-spacing-horizontal) / 2);
} }
.user-feedback form { .user-feedback form {
/* max-width: 850px; */ /* max-width: 850px; */
width: 100%; /* width: 100%; */
margin-left: auto;
margin-right: auto;
transition: var(--fade-in-transition);
} }
.user-feedback form > * + * { .user-feedback form > * + * {
@ -238,4 +236,5 @@ button.close-button {
.form-section-container > * { .form-section-container > * {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
transition: var(--fade-in-transition);
} }

38
website/src/stories/header.css
View File

@ -1,32 +1,32 @@
.wrapper { .wrapper {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 15px 20px; padding: 15px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
svg { svg {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
h1 { h1 {
font-weight: 900; font-weight: 900;
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
margin: 6px 0 6px 10px; margin: 6px 0 6px 10px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
button + button { .wrapper button + button {
margin-left: 10px; margin-left: 10px;
} }
.welcome { .welcome {
color: #333; color: #333;
font-size: 14px; font-size: 14px;
margin-right: 10px; margin-right: 10px;
} }