diff options
author | 2022-09-19 08:49:01 +0200 | |
---|---|---|
committer | 2022-09-19 06:54:43 +0000 | |
commit | d6a60b5043c6f7c3dfc45853feb68d0aca5a4a5f (patch) | |
tree | 022343584d4e00a0da8ef12eb4e713d67344fc95 /csit.infra.dash/app/pal/static/sass/bootstrap/forms/_floating-labels.scss | |
parent | d2ef7bc01df66f6a27f25d061db064cf4a463267 (diff) |
feat(uti): Move directory
Signed-off-by: pmikus <peter.mikus@protonmail.ch>
Change-Id: I7300ecfe756baaf3fbeedb020070f882cfaca445
Diffstat (limited to 'csit.infra.dash/app/pal/static/sass/bootstrap/forms/_floating-labels.scss')
-rw-r--r-- | csit.infra.dash/app/pal/static/sass/bootstrap/forms/_floating-labels.scss | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/csit.infra.dash/app/pal/static/sass/bootstrap/forms/_floating-labels.scss b/csit.infra.dash/app/pal/static/sass/bootstrap/forms/_floating-labels.scss new file mode 100644 index 0000000000..6e5c9a75f5 --- /dev/null +++ b/csit.infra.dash/app/pal/static/sass/bootstrap/forms/_floating-labels.scss @@ -0,0 +1,75 @@ +.form-floating { + position: relative; + + > .form-control, + > .form-control-plaintext, + > .form-select { + height: $form-floating-height; + line-height: $form-floating-line-height; + } + + > label { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; // allow textareas + padding: $form-floating-padding-y $form-floating-padding-x; + overflow: hidden; + text-align: start; + text-overflow: ellipsis; + white-space: nowrap; + 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); + } + + > .form-control, + > .form-control-plaintext { + padding: $form-floating-padding-y $form-floating-padding-x; + + &::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-control-plaintext, + > .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; + } + } + + > .form-control-plaintext { + ~ label { + border-width: $input-border-width 0; // Required to properly position label text - as explained above + } + } +} |