c680f5b4
 Administrator
first commit
|
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
69
70
71
72
73
74
75
76
|
@import '~@angular/material/core/theming/all-theme';
@import '~@covalent/core/theming/all-theme';
@import '~@covalent/markdown/markdown-theme';
@import '~@covalent/charts/charts-theme';
@import '~@covalent/highlight/highlight-theme';
// Plus imports for other components in your app.
// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include md-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$primary: md-palette($md-blue, 700);
$accent: md-palette($md-orange, 800, A100, A400);
// The warn palette is optional (defaults to red).
$warn: md-palette($md-red, 600);
// Create the theme object (a Sass map containing all of the palettes).
$theme: md-light-theme($primary, $accent, $warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($theme);
@include covalent-theme($theme);
@include covalent-markdown-theme($theme);
@include covalent-charts-theme($theme);
@include covalent-highlight-theme();
// Active icon color in list nav
md-nav-list {
[md-list-item].active {
md-icon[md-list-avatar] {
background-color: md-color($accent);
color: md-color($accent, default-contrast)
}
md-icon[md-list-icon] {
color: md-color($accent);
}
}
}
// Custom theme examples
.white-orange {
$primary2: md-palette($md-grey, 50);
$accent2: md-palette($md-orange, 800);
$warn2: md-palette($md-red, 600);
$white-orange: md-light-theme($primary2, $accent2, $warn2);
@include angular-material-theme($white-orange);
@include covalent-theme($white-orange);
}
.dark-grey-blue {
$primary3: md-palette($md-blue-grey, 800);
$accent3: md-palette($md-teal, 500);
$warn3: md-palette($md-red, 600);
$dark-grey-blue: md-dark-theme($primary3, $accent3, $warn3);
@include angular-material-theme($dark-grey-blue);
@include covalent-theme($dark-grey-blue);
}
.light-blue-red {
$primary4: md-palette($md-light-blue, 700);
$accent4: md-palette($md-red, 700);
$warn4: md-palette($md-deep-orange, 800);
$light-blue-red: md-light-theme($primary4, $accent4, $warn4);
@include angular-material-theme($light-blue-red);
@include covalent-theme($light-blue-red);
}
|
