VTextarea.sass 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. @use 'sass:math'
  2. @use 'sass:selector'
  3. @use '../../styles/settings'
  4. @use '../../styles/tools'
  5. @use './variables' as *
  6. @include tools.layer('components')
  7. .v-textarea
  8. .v-field
  9. --v-textarea-control-height: var(--v-input-control-height)
  10. .v-field__field
  11. --v-input-control-height: var(--v-textarea-control-height)
  12. .v-field__input
  13. $a: calc((var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0)) - 6px)
  14. $b: calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px)
  15. flex: 1 1 auto
  16. outline: none
  17. -webkit-mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b)
  18. mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b)
  19. &.v-textarea__sizer
  20. visibility: hidden
  21. position: absolute
  22. top: 0
  23. left: 0
  24. height: 0 !important
  25. min-height: 0 !important
  26. pointer-events: none
  27. &--no-resize
  28. .v-field__input
  29. resize: none
  30. .v-field--no-label,
  31. .v-field--active
  32. textarea
  33. opacity: 1
  34. textarea
  35. opacity: 0
  36. flex: 1
  37. min-width: 0
  38. transition: .15s opacity settings.$standard-easing
  39. &:focus,
  40. &:active
  41. outline: none
  42. // Remove Firefox red outline
  43. &:invalid
  44. box-shadow: none