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

   1 .placeholder,
   2 ::placeholder {
   3         color: var(--field-placeholder-color);
   4         font-style: normal;
   5         opacity: 1; // For Firefox -_-v
   6 }
   7
   8 $field-container: rem(260) !default;
   9
  10 .field-container {
  11         inline-size: 100%;
  12         display: inline-block;
  13         position: relative;
  14 }
  15
  16 .field {
  17         block-size: rem($default-height-fields);
  18         min-block-size: rem($default-height-fields); // To ensure minimum size when overriding block-size to 'auto'
  19         padding-inline: em(16);
  20         padding-block: em(6); // design want 34px height (actually 35 to avoid .5px)
  21         border-radius: var(--border-radius-md);
  22         border: 1px solid var(--field-norm);
  23         background-color: var(--field-background-color);
  24         color: var(--field-text-color);
  25         outline: none;
  26         filter: none; // fixes Firefox autofill color
  27         transition:
  28                 0.15s easing(ease-out-quint),
  29                 visibility 0s; // Disable visibility transition due to auto focus, e.g. login form
  30
  31         @at-root {
  32                 details & {
  33                         block-size: auto; // crazy chrome bug in details (share drive modal)
  34                 }
  35         }
  36
  37         @include media('<=xsmall') {
  38                 padding-inline: em(8);
  39         }
  40
  41         @include media('<=small') {
  42                 font-size: max(16px, em($base-font-size));
  43         }
  44
  45         .is-drawer-app & {
  46                 font-size: em($base-font-size);
  47         }
  48
  49         @at-root {
  50                 details & {
  51                         block-size: auto;
  52                 }
  53         }
  54
  55         &.field--tiny,
  56         &.field--small,
  57         &.field--large {
  58                 block-size: auto;
  59         }
  60
  61         &:hover {
  62                 border-color: var(--field-hover);
  63                 background-color: var(--field-hover-background-color);
  64                 color: var(--field-hover-text-color);
  65         }
  66
  67         &:focus,
  68         &.focus,
  69         &:focus-within,
  70         &[aria-expanded='true']:not([aria-controls]) {
  71                 border-color: var(--focus-outline);
  72                 box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  73                 background-color: var(--field-focus-background-color);
  74                 color: var(--field-focus-text-color);
  75         }
  76
  77         @supports selector(:focus-visible) {
  78                 &:focus-visible {
  79                         // might seem useless for inputs like text (they DO trigger focus-visible), but will be useful for "fake" select (selectV2) - also separated for old Safaris < 15.3
  80                         border-color: var(--focus-outline);
  81                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  82                         background-color: var(--field-focus-background-color);
  83                         color: var(--field-focus-text-color);
  84                 }
  85         }
  86
  87         &[disabled] {
  88                 border-color: var(--field-disabled);
  89                 background-color: var(--field-disabled-background-color);
  90                 color: var(--field-disabled-text-color);
  91         }
  92
  93         &[aria-invalid='true']:not(:focus),
  94         &[aria-invalid='true']:not(.ng-pristine) {
  95                 border-color: var(--signal-danger);
  96         }
  97
  98         &.is-valid:not(:focus) {
  99                 border-color: var(--signal-success);
 100         }
 101
 102         &.w-full {
 103                 inline-size: 100%;
 104         }
 105
 106         &.w-auto {
 107                 inline-size: auto;
 108         }
 109
 110         &[type='search'] {
 111                 padding-inline-start: 2em;
 112
 113                 &::-webkit-search-cancel-button {
 114                         display: none;
 115                 }
 116         }
 117
 118         &[type='number'] {
 119                 padding-inline-end: 0.25em;
 120         }
 121
 122         &.select {
 123                 padding-inline-end: rem(6);
 124
 125                 &:focus-visible {
 126                         &#{&} {
 127                                 outline: 0; // focus is provided by input fields
 128                         }
 129                 }
 130
 131                 .m-auto {
 132                         display: flex;
 133                         inline-size: 100%;
 134                 }
 135
 136                 .mr-2 {
 137                         flex: 1 1 0px;
 138                         @extend .text-ellipsis;
 139                 }
 140         }
 141 }
 142
 143 // Fix autofill state
 144 input:-webkit-autofill,
 145 textarea:-webkit-autofill,
 146 select:-webkit-autofill {
 147         // Trick to replace the background color
 148         box-shadow: 0 0 0 1000px var(--field-background-color) inset !important;
 149         -webkit-text-fill-color: var(--field-text-color) !important;
 150         caret-color: var(--field-text-color) !important;
 151 }
 152
 153 // Fix datalist display, remove browser default caret
 154 [list]::-webkit-calendar-picker-indicator {
 155         display: none !important; // had to use important otherwise not working -_-v
 156 }
 157
 158 select.field {
 159         background: var(--select-background-color);
 160         background-size: rem(15);
 161         padding-inline: 1em rem(20);
 162         text-overflow: ellipsis;
 163         overflow: hidden;
 164         cursor: pointer;
 165
 166         &::-ms-expand {
 167                 display: none;
 168         }
 169
 170         & > optgroup {
 171                 background-color: var(--background-weak);
 172         }
 173 }
 174
 175 /* hotfix for Chrome */
 176 select.text-center {
 177         text-align-last: center;
 178 }
 179
 180 textarea.field,
 181 .textarea.field {
 182         block-size: auto;
 183 }
 184
 185 /* errors */
 186 .error-zone {
 187         transition:
 188                 transform 0.15s linear,
 189                 max-block-size 0.15s linear;
 190         transform: scaleY(1);
 191         transform-origin: top center;
 192
 193         &:empty {
 194                 transform: scaleY(0);
 195         }
 196 }
 197
 198 // general rule: if focus is on the field => don't display error yet
 199 .field-icon-container:focus-within + .error-zone,
 200 .field:focus + .error-zone {
 201         transform: scaleY(0);
 202         max-block-size: 0;
 203 }
 204
 205 /* sizes/other modifiers */
 206 .field--tiny {
 207         padding: em(6); // useful for address group
 208 }
 209
 210 .field--small {
 211         padding-block: em(2); // design want 26px height (actually 27 to avoid .5px)
 212         padding-inline: em(16);
 213 }
 214
 215 .field--large {
 216         padding-block: em(10); // design want 42px height (actually 43 to avoid .5px)
 217         padding-inline: em(16);
 218 }
 219
 220 .field--highlight {
 221         border-color: var(--primary);
 222         border-width: 2px;
 223 }
 224
 225 /* field with icon */
 226 .field-icon-container {
 227         @extend .field; // added focus-within inside on field for this fake-field :)
 228
 229         padding: 0;
 230
 231         > .field {
 232                 border: 0;
 233                 inline-size: calc(100% - 1.5em);
 234         }
 235
 236         &,
 237         &-empty {
 238                 // for drive, to keep the same height
 239                 min-block-size: calc(#{rem($default-height-fields)} + 2px);
 240         }
 241
 242         &:focus-within {
 243                 > .field {
 244                         background-color: transparent;
 245                         box-shadow: none;
 246                         outline: 0;
 247                 }
 248         }
 249 }
 250
 251 .dropdown-content .select--inline-caret-option {
 252         display: none;
 253 }
 254
 255 .field-icon-container--invalid:not(:focus-within) {
 256         border-color: var(--signal-danger);
 257
 258         > .field {
 259                 border-color: var(--signal-danger);
 260         }
 261 }
 262
 263 /*
 264  * REMOVE THIS IF POSSIBLE
 265  */
 266
 267 /* @protonmail.com field */
 268 .field--username,
 269 .sign-layout-container .field--username.field--username {
 270         padding-inline-end: var(--padding-right-field-above, 9em);
 271 }
 272
 273 /* special stupid case for signup iframe challenge... not using same styles for the moment */
 274 .sign-layout-container {
 275         .field--username {
 276                 padding-block: em(10);
 277                 padding-inline: em(16); // design want 42px height (actually 41 to avoid .5px)
 278         }
 279 }
 280
 281 /*
 282  * Specific for input fields
 283  * TO_CHECK if removable
 284  */
 285 .right-icon,
 286 .right-text,
 287 .left-icon {
 288         inset-block-start: 0;
 289         block-size: #{rem($default-height-fields)} !important; // height of field, need to override `.icon16p`
 290         align-content: center;
 291 }
 292
 293 .right-icon {
 294         inset-inline-end: 0.5em;
 295 }
 296
 297 .right-text {
 298         inset-inline-end: 1em;
 299
 300         &-inner {
 301                 padding-block-end: rem(2);
 302         }
 303 }
 304
 305 .left-icon {
 306         inset-inline-start: 0.5em;
 307 }