packages/styles/scss/base/forms/_textarea.scss

   1 .textarea {
   2         min-block-size: rem(36);
   3         padding-block: em(7); // 36px height with wrapper borders, same as buttons
   4         padding-inline: em(16);
   5         border: 1px solid var(--field-norm);
   6         border-radius: var(--border-radius-md);
   7         background-color: var(--field-background-color);
   8         color: var(--field-text-color);
   9         outline: none;
  10         filter: none; // fixes Firefox autofill color
  11         transition: 0.15s easing(ease-out-quint), block-size 0s;
  12
  13         @include media('<=xsmall') {
  14                 padding-inline: em(8);
  15         }
  16
  17         @include media('<=small') {
  18                 font-size: max(16px, em($base-font-size));
  19         }
  20
  21         .is-drawer-app & {
  22                 font-size: em($base-font-size);
  23         }
  24
  25         &:hover,
  26         &.hover {
  27                 border-color: var(--field-hover);
  28                 background-color: var(--field-hover-background-color);
  29                 color: var(--field-hover-text-color);
  30         }
  31
  32         &:focus,
  33         &.focus {
  34                 border-color: var(--focus-outline);
  35                 box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  36                 background-color: var(--field-focus-background-color);
  37                 color: var(--field-focus-text-color);
  38         }
  39
  40         &.error {
  41                 border-color: var(--signal-danger);
  42         }
  43
  44         &.disabled {
  45                 border-color: var(--field-disabled);
  46                 background-color: var(--field-disabled-background-color);
  47                 color: var(--field-disabled-text-color);
  48                 pointer-events: none;
  49
  50                 &::placeholder {
  51                         color: inherit;
  52                 }
  53         }
  54
  55         &:-moz-ui-invalid {
  56                 // fixes some Firefox issues with HTML5 validation
  57                 box-shadow: none;
  58         }
  59
  60         &.unstyled {
  61                 &#{&} {
  62                         border-color: transparent;
  63                         border-radius: 0;
  64                         box-shadow: none;
  65                         background-color: transparent;
  66                         transition: none;
  67                 }
  68         }
  69 }