Proposal

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 6bbbaef5a73875de5e8bfaf5af9707f55eba2122..81328493f0bdd32cb1f55757c3a8467c1090de8a 100644 (file)
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -1,15 +1,5 @@
 // We use mixins instead of placeholders as placeholders would combine the selectors when @extend-ed
 
-@mixin form-floating-active-input-styles() {
-  padding-top: $form-floating-input-padding-t;
-  padding-bottom: $form-floating-input-padding-b;
-}
-
-@mixin form-floating-active-label-styles() {
-  opacity: $form-floating-label-opacity;
-  transform: $form-floating-label-transform;
-}
-
 .form-floating {
   position: relative;
 
@@ -46,6 +36,10 @@
       color: transparent;
     }
 
+    &:focus::placeholder {
+      color: $input-placeholder-color;
+    }
+
     &:focus,
     &:not(:placeholder-shown) {
       @include form-floating-active-input-styles();
@@ -67,7 +61,6 @@
   > .form-select {
     ~ label {
       @include form-floating-active-label-styles();
-      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
 
       &::after {
         position: absolute;
@@ -85,7 +78,6 @@
   > .form-control:-webkit-autofill {
     ~ label {
       @include form-floating-active-label-styles();
-      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
     }
   }
 
@@ -106,18 +98,19 @@
 
 // Todo in v6: Consider combining this with the .form-control-plaintext rules to reduce some CSS?
 .form-floating-always {
-  > .form-control {
-    @include form-floating-active-input-styles();
+  &.form-floating,
+  .form-floating {
+    .form-control {
+      @include form-floating-active-input-styles();
 
-    &::placeholder {
-      color: $input-color;
-    }
-    &:focus::placeholder {
-      color: $input-placeholder-color;
+      &::placeholder,
+      &:focus::placeholder {
+        color: $input-placeholder-color;
+      }
     }
-  }
 
-  > label {
-    @include form-floating-active-label-styles();
+    label {
+      @include form-floating-active-label-styles();
+    }
   }
 }

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index d47b1e41d63e60a05ffb2ed42a3c3f847ccea2d5..885950d45e302df9822f443b40c75421fa710ae5 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -1,6 +1,18 @@
 // This mixin uses an `if()` technique to be compatible with Dart Sass
 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
 
+// scss-docs-start form-floating-mixins
+@mixin form-floating-active-input-styles() {
+  padding-top: $form-floating-input-padding-t;
+  padding-bottom: $form-floating-input-padding-b;
+}
+
+@mixin form-floating-active-label-styles() {
+  color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
+  transform: $form-floating-label-transform;
+}
+// scss-docs-end form-floating-mixins
+
 // scss-docs-start form-validation-mixins
 @mixin form-validation-state-selector($state) {
   @if ($state == "valid" or $state == "invalid") {