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 {
@apply --inline-list;
@apply --with-separator;
@apply --with-separator-left;
flex: 1;
}

View File

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

View File

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

View File

@ -30,14 +30,52 @@
white-space: nowrap;
}
}
--with-separator: {
& li:after {
--list-separator-width: 2ex;
--separator-style: {
content: '//';
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 {
content: '';
visibility: hidden;
}
}
}