[Summary view] [Print] [Text view]

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