diff --git a/src/accordion.less b/src/accordion.less deleted file mode 100644 index 5d82464..0000000 --- a/src/accordion.less +++ /dev/null @@ -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; - } -} diff --git a/src/components/_accordion.scss b/src/components/_accordion.scss new file mode 100644 index 0000000..858b05d --- /dev/null +++ b/src/components/_accordion.scss @@ -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; + } +} diff --git a/src/styles.scss b/src/styles.scss index 8724749..2b99a4d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -20,6 +20,7 @@ @import 'utilities/shadows'; /* Components */ +@import 'components/accordion'; @import 'components/alerts'; @import 'components/article'; @import 'components/badges';