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

Reorder styles and common variables

old
@soyjavi 2015-10-06 12:21:04 +07:00
parent f1fc3173af
commit 84b15e104c
4 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/button/style.scss
View File

@ -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;

2
components/card/style.scss
View File

@ -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;

14
components/drawer/style.scss
View File

@ -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;

7
components/variables.scss
View File

@ -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;