argos/dmp-frontend/src/blue-theme.scss

143 lines
3.7 KiB
SCSS
Raw Normal View History

2019-01-18 18:03:45 +01:00
@import 'app/ui/misc/navigation/navigation.component.scss';
2018-11-27 18:33:17 +01:00
@import '../node_modules/@angular/material/theming';
$app-blue-theme-primary-palette: (
50: #e8eaf6,
100: #c5cae9,
200: #9fa8da,
300: #7986cb,
400: #5c6bc0,
500: #3f51b5,
600: #3949ab,
700: #303f9f,
800: #283593,
900: #1a237e,
A100: #8c9eff,
A200: #536dfe,
A400: #3d5afe,
A700: #304ffe,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: white,
400: white,
500: $white-87-opacity,
600: $white-87-opacity,
700: $white-87-opacity,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: white,
A400: white,
A700: $white-87-opacity,
),
);
$app-blue-theme-accent-palette: (
50: #fce4ec,
100: #f8bbd0,
200: #f48fb1,
300: #f06292,
400: #ec407a,
500: #e91e63,
600: #d81b60,
700: #c2185b,
800: #ad1457,
900: #880e4f,
A100: #ff80ab,
A200: #ff4081,
A400: #f50057,
A700: #c51162,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: $white-87-opacity,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: white,
A400: white,
A700: white,
)
);
$app-blue-theme-primary: mat-palette($app-blue-theme-primary-palette);
$app-blue-theme-accent: mat-palette($app-blue-theme-accent-palette, A200, A100, A400);
$app-blue-theme-warn: mat-palette($mat-red);
$app-blue-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50),
hover: rgba(black, 0.04),
card: white,
dialog: white,
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $dark-focused,
selected-button: map_get($mat-grey, 300),
selected-disabled-button: map_get($mat-grey, 400),
disabled-button-toggle: map_get($mat-grey, 200),
unselected-chip: map_get($mat-grey, 300),
disabled-list-option: map_get($mat-grey, 200),
);
$app-blue-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54),
icons: rgba(black, 0.54),
text: rgba(black, 0.87),
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38),
);
$custom-theme: (
primary: $app-blue-theme-primary,
accent: $app-blue-theme-accent,
warn: $app-blue-theme-warn,
is-dark: false,
foreground: $app-blue-theme-foreground,
background: $app-blue-theme-background,
);
$custom-typography: mat-typography-config(
$font-family: 'Lato, regular',
$headline: mat-typography-level(32px, 48px, 700),
$body-1: mat-typography-level(16px, 24px, 500)
);
.blue-theme {
@include mat-core();
@include angular-material-theme($custom-theme);
2019-01-18 18:03:45 +01:00
@include navigation-component-theme($custom-theme);
2018-11-27 18:33:17 +01:00
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-typography);
// Override typography for a specific Angular Material components.
@include mat-checkbox-typography($custom-typography);
// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography);
//If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:
// Override the typography in the core CSS.
@include mat-core($custom-typography);
}