diff --git a/src/driver.scss b/src/driver.scss index 9b9d6f7..5916a55 100644 --- a/src/driver.scss +++ b/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; + z-index: $overlay-zindex !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; + -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; } \ No newline at end of file