Fixing positoining of action links in Form

This commit is contained in:
Jeff Avallone 2018-02-15 09:03:47 -05:00
parent bec4279c31
commit 672ded87af
4 changed files with 34 additions and 2 deletions

View File

@ -39,7 +39,7 @@ exports[`Form rendering 1`] = `
<SvgMock />
</div>
<ul
className="inline with-separator actions"
className="actions"
/>
</form>
</div>

View File

@ -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>

View File

@ -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;

View File

@ -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: '';
}
}
}