Modifying separated inline list styles to wrap neatly

The "//" separator is hidden when the list items wrap.
This commit is contained in:
Jeff Avallone 2018-06-01 17:16:54 -04:00
parent 8eb2398de1
commit 81aceeba5f
4 changed files with 47 additions and 6 deletions

View File

@ -11,7 +11,7 @@ footer {
& ul { & ul {
@apply --inline-list; @apply --inline-list;
@apply --with-separator; @apply --with-separator-left;
flex: 1; flex: 1;
} }

View File

@ -50,12 +50,14 @@
@media (min-width: 700px) { @media (min-width: 700px) {
@apply --inline-list; @apply --inline-list;
@apply --with-separator; @apply --with-separator-left;
float: right; float: right;
} }
& svg { & svg {
width: 1em;
height: 1em; height: 1em;
margin-right: 0.5rem;
vertical-align: middle; vertical-align: middle;
} }
} }

View File

@ -44,11 +44,12 @@
& ul { & ul {
@apply --inline-list; @apply --inline-list;
@apply --with-separator-right;
text-align: right; text-align: right;
} }
& li { & li {
margin-left: 1em; line-height: 2.4rem;
& a:hover, & a:hover,
& a:active { & a:active {

View File

@ -30,14 +30,52 @@
white-space: nowrap; white-space: nowrap;
} }
} }
--with-separator: { --list-separator-width: 2ex;
& li:after { --separator-style: {
content: '//'; content: '//';
padding: 0 0.5rem; padding: 0 0.5rem;
display: inline-block;
box-sizing: border-box;
width: var(--list-separator-width);
}
--with-separator-left: {
overflow: hidden;
& li {
padding-right: var(--list-separator-width);
}
& li:before {
@apply --separator-style;
margin-left: -var(--list-separator-width);
}
& li:last-child {
padding-right: 0;
}
& li:first-child:before {
visibility: hidden;
}
}
--with-separator-right: {
overflow: hidden;
& li {
padding-left: var(--list-separator-width);
}
& li:after {
@apply --separator-style;
margin-right: -var(--list-separator-width);
}
& li:first-child {
padding-left: 0;
} }
& li:last-child:after { & li:last-child:after {
content: ''; visibility: hidden;
} }
} }
} }