forked from angular/components
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy paththeme.scss
More file actions
68 lines (63 loc) · 3.29 KB
/
Copy paththeme.scss
File metadata and controls
68 lines (63 loc) · 3.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
@import '../material/core/theming/all-theme';
@import '../material-experimental/mdc-button/mdc-button';
@import '../material-experimental/mdc-card/mdc-card';
@import '../material-experimental/mdc-checkbox/mdc-checkbox';
@import '../material-experimental/mdc-chips/mdc-chips';
@import '../material-experimental/mdc-helpers/mdc-helpers';
@import '../material-experimental/mdc-menu/mdc-menu';
@import '../material-experimental/mdc-radio/mdc-radio';
@import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
@import '../material-experimental/popover-edit/popover-edit';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();
@include mat-button-typography-mdc(mat-typography-config());
@include mat-icon-button-typography-mdc(mat-typography-config());
@include mat-fab-typography-mdc(mat-typography-config());
@include mat-card-typography-mdc(mat-typography-config());
@include mat-checkbox-typography-mdc(mat-typography-config());
@include mat-chips-typography-mdc(mat-typography-config());
@include mat-menu-typography-mdc(mat-typography-config());
@include mat-radio-typography-mdc(mat-typography-config());
@include mat-slide-toggle-typography-mdc(mat-typography-config());
// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
// Include the default theme styles.
@include angular-material-theme($candy-app-theme);
@include mat-button-theme-mdc($candy-app-theme);
@include mat-icon-button-theme-mdc($candy-app-theme);
@include mat-fab-theme-mdc($candy-app-theme);
@include mat-card-theme-mdc($candy-app-theme);
@include mat-checkbox-theme-mdc($candy-app-theme);
@include mat-chips-theme-mdc($candy-app-theme);
@include mat-menu-theme-mdc($candy-app-theme);
@include mat-radio-theme-mdc($candy-app-theme);
@include mat-slide-toggle-theme-mdc($candy-app-theme);
@include mat-edit-theme($candy-app-theme);
@include mat-edit-typography(mat-typography-config());
// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
// default theme.
.demo-unicorn-dark-theme {
@include angular-material-theme($dark-theme);
@include mat-button-theme-mdc($dark-theme);
@include mat-icon-button-theme-mdc($dark-theme);
@include mat-fab-theme-mdc($dark-theme);
@include mat-card-theme-mdc($dark-theme);
@include mat-checkbox-theme-mdc($dark-theme);
@include mat-chips-theme-mdc($dark-theme);
@include mat-menu-theme-mdc($dark-theme);
@include mat-radio-theme-mdc($dark-theme);
@include mat-slide-toggle-theme-mdc($dark-theme);
@include mat-edit-theme($dark-theme);
}