styles.scss 3.53 KB
Newer Older
1
2
3
@import "~@angular/material/theming";
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
@import 'health-warn.scss';
4
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700|Material+Icons');
5
6
7
8
9
10
11
// 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();

12
13
// Colour palette generated using #1a50a5 as primary:
// http://mcg.mbitson.com/#!?strudel=%231a50a5
Chris Hines's avatar
Chris Hines committed
14
$md-monashpalette: (
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    50 : #e4eaf4,
    100 : #bacbe4,
    200 : #8da8d2,
    300 : #5f85c0,
    400 : #3c6ab3,
    500 : #1a50a5,
    600 : #17499d,
    700 : #134093,
    800 : #0f378a,
    900 : #082779,
    A100 : #a8bbff,
    A200 : #7594ff,
    A400 : #426cff,
    A700 : #2958ff,
Chris Hines's avatar
Chris Hines committed
29
30
31
32
33
34
35
36
37
38
39
40
41
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
42
        A400 : #ffffff,
Chris Hines's avatar
Chris Hines committed
43
44
45
46
        A700 : #ffffff,
    )
);

47
// Define the default theme (same as the example above).
Chris Hines's avatar
Chris Hines committed
48
49
//$strudel-app-primary: mat-palette($mat-indigo);
$strudel-app-primary: mat-palette($md-monashpalette);
50
51
$strudel-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$strudel-app-theme:   mat-light-theme($strudel-app-primary, $strudel-app-accent);
Chris Hines's avatar
Chris Hines committed
52
53
$strudel-app-theme-lighter: mat-light-theme(mat-palette($strudel-app-primary,lighter),$strudel-app-accent);
$strudel-app-theme-darker: mat-light-theme(mat-palette($strudel-app-primary,darker),$strudel-app-accent);
54
55
$health-warn: $mat-pink;

Chris Hines's avatar
Chris Hines committed
56
57
58
$primary-light: mat-palette($md-monashpalette,A200);
$primary-darker: mat-palette($md-monashpalette,A700);

59
60
61
62
63
64
// Include the default theme styles.
@include angular-material-theme($strudel-app-theme);
@include health-warning-theme($strudel-app-theme);


// Define an alternate dark theme.
Chris Hines's avatar
Chris Hines committed
65
66
//$dark-primary: mat-palette($mat-blue-grey);
$dark-primary: mat-palette($md-monashpalette,800);
67
68
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
Chris Hines's avatar
Chris Hines committed
69
70
//$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
$dark-theme:   mat-dark-theme($dark-primary, $strudel-app-accent, $dark-warn);
71
72
73
74
75
76
77

// 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
// `.strudel-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.strudel-light-theme {
  @include angular-material-theme($strudel-app-theme);
  @include health-warning-theme($strudel-app-theme);
Chris Hines's avatar
Chris Hines committed
78
79
80
81
82
83
  .darker-theme {
  @include angular-material-theme(mat-light-theme(mat-palette($strudel-app-primary,darker),mat-palette($strudel-app-accent,darker)));
  }
  .lighter-theme {
  @include angular-material-theme(mat-light-theme(mat-palette($strudel-app-primary,lighter),mat-palette($strudel-app-accent,lighter)));
  }
84
85
86
87
}
.strudel-dark-theme {
  @include angular-material-theme($dark-theme);
  @include health-warning-theme($dark-theme);
Chris Hines's avatar
Chris Hines committed
88
89
90
91
92
93
  .darker-theme {
  @include angular-material-theme(mat-dark-theme(mat-palette($strudel-app-primary,darker),mat-palette($strudel-app-accent,darker)));
  }
  .lighter-theme {
  @include angular-material-theme(mat-dark-theme(mat-palette($strudel-app-primary,lighter),mat-palette($strudel-app-accent,lighter)));
  }
94
}
Chris Hines's avatar
Chris Hines committed
95