vuesax
Version:
Framework Components for Vue js
99 lines (86 loc) • 2.35 kB
text/stylus
.vs-collapse
transition: all .3s ease;
cursor: pointer;
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
.con-content-item
opacity 1
.vs-collapse-item--icon-header
transform: translate(-50%, -50%) rotate(180deg)
&.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
transform: translate(-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
transform: translate(-50%, -50%) rotate(180deg)
&.default
.open-item
.con-content--item
opacity 1
.vs-collapse-item--icon-header
transform: translate(-50%, -50%) rotate(180deg)
.vs-collapse-item
border-bottom: 1px solid rgba(0,0,0,.04)
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
right 0px
top: 50%
transform translate(-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