vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Extract some variables from drawer sass

old
Javi Velasco 2015-10-21 01:10:32 +02:00
parent 786dd59c4c
commit d2befec2ec
4 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.csscomb.json
View File

@ -255,6 +255,7 @@
"-ms-transition-property",
"-o-transition-property",
"transition-property",
"transform-style",
"-webkit-transform",
"-moz-transform",
"-ms-transform",

1
.scss-lint.yml
View File

@ -330,6 +330,7 @@ linters:
"-ms-transition-property",
"-o-transition-property",
"transition-property",
"transform-style",
"-webkit-transform",
"-moz-transform",
"-ms-transform",

7
components/drawer/_config.scss
View File

@ -1,4 +1,5 @@
$drawer-width: 24 * $unit;
$drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
$drawer-text-color: unquote("rgb(#{$palette-grey-800})") !default;
$drawer-background-color: unquote("rgb(#{$palette-grey-50})") !default;
$drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
$drawer-overlay-color: $color-overlay;
$drawer-text-color: unquote("rgb(#{$palette-grey-800})") !default;
$drawer-width: 24 * $unit;

10
components/drawer/style.scss
View File

@ -6,7 +6,7 @@
top: 0;
right: 0;
left: 0;
z-index: 2;
z-index: $z-index-high;
width: 100vw;
height: 100vh;
pointer-events: none;
@ -14,12 +14,10 @@
.active {
pointer-events: all;
> .content {
transition-delay: $animation-delay;
transform: translateX(0);
}
> .overlay {
opacity: $color-overlay-opacity;
}
@ -30,7 +28,6 @@
left: 0;
border-right: 1px solid $drawer-border-color;
}
&:not(.active) > .content {
transform: translateX(- $drawer-width);
}
@ -41,7 +38,6 @@
right: 0;
border-left: 1px solid $drawer-border-color;
}
&:not(.active) > .content {
transform: translateX($drawer-width);
}
@ -50,7 +46,7 @@
.overlay {
width: 100%;
height: 100%;
background-color: $color-overlay;
background-color: $drawer-overlay-color;
opacity: 0;
transition-timing-function: $animation-curve-default;
transition-duration: $animation-duration;
@ -66,7 +62,7 @@
height: 100%;
overflow-y: scroll;
color: $drawer-text-color;
background-color: $drawer-bg-color;
background-color: $drawer-background-color;
transition-delay: 0s;
transition-timing-function: $animation-curve-default;
transition-duration: $animation-duration;