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