You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
599 B
39 lines
599 B
4 years ago
|
// Accordions
|
||
|
|
.accordion {
|
||
|
|
input:checked ~,
|
||
|
|
&[open] {
|
||
|
|
& .accordion-header {
|
||
|
|
.icon {
|
||
|
|
transform: rotate(90deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& .accordion-body {
|
||
|
|
max-height: 50rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.accordion-header {
|
||
|
|
display: block;
|
||
|
|
padding: $unit-1 $unit-2;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
transition: transform .25s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.accordion-body {
|
||
|
|
margin-bottom: $layout-spacing;
|
||
|
|
max-height: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: max-height .25s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Remove default details marker in Webkit
|
||
|
|
summary.accordion-header {
|
||
|
|
&::-webkit-details-marker {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|