sass-site/source/assets/sass/components/_lists.scss

182 lines
3.2 KiB
SCSS
Raw Normal View History

2023-01-12 20:54:24 +01:00
@use 'sass:color';
@use '../breakpoints';
@use '../visual-design/theme';
@use '../visual-design/typography';
2023-01-12 19:19:42 +01:00
2023-01-06 22:40:29 +01:00
.sl-c-list {
&,
&-horizontal-wrapper ul,
&-navigation-wrapper ul {
margin: 0;
padding: 0;
list-style: none;
}
&-horizontal-wrapper {
2023-01-12 19:19:42 +01:00
@include breakpoints.sl-breakpoint--medium {
2023-01-06 22:40:29 +01:00
// add margin-bottom space
// to the twitter follow button
margin-bottom: var(--sl-gutter);
2023-01-06 22:40:29 +01:00
}
2023-01-12 19:19:42 +01:00
@include breakpoints.sl-breakpoint--large {
2023-01-06 22:40:29 +01:00
ul {
display: flex;
margin: {
right: var(--sl-gutter--half-negative);
left: var(--sl-gutter--half-negative);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
li {
padding: {
right: var(--sl-gutter--half);
left: var(--sl-gutter--half);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
}
}
&-navigation-wrapper {
position: relative;
li {
margin: var(--sl-gutter--half) 0;
2023-01-06 22:40:29 +01:00
line-height: 1.25;
}
&--collapsible {
user-select: none;
2023-01-09 20:10:02 +01:00
ul ul a {
padding-left: var(--sl-gutter);
2023-01-09 20:10:02 +01:00
}
2023-01-09 23:19:15 +01:00
2023-01-09 20:10:02 +01:00
ul ul ul a {
padding-left: var(--sl-gutter--double);
2023-01-09 20:10:02 +01:00
}
2023-01-09 23:19:15 +01:00
2023-01-09 20:10:02 +01:00
ul ul ul ul a {
padding-left: var(--sl-gutter--triple);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
a {
border: none;
cursor: pointer;
display: block;
margin: var(--sl-gutter--half-negative) 0;
2023-01-06 22:40:29 +01:00
padding: 0.3rem;
width: 100%;
2023-01-09 20:10:02 +01:00
&:hover {
2023-01-12 19:19:42 +01:00
background-color: theme.$sl-color--dawn-pink;
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
li.overview a {
font-size: var(--sl-font-size--small);
2023-01-09 23:19:15 +01:00
2023-01-09 20:10:02 +01:00
&:not(.selected) {
2023-01-12 19:19:42 +01:00
color: color.adjust(theme.$sl-color--midnight-blue, $alpha: -0.3);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
li a {
&.section {
&::after {
2023-01-09 20:10:02 +01:00
content: '';
2023-01-06 22:40:29 +01:00
float: right;
font-size: 0.5em;
text-align: center;
margin-top: 5px;
transition: transform 0.1s;
width: var(--sl-gutter--plus);
2023-01-06 22:40:29 +01:00
}
2023-01-09 20:10:02 +01:00
&.open::after {
transform: rotate(90deg);
}
2023-01-06 22:40:29 +01:00
2023-01-09 20:10:02 +01:00
+ ul {
display: none;
}
2023-01-09 23:19:15 +01:00
2023-01-09 20:10:02 +01:00
&.open + ul {
display: block;
}
2023-01-06 22:40:29 +01:00
}
&.selected {
font-weight: bold;
2023-01-09 23:19:15 +01:00
2023-01-09 20:10:02 +01:00
&:not(.section) {
2023-01-12 19:19:42 +01:00
background-color: theme.$sl-color--dawn-pink;
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
}
}
}
}
.sl-c-description-list--horizontal {
margin: {
right: var(--sl-gutter--negative);
left: var(--sl-gutter--negative);
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
&,
2023-01-09 20:10:02 +01:00
> div {
display: flex;
}
2023-01-06 22:40:29 +01:00
> div {
border-left: var(--sl-border--small) solid theme.$sl-color--iron;
padding: 0 var(--sl-gutter);
2023-01-06 22:40:29 +01:00
2023-01-09 20:10:02 +01:00
&:first-child {
border: 0;
}
2023-01-06 22:40:29 +01:00
}
.compatibility {
font-weight: 600;
2023-01-12 19:19:42 +01:00
color: theme.$sl-color--midnight-blue;
2023-01-06 22:40:29 +01:00
display: block;
2023-01-09 20:10:02 +01:00
+ div {
border: 0;
}
2023-01-06 22:40:29 +01:00
}
dt,
dd {
padding-left: var(--sl-gutter);
2023-01-06 22:40:29 +01:00
2023-01-09 20:10:02 +01:00
&:first-child {
padding-left: 0;
}
2023-01-06 22:40:29 +01:00
}
&.impl-status {
font-size: var(--sl-status-text-size);
margin-top: var(--sl-gutter--negative);
2023-01-09 20:10:02 +01:00
dt {
word-break: normal;
}
2023-01-06 22:40:29 +01:00
a {
transition: transform 0.1s;
border-bottom: none;
background: none;
cursor: pointer;
width: var(--sl-gutter--plus);
2023-01-06 22:40:29 +01:00
text-align: center;
2023-01-09 20:10:02 +01:00
&.expanded {
transform: rotate(90deg);
}
2023-01-06 22:40:29 +01:00
}
}
}