Add variables for transitions (#21345)

* Add variables for transitions

* Add variables for transitions

scss/_animation.scss

 .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);
 }

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,

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;
   }

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 {

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

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;
+    }
   }
 }
 

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); }

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