packages/pass/components/Form/Field/Layout/FieldBox.scss

   1 @import '~@proton/styles/scss/lib';
   2
   3 .pass-field-box {
   4         &:not(.pass-input-group--no-focus) {
   5                 &::before {
   6                         content: '';
   7                         border: 1px solid transparent;
   8                         position: absolute;
   9                         inset: -1px;
  10                         z-index: 1;
  11                         pointer-events: none;
  12                         transition: 0.15s ease;
  13                 }
  14
  15                 &:has(
  16                                 input:focus-visible,
  17                                 textarea:focus-visible,
  18                                 button[aria-expanded='false']:focus,
  19                                 button[aria-expanded='true'],
  20                                 [contenteditable='true']:focus
  21                         ) {
  22                         &::before {
  23                                 border-color: var(--interaction-norm);
  24                         }
  25                 }
  26
  27                 &:has(input:placeholder-shown, textarea:placeholder-shown) {
  28                         label,
  29                         label > span {
  30                                 color: var(--text-norm);
  31                         }
  32                 }
  33         }
  34
  35         &:has(button[aria-expanded='false']:focus) button {
  36                 outline: none;
  37         }
  38
  39         .field-two-container button:not(.select, .select-unstyled) svg {
  40                 position: relative;
  41         }
  42
  43         // disable responsive font-sizing provided by core
  44         // design system when going below <=small
  45         .input-element:not(.pass-input--title),
  46         .textarea {
  47                 font-size: em($base-font-size);
  48         }
  49 }