You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
.form-floating { position: relative;
> .form-control, > .form-select { height: $form-floating-height; line-height: $form-floating-line-height; }
> 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
transform-origin: 0 0; @include transition($form-floating-transition); }
// stylelint-disable no-duplicate-selectors
> .form-control { padding: $form-floating-padding-y $form-floating-padding-x;
&::placeholder { color: transparent; }
&:focus, &:not(:placeholder-shown) { padding-top: $form-floating-input-padding-t; padding-bottom: $form-floating-input-padding-b; } // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
&:-webkit-autofill { 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; } } // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill { ~ label { opacity: $form-floating-label-opacity; transform: $form-floating-label-transform; } } // stylelint-enable no-duplicate-selectors
}
|