Reorder styles and common variables

Author: soyjavi

components/button/style.scss

@@ -49,7 +49,7 @@ $button-floating-height-mini: $unit * 4;
   padding: 0 $unit * 1.2;
   font-size: 1.4 * $unit;
   text-transform: uppercase;
-  border-radius: 3px;
+  border-radius: $border-radius;
 
   .icon {
     margin-right: $unit * .6;

components/card/style.scss

@@ -6,8 +6,6 @@ $card-title-height: 17.6 * $unit;
 $card-width-normal: 32 * $unit;
 $card-width-large: 51.2 * $unit;
 $card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");
-$offset: 1.6 * $unit;
-
 
 .figure {
   position: relative;

components/drawer/style.scss

@@ -6,9 +6,6 @@ $drawer-width: 24 * $unit;
 $drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
 $drawer-text-color: unquote("rgb(#{$palette-grey-800})") !default;
 $drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
-$drawer-overlay-color: unquote("rgb(#{$color-black})");
-$drawer-transition-duration: .2s;
-$drawer-transition-delay: .1s;
 
 //-- Local styles
 .drawer {
@@ -24,14 +21,13 @@ $drawer-transition-delay: .1s;
 
 .active {
   pointer-events: all;
-
   > .content {
-    transition-delay: $drawer-transition-delay;
+    transition-delay: $animation-delay;
     transform: translateX(0);
   }
 
   > .overlay {
-    opacity: .5;
+    opacity: $color-overlay-opacity;
   }
 }
 
@@ -60,10 +56,10 @@ $drawer-transition-delay: .1s;
 .overlay {
   width: 100%;
   height: 100%;
-  background-color: $drawer-overlay-color;
+  background-color: $color-overlay;
   opacity: 0;
   transition-timing-function: $animation-curve-default;
-  transition-duration: $drawer-transition-duration;
+  transition-duration: $animation-duration;
   transition-property: opacity;
 }
 
@@ -79,7 +75,7 @@ $drawer-transition-delay: .1s;
   background-color: $drawer-bg-color;
   transition-delay: 0s;
   transition-timing-function: $animation-curve-default;
-  transition-duration: $drawer-transition-duration;
+  transition-duration: $animation-duration;
   transition-property: transform;
   transform-style: preserve-3d;
   will-change: transform;

components/variables.scss

@@ -3,7 +3,8 @@
 //-- Color configuration
 $color-divider: unquote("rgb(#{$palette-grey-200})") !default;
 $color-background: unquote("rgb(#{$color-white})") !default;
-
+$color-overlay: unquote("rgb(#{$color-black})");
+$color-overlay-opacity: 0.5;
 $color-text: unquote("rgb(#{$palette-grey-900})") !default;
 $color-text-secondary: unquote("rgb(#{$palette-grey-600})") !default;
 
@@ -15,6 +16,8 @@ $color-accent-contrast: $color-dark-contrast !default;
 
 //-- Units and config
 $unit: 1rem;
+$offset: 1.6 * $unit;
+$border-radius: 0.2 * $unit;
 
 // -- Fonts
 $font-size: 1.6 * $unit;
@@ -39,6 +42,8 @@ $zdepth-shadow-4: 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22);
 $zdepth-shadow-5: 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22);
 
 //-- Animation
+$animation-duration: .35s;
+$animation-delay: $animation-duration / 5;
 $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
 $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
 $animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;