Merge branch 'twbs:main' into mainHEADmain

1 files changed, 38 insertions, 5 deletions

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 2f4295480..b36650588 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -2,8 +2,10 @@
   position: relative;
 
   > .form-control,
+  > .form-control-plaintext,
   > .form-select {
     height: $form-floating-height;
+    min-height: $form-floating-height;
     line-height: $form-floating-line-height;
   }
 
@@ -11,16 +13,23 @@
     position: absolute;
     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;
+    color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
+    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);
   }
 
-  // stylelint-disable no-duplicate-selectors
-  > .form-control {
+  > .form-control,
+  > .form-control-plaintext {
     padding: $form-floating-padding-y $form-floating-padding-x;
 
     &::placeholder {
@@ -46,18 +55,42 @@
 
   > .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;
     }
   }
-  // stylelint-enable no-duplicate-selectors
+  > 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 {
+      border-width: $input-border-width 0; // Required to properly position label text - as explained above
+    }
+  }
+
+  > :disabled ~ label,
+  > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
+    color: $form-floating-label-disabled-color;
+  }
 }