From 3aabfc70c38db03e77229a49f4f8c7ed58169cf7 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Wed, 29 Mar 2023 12:46:09 -0500
Subject: Another pass at fixing floating labels disabled colors (#38313)

* Another pass at fixing floating labels disabled colors

* Fix height for textareas

* Fix disabled background

* Move from full width to an inline-block-ish approach

---------

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 scss/forms/_floating-labels.scss | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

(limited to 'scss/forms')

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index acae3fd68..7d04723e3 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -1,17 +1,6 @@
 .form-floating {
   position: relative;
 
-  &:not(.form-control:disabled)::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 {
@@ -23,7 +12,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    z-index: 2;
     height: 100%; // allow textareas
     padding: $form-floating-padding-y $form-floating-padding-x;
     overflow: hidden;
@@ -66,14 +55,24 @@
   > .form-control-plaintext,
   > .form-select {
     ~ label {
-      opacity: $form-floating-label-opacity;
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       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
   > .form-control:-webkit-autofill {
     ~ label {
-      opacity: $form-floating-label-opacity;
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       transform: $form-floating-label-transform;
     }
   }
@@ -84,7 +83,11 @@
     }
   }
 
-  > .form-control:disabled ~ label {
+  > :disabled ~ label {
     color: $form-floating-label-disabled-color;
+
+    &::after {
+      background-color: $input-disabled-bg;
+    }
   }
 }
-- 
cgit v1.2.3