packages/styles/scss/base/forms/_field-two.scss

   1 .field-two {
   2         &-container {
   3                 position: relative;
   4                 display: block;
   5                 inline-size: 100%;
   6                 max-inline-size: 100%;
   7                 cursor: default;
   8         }
   9
  10         &-label-container {
  11                 font-weight: var(--font-weight-semibold);
  12                 margin-block-end: rem(4);
  13         }
  14
  15         &-label {
  16                 cursor: pointer;
  17         }
  18
  19         &-hint {
  20                 margin-block-end: rem(1);
  21                 text-align: end;
  22                 font-size: rem(12);
  23                 color: var(--text-weak);
  24                 font-weight: var(--font-weight-normal);
  25         }
  26
  27         &-assist {
  28                 margin-block-start: rem(4);
  29                 font-size: rem(12);
  30                 color: var(--text-weak);
  31
  32                 &:not(:empty) {
  33                         cursor: pointer;
  34                 }
  35
  36                 &:empty::before {
  37                         content: ' ';
  38                         white-space: pre;
  39                 }
  40         }
  41
  42         &--invalid &-assist {
  43                 color: var(--signal-danger);
  44                 font-weight: var(--font-weight-semibold);
  45         }
  46
  47         &--invalid .multi-select-container {
  48                 border-color: var(--signal-danger);
  49         }
  50
  51         &--warning &-assist {
  52                 color: var(--signal-warning);
  53                 font-weight: var(--font-weight-semibold);
  54         }
  55
  56         &--warning .multi-select-container {
  57                 border-color: var(--signal-warning);
  58         }
  59
  60         &--disabled:not(.field-two--disabled-only-field) {
  61                 color: var(--field-disabled-text-color);
  62         }
  63
  64         &--disabled &-label,
  65         &--disabled &-hint,
  66         &--disabled &-assist {
  67                 color: inherit;
  68                 cursor: default;
  69         }
  70
  71         &--readonly {
  72                 --field-norm: var(--background-weak);
  73                 --field-hover: var(--background-strong);
  74                 --field-background-color: var(--background-weak);
  75                 --field-hover-background-color: var(--background-weak);
  76                 --field-focus-background-color: var(--background-weak);
  77         }
  78
  79         &--disabled-only-field {
  80                 .select,
  81                 .input.disabled {
  82                         background-color: var(--background-weak);
  83                         color: var(--text-hint);
  84                         border-color: var(--background-weak);
  85                 }
  86         }
  87
  88         &--bigger .input-element,
  89         &--bigger .select {
  90                 padding-block: rem(11); // 44px height, same as buttons
  91         }
  92 }
  93
  94 .input {
  95         border-radius: var(--border-radius-md);
  96         border: 1px solid var(--field-norm);
  97         background-color: var(--field-background-color);
  98         color: var(--field-text-color);
  99         transition:
 100                 0.15s easing(ease-out-quint),
 101                 visibility 0s; // Disable visibility transition due to auto focus, e.g. login form
 102
 103         &:hover,
 104         &.hover {
 105                 border-color: var(--field-hover);
 106                 background-color: var(--field-hover-background-color);
 107                 color: var(--field-hover-text-color);
 108         }
 109
 110         &.focus,
 111         &:not(.disabled):focus-within {
 112                 border-color: var(--focus-outline);
 113                 background-color: var(--field-focus-background-color);
 114                 color: var(--field-focus-text-color);
 115                 box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
 116         }
 117
 118         &.error {
 119                 border-color: var(--signal-danger);
 120         }
 121
 122         &.disabled {
 123                 border-color: var(--field-disabled);
 124                 background-color: var(--field-disabled-background-color);
 125                 color: var(--field-disabled-text-color);
 126         }
 127
 128         &.unstyled {
 129                 &#{&} {
 130                         border-color: transparent;
 131                         border-radius: 0;
 132                         box-shadow: none;
 133                         background-color: transparent;
 134                         transition: none;
 135                 }
 136         }
 137
 138         &-element {
 139                 min-block-size: rem(34);
 140                 padding-block: em(7); // 36px height with wrapper borders, same as buttons
 141                 padding-inline: em(16);
 142                 border-radius: var(--border-radius-md);
 143                 background: none;
 144                 color: inherit;
 145                 outline: none;
 146                 filter: none; // fixes Firefox autofill color
 147
 148                 @include media('<=xsmall') {
 149                         padding-inline: em(8);
 150                 }
 151
 152                 @include media('<=small') {
 153                         font-size: max(16px, em($base-font-size));
 154                 }
 155
 156                 @include media('print') {
 157                         font-size: 10pt;
 158                 }
 159
 160                 .is-drawer-app & {
 161                         font-size: em($base-font-size);
 162                 }
 163
 164                 &:-moz-ui-invalid {
 165                         // fixes some Firefox issues with HTML5 validation
 166                         box-shadow: none;
 167                 }
 168
 169                 &[type='search']::-webkit-search-cancel-button {
 170                         display: none;
 171                 }
 172
 173                 select#{&}::-ms-expand {
 174                         display: none;
 175                 }
 176         }
 177
 178         &-adornment {
 179                 color: var(--text-weak);
 180                 max-inline-size: 60%;
 181
 182                 .button:not([class*='button-underline']) {
 183                         &:first-child {
 184                                 margin-inline-start: -0.25em;
 185                         }
 186
 187                         &:last-child {
 188                                 margin-inline-end: -0.25em;
 189                         }
 190                 }
 191         }
 192
 193         &.disabled &-element::placeholder,
 194         &.disabled &-adornment {
 195                 color: inherit;
 196         }
 197
 198         & > .input-adornment + * > &-element {
 199                 padding-inline-start: 0.5em;
 200         }
 201
 202         & > *:has(+ .input-adornment) > &-element {
 203                 padding-inline-end: 0.5em;
 204         }
 205 }