From b522441901040496664ba64beab37dbacd317881 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Thu, 13 Jun 2024 03:39:23 +0200 Subject: [PATCH] Floating labels: Fix `max-width` and `background-color` (#39720) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix `max-width` * Fix label background color * Add new visual test: floating label * Fix `npm run docs` --------- Co-authored-by: Julien Déramond --- js/tests/visual/floating-label.html | 337 ++++++++++++++++++++++++++++ scss/forms/_floating-labels.scss | 30 +-- 2 files changed, 353 insertions(+), 14 deletions(-) create mode 100644 js/tests/visual/floating-label.html diff --git a/js/tests/visual/floating-label.html b/js/tests/visual/floating-label.html new file mode 100644 index 000000000000..f78442eff1e7 --- /dev/null +++ b/js/tests/visual/floating-label.html @@ -0,0 +1,337 @@ + + + + + + + Form + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + + diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 1a6efc0a4096..b366505881d6 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -14,6 +14,7 @@ top: 0; left: 0; z-index: 2; + max-width: 100%; height: 100%; // allow textareas padding: $form-floating-padding-y $form-floating-padding-x; overflow: hidden; @@ -58,16 +59,6 @@ > .form-select { ~ label { transform: $form-floating-label-transform; - - &::after { - position: absolute; - inset: $form-floating-padding-y ($form-floating-padding-x * .5); - z-index: -1; - height: $form-floating-label-height; - content: ""; - background-color: $input-bg; - @include border-radius($input-border-radius); - } } } // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped @@ -76,6 +67,21 @@ transform: $form-floating-label-transform; } } + > textarea:focus, + > textarea:not(:placeholder-shown) { + ~ label::after { + position: absolute; + inset: $form-floating-padding-y ($form-floating-padding-x * .5); + z-index: -1; + height: $form-floating-label-height; + content: ""; + background-color: $input-bg; + @include border-radius($input-border-radius); + } + } + > textarea:disabled ~ label::after { + background-color: $input-disabled-bg; + } > .form-control-plaintext { ~ label { @@ -86,9 +92,5 @@ > :disabled ~ label, > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity color: $form-floating-label-disabled-color; - - &::after { - background-color: $input-disabled-bg; - } } }