|
.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%; |
|
padding: $form-floating-padding-y $form-floating-padding-x; |
|
pointer-events: none; |
|
border: $input-border-width solid transparent; |
|
transform-origin: 0 0; |
|
@include transition($form-floating-transition); |
|
} |
|
|
|
|
|
> .form-control { |
|
&::placeholder { |
|
color: transparent; |
|
} |
|
|
|
&:focus, |
|
&:not(:placeholder-shown) { |
|
padding-top: $form-floating-input-padding-t; |
|
padding-bottom: $form-floating-input-padding-b; |
|
} |
|
|
|
&:-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; |
|
} |
|
} |
|
|
|
> .form-control:-webkit-autofill { |
|
~ label { |
|
opacity: $form-floating-label-opacity; |
|
transform: $form-floating-label-transform; |
|
} |
|
} |
|
|
|
} |
|
|