Add variables for transitions (#21345)

* Add variables for transitions

* Add variables for transitions

8 files changed, 25 insertions, 8 deletions

diff --git a/scss/_animation.scss b/scss/_animation.scss
index 2586bf2d1..d8c6d1b75 100644
--- a/scss/_animation.scss
+++ b/scss/_animation.scss
@@ -1,7 +1,7 @@
 .fade {
   opacity: 0;
 
-  @include transition(opacity .15s linear);
+  @include transition($transition-fade);
 
   &.active {
     opacity: 1;
@@ -32,5 +32,5 @@ tbody {
   height: 0;
   overflow: hidden;
 
-  @include transition(height .35s ease);
+  @include transition($transition-collapse);
 }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 3d5089c4f..fdc7adc40 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -15,7 +15,7 @@
   user-select: none;
   border: $input-btn-border-width solid transparent;
   @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
-  @include transition(all .2s ease-in-out);
+  @include transition($btn-transition);
 
   &,
   &:active,
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 8a077f083..7949e1564 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -15,7 +15,7 @@
   width: 100%;
 
   @include if-supports-3d-transforms() {
-    @include transition(transform .6s ease-in-out);
+    @include transition($carousel-transition);
     backface-visibility: hidden;
     perspective: 1000px;
   }
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 87e549121..d31836f90 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -29,7 +29,7 @@
   }
 
   @include box-shadow($input-box-shadow);
-  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
+  @include transition($input-transition);
 
   // Unstyle the caret on `<select>`s in IE10+.
   &::-ms-expand {
diff --git a/scss/_images.scss b/scss/_images.scss
index c7b95dec9..a8135a6c3 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -16,7 +16,7 @@
   background-color: $thumbnail-bg;
   border: $thumbnail-border-width solid $thumbnail-border-color;
   @include border-radius($thumbnail-border-radius);
-  @include transition(all .2s ease-in-out);
+  @include transition($thumbnail-transition);
   @include box-shadow($thumbnail-box-shadow);
 
   // Keep them at most 100% wide
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 6d613b9a3..0442b763d 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -10,7 +10,11 @@
 
 @mixin transition($transition...) {
   @if $enable-transitions {
-    transition: $transition;
+    @if length($transition) == 0 {
+      transition: $transition-base;
+    } @else {
+      transition: $transition;
+    }
   }
 }
 
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 85aef719b..bb5c21a1e 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -28,7 +28,7 @@
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
-    @include transition(transform .3s ease-out);
+    @include transition($modal-transition);
     transform: translate(0, -25%);
   }
   &.active .modal-dialog { transform: translate(0, 0); }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index afa800a5d..64026c1c2 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -311,6 +311,10 @@ $component-active-bg:    $brand-primary !default;
 $caret-width:            .3em !default;
 $caret-width-lg:         $caret-width !default;
 
+$transition-base:        all .2s ease-in-out !default;
+$transition-fade:        opacity .15s linear !default;
+$transition-collapse:    height .35s ease !default;
+
 
 // 11. Tables
 //
@@ -384,6 +388,8 @@ $btn-border-radius:              $border-radius !default;
 $btn-border-radius-lg:           $border-radius-lg !default;
 $btn-border-radius-sm:           $border-radius-sm !default;
 
+$btn-transition:                 all .2s ease-in-out !default;
+
 
 // 13. Forms
 
@@ -420,6 +426,8 @@ $input-height:                   (($font-size-base * $input-line-height) + ($inp
 $input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
 $input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
 
+$input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
+
 $form-group-margin-bottom:       $spacer-y !default;
 
 $input-group-addon-bg:           $gray-lighter !default;
@@ -776,6 +784,8 @@ $modal-lg:                    800px !default;
 $modal-md:                    500px !default;
 $modal-sm:                    300px !default;
 
+$modal-transition:            transform .3s ease-out !default;
+
 
 // 26. Alerts
 //
@@ -853,6 +863,7 @@ $thumbnail-border-width:      $border-width !default;
 $thumbnail-border-color:      #ddd !default;
 $thumbnail-border-radius:     $border-radius !default;
 $thumbnail-box-shadow:        0 1px 2px rgba(0,0,0,.075) !default;
+$thumbnail-transition:        all .2s ease-in-out !default;
 
 
 // 30. Figures
@@ -898,6 +909,8 @@ $carousel-control-icon-width:                 20px !default;
 $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
 $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
+$carousel-transition:           transform .6s ease-in-out !default;
+
 
 // 34. Close