Modifying separated inline list styles to wrap neatly
The "//" separator is hidden when the list items wrap.
This commit is contained in:
parent
8eb2398de1
commit
81aceeba5f
@ -11,7 +11,7 @@ footer {
|
||||
|
||||
& ul {
|
||||
@apply --inline-list;
|
||||
@apply --with-separator;
|
||||
@apply --with-separator-left;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user