input-textarea.sass 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. %input-textarea
  2. @extend %input
  3. box-shadow: $input-shadow
  4. max-width: 100%
  5. width: 100%
  6. &[readonly]
  7. box-shadow: none
  8. // Colors
  9. @each $name, $pair in $colors
  10. $color: nth($pair, 1)
  11. &.is-#{$name}
  12. border-color: $color
  13. &:focus,
  14. &.is-focused,
  15. &:active,
  16. &.is-active
  17. box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
  18. // Sizes
  19. &.is-small
  20. +control-small
  21. &.is-medium
  22. +control-medium
  23. &.is-large
  24. +control-large
  25. // Modifiers
  26. &.is-fullwidth
  27. display: block
  28. width: 100%
  29. &.is-inline
  30. display: inline
  31. width: auto
  32. .input
  33. @extend %input-textarea
  34. &.is-rounded
  35. border-radius: $radius-rounded
  36. padding-left: 1em
  37. padding-right: 1em
  38. &.is-static
  39. background-color: transparent
  40. border-color: transparent
  41. box-shadow: none
  42. padding-left: 0
  43. padding-right: 0
  44. .textarea
  45. @extend %input-textarea
  46. display: block
  47. max-width: 100%
  48. min-width: 100%
  49. padding: 0.625em
  50. resize: vertical
  51. &:not([rows])
  52. max-height: 600px
  53. min-height: 120px
  54. &[rows]
  55. height: initial
  56. // Modifiers
  57. &.has-fixed-size
  58. resize: none