@blexar/framework/src/components/accordion.styl

CSS framework to establish your favorite websites in mints, with user experience in mind.

.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