_floating-labels.scss

// stylelint-disable selector-no-vendor-prefix

.form-floating {
  position: relative;

  > .form-control,
  > .form-select {
    height: $form-floating-height;
    padding: $form-floating-padding-y $form-floating-padding-x;
  }

  > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%; // allow textareas
    padding: $form-floating-padding-y $form-floating-padding-x;
    pointer-events: none;
    border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
    @include transition(opacity .1s ease-in-out, transform .1s ease-in-out);
  }

  > .form-control {
    &::placeholder {
      color: transparent;
    }

    &:focus,
    &:not(:placeholder-shown) {
      padding-top: $form-floating-input-padding-t;
      padding-bottom: $form-floating-input-padding-b;
    }
  }

  > .form-select {
    padding-top: $form-floating-input-padding-t;
    padding-bottom: $form-floating-input-padding-b;
  }

  > .form-control:focus,
  > .form-control:not(:placeholder-shown),
  > .form-select {
    ~ label {
      opacity: $form-floating-label-opacity;
      transform: $form-floating-label-transform;
    }
  }
}


//
// Fallback for classic Edge
//

@supports (-ms-ime-align: auto) {
  .form-floating {
    display: flex;
    flex-direction: column-reverse;
  }
  .form-floating > label {
    position: static;
    padding: 0;
    margin-bottom: calc(#{$form-floating-padding-y} / 2);
    border: 0;
    @include transition(none);
  }
  .form-floating > .form-control::-ms-input-placeholder {
    color: $input-placeholder-color;
  }
}