@blexar/framework
Version:
CSS framework to establish your favorite websites in mints, with user experience in mind.
75 lines (61 loc) • 1.35 kB
text/stylus
.accordion
margin: 0
margin-bottom: $margin
padding: 0
max-width: 100%
border-radius: $border-radius
list-style: none
&.is-clean
margin-top: $margin
&-item
position: relative
padding: $padding
border-radius: $border-radius
background-color: $white
color: $black
border: $border solid $gray
&:not(:last-child)
margin-bottom: 10px
&.is-active
>.accordion-title
color: $primary
>.accordion-icon
transform: rotate(135deg)
.is-clean &
margin-bottom: 0
border: 0
&-body
overflow: hidden
margin: 0
height: 0
transition: $transition-time
transition-timing-function: cubic-bezier(0, 0, 0.3, 1)
@extends $normal
.is-active > &
margin-top: $margin
height: auto
&-list
margin: 0 0 0 $margin
padding: 0
list-style: none
li
padding: $padding-px
a
color: $black
text-decoration: none
&:hover,
&.is-active
color: $primary
&-title
position: relative
display: block
width: 100%
cursor: pointer
text-decoration: none
user-select: none
color: $slategray
@extend $normal
&:hover
color: $primary
.accordion
margin-bottom: 0