mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-12 09:54:25 +01:00
e8f1709adf
This allows us to move forward without being held back. Microsoft already replaces the Legacy Edge with the new one on supported Windows versions.
64 lines
1.7 KiB
SCSS
64 lines
1.7 KiB
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
|
|
transform-origin: 0 0;
|
|
@include transition($form-floating-transition);
|
|
}
|
|
|
|
// stylelint-disable no-duplicate-selectors
|
|
> .form-control {
|
|
&::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
|
|
}
|