Custom forms transition

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index cd75d8b4472eb7abbd3ad7b29a82f8fe8ff576b4..de592a3ddc805ec88d8b61fac8d2f7bd9698aff4 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -325,6 +325,7 @@
     border: $custom-range-thumb-border;
     @include border-radius($custom-range-thumb-border-radius);
     @include box-shadow($custom-range-thumb-box-shadow);
+    @include transition($custom-forms-transition);
     appearance: none;
 
     &:focus {
@@ -355,6 +356,7 @@
     border: $custom-range-thumb-border;
     @include border-radius($custom-range-thumb-border-radius);
     @include box-shadow($custom-range-thumb-box-shadow);
+    @include transition($custom-forms-transition);
     appearance: none;
 
     &:focus {
@@ -385,6 +387,7 @@
     border: $custom-range-thumb-border;
     @include border-radius($custom-range-thumb-border-radius);
     @include box-shadow($custom-range-thumb-box-shadow);
+    @include transition($custom-forms-transition);
     appearance: none;
 
     &:focus {
@@ -419,3 +422,9 @@
     @include border-radius($custom-range-track-border-radius);
   }
 }
+
+.custom-control-label::before,
+.custom-file-label,
+.custom-select {
+  @include transition($custom-forms-transition);
+}

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 73451a090829a7efba37adbb00a2ba177d1083a7..be578ad8d2e23ba80ff67d21667a69cd2a5592f2 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -451,6 +451,8 @@ $input-group-addon-color:               $input-color !default;
 $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
 
+$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
 $custom-control-gutter:                 1.5rem !default;
 $custom-control-spacer-x:               1rem !default;