Rely on $timing-*

Author: fredtitao

src/App.vue

@@ -50,10 +50,10 @@ footer {
 <style lang="scss">
 .fade {
   &-enter-active {
-    transition: all 250ms ease;
+    transition: all $timing-fast ease;
   }
   &-leave-active {
-    transition: all 100ms ease;
+    transition: all $timing-very-fast ease;
   }
   &-enter,
   &-leave-to {

src/components/AppExample.vue

@@ -122,15 +122,15 @@ $code-attr-val-color: $red;
     padding: 4px 8px;
     font-size: 9px;
     text-transform: uppercase;
-    transition: all 250ms ease;
+    transition: all $timing-fast ease;
   }
   &-preview {
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     padding: $example-padding;
     color: $example-preview-color;
     background-color: $example-preview-background-color;
-    transition: all 250ms ease;
+    transition: all $timing-fast ease;
     &-transparency-grid {
       background-image: linear-gradient(45deg, rgba($gray-300, 0.05) 25%, transparent 25%, transparent 75%, rgba($gray-300, 0.05) 75%),
         linear-gradient(45deg, rgba($gray-300, 0.05) 25%, transparent 25%, transparent 75%, rgba($gray-300, 0.05) 75%);

src/components/AppNav.vue

@@ -24,7 +24,7 @@
     padding: 4px 8px;
     margin: 0 -8px;
     border-radius: $component-border-radius;
-    transition: all 250ms ease;
+    transition: all $timing-fast ease;
     &:hover {
       text-decoration: none;
       background-color: var(--component-background-color-hover);

src/scss/buttons/README.md

@@ -93,7 +93,7 @@ $button-min-width-xs: 80px !default;
 $button-min-width-sm: 100px !default;
 $button-min-width-md: 140px !default;
 $button-min-width-lg: 140px !default;
-$button-transition: all 100ms ease !default;
+$button-transition: all $timing-very-fast ease !default;
 
 // button colors
 $button-primary-color: $primary !default;

src/scss/buttons/_variables.scss

@@ -32,7 +32,7 @@ $button-padding-y: $component-padding-sm !default;
 $button-padding-x: $component-padding !default;
 $button-padding: $button-padding-y $button-padding-x !default;
 $button-min-width: 120px !default;
-$button-transition: all 100ms ease !default;
+$button-transition: all $timing-very-fast ease !default;
 
 ///
 /// Colors

src/scss/cards/_base.scss

@@ -14,7 +14,7 @@
     overflow: hidden;
     position: relative;
     z-index: 0; // with position: relative, avoid img transition issue with border-radius (overflow not hidden has expected)
-    transition: all 250ms ease, box-shadow 100ms ease;
+    transition: all $timing-fast ease, box-shadow $timing-very-fast ease;
     @media (hover: hover) {
       &:hover {
         text-decoration: none;

src/scss/forms/_label.scss

@@ -7,7 +7,7 @@
     cursor: pointer;
     color: inherit;
     line-height: $form-label-line-height;
-    transition: all 250ms ease;
+    transition: all $timing-fast ease;
     @media (hover: hover) {
       // &-hover { // Does not work very well
       //   margin: (-$spacer-sm) (-$spacer-sm);

src/scss/forms/controls/_base.scss

@@ -2,7 +2,7 @@
 
 @if ($form-enabled) {
   .form-control {
-    transition: all 0.2s;
+    transition: all $timing-fast ease;
     outline: none;
     appearance: none;
     box-shadow: none;

src/scss/forms/controls/_switches.scss

@@ -32,7 +32,7 @@
       bottom: $form-switch-inner-padding;
       left: $form-switch-inner-padding;
       border-radius: calc(#{$form-control-border-radius} - #{$form-switch-inner-padding});
-      transition: all 250ms ease;
+      transition: all $timing-fast ease;
     }
     &:checked {
       &::before {

src/scss/forms/controls/slider/index.scss

@@ -53,7 +53,7 @@
       cursor: pointer;
       appearance: none;
       margin-top: round($slider-track-height/2 - $slider-thumb-height/2);
-      transition: all 100ms ease;
+      transition: all $timing-very-fast ease;
     }
     &::-moz-range-thumb {
       width: $slider-thumb-width;
@@ -62,7 +62,7 @@
       border-radius: $slider-thumb-border-radius;
       border: $slider-thumb-border;
       cursor: pointer;
-      transition: all 100ms ease;
+      transition: all $timing-very-fast ease;
     }
     &::-ms-thumb {
       margin: 0;