fixed-vuesax/dist/style/components/vsCollapse.styl

Framework Components for Vue js

.vs-collapse
  transition: all .3s ease;
  border-radius: 8px
  // box-shadow: 0 2px 12px 0 rgba(0,0,0,.05)
  padding: 10px

  &.shadow
    .open-item
      transform: scale(1.01)
      box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .05)
      margin-top: 5px
      border-bottom: 0 solid rgba(0, 0, 0, .0)
      margin-bottom: 10px
      border-radius: 6px

      .vs-collapse-item--icon-header
        propWithDir(transform, null, (-50% -50%), rotate(180deg))

      .con-content-item
        opacity 1

  &.margin
    .vs-collapse-item
      margin-top: 10px
      margin-bottom: 10px
      box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .05)
      border-radius: 5px
      border-bottom: 0 solid rgba(0, 0, 0, .0)

    .open-item
      .con-content-item
        opacity 1

      .vs-collapse-item--icon-header
        propWithDir(transform, null, (-50% -50%), rotate(180deg))

  &.border
    border: 1px solid rgba(0, 0, 0, .1)
    padding: 0

    .vs-collapse-item
      border-bottom: 1px solid rgba(0, 0, 0, .1)

    .open-item
      .con-content-item
        opacity 1

      .vs-collapse-item--icon-header
        propWithDir(transform, null, (-50% -50%), rotate(180deg))


  &.default
    .open-item
      .con-content--item
        opacity 1

      .vs-collapse-item--icon-header
        propWithDir(transform, null, (-50% -50%), rotate(180deg))

.vs-collapse-item
  border-bottom: 1px solid rgba(0, 0, 0, .04)
  cursor: pointer;
  transition: all .25s ease

  &.open-item
    .con-content--item
      opacity 1

  &.disabledx
    opacity: $vs-disabled-opacity
    cursor: default
    pointer-events: none
    z-index: 999;

  &:last-child
    border-bottom: 0 solid rgba(0, 0, 0, .0) !important

.vs-collapse-item--header
  display: block
  padding: 10px
  position relative
  transition: all .25s ease

.vs-collapse-item--icon-header
  position: absolute
  propWithDir(right, null, 0)
  top: 50%
  propWithDir(transform, null, (-50% -50%))
  transition: all .25s ease
  display: flex
  align-items: center
  justify-content: center
  border-radius: 5px

.vs-collapse-item--content
  overflow hidden
  transition: all .2s ease

// box-shadow: inset 0 0 6px 0 rgba(0,0,0,.05)
.con-content--item
  padding: 10px
  padding-top: 0
  font-size: .85rem
  // transform: translate(0,-20px)
  opacity .2
  transition: all .25s ease