deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-05-22 23:52:16 +02:00
Code Issues Projects Releases Wiki Activity

convert accordion to scss

Browse source
This commit is contained in:
rhyneav 2017-12-27 11:39:45 -05:00
parent 4655186720
commit a89b6e8852
3 changed files with 54 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/accordion.less
View file

@ -1,56 +0,0 @@
@import './colors.less';
.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;
}
.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;
.transition(~"0.25s ease");
}
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: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;
}
}

53
src/components/_accordion.scss Normal file
View file

@ -0,0 +1,53 @@
@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;
}
.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"});
}
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: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;
}
}

1
src/styles.scss
View file

@ -20,6 +20,7 @@
@import 'utilities/shadows';
/* Components */
@import 'components/accordion';
@import 'components/alerts';
@import 'components/article';
@import 'components/badges';