diff options
| author | Louis-Maxime Piton <louismaxime.piton@orange.com> | 2022-10-06 09:12:00 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-10-06 09:12:00 +0300 |
| commit | bf6240dad9a466e9d3bc682abf416e9e5b4c66df (patch) | |
| tree | 1b144dc79cc72ca1f4500d47fc43340aef36e662 /scss | |
| parent | 5975ca65c552184889df25b8cd1c62e3a58ad621 (diff) | |
Add an artificial background to floating labels (#37125)
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_variables.scss | 1 | ||||
| -rw-r--r-- | scss/forms/_floating-labels.scss | 11 |
2 files changed, 12 insertions, 0 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index 39de77ad62..132c5dbb0e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1002,6 +1002,7 @@ $form-floating-padding-x: $input-padding-x !default; $form-floating-padding-y: 1rem !default; $form-floating-input-padding-t: 1.625rem !default; $form-floating-input-padding-b: .625rem !default; +$form-floating-label-height: 1.875em !default; $form-floating-label-opacity: .65 !default; $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default; $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default; diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 6e5c9a75f5..93c1c22051 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -1,6 +1,17 @@ .form-floating { position: relative; + &::before { + position: absolute; + top: $input-border-width; + left: $input-border-width; + width: subtract(100%, add($input-height-inner-quarter, $input-height-inner-half)); + height: $form-floating-label-height; + content: ""; + background-color: $input-bg; + @include border-radius($input-border-radius); + } + > .form-control, > .form-control-plaintext, > .form-select { |