Move some values to variables, switch from scaling font-size to scale…

…, update transforms
twbs · Sep 23, 2020 · e7a8869 · e7a8869
1 parent e457d4a
commit e7a8869
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -812,8 +812,8 @@ $form-floating-padding-x:         $input-padding-x !default;
 $form-floating-padding-y:         1rem !default;
 $form-floating-input-padding-t:   1.75rem !default;
 $form-floating-input-padding-b:   .5rem !default;
-$form-floating-label-font-size:   .85rem !default;
-
+$form-floating-label-opacity:     .65 !default;
+$form-floating-label-transform:   scale(.85) translateY(-1rem) translateX(-.5rem) !default;
 
 // Form validation
 

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
@@ -17,7 +17,7 @@
     padding: $form-floating-padding-y $form-floating-padding-x;
     pointer-events: none;
     border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
-    @include transition(all .1s ease-in-out);
+    @include transition(opacity .1s ease-in-out, transform .1s ease-in-out);
   }
 
   > .form-control {
@@ -41,9 +41,8 @@
   > .form-control:not(:placeholder-shown),
   > .form-select {
     ~ label {
-      @include font-size($form-floating-label-font-size);
-      opacity: .65;
-      transform: translate3d(0, -.75rem, 0);
+      opacity: $form-floating-label-opacity;
+      transform: $form-floating-label-transform;
     }
   }
 }
@@ -58,6 +57,6 @@
     display: none;
   }
   .form-floating > .form-control::-ms-input-placeholder {
-    color: #777;
+    color: $input-placeholder-color;
   }
 }