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

84 lines
1.2 KiB
SCSS
Raw Normal View History

2018-12-28 01:31:28 +01:00
.sl-c-list {
2013-02-11 00:04:29 +01:00
2018-12-28 01:31:28 +01:00
&,
&-horizontal-wrapper ul,
&-navigation-wrapper ul {
margin: 0;
padding: 0;
list-style: none;
2013-02-09 04:10:33 +01:00
}
2013-10-11 22:06:20 +02:00
2018-12-28 01:31:28 +01:00
&-horizontal-wrapper {
2018-10-27 08:06:47 +02:00
2018-12-28 01:31:28 +01:00
@include sl-breakpoint--large {
2013-10-11 22:06:20 +02:00
2018-12-28 01:31:28 +01:00
ul {
display: flex;
margin: {
right: -0.5rem;
left: -0.5rem;
};
2013-10-09 12:30:53 +02:00
}
2013-10-12 20:25:16 +02:00
2018-12-28 01:31:28 +01:00
li {
padding: {
right: .5rem;
left: .5rem;
};
}
2013-10-12 20:25:16 +02:00
}
}
2018-12-28 01:31:28 +01:00
&-navigation-wrapper {
2018-12-29 01:42:05 +01:00
position: relative;
2013-10-12 23:39:55 +02:00
2019-03-05 01:59:06 +01:00
li {
margin: .5rem 0;
line-height: 1.25;
}
2018-12-28 01:31:28 +01:00
ul ul { margin: 0 0 0 1rem; }
2013-10-13 01:26:11 +02:00
}
2013-10-12 23:39:55 +02:00
}
2019-03-05 04:11:26 +01:00
.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; }
}
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); }
}
}
2019-03-05 04:11:26 +01:00
}