Refactor sass

src/driver.scss

@@ -1,24 +1,40 @@
+$text-color: #2d2d2d;
+$popover-bg: #ffffff;
+$stage-bg: #ffffff;
+$button-bg: #f1f1f1;
+$disabled-btn-color: #808080;
+
+$popover-zindex: 1000000000;
+$overlay-zindex: 100002;
+$stage-zindex: 100003;
+$highlighted-element-zindex: 100004;
+
+// If you update this duration, make sure to
+// update `ANIMATION_DURATION_MS` constant
+$animation-ms: 400;
+$animation-sec: ($animation-ms / 1000) * 1s;
+
 div#driver-popover-item {
   display: none;
   position: absolute;
-  background: white;
-  color: #2d2d2d;
+  background: $popover-bg;
+  color: $text-color;
   margin: 0;
   padding: 15px;
   border-radius: 5px;
   min-width: 250px;
   max-width: 300px;
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
-  z-index: 1000000000;
+  z-index: $popover-zindex;
 
   .driver-popover-tip {
-    border: 5px solid white;
+    border: 5px solid $popover-bg;
     content: '';
     position: absolute;
 
     &.bottom {
       bottom: -10px;
-      border-top-color: white;
+      border-top-color: $popover-bg;
       border-right-color: transparent;
       border-bottom-color: transparent;
       border-left-color: transparent;
@@ -28,7 +44,7 @@ div#driver-popover-item {
       left: -10px;
       top: 10px;
       border-top-color: transparent;
-      border-right-color: white;
+      border-right-color: $popover-bg;
       border-bottom-color: transparent;
       border-left-color: transparent;
     }
@@ -39,14 +55,14 @@ div#driver-popover-item {
       border-top-color: transparent;
       border-right-color: transparent;
       border-bottom-color: transparent;
-      border-left-color: white;
+      border-left-color: $popover-bg;
     }
 
     &.top {
       top: -10px;
       border-top-color: transparent;
       border-right-color: transparent;
-      border-bottom-color: white;
+      border-bottom-color: $popover-bg;
       border-left-color: transparent;
     }
   }
@@ -62,18 +78,18 @@ div#driver-popover-item {
       border: 1px solid #d4d4d4;
       text-decoration: none;
       text-shadow: 1px 1px 0 #fff;
-      color: #2d2d2d;
+      color: $text-color;
       font: 11px/normal sans-serif;
       cursor: pointer;
       outline: 0;
-      background-color: #f1f1f1;
+      background-color: $button-bg;
       border-radius: 2px;
       zoom: 1;
       margin: 10px 0 0;
     }
 
     button.driver-disabled {
-      color: #808080;
+      color: $disabled-btn-color;
       cursor: default;
       pointer-events: none;
     }
@@ -101,7 +117,7 @@ div#driver-popover-item {
     margin-bottom: 0;
     font: 14px/normal sans-serif;
     line-height: 1.5;
-    color: #2d2d2d;
+    color: $text-color;
     font-weight: normal;
     zoom: 1;
   }
@@ -128,14 +144,13 @@ div#driver-page-overlay {
   zoom: 1;
   filter: alpha(opacity=75);
   opacity: 0.75;
-  z-index: 100002 !important;
-
-  // If you update this duration, make sure to update `ANIMATION_DURATION_MS` constant
-  -webkit-transition: all 0.4s;
-  -moz-transition: all 0.4s;
-  -ms-transition: all 0.4s;
-  -o-transition: all 0.4s;
-  transition: all 0.4s;
+  z-index: $overlay-zindex !important;
+
+  -webkit-transition: all $animation-sec;
+  -moz-transition: all $animation-sec;
+  -ms-transition: all $animation-sec;
+  -o-transition: all $animation-sec;
+  transition: all $animation-sec;
 }
 
 div#driver-highlighted-element-stage {
@@ -144,19 +159,18 @@ div#driver-highlighted-element-stage {
   left: 0;
   height: 50px;
   width: 300px;
-  background: white;
-  z-index: 100003 !important;
+  background: $stage-bg;
+  z-index: $stage-zindex !important;
   display: none;
 
-  // If you update this duration, make sure to update `ANIMATION_DURATION_MS` constant
-  -webkit-transition: all 0.4s;
-  -moz-transition: all 0.4s;
-  -ms-transition: all 0.4s;
-  -o-transition: all 0.4s;
-  transition: all 0.4s;
+  -webkit-transition: all $animation-sec;
+  -moz-transition: all $animation-sec;
+  -ms-transition: all $animation-sec;
+  -o-transition: all $animation-sec;
+  transition: all $animation-sec;
 }
 
 .driver-highlighted-element {
-  z-index: 100004 !important;
+  z-index: $highlighted-element-zindex !important;
   position: relative;
 }