deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-01 21:42:22 +02:00
Code Issues Projects Releases Wiki Activity

clean up accordion

Browse source
This commit is contained in:
koester 2017-12-30 13:07:53 +01:00
parent 1c02bb8db6
commit 1ed44c1cab
1 changed files with 41 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/components/_accordion.scss
View file

@ -1,53 +1,49 @@
@mixin transition($transition){
-webkit-transition: max-height $transition, padding $transition, opacity $transition;
-moz-transition: max-height $transition, padding $transition, opacity $transition;
-o-transition: max-height $transition, padding $transition, opacity $transition;
transition: max-height $transition, padding $transition, opacity $transition;
}
.collapsible {
display: flex;
flex-direction: column;
&:nth-of-type(1) {
border-top: 1px solid $muted-light;
display: flex;
flex-direction: column;
&:nth-of-type(1) {
border-top: 1px solid $muted-light;
}
.collapsible-body {
max-height: 0px;
opacity: 0;
overflow: hidden;
padding: 0rem 0.75rem;
margin: 0;
background-color: lighten($white-dark, 80%);
border-bottom: 1px solid $muted-light;
@include transition;
}
input {
display: none;
&:checked + label {
color: $primary;
}
.collapsible-body {
max-height: 0px;
opacity: 0;
overflow: hidden;
padding: 0rem 0.75rem;
margin:0;
background-color: lighten($white-dark,80%);
border-bottom: 1px solid $muted-light;
@include transition(#{"0.25s ease"});
&[id^="collapsible"]:checked~div.collapsible-body {
opacity: 1;
max-height: 960px;
padding: 0.75rem 0.75rem;
margin: 0;
}
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 0.75rem 0.75rem;
font-weight: 600;
text-align: center;
color: $primary;
border-bottom: 1px solid $muted-light;
label {
display: inline-block;
margin: 0 0 -1px;
padding: 0.75rem 0.75rem;
font-weight: 600;
text-align: center;
color: $primary;
border-bottom: 1px solid $muted-light;
}
label:hover {
color: $muted;
cursor: pointer;
}
input:checked+label {
color: $primary;
}
input[id ^="collapsible"]:checked ~ div.collapsible-body {
opacity: 1;
max-height: 960px;
padding: 0.75rem 0.75rem;
margin: 0;
&:hover {
color: $muted;
cursor: pointer;
}
}
}