Reorder styles and common variables
parent
f1fc3173af
commit
84b15e104c
|
@ -49,7 +49,7 @@ $button-floating-height-mini: $unit * 4;
|
||||||
padding: 0 $unit * 1.2;
|
padding: 0 $unit * 1.2;
|
||||||
font-size: 1.4 * $unit;
|
font-size: 1.4 * $unit;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
border-radius: 3px;
|
border-radius: $border-radius;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
margin-right: $unit * .6;
|
margin-right: $unit * .6;
|
||||||
|
|
|
@ -6,8 +6,6 @@ $card-title-height: 17.6 * $unit;
|
||||||
$card-width-normal: 32 * $unit;
|
$card-width-normal: 32 * $unit;
|
||||||
$card-width-large: 51.2 * $unit;
|
$card-width-large: 51.2 * $unit;
|
||||||
$card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");
|
$card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");
|
||||||
$offset: 1.6 * $unit;
|
|
||||||
|
|
||||||
|
|
||||||
.figure {
|
.figure {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -6,9 +6,6 @@ $drawer-width: 24 * $unit;
|
||||||
$drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
|
$drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
|
||||||
$drawer-text-color: unquote("rgb(#{$palette-grey-800})") !default;
|
$drawer-text-color: unquote("rgb(#{$palette-grey-800})") !default;
|
||||||
$drawer-border-color: unquote("rgb(#{$palette-grey-300})") !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
|
//-- Local styles
|
||||||
.drawer {
|
.drawer {
|
||||||
|
@ -24,14 +21,13 @@ $drawer-transition-delay: .1s;
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
|
|
||||||
> .content {
|
> .content {
|
||||||
transition-delay: $drawer-transition-delay;
|
transition-delay: $animation-delay;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .overlay {
|
> .overlay {
|
||||||
opacity: .5;
|
opacity: $color-overlay-opacity;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -60,10 +56,10 @@ $drawer-transition-delay: .1s;
|
||||||
.overlay {
|
.overlay {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: $drawer-overlay-color;
|
background-color: $color-overlay;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition-timing-function: $animation-curve-default;
|
transition-timing-function: $animation-curve-default;
|
||||||
transition-duration: $drawer-transition-duration;
|
transition-duration: $animation-duration;
|
||||||
transition-property: opacity;
|
transition-property: opacity;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -79,7 +75,7 @@ $drawer-transition-delay: .1s;
|
||||||
background-color: $drawer-bg-color;
|
background-color: $drawer-bg-color;
|
||||||
transition-delay: 0s;
|
transition-delay: 0s;
|
||||||
transition-timing-function: $animation-curve-default;
|
transition-timing-function: $animation-curve-default;
|
||||||
transition-duration: $drawer-transition-duration;
|
transition-duration: $animation-duration;
|
||||||
transition-property: transform;
|
transition-property: transform;
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
|
|
|
@ -3,7 +3,8 @@
|
||||||
//-- Color configuration
|
//-- Color configuration
|
||||||
$color-divider: unquote("rgb(#{$palette-grey-200})") !default;
|
$color-divider: unquote("rgb(#{$palette-grey-200})") !default;
|
||||||
$color-background: unquote("rgb(#{$color-white})") !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: unquote("rgb(#{$palette-grey-900})") !default;
|
||||||
$color-text-secondary: unquote("rgb(#{$palette-grey-600})") !default;
|
$color-text-secondary: unquote("rgb(#{$palette-grey-600})") !default;
|
||||||
|
|
||||||
|
@ -15,6 +16,8 @@ $color-accent-contrast: $color-dark-contrast !default;
|
||||||
|
|
||||||
//-- Units and config
|
//-- Units and config
|
||||||
$unit: 1rem;
|
$unit: 1rem;
|
||||||
|
$offset: 1.6 * $unit;
|
||||||
|
$border-radius: 0.2 * $unit;
|
||||||
|
|
||||||
// -- Fonts
|
// -- Fonts
|
||||||
$font-size: 1.6 * $unit;
|
$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);
|
$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22);
|
||||||
|
|
||||||
//-- Animation
|
//-- 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-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-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;
|
$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
|
||||||
|
|
Loading…
Reference in New Issue