62 lines
1.6 KiB
Sass
62 lines
1.6 KiB
Sass
@use 'sass:math'
|
|
@use 'sass:selector'
|
|
@use '../../styles/settings'
|
|
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
.v-textarea
|
|
--v-textarea-max-height: initial
|
|
|
|
.v-field
|
|
--v-textarea-control-height: var(--v-input-control-height)
|
|
|
|
&:not(.v-field--no-label, .v-field--active)
|
|
textarea::placeholder
|
|
opacity: 0
|
|
|
|
.v-field__field
|
|
--v-input-control-height: var(--v-textarea-control-height)
|
|
|
|
.v-field__input
|
|
max-height: var(--v-textarea-max-height)
|
|
|
|
$a: calc((var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0)) - 6px)
|
|
$b: calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px)
|
|
$c: calc(100% - var(--v-textarea-scroll-bar-width, 16px))
|
|
|
|
flex: 1 1 auto
|
|
outline: none
|
|
|
|
-webkit-mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b), linear-gradient(to right, transparent, transparent $c, black $c)
|
|
mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b), linear-gradient(to right, transparent, transparent $c, black $c)
|
|
|
|
&.v-textarea__sizer
|
|
visibility: hidden
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
pointer-events: none
|
|
|
|
@include tools.layer('overrides')
|
|
height: 0
|
|
min-height: 0
|
|
|
|
&--no-resize
|
|
.v-field__input
|
|
resize: none
|
|
|
|
textarea
|
|
flex: 1
|
|
min-width: 0
|
|
height: 100%
|
|
transition: .15s opacity settings.$standard-easing
|
|
|
|
&:focus,
|
|
&:active
|
|
outline: none
|
|
|
|
// Remove Firefox red outline
|
|
&:invalid
|
|
box-shadow: none
|