From 80a4e6eb7058c3ab2363bb1388a39b9a66724a7f Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 20 Sep 2020 18:20:44 -0700
Subject: [PATCH] Move some values to variables, switch from scaling font-size
 to scale, update transforms

---
 scss/_variables.scss             | 4 ++--
 scss/forms/_floating-labels.scss | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8c90bde23206..10891be12466 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -820,8 +820,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
index d95b3b9ff915..39466403009b 100644
--- 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;
   }
 }