-
Notifications
You must be signed in to change notification settings - Fork 7
SCSS Variables
appreciated edited this page Aug 12, 2017
·
14 revisions
The following SCSS variables can modify the appreance of the theme.
To use the variables you need to set them before the import of the theme.
$mat-background-color: #303030;
$v-focus-color: #00BCD4;
$mat-custom-color: #009688;
@import "../material/material.scss";
@mixin mytheme {
@include material;
}
| Variable | Default Value | Note |
|---|---|---|
| $v-font-family | "Source Sans Pro", sans-serif | Font Family |
| $v-font-weight | 400 | Default Font Weight |
| $v-unit-size | 45px | Valo Unit Size Weight |
| $v-focus-color | #0072C6 | |
| $v-error-indicator-color | #d32f2f | |
| $v-friendly-color | #4caf50 | |
| $mat-background-color | #fafafa | |
| $mat-window-color | lighten($mat-card-color, 3%) | background for windows |
| $mat-card-color | lighten($mat-background-color, 9%) | background for cards |
| $mat-card-font-color | valo-font-color($mat-card-color, 1.0) | font for cards |
| $mat-card-font-color | valo-font-color($mat-card-color, 1.0) | padding for cards |
| $mat-card-padding | 20px | the default card padding |
| $mat-custom-color | $v-focus-color | color for all components that support custom |
| $mat-button-hover-modifier | 10% | determines how much the lightness and saturation of the background color changes on hover |
| $mat-button-borderless-opacity | 0.2 | determines the transparency of the hover background color of borderless buttons |
| $v-app-background-color | $mat-background-color | |
| $v-background-color | $mat-card-color | |
| $v-shadow | $z-depth-1 | |
| $v-overlay-shadow | $z-depth-4 | |
| $v-layout-margin-top | 10px | |
| $v-layout-margin-left | 10px | |
| $v-layout-margin-right | 10px | |
| $v-layout-margin-bottom | 10px | |
| $h1-fontsize | 3.0rem | |
| $h2-fontsize | 2.5rem | |
| $h3-fontsize | 2.0rem | |
| $h4-fontsize | 1.5rem | |
| $h5-fontsize | 1.2rem | |
| $h6-fontsize | 1rem |