sass-site/source/assets/css/components/_lists.scss
Natalie Weizenbaum 482542ac08 Add a header for impl status bars
This gives us a place to disambiguate between implementation statuses
that refer to the entire feature under discussion, and those that just
refer to sub-features.
2019-03-08 16:48:27 -08:00

91 lines
1.3 KiB
SCSS

.sl-c-list {
&,
&-horizontal-wrapper ul,
&-navigation-wrapper ul {
margin: 0;
padding: 0;
list-style: none;
}
&-horizontal-wrapper {
@include sl-breakpoint--large {
ul {
display: flex;
margin: {
right: -0.5rem;
left: -0.5rem;
};
}
li {
padding: {
right: .5rem;
left: .5rem;
};
}
}
}
&-navigation-wrapper {
position: relative;
li {
margin: .5rem 0;
line-height: 1.25;
}
ul ul { margin: 0 0 0 1rem; }
}
}
.sl-c-description-list--horizontal {
margin: {
right: -1rem;
left: -1rem;
};
&,
> div { display: flex; }
> div {
border-left: 1px solid $sl-color--iron;
padding: 0 1rem;
&:first-child { border: 0; }
}
.compatibility {
font-weight: 600;
opacity: 0.5;
+ div { border: 0; }
}
dt,
dd {
padding-left: 1rem;
&:first-child { padding-left: 0; }
}
&.impl-status {
font-size: 0.8em;
margin-top: -1em;
a {
transition: transform 0.1s;
border-bottom: none;
background: none;
cursor: pointer;
width: 19px;
text-align: center;
transform-origin: 8px 11px;
&.expanded { transform: rotate(90deg); }
}
}
}