diff options
Diffstat (limited to 'scss/forms/_floating-labels.scss')
-rw-r--r-- | scss/forms/_floating-labels.scss | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss new file mode 100644 index 0000000000..b35f1c3bdc --- /dev/null +++ b/scss/forms/_floating-labels.scss @@ -0,0 +1,85 @@ +// 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; + } +} |