resources/tools/dash/app/pal/static/sass/bootstrap/forms/_floating-labels.scss

   1 .form-floating {
   2   position: relative;
   3
   4   > .form-control,
   5   > .form-control-plaintext,
   6   > .form-select {
   7     height: $form-floating-height;
   8     line-height: $form-floating-line-height;
   9   }
  10
  11   > label {
  12     position: absolute;
  13     top: 0;
  14     left: 0;
  15     width: 100%;
  16     height: 100%; // allow textareas
  17     padding: $form-floating-padding-y $form-floating-padding-x;
  18     overflow: hidden;
  19     text-align: start;
  20     text-overflow: ellipsis;
  21     white-space: nowrap;
  22     pointer-events: none;
  23     border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
  24     transform-origin: 0 0;
  25     @include transition($form-floating-transition);
  26   }
  27
  28   > .form-control,
  29   > .form-control-plaintext {
  30     padding: $form-floating-padding-y $form-floating-padding-x;
  31
  32     &::placeholder {
  33       color: transparent;
  34     }
  35
  36     &:focus,
  37     &:not(:placeholder-shown) {
  38       padding-top: $form-floating-input-padding-t;
  39       padding-bottom: $form-floating-input-padding-b;
  40     }
  41     // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
  42     &:-webkit-autofill {
  43       padding-top: $form-floating-input-padding-t;
  44       padding-bottom: $form-floating-input-padding-b;
  45     }
  46   }
  47
  48   > .form-select {
  49     padding-top: $form-floating-input-padding-t;
  50     padding-bottom: $form-floating-input-padding-b;
  51   }
  52
  53   > .form-control:focus,
  54   > .form-control:not(:placeholder-shown),
  55   > .form-control-plaintext,
  56   > .form-select {
  57     ~ label {
  58       opacity: $form-floating-label-opacity;
  59       transform: $form-floating-label-transform;
  60     }
  61   }
  62   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
  63   > .form-control:-webkit-autofill {
  64     ~ label {
  65       opacity: $form-floating-label-opacity;
  66       transform: $form-floating-label-transform;
  67     }
  68   }
  69
  70   > .form-control-plaintext {
  71     ~ label {
  72       border-width: $input-border-width 0; // Required to properly position label text - as explained above
  73     }
  74   }
  75 }