more_vert
Variables
Sass variables are useful for extending existing design without losing design consistancy.
Gray Colors | |
---|---|
$gray-100 |
|
$gray-200 |
|
$gray-300 |
|
$gray-400 |
|
$gray-500 |
|
$gray-600 |
|
$gray-700 |
|
$gray-800 |
|
$gray-900 |
|
$black |
|
$body-bg |
#fafafa |
$body-color |
darken(desaturate($purple, 60), 30); // ~ #4e4a74 |
$heading-color |
$black |
$text-muted-color |
$gray-600 |
Theme colors | |
---|---|
$primary |
|
$primary-active |
darken($primary, 10) |
$primary-dark |
darken($primary, 15) |
$secondary |
|
$success |
|
$info |
|
$warning |
|
$danger |
|
$light |
|
$dark |
|
$background |
$white |
$body-color |
$black |
$facebook |
rgb(55, 101, 201) |
$google |
rgb(236, 65, 44) |
$twitter |
rgb(3, 159, 245) |
Border colors | |
---|---|
$border-color |
|
$border-color-light |
|
$border-color-dark |
|
$border-color-black |
Typography | |
---|---|
$font-family-base |
'Roboto', sans-serif; |
$font-weight-base |
400 |
$line-height-base |
1.5 |
$letter-spacing-base |
.3px |
$font-weight-light |
300 |
$font-weight-normal |
400 |
$font-weight-semi |
500 |
$font-weight-bold |
700 |
Typography ( Font size ) | |
---|---|
$font-size-base |
.9375rem (15px) |
$font-size-xs |
0.7142em |
$font-size-sm |
0.8571em |
$font-size-lg |
1em |
$font-size-paragraph |
1em |
$font-size-h1 |
2.125em |
$font-size-h2 |
1.8125em |
$font-size-h3 |
1.5em |
$font-size-h4 |
1.25em |
$font-size-h5 |
1.0625em |
$font-size-h6 |
.8125em |
$font-size-display-1 |
4.6875em |
$font-size-display-2 |
3.75em |
$font-size-display-3 |
2.8125em |
$font-size-display-4 |
2.1875em |
Border | |
---|---|
$border-width |
1px |
$border-width-md |
2px |
$border-width-lg |
3px |
$border-width-xl |
4px |
$border-radius |
.25rem |
$border-radius-sm |
.2rem |
$border-radius-lg |
.3rem |
Spacing | |
---|---|
$spacing-xxxs |
.0625rem |
$spacing-xxs |
.125rem |
$spacing-xs |
.25rem |
$spacing-sm |
.5rem |
$spacing-md |
1rem |
$spacing-lg |
1.5rem |
$spacing-xl |
2rem |
$spacing-xxl |
2.5rem |
$spacing-xxxl |
3rem |
Shadows are defined as @function
, @mixin
& $variable
Using @mixin
Using $variable
Shadow Mixins | |
---|---|
shadow-1dp() |
|
shadow-2dp() |
|
shadow-3dp() |
|
shadow-4dp() |
|
shadow-6dp() |
|
shadow-8dp() |
|
shadow-16dp() |
|
shadow-24dp() |
|
shadow-button() |
|
shadow-button-hover() |
Using colored shadow @mixin
Colored shadows | |
---|---|
shadow-1dp-color($primary) |
|
shadow-2dp-color($success) |
|
shadow-3dp-color($warning) |
|
shadow-4dp-color($danger) |
|
shadow-6dp-color($info) |
|
shadow-8dp-color($primary) |
|
shadow-16dp-color($success) |
|
shadow-24dp-color($info) |
Z Index | |
---|---|
$z-index-deepdive |
-99999 |
$z-index-dive |
-1 |
$z-index-default |
1 |
$z-index-anchor |
3 |
$z-index-docked |
4 |
$z-index-sticky |
100 |
$z-index-popup |
5000 |
$z-index-dialog |
6000 |
$z-index-dropdown |
7000 |
$z-index-overlay |
8000 |
$z-index-reminder |
8500 |
$z-index-modal |
9000 |
$z-index-spinner |
9050 |
$z-index-toast |
10000 |
$z-index-sidebar |
99999 |
$z-index-aside |
999999 |