1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
twbs--bootstrap/scss/forms/_floating-labels.scss

86 lines
2.2 KiB
SCSS
Raw Normal View History

// 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
}
//
// 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); // stylelint-disable-line function-disallowed-list
border: 0;
@include transition(none);
}
.form-floating > .form-control::-ms-input-placeholder {
color: $input-placeholder-color;
}
}