vuesax
Version:
Framework Components for Vue js
76 lines (69 loc) • 1.79 kB
text/stylus
.vs-con-textarea
width: 100%
position relative
border: 1px solid rgba(0,0,0,.08)
box-shadow: 0px 0px 0px 0px rgba(0,0,0,.0)
border-radius: 6px
transition: boxShadow .25s ease, border .25s ease, transform .25s ease
// overflow hidden
transform: translate(0, 0px)
margin-bottom: 16px
&.focusx
// box-shadow: 0px 4px 16px 0px rgba(0,0,0,.05)
// border: 1px solid rgba(0,0,0,.02)
// transform: translate(0, -3px)
h4
background: rgb(252,252,252)
padding-top: 4px
padding-bottom: 4px
h4
font-size: .7rem
padding: 8px
padding-bottom: 0px
cursor default
transition: all .25s ease
border-radius: 5px 5px 0px 0px
.vs-textarea
resize: none
border-radius: 6px
border: 0px solid rgba(0,0,0,.0)
display: block
padding: 9px
color: rgba(0,0,0,.8)
font-size: .8rem
width: 100%
max-width 100%
min-width 100%
background: transparent
&:focus
resize: auto !important
~
.count
opacity 1
&.textarea-danger
border: 1px solid getColor('danger', .4)
box-shadow: 0px 4px 20px 0px getColor('danger', .1)
.vs-textarea
color getColor('danger', .8)
.count
background: getColor('danger', 1)
.vs-textarea--count
position: absolute
right 14px
bottom: 0px
transform: translate(0, 100%)
// background: rgb(250,250,250)
padding: 1px 6px
font-size: .6rem
border-radius: 0px 0px 5px 5px
font-weight: bold
box-shadow: 0px 4px 20px 0px rgba(0,0,0,.05)
cursor default
background: getColor('primary', 1)
color rgba(255,255,255,1)
opacity .3
transition: all .25s ease
for colorx, i in $vs-colors
.focusx
&.vs-textarea-{colorx}
border: 1px solid getColor(colorx) !important