Fixing positoining of action links in Form
This commit is contained in:
parent
bec4279c31
commit
672ded87af
@ -39,7 +39,7 @@ exports[`Form rendering 1`] = `
|
||||
<SvgMock />
|
||||
</div>
|
||||
<ul
|
||||
className="inline with-separator actions"
|
||||
className="actions"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
@ -72,7 +72,7 @@ class Form extends React.Component {
|
||||
</select>
|
||||
<ExpandIcon/>
|
||||
</div>
|
||||
<ul className={ ['inline', 'with-separator', style.actions].join(' ') }>
|
||||
<ul className={ style.actions }>
|
||||
{ this.downloadActions() }
|
||||
{ this.permalinkAction() }
|
||||
</ul>
|
||||
|
@ -8,6 +8,7 @@
|
||||
|
||||
.form {
|
||||
margin: var(--spacing-margin) 0;
|
||||
overflow: hidden; /* Keep floated content in the box */
|
||||
|
||||
& textarea {
|
||||
display: block;
|
||||
@ -41,8 +42,14 @@
|
||||
}
|
||||
|
||||
.actions {
|
||||
@apply --list-reset;
|
||||
float: right;
|
||||
|
||||
@media (min-width: 700px) {
|
||||
@apply --inline-list;
|
||||
@apply --with-separator;
|
||||
}
|
||||
|
||||
& svg {
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
|
@ -14,4 +14,29 @@
|
||||
--header-height: 6rem;
|
||||
--content-margin: 2rem;
|
||||
--spacing-margin: 1rem;
|
||||
|
||||
--list-reset: {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
--inline-list: {
|
||||
@apply --list-reset;
|
||||
|
||||
& li {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
--with-separator: {
|
||||
& li:after {
|
||||
content: '//';
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
& li:last-child:after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user