vuesax/dist/style/components/vsCollapse.styl

Framework Components for Vue js

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

  &.shadow
    .open-item
      transform: scale(1.01)
      box-shadow: 0px 2px 15px 0px rgba(0,0,0,.05)
      margin-top: 5px
      border-bottom: 0px 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: 0px 2px 15px 0px rgba(0,0,0,.05)
      border-radius: 5px
      border-bottom: 0px 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: 0px
    .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: 0px 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, 0px)
  top: 50%
  propWithDir(transform, null, (-50% -50%))
  display block
  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 0px 0px 6px 0px rgba(0,0,0,.05)
.con-content--item
  padding: 10px
  padding-top: 0px
  font-size: .85rem
  // transform: translate(0,-20px)
  opacity .2
  transition: all .25s ease