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
|
2023-02-21 20:51:32 +01:00
|
|
|
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: {
|
2023-02-21 20:51:32 +01:00
|
|
|
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: {
|
2023-02-21 20:51:32 +01:00
|
|
|
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 {
|
2023-02-21 20:51:32 +01:00
|
|
|
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 {
|
2023-02-21 20:51:32 +01:00
|
|
|
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 {
|
2023-02-21 20:51:32 +01:00
|
|
|
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 {
|
2023-02-21 20:51:32 +01:00
|
|
|
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;
|
2023-02-21 20:51:32 +01:00
|
|
|
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 {
|
2023-02-09 23:53:25 +01:00
|
|
|
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;
|
2023-02-21 20:51:32 +01:00
|
|
|
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: {
|
2023-02-21 20:51:32 +01:00
|
|
|
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 {
|
2023-02-21 20:51:32 +01:00
|
|
|
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 {
|
2023-02-21 20:51:32 +01:00
|
|
|
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 {
|
2023-02-21 20:51:32 +01:00
|
|
|
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;
|
2023-02-21 20:51:32 +01:00
|
|
|
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
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|