opensource/driver.js
3
0
Fork 0
mirror of https://github.com/kamranahmedse/driver.js.git synced 2026-10-31 20:31:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor sass

Browse Source
This commit is contained in:
Kamran Ahmed
2018-03-19 22:48:04 +01:00
parent 7b945b1d76
commit f8ddde7e1e
1 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/driver.scss
+42 -28
View File
@@ -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;
}