@cagovweb/state-template 6.4.2 → 6.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/cagov.core.css +8163 -7217
- package/dist/css/cagov.core.flat.css +27178 -0
- package/dist/css/cagov.core.min.css +1 -5
- package/dist/css/colortheme-delta.css +54 -1
- package/dist/css/colortheme-delta.min.css +1 -1
- package/dist/css/colortheme-eureka.css +53 -1
- package/dist/css/colortheme-eureka.min.css +1 -1
- package/dist/css/colortheme-mono.css +54 -1
- package/dist/css/colortheme-mono.min.css +1 -1
- package/dist/css/colortheme-oceanside.css +54 -1
- package/dist/css/colortheme-oceanside.min.css +1 -1
- package/dist/css/colortheme-orangecounty.css +54 -1
- package/dist/css/colortheme-orangecounty.min.css +1 -1
- package/dist/css/colortheme-pasorobles.css +54 -1
- package/dist/css/colortheme-pasorobles.min.css +1 -1
- package/dist/css/colortheme-sacramento.css +71 -18
- package/dist/css/colortheme-sacramento.min.css +1 -1
- package/dist/css/colortheme-santabarbara.css +54 -1
- package/dist/css/colortheme-santabarbara.min.css +1 -1
- package/dist/css/colortheme-santacruz.css +54 -1
- package/dist/css/colortheme-santacruz.min.css +1 -1
- package/dist/css/colortheme-shasta.css +54 -1
- package/dist/css/colortheme-shasta.min.css +1 -1
- package/dist/css/colortheme-sierra.css +54 -1
- package/dist/css/colortheme-sierra.min.css +1 -1
- package/dist/css/colortheme-trinity.css +54 -1
- package/dist/css/colortheme-trinity.min.css +1 -1
- package/dist/fonts/CaGov.woff2 +0 -0
- package/dist/js/cagov.core.js +17 -2
- package/dist/js/cagov.core.min.js +2 -2
- package/dist/readme.md +2 -2
- package/package.json +2 -2
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
/* -----------------------------------------
|
|
2
|
-
SACRAMENTO
|
|
2
|
+
SACRAMENTO COLOR THEME
|
|
3
3
|
----------------------------------------- */
|
|
4
|
+
|
|
4
5
|
:root {
|
|
6
|
+
/* color variations are hardcoded for older browsers
|
|
7
|
+
color-mix is used for the newer browsers */
|
|
8
|
+
|
|
9
|
+
/* Highlight */
|
|
5
10
|
--color-p1: #7bb0da;
|
|
6
11
|
--color-p1-dark: #6ba6d6;
|
|
7
12
|
--color-p1-darker: #5f9fd2;
|
|
@@ -9,6 +14,8 @@
|
|
|
9
14
|
--color-p1-light: #95c0e1;
|
|
10
15
|
--color-p1-lighter: #b0d0e9;
|
|
11
16
|
--color-p1-lightest: #cadff0;
|
|
17
|
+
|
|
18
|
+
/* Primary */
|
|
12
19
|
--color-p2: #153554;
|
|
13
20
|
--color-p2-dark: #112b44;
|
|
14
21
|
--color-p2-darker: #0e2337;
|
|
@@ -16,24 +23,70 @@
|
|
|
16
23
|
--color-p2-light: #445d76;
|
|
17
24
|
--color-p2-lighter: #738698;
|
|
18
25
|
--color-p2-lightest: #a1aebb;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
--color-p3
|
|
22
|
-
--color-p3-
|
|
23
|
-
--color-p3-
|
|
24
|
-
--color-p3-
|
|
25
|
-
--color-p3-
|
|
26
|
-
--color-
|
|
27
|
-
--color-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
--color-
|
|
31
|
-
--color-
|
|
32
|
-
--color-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
--color-
|
|
26
|
+
|
|
27
|
+
/* Standout */
|
|
28
|
+
--color-p3: #343b4b;
|
|
29
|
+
--color-p3-dark: #2c323f;
|
|
30
|
+
--color-p3-darker: #252a36;
|
|
31
|
+
--color-p3-darkest: #171a21;
|
|
32
|
+
--color-p3-light: #5d626f;
|
|
33
|
+
--color-p3-lighter: #858993;
|
|
34
|
+
--color-p3-lightest: #aeb1b7;
|
|
35
|
+
|
|
36
|
+
/* Secondary 1 */
|
|
37
|
+
--color-s1: #f5f5f5;
|
|
38
|
+
--color-s1-darker: #ededed;
|
|
39
|
+
--color-s1-lighter: #fafafa;
|
|
40
|
+
|
|
41
|
+
/* Secondary 2 */
|
|
42
|
+
--color-s2: #ccc;
|
|
43
|
+
--color-s2-dark: #bababa;
|
|
44
|
+
--color-s2-darker: #a8a8a8;
|
|
45
|
+
|
|
46
|
+
/* Secondary 3 */
|
|
47
|
+
--color-s3: #e6dcdc;
|
|
48
|
+
--color-s3-dark: #d7c7c7;
|
|
49
|
+
--color-s3-light: #f0eaea;
|
|
50
|
+
--color-s3-lighter: #f5f1f1;
|
|
51
|
+
|
|
52
|
+
/* Megamenu sub navigation background */
|
|
36
53
|
--sub-nav-bg: var(--color-s1-lighter);
|
|
54
|
+
|
|
55
|
+
/* Mobile navigation drawer background */
|
|
37
56
|
--mobile-drawer: var(--color-p2);
|
|
38
57
|
--mobile-drawer-active: var(--color-p2-light);
|
|
39
58
|
}
|
|
59
|
+
|
|
60
|
+
/* color-mix is used for the newer browsers */
|
|
61
|
+
@supports (color: color-mix) {
|
|
62
|
+
:root {
|
|
63
|
+
--color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
|
|
64
|
+
--color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
|
|
65
|
+
--color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
|
|
66
|
+
--color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
|
|
67
|
+
--color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
|
|
68
|
+
--color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
|
|
69
|
+
--color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
|
|
70
|
+
--color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
|
|
71
|
+
--color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
|
|
72
|
+
--color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
|
|
73
|
+
--color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
|
|
74
|
+
--color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
|
|
75
|
+
--color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
|
|
76
|
+
--color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
|
|
77
|
+
--color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
|
|
78
|
+
--color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
|
|
79
|
+
--color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
|
|
80
|
+
--color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
|
|
81
|
+
--color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
|
|
82
|
+
--color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
|
|
83
|
+
--color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
|
|
84
|
+
--color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
|
|
85
|
+
--color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
|
|
86
|
+
--color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
|
|
87
|
+
--color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
|
|
88
|
+
--sub-nav-bg: var(--color-s1-lighter);
|
|
89
|
+
--mobile-drawer: var(--color-p2);
|
|
90
|
+
--mobile-drawer-active: var(--color-p2-light);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-p1
|
|
1
|
+
:root{--color-p1:#7bb0da;--color-p1-dark:#6ba6d6;--color-p1-darker:#5f9fd2;--color-p1-darkest:#438fca;--color-p1-light:#95c0e1;--color-p1-lighter:#b0d0e9;--color-p1-lightest:#cadff0;--color-p2:#153554;--color-p2-dark:#112b44;--color-p2-darker:#0e2337;--color-p2-darkest:#07111b;--color-p2-light:#445d76;--color-p2-lighter:#738698;--color-p2-lightest:#a1aebb;--color-p3:#343b4b;--color-p3-dark:#2c323f;--color-p3-darker:#252a36;--color-p3-darkest:#171a21;--color-p3-light:#5d626f;--color-p3-lighter:#858993;--color-p3-lightest:#aeb1b7;--color-s1:#f5f5f5;--color-s1-darker:#ededed;--color-s1-lighter:#fafafa;--color-s2:#ccc;--color-s2-dark:#bababa;--color-s2-darker:#a8a8a8;--color-s3:#e6dcdc;--color-s3-dark:#d7c7c7;--color-s3-light:#f0eaea;--color-s3-lighter:#f5f1f1;--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p2);--mobile-drawer-active:var(--color-p2-light);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p2);--mobile-drawer-active:var(--color-p2-light);}}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
/* -----------------------------------------
|
|
2
|
-
SANTABARBARA
|
|
2
|
+
SANTABARBARA COLOR THEME
|
|
3
3
|
----------------------------------------- */
|
|
4
|
+
|
|
4
5
|
:root {
|
|
6
|
+
/* color variations are hardcoded for older browsers
|
|
7
|
+
color-mix is used for the newer browsers */
|
|
8
|
+
|
|
9
|
+
/* Highlight */
|
|
5
10
|
--color-p1: #ff9b53;
|
|
6
11
|
--color-p1-dark: #ff8f3f;
|
|
7
12
|
--color-p1-darker: #ff862f;
|
|
@@ -9,6 +14,8 @@
|
|
|
9
14
|
--color-p1-light: #ffaf75;
|
|
10
15
|
--color-p1-lighter: #ffc398;
|
|
11
16
|
--color-p1-lightest: #ffd7ba;
|
|
17
|
+
|
|
18
|
+
/* Primary */
|
|
12
19
|
--color-p2: #834b1e;
|
|
13
20
|
--color-p2-dark: #72411a;
|
|
14
21
|
--color-p2-darker: #663a17;
|
|
@@ -16,6 +23,8 @@
|
|
|
16
23
|
--color-p2-light: #9c6f4b;
|
|
17
24
|
--color-p2-lighter: #b59378;
|
|
18
25
|
--color-p2-lightest: #cdb7a5;
|
|
26
|
+
|
|
27
|
+
/* Standout */
|
|
19
28
|
--color-p3: #664945;
|
|
20
29
|
--color-p3-dark: #5a403d;
|
|
21
30
|
--color-p3-darker: #513a37;
|
|
@@ -23,17 +32,61 @@
|
|
|
23
32
|
--color-p3-light: #856d6a;
|
|
24
33
|
--color-p3-lighter: #a3928f;
|
|
25
34
|
--color-p3-lightest: #c2b6b5;
|
|
35
|
+
|
|
36
|
+
/* Secondary 1 */
|
|
26
37
|
--color-s1: #f8eee4;
|
|
27
38
|
--color-s1-darker: #f5e6d8;
|
|
28
39
|
--color-s1-lighter: #fcf7f2;
|
|
40
|
+
|
|
41
|
+
/* Secondary 2 */
|
|
29
42
|
--color-s2: #f1dac2;
|
|
30
43
|
--color-s2-dark: #eac8a5;
|
|
31
44
|
--color-s2-darker: #e4b788;
|
|
45
|
+
|
|
46
|
+
/* Secondary 3 */
|
|
32
47
|
--color-s3: #e8bd90;
|
|
33
48
|
--color-s3-dark: #e2ab72;
|
|
34
49
|
--color-s3-light: #f1d7bc;
|
|
35
50
|
--color-s3-lighter: #f6e5d3;
|
|
51
|
+
|
|
52
|
+
/* Megamenu sub navigation background */
|
|
36
53
|
--sub-nav-bg: var(--color-s1-lighter);
|
|
54
|
+
|
|
55
|
+
/* Mobile navigation draver background */
|
|
37
56
|
--mobile-drawer: var(--color-p3);
|
|
38
57
|
--mobile-drawer-active: var(--color-p3-light);
|
|
39
58
|
}
|
|
59
|
+
|
|
60
|
+
/* color-mix is used for the newer browsers */
|
|
61
|
+
@supports (color: color-mix) {
|
|
62
|
+
:root {
|
|
63
|
+
--color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
|
|
64
|
+
--color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
|
|
65
|
+
--color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
|
|
66
|
+
--color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
|
|
67
|
+
--color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
|
|
68
|
+
--color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
|
|
69
|
+
--color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
|
|
70
|
+
--color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
|
|
71
|
+
--color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
|
|
72
|
+
--color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
|
|
73
|
+
--color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
|
|
74
|
+
--color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
|
|
75
|
+
--color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
|
|
76
|
+
--color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
|
|
77
|
+
--color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
|
|
78
|
+
--color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
|
|
79
|
+
--color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
|
|
80
|
+
--color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
|
|
81
|
+
--color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
|
|
82
|
+
--color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
|
|
83
|
+
--color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
|
|
84
|
+
--color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
|
|
85
|
+
--color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
|
|
86
|
+
--color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
|
|
87
|
+
--color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
|
|
88
|
+
--sub-nav-bg: var(--color-s1-lighter);
|
|
89
|
+
--mobile-drawer: var(--color-p3);
|
|
90
|
+
--mobile-drawer-active: var(--color-p3-light);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-p1
|
|
1
|
+
:root{--color-p1:#ff9b53;--color-p1-dark:#ff8f3f;--color-p1-darker:#ff862f;--color-p1-darkest:#ff710c;--color-p1-light:#ffaf75;--color-p1-lighter:#ffc398;--color-p1-lightest:#ffd7ba;--color-p2:#834b1e;--color-p2-dark:#72411a;--color-p2-darker:#663a17;--color-p2-darkest:#492a11;--color-p2-light:#9c6f4b;--color-p2-lighter:#b59378;--color-p2-lightest:#cdb7a5;--color-p3:#664945;--color-p3-dark:#5a403d;--color-p3-darker:#513a37;--color-p3-darkest:#3b2b28;--color-p3-light:#856d6a;--color-p3-lighter:#a3928f;--color-p3-lightest:#c2b6b5;--color-s1:#f8eee4;--color-s1-darker:#f5e6d8;--color-s1-lighter:#fcf7f2;--color-s2:#f1dac2;--color-s2-dark:#eac8a5;--color-s2-darker:#e4b788;--color-s3:#e8bd90;--color-s3-dark:#e2ab72;--color-s3-light:#f1d7bc;--color-s3-lighter:#f6e5d3;--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
/* -----------------------------------------
|
|
2
|
-
SANTA CRUZ
|
|
2
|
+
SANTA CRUZ COLOR THEME
|
|
3
3
|
----------------------------------------- */
|
|
4
|
+
|
|
4
5
|
:root {
|
|
6
|
+
/* color variations are hardcoded for older browsers
|
|
7
|
+
color-mix is used for the newer browsers */
|
|
8
|
+
|
|
9
|
+
/* Highlight */
|
|
5
10
|
--color-p1: #f5811b;
|
|
6
11
|
--color-p1-dark: #f1760b;
|
|
7
12
|
--color-p1-darker: #e26f0a;
|
|
@@ -9,6 +14,8 @@
|
|
|
9
14
|
--color-p1-light: #f79a49;
|
|
10
15
|
--color-p1-lighter: #f9b376;
|
|
11
16
|
--color-p1-lightest: #fbcda4;
|
|
17
|
+
|
|
18
|
+
/* Primary */
|
|
12
19
|
--color-p2: #0f4f94;
|
|
13
20
|
--color-p2-dark: #0d4581;
|
|
14
21
|
--color-p2-darker: #0c3e74;
|
|
@@ -16,6 +23,8 @@
|
|
|
16
23
|
--color-p2-light: #3f72a9;
|
|
17
24
|
--color-p2-lighter: #6f95bf;
|
|
18
25
|
--color-p2-lightest: #9fb9d4;
|
|
26
|
+
|
|
27
|
+
/* Standout */
|
|
19
28
|
--color-p3: #2c2c4f;
|
|
20
29
|
--color-p3-dark: #252542;
|
|
21
30
|
--color-p3-darker: #1f1f38;
|
|
@@ -23,17 +32,61 @@
|
|
|
23
32
|
--color-p3-light: #565672;
|
|
24
33
|
--color-p3-lighter: #808095;
|
|
25
34
|
--color-p3-lightest: #ababb9;
|
|
35
|
+
|
|
36
|
+
/* Secondary 1 */
|
|
26
37
|
--color-s1: #eff4fa;
|
|
27
38
|
--color-s1-darker: #e3ecf6;
|
|
28
39
|
--color-s1-lighter: #f7fafd;
|
|
40
|
+
|
|
41
|
+
/* Secondary 2 */
|
|
29
42
|
--color-s2: #c7d9ea;
|
|
30
43
|
--color-s2-dark: #adc7e0;
|
|
31
44
|
--color-s2-darker: #93b6d7;
|
|
45
|
+
|
|
46
|
+
/* Secondary 3 */
|
|
32
47
|
--color-s3: #9bb8d3;
|
|
33
48
|
--color-s3-dark: #82a6c8;
|
|
34
49
|
--color-s3-light: #c3d4e5;
|
|
35
50
|
--color-s3-lighter: #d7e3ed;
|
|
51
|
+
|
|
52
|
+
/* Megamenu sub navigation background */
|
|
36
53
|
--sub-nav-bg: var(--color-s1-lighter);
|
|
54
|
+
|
|
55
|
+
/* Mobile navigation draver background */
|
|
37
56
|
--mobile-drawer: var(--color-p3);
|
|
38
57
|
--mobile-drawer-active: var(--color-p3-light);
|
|
39
58
|
}
|
|
59
|
+
|
|
60
|
+
/* color-mix is used for the newer browsers */
|
|
61
|
+
@supports (color: color-mix) {
|
|
62
|
+
:root {
|
|
63
|
+
--color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
|
|
64
|
+
--color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
|
|
65
|
+
--color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
|
|
66
|
+
--color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
|
|
67
|
+
--color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
|
|
68
|
+
--color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
|
|
69
|
+
--color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
|
|
70
|
+
--color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
|
|
71
|
+
--color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
|
|
72
|
+
--color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
|
|
73
|
+
--color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
|
|
74
|
+
--color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
|
|
75
|
+
--color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
|
|
76
|
+
--color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
|
|
77
|
+
--color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
|
|
78
|
+
--color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
|
|
79
|
+
--color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
|
|
80
|
+
--color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
|
|
81
|
+
--color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
|
|
82
|
+
--color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
|
|
83
|
+
--color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
|
|
84
|
+
--color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
|
|
85
|
+
--color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
|
|
86
|
+
--color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
|
|
87
|
+
--color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
|
|
88
|
+
--sub-nav-bg: var(--color-s1-lighter);
|
|
89
|
+
--mobile-drawer: var(--color-p3);
|
|
90
|
+
--mobile-drawer-active: var(--color-p3-light);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-p1
|
|
1
|
+
:root{--color-p1:#f5811b;--color-p1-dark:#f1760b;--color-p1-darker:#e26f0a;--color-p1-darkest:#c05e08;--color-p1-light:#f79a49;--color-p1-lighter:#f9b376;--color-p1-lightest:#fbcda4;--color-p2:#0f4f94;--color-p2-dark:#0d4581;--color-p2-darker:#0c3e74;--color-p2-darkest:#082c53;--color-p2-light:#3f72a9;--color-p2-lighter:#6f95bf;--color-p2-lightest:#9fb9d4;--color-p3:#2c2c4f;--color-p3-dark:#252542;--color-p3-darker:#1f1f38;--color-p3-darkest:#121221;--color-p3-light:#565672;--color-p3-lighter:#808095;--color-p3-lightest:#ababb9;--color-s1:#eff4fa;--color-s1-darker:#e3ecf6;--color-s1-lighter:#f7fafd;--color-s2:#c7d9ea;--color-s2-dark:#adc7e0;--color-s2-darker:#93b6d7;--color-s3:#9bb8d3;--color-s3-dark:#82a6c8;--color-s3-light:#c3d4e5;--color-s3-lighter:#d7e3ed;--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
/* -----------------------------------------
|
|
2
|
-
SHASTA
|
|
2
|
+
SHASTA COLOR THEME
|
|
3
3
|
----------------------------------------- */
|
|
4
|
+
|
|
4
5
|
:root {
|
|
6
|
+
/* color variations are hardcoded for older browsers
|
|
7
|
+
color-mix is used for the newer browsers */
|
|
8
|
+
|
|
9
|
+
/* Highlight */
|
|
5
10
|
--color-p1: #fbad23;
|
|
6
11
|
--color-p1-dark: #fba60f;
|
|
7
12
|
--color-p1-darker: #f69f04;
|
|
@@ -9,6 +14,8 @@
|
|
|
9
14
|
--color-p1-light: #fcbd4f;
|
|
10
15
|
--color-p1-lighter: #fdce7b;
|
|
11
16
|
--color-p1-lightest: #fddea7;
|
|
17
|
+
|
|
18
|
+
/* Primary */
|
|
12
19
|
--color-p2: #336c39;
|
|
13
20
|
--color-p2-dark: #2c5e32;
|
|
14
21
|
--color-p2-darker: #28542c;
|
|
@@ -16,6 +23,8 @@
|
|
|
16
23
|
--color-p2-light: #5c8961;
|
|
17
24
|
--color-p2-lighter: #85a788;
|
|
18
25
|
--color-p2-lightest: #adc4b0;
|
|
26
|
+
|
|
27
|
+
/* Standout */
|
|
19
28
|
--color-p3: #3c4543;
|
|
20
29
|
--color-p3-dark: #333a38;
|
|
21
30
|
--color-p3-darker: #2b3230;
|
|
@@ -23,17 +32,61 @@
|
|
|
23
32
|
--color-p3-light: #636a69;
|
|
24
33
|
--color-p3-lighter: #8a8f8e;
|
|
25
34
|
--color-p3-lightest: #b1b5b4;
|
|
35
|
+
|
|
36
|
+
/* Secondary 1 */
|
|
26
37
|
--color-s1: #e4f1e5;
|
|
27
38
|
--color-s1-darker: #daecdb;
|
|
28
39
|
--color-s1-lighter: #f2f8f2;
|
|
40
|
+
|
|
41
|
+
/* Secondary 2 */
|
|
29
42
|
--color-s2: #daefe8;
|
|
30
43
|
--color-s2-dark: #c1e4d9;
|
|
31
44
|
--color-s2-darker: #a8d9c9;
|
|
45
|
+
|
|
46
|
+
/* Secondary 3 */
|
|
32
47
|
--color-s3: #a1cca1;
|
|
33
48
|
--color-s3-dark: #8abf8a;
|
|
34
49
|
--color-s3-light: #c7e0c7;
|
|
35
50
|
--color-s3-lighter: #d9ebd9;
|
|
51
|
+
|
|
52
|
+
/* Megamenu sub navigation background */
|
|
36
53
|
--sub-nav-bg: var(--color-s1-lighter);
|
|
54
|
+
|
|
55
|
+
/* Mobile navigation draver background */
|
|
37
56
|
--mobile-drawer: var(--color-p3);
|
|
38
57
|
--mobile-drawer-active: var(--color-p3-light);
|
|
39
58
|
}
|
|
59
|
+
|
|
60
|
+
/* color-mix is used for the newer browsers */
|
|
61
|
+
@supports (color: color-mix) {
|
|
62
|
+
:root {
|
|
63
|
+
--color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
|
|
64
|
+
--color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
|
|
65
|
+
--color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
|
|
66
|
+
--color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
|
|
67
|
+
--color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
|
|
68
|
+
--color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
|
|
69
|
+
--color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
|
|
70
|
+
--color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
|
|
71
|
+
--color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
|
|
72
|
+
--color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
|
|
73
|
+
--color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
|
|
74
|
+
--color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
|
|
75
|
+
--color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
|
|
76
|
+
--color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
|
|
77
|
+
--color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
|
|
78
|
+
--color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
|
|
79
|
+
--color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
|
|
80
|
+
--color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
|
|
81
|
+
--color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
|
|
82
|
+
--color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
|
|
83
|
+
--color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
|
|
84
|
+
--color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
|
|
85
|
+
--color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
|
|
86
|
+
--color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
|
|
87
|
+
--color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
|
|
88
|
+
--sub-nav-bg: var(--color-s1-lighter);
|
|
89
|
+
--mobile-drawer: var(--color-p3);
|
|
90
|
+
--mobile-drawer-active: var(--color-p3-light);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-p1
|
|
1
|
+
:root{--color-p1:#fbad23;--color-p1-dark:#fba60f;--color-p1-darker:#f69f04;--color-p1-darkest:#d38804;--color-p1-light:#fcbd4f;--color-p1-lighter:#fdce7b;--color-p1-lightest:#fddea7;--color-p2:#336c39;--color-p2-dark:#2c5e32;--color-p2-darker:#28542c;--color-p2-darkest:#1c3c1f;--color-p2-light:#5c8961;--color-p2-lighter:#85a788;--color-p2-lightest:#adc4b0;--color-p3:#3c4543;--color-p3-dark:#333a38;--color-p3-darker:#2b3230;--color-p3-darkest:#1b1f1e;--color-p3-light:#636a69;--color-p3-lighter:#8a8f8e;--color-p3-lightest:#b1b5b4;--color-s1:#e4f1e5;--color-s1-darker:#daecdb;--color-s1-lighter:#f2f8f2;--color-s2:#daefe8;--color-s2-dark:#c1e4d9;--color-s2-darker:#a8d9c9;--color-s3:#a1cca1;--color-s3-dark:#8abf8a;--color-s3-light:#c7e0c7;--color-s3-lighter:#d9ebd9;--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
/* -----------------------------------------
|
|
2
|
-
SIERRA
|
|
2
|
+
SIERRA COLOR THEME
|
|
3
3
|
----------------------------------------- */
|
|
4
|
+
|
|
4
5
|
:root {
|
|
6
|
+
/* color variations are hardcoded for older browsers
|
|
7
|
+
color-mix is used for the newer browsers */
|
|
8
|
+
|
|
9
|
+
/* Highlight */
|
|
5
10
|
--color-p1: #fbad23;
|
|
6
11
|
--color-p1-dark: #fba60f;
|
|
7
12
|
--color-p1-darker: #f69f04;
|
|
@@ -9,6 +14,8 @@
|
|
|
9
14
|
--color-p1-light: #fcbd4f;
|
|
10
15
|
--color-p1-lighter: #fdce7b;
|
|
11
16
|
--color-p1-lightest: #fddea7;
|
|
17
|
+
|
|
18
|
+
/* Primary */
|
|
12
19
|
--color-p2: #476;
|
|
13
20
|
--color-p2-dark: #3d6a5b;
|
|
14
21
|
--color-p2-darker: #376053;
|
|
@@ -16,6 +23,8 @@
|
|
|
16
23
|
--color-p2-light: #699285;
|
|
17
24
|
--color-p2-lighter: #8fada3;
|
|
18
25
|
--color-p2-lightest: #b4c9c2;
|
|
26
|
+
|
|
27
|
+
/* Standout */
|
|
19
28
|
--color-p3: #194949;
|
|
20
29
|
--color-p3-dark: #143a3a;
|
|
21
30
|
--color-p3-darker: #102e2e;
|
|
@@ -23,17 +32,61 @@
|
|
|
23
32
|
--color-p3-light: #476d6d;
|
|
24
33
|
--color-p3-lighter: #759292;
|
|
25
34
|
--color-p3-lightest: #a3b6b6;
|
|
35
|
+
|
|
36
|
+
/* Secondary 1 */
|
|
26
37
|
--color-s1: #e8f1ee;
|
|
27
38
|
--color-s1-darker: #deebe7;
|
|
28
39
|
--color-s1-lighter: #f4f8f7;
|
|
40
|
+
|
|
41
|
+
/* Secondary 2 */
|
|
29
42
|
--color-s2: #daefe8;
|
|
30
43
|
--color-s2-dark: #c1e4d9;
|
|
31
44
|
--color-s2-darker: #a8d9c9;
|
|
45
|
+
|
|
46
|
+
/* Secondary 3 */
|
|
32
47
|
--color-s3: #a1cca1;
|
|
33
48
|
--color-s3-dark: #8abf8a;
|
|
34
49
|
--color-s3-light: #c7e0c7;
|
|
35
50
|
--color-s3-lighter: #d9ebd9;
|
|
51
|
+
|
|
52
|
+
/* Megamenu sub navigation background */
|
|
36
53
|
--sub-nav-bg: var(--color-s1-lighter);
|
|
54
|
+
|
|
55
|
+
/* Mobile navigation draver background */
|
|
37
56
|
--mobile-drawer: var(--color-p3);
|
|
38
57
|
--mobile-drawer-active: var(--color-p3-light);
|
|
39
58
|
}
|
|
59
|
+
|
|
60
|
+
/* color-mix is used for the newer browsers */
|
|
61
|
+
@supports (color: color-mix) {
|
|
62
|
+
:root {
|
|
63
|
+
--color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
|
|
64
|
+
--color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
|
|
65
|
+
--color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
|
|
66
|
+
--color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
|
|
67
|
+
--color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
|
|
68
|
+
--color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
|
|
69
|
+
--color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
|
|
70
|
+
--color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
|
|
71
|
+
--color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
|
|
72
|
+
--color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
|
|
73
|
+
--color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
|
|
74
|
+
--color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
|
|
75
|
+
--color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
|
|
76
|
+
--color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
|
|
77
|
+
--color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
|
|
78
|
+
--color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
|
|
79
|
+
--color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
|
|
80
|
+
--color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
|
|
81
|
+
--color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
|
|
82
|
+
--color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
|
|
83
|
+
--color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
|
|
84
|
+
--color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
|
|
85
|
+
--color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
|
|
86
|
+
--color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
|
|
87
|
+
--color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
|
|
88
|
+
--sub-nav-bg: var(--color-s1-lighter);
|
|
89
|
+
--mobile-drawer: var(--color-p3);
|
|
90
|
+
--mobile-drawer-active: var(--color-p3-light);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-p1
|
|
1
|
+
:root{--color-p1:#fbad23;--color-p1-dark:#fba60f;--color-p1-darker:#f69f04;--color-p1-darkest:#d38804;--color-p1-light:#fcbd4f;--color-p1-lighter:#fdce7b;--color-p1-lightest:#fddea7;--color-p2:#476;--color-p2-dark:#3d6a5b;--color-p2-darker:#376053;--color-p2-darkest:#2a4a3f;--color-p2-light:#699285;--color-p2-lighter:#8fada3;--color-p2-lightest:#b4c9c2;--color-p3:#194949;--color-p3-dark:#143a3a;--color-p3-darker:#102e2e;--color-p3-darkest:#071414;--color-p3-light:#476d6d;--color-p3-lighter:#759292;--color-p3-lightest:#a3b6b6;--color-s1:#e8f1ee;--color-s1-darker:#deebe7;--color-s1-lighter:#f4f8f7;--color-s2:#daefe8;--color-s2-dark:#c1e4d9;--color-s2-darker:#a8d9c9;--color-s3:#a1cca1;--color-s3-dark:#8abf8a;--color-s3-light:#c7e0c7;--color-s3-lighter:#d9ebd9;--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--sub-nav-bg:var(--color-s1-lighter);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
/* -----------------------------------------
|
|
2
|
-
TRINITY
|
|
2
|
+
TRINITY COLOR THEME
|
|
3
3
|
----------------------------------------- */
|
|
4
|
+
|
|
4
5
|
:root {
|
|
6
|
+
/* color variations are hardcoded for older browsers
|
|
7
|
+
color-mix is used for the newer browsers */
|
|
8
|
+
|
|
9
|
+
/* Highlight */
|
|
5
10
|
--color-p1: #c19e73;
|
|
6
11
|
--color-p1-dark: #bb9465;
|
|
7
12
|
--color-p1-darker: #b68d5a;
|
|
@@ -9,6 +14,8 @@
|
|
|
9
14
|
--color-p1-light: #cdb18f;
|
|
10
15
|
--color-p1-lighter: #dac5ab;
|
|
11
16
|
--color-p1-lightest: #e6d8c7;
|
|
17
|
+
|
|
18
|
+
/* Primary */
|
|
12
19
|
--color-p2: #446a7c;
|
|
13
20
|
--color-p2-dark: #3d5f6f;
|
|
14
21
|
--color-p2-darker: #375665;
|
|
@@ -16,6 +23,8 @@
|
|
|
16
23
|
--color-p2-light: #698896;
|
|
17
24
|
--color-p2-lighter: #8fa6b0;
|
|
18
25
|
--color-p2-lightest: #b4c3cb;
|
|
26
|
+
|
|
27
|
+
/* Standout */
|
|
19
28
|
--color-p3: #21272a;
|
|
20
29
|
--color-p3-dark: #181c1f;
|
|
21
30
|
--color-p3-darker: #111416;
|
|
@@ -23,17 +32,61 @@
|
|
|
23
32
|
--color-p3-light: #4d5255;
|
|
24
33
|
--color-p3-lighter: #7a7d7f;
|
|
25
34
|
--color-p3-lightest: #a6a9aa;
|
|
35
|
+
|
|
36
|
+
/* Secondary 1 */
|
|
26
37
|
--color-s1: #eff5f8;
|
|
27
38
|
--color-s1-darker: #e4eef3;
|
|
28
39
|
--color-s1-lighter: #f7fafc;
|
|
40
|
+
|
|
41
|
+
/* Secondary 2 */
|
|
29
42
|
--color-s2: #e2dfda;
|
|
30
43
|
--color-s2-dark: #d2cec6;
|
|
31
44
|
--color-s2-darker: #c3bcb2;
|
|
45
|
+
|
|
46
|
+
/* Secondary 3 */
|
|
32
47
|
--color-s3: #ccc8bf;
|
|
33
48
|
--color-s3-dark: #bcb7ab;
|
|
34
49
|
--color-s3-light: #e0ded9;
|
|
35
50
|
--color-s3-lighter: #ebe9e5;
|
|
51
|
+
|
|
52
|
+
/* Megamenu sub navigation background */
|
|
36
53
|
--sub-nav-bg: var(--color-s1);
|
|
54
|
+
|
|
55
|
+
/* Mobile navigation draver background */
|
|
37
56
|
--mobile-drawer: var(--color-p3);
|
|
38
57
|
--mobile-drawer-active: var(--color-p3-light);
|
|
39
58
|
}
|
|
59
|
+
|
|
60
|
+
/* color-mix is used for the newer browsers */
|
|
61
|
+
@supports (color: color-mix) {
|
|
62
|
+
:root {
|
|
63
|
+
--color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
|
|
64
|
+
--color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
|
|
65
|
+
--color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
|
|
66
|
+
--color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
|
|
67
|
+
--color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
|
|
68
|
+
--color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
|
|
69
|
+
--color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
|
|
70
|
+
--color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
|
|
71
|
+
--color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
|
|
72
|
+
--color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
|
|
73
|
+
--color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
|
|
74
|
+
--color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
|
|
75
|
+
--color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
|
|
76
|
+
--color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
|
|
77
|
+
--color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
|
|
78
|
+
--color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
|
|
79
|
+
--color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
|
|
80
|
+
--color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
|
|
81
|
+
--color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
|
|
82
|
+
--color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
|
|
83
|
+
--color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
|
|
84
|
+
--color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
|
|
85
|
+
--color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
|
|
86
|
+
--color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
|
|
87
|
+
--color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
|
|
88
|
+
--sub-nav-bg: var(--color-s1);
|
|
89
|
+
--mobile-drawer: var(--color-p3);
|
|
90
|
+
--mobile-drawer-active: var(--color-p3-light);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-p1
|
|
1
|
+
:root{--color-p1:#c19e73;--color-p1-dark:#bb9465;--color-p1-darker:#b68d5a;--color-p1-darkest:#a47b49;--color-p1-light:#cdb18f;--color-p1-lighter:#dac5ab;--color-p1-lightest:#e6d8c7;--color-p2:#446a7c;--color-p2-dark:#3d5f6f;--color-p2-darker:#375665;--color-p2-darkest:#2b434e;--color-p2-light:#698896;--color-p2-lighter:#8fa6b0;--color-p2-lightest:#b4c3cb;--color-p3:#21272a;--color-p3-dark:#181c1f;--color-p3-darker:#111416;--color-p3-darkest:#020202;--color-p3-light:#4d5255;--color-p3-lighter:#7a7d7f;--color-p3-lightest:#a6a9aa;--color-s1:#eff5f8;--color-s1-darker:#e4eef3;--color-s1-lighter:#f7fafc;--color-s2:#e2dfda;--color-s2-dark:#d2cec6;--color-s2-darker:#c3bcb2;--color-s3:#ccc8bf;--color-s3-dark:#bcb7ab;--color-s3-light:#e0ded9;--color-s3-lighter:#ebe9e5;--sub-nav-bg:var(--color-s1);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}@supports (color:color-mix){:root{--color-p1-dark:color-mix(in srgb,var(--color-p1),#000 15%);--color-p1-darker:color-mix(in srgb,var(--color-p1),#000 30%);--color-p1-darkest:color-mix(in srgb,var(--color-p1),#000 60%);--color-p1-light:color-mix(in srgb,var(--color-p1),#fff 15%);--color-p1-lighter:color-mix(in srgb,var(--color-p1),#fff 30%);--color-p1-lightest:color-mix(in srgb,var(--color-p1),#fff 60%);--color-p2-dark:color-mix(in srgb,var(--color-p2),#000 15%);--color-p2-darker:color-mix(in srgb,var(--color-p2),#000 30%);--color-p2-darkest:color-mix(in srgb,var(--color-p2),#000 60%);--color-p2-light:color-mix(in srgb,var(--color-p2),#fff 15%);--color-p2-lighter:color-mix(in srgb,var(--color-p2),#fff 30%);--color-p2-lightest:color-mix(in srgb,var(--color-p2),#fff 60%);--color-p3-dark:color-mix(in srgb,var(--color-p3),#000 15%);--color-p3-darker:color-mix(in srgb,var(--color-p3),#000 30%);--color-p3-darkest:color-mix(in srgb,var(--color-p3),#000 60%);--color-p3-light:color-mix(in srgb,var(--color-p3),#fff 15%);--color-p3-lighter:color-mix(in srgb,var(--color-p3),#fff 30%);--color-p3-lightest:color-mix(in srgb,var(--color-p3),#fff 60%);--color-s1-darker:color-mix(in srgb,var(--color-s1),#000 5%);--color-s1-lighter:color-mix(in srgb,var(--color-s1),#fff 10%);--color-s2-dark:color-mix(in srgb,var(--color-s2),#000 15%);--color-s2-darker:color-mix(in srgb,var(--color-s2),#000 30%);--color-s3-dark:color-mix(in srgb,var(--color-s3),#000 15%);--color-s3-light:color-mix(in srgb,var(--color-s3),#fff 45%);--color-s3-lighter:color-mix(in srgb,var(--color-s3),#fff 60%);--sub-nav-bg:var(--color-s1);--mobile-drawer:var(--color-p3);--mobile-drawer-active:var(--color-p3-light);}}
|
package/dist/fonts/CaGov.woff2
CHANGED
|
Binary file
|