mod-base 1.0.3 → 1.0.4-9.beta-2
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/CHANGELOG.md +152 -0
- package/package.json +1 -1
- package/src/fonts/modstyle-icons/modicons-fill/fonts/modicons-fill.eot +0 -0
- package/src/fonts/modstyle-icons/modicons-fill/fonts/modicons-fill.svg +1 -0
- package/src/fonts/modstyle-icons/modicons-fill/fonts/modicons-fill.ttf +0 -0
- package/src/fonts/modstyle-icons/modicons-fill/fonts/modicons-fill.woff +0 -0
- package/src/fonts/modstyle-icons/modicons-fill/selection.json +1 -1
- package/src/fonts/modstyle-icons/modicons-fill/style.css +4 -0
- package/src/fonts/modstyle-icons/modicons-stroke/fonts/modicons-stroke.eot +0 -0
- package/src/fonts/modstyle-icons/modicons-stroke/fonts/modicons-stroke.svg +21 -2
- package/src/fonts/modstyle-icons/modicons-stroke/fonts/modicons-stroke.ttf +0 -0
- package/src/fonts/modstyle-icons/modicons-stroke/fonts/modicons-stroke.woff +0 -0
- package/src/fonts/modstyle-icons/modicons-stroke/selection.json +1 -1
- package/src/fonts/modstyle-icons/modicons-stroke/style.css +177 -175
- package/src/images/rating-icons/bbb.svg +1 -0
- package/src/images/rating-icons/google.svg +1 -0
- package/src/images/rating-icons/modernize.svg +1 -0
- package/src/images/rating-icons/trustpilot.svg +1 -0
- package/src/styles/base/_built-in-classes.scss +23 -8
- package/src/styles/base/_colors.scss +161 -20
- package/src/styles/base/_fonts.scss +22 -10
- package/src/styles/base/_grid.scss +1 -1
- package/src/styles/base/_radius.scss +6 -0
- package/src/styles/base/_ratings.scss +427 -0
- package/src/styles/base/_reset.scss +30 -17
- package/src/styles/base/_spacing.scss +9 -0
- package/src/styles/base/_variables.scss +23 -3
- package/src/styles/base/components/_duplicate-submission.scss +44 -0
- package/src/styles/base/components/_index.scss +1 -0
- package/src/styles/base/index.scss +6 -0
- package/src/styles/icons/_icon-classes-fill.scss +6 -0
- package/src/styles/icons/_icon-classes-stroke.scss +113 -0
- package/src/styles/templates/_dark-mode.scss +539 -90
|
@@ -6,7 +6,167 @@
|
|
|
6
6
|
$color-white: #FFF;
|
|
7
7
|
$color-black: #000;
|
|
8
8
|
|
|
9
|
-
//
|
|
9
|
+
// New Modernize Brand Colors
|
|
10
|
+
$color-dark-purple-100: #D7D3DD;
|
|
11
|
+
$color-dark-purple-200: #AEA6BC;
|
|
12
|
+
$color-dark-purple-300: #867A9A;
|
|
13
|
+
$color-dark-purple-400: #5D4D79;
|
|
14
|
+
$color-dark-purple-500: #352157;
|
|
15
|
+
$color-dark-purple-600: #2A1A46;
|
|
16
|
+
$color-dark-purple-700: #201434;
|
|
17
|
+
$color-dark-purple-800: #150D23;
|
|
18
|
+
$color-dark-purple-900: #0B0711;
|
|
19
|
+
|
|
20
|
+
$color-medium-purple-100: #DFD7EB;
|
|
21
|
+
$color-medium-purple-200: #BEB0D7;
|
|
22
|
+
$color-medium-purple-300: #9E88C2;
|
|
23
|
+
$color-medium-purple-400: #7D61AE;
|
|
24
|
+
$color-medium-purple-500: #5D399A;
|
|
25
|
+
$color-medium-purple-600: #4A2E7B;
|
|
26
|
+
$color-medium-purple-700: #38225C;
|
|
27
|
+
$color-medium-purple-800: #25173E;
|
|
28
|
+
$color-medium-purple-900: #130B1F;
|
|
29
|
+
|
|
30
|
+
$color-electric-purple-100: #E9D0FD;
|
|
31
|
+
$color-electric-purple-200: #D4A1FB;
|
|
32
|
+
$color-electric-purple-300: #BE73FA;
|
|
33
|
+
$color-electric-purple-400: #A944F8;
|
|
34
|
+
$color-electric-purple-500: #9315F6;
|
|
35
|
+
$color-electric-purple-600: #7611C5;
|
|
36
|
+
$color-electric-purple-700: #580D94;
|
|
37
|
+
$color-electric-purple-800: #3B0862;
|
|
38
|
+
$color-electric-purple-900: #1D0431;
|
|
39
|
+
|
|
40
|
+
$color-lavender-100: #FBFAFF;
|
|
41
|
+
$color-lavender-200: #EFECFF;
|
|
42
|
+
$color-lavender-300: #DFDBF7;
|
|
43
|
+
$color-lavender-400: #CCC6F0;
|
|
44
|
+
$color-lavender-500: #B9B1E7;
|
|
45
|
+
$color-lavender-600: #948EB9;
|
|
46
|
+
$color-lavender-700: #6F6A8B;
|
|
47
|
+
$color-lavender-800: #4A475C;
|
|
48
|
+
$color-lavender-900: #25232E;
|
|
49
|
+
|
|
50
|
+
$color-electric-green-100: #F4FEF0;
|
|
51
|
+
$color-electric-green-200: #E9FEE1;
|
|
52
|
+
$color-electric-green-300: #DFFDD3;
|
|
53
|
+
$color-electric-green-400: #D4FDC4;
|
|
54
|
+
$color-electric-green-500: #C9FCB5;
|
|
55
|
+
$color-electric-green-600: #A1CA91;
|
|
56
|
+
$color-electric-green-700: #79976D;
|
|
57
|
+
$color-electric-green-800: #506548;
|
|
58
|
+
$color-electric-green-900: #283224;
|
|
59
|
+
|
|
60
|
+
$color-sea-foam-green-100: #E4F4E9;
|
|
61
|
+
$color-sea-foam-green-200: #CAE9D2;
|
|
62
|
+
$color-sea-foam-green-300: #AFDFBC;
|
|
63
|
+
$color-sea-foam-green-400: #95D4A5;
|
|
64
|
+
$color-sea-foam-green-500: #7AC98F;
|
|
65
|
+
$color-sea-foam-green-600: #62A172;
|
|
66
|
+
$color-sea-foam-green-700: #497956;
|
|
67
|
+
$color-sea-foam-green-800: #315039;
|
|
68
|
+
$color-sea-foam-green-900: #18281D;
|
|
69
|
+
|
|
70
|
+
$color-teal-100: #CCEFEE;
|
|
71
|
+
$color-teal-200: #99DEDD;
|
|
72
|
+
$color-teal-300: #66CECB;
|
|
73
|
+
$color-teal-400: #33BDBA;
|
|
74
|
+
$color-teal-500: #00ADA9;
|
|
75
|
+
$color-teal-600: #008A87;
|
|
76
|
+
$color-teal-700: #006865;
|
|
77
|
+
$color-teal-800: #004544;
|
|
78
|
+
$color-teal-900: #002322;
|
|
79
|
+
|
|
80
|
+
$color-royal-blue-100: #CDDCEB;
|
|
81
|
+
$color-royal-blue-200: #9CB9D8;
|
|
82
|
+
$color-royal-blue-300: #6A96C4;
|
|
83
|
+
$color-royal-blue-400: #3973B1;
|
|
84
|
+
$color-royal-blue-500: #07509D;
|
|
85
|
+
$color-royal-blue-600: #06407E;
|
|
86
|
+
$color-royal-blue-700: #04305E;
|
|
87
|
+
$color-royal-blue-800: #03203F;
|
|
88
|
+
$color-royal-blue-900: #01101F;
|
|
89
|
+
|
|
90
|
+
$color-red-100: #F6D5D7;
|
|
91
|
+
$color-red-200: #EDACAF;
|
|
92
|
+
$color-red-300: #E58287;
|
|
93
|
+
$color-red-400: #DC595F;
|
|
94
|
+
$color-red-500: #D32F37;
|
|
95
|
+
$color-red-600: #A9262C;
|
|
96
|
+
$color-red-700: #7F1C21;
|
|
97
|
+
$color-red-800: #541316;
|
|
98
|
+
$color-red-900: #2A090B;
|
|
99
|
+
|
|
100
|
+
$color-orange-100: #FCE9D1;
|
|
101
|
+
$color-orange-200: #F8D3A3;
|
|
102
|
+
$color-orange-300: #F5BD76;
|
|
103
|
+
$color-orange-400: #F1A748;
|
|
104
|
+
$color-orange-500: #EE911A;
|
|
105
|
+
$color-orange-600: #BE7415;
|
|
106
|
+
$color-orange-700: #8F5710;
|
|
107
|
+
$color-orange-800: #5F3A0A;
|
|
108
|
+
$color-orange-900: #301D05;
|
|
109
|
+
|
|
110
|
+
$color-salmon-100: #FDE2DE;
|
|
111
|
+
$color-salmon-200: #FAC5BD;
|
|
112
|
+
$color-salmon-300: #F8A79D;
|
|
113
|
+
$color-salmon-400: #F58A7C;
|
|
114
|
+
$color-salmon-500: #F36D5B;
|
|
115
|
+
$color-salmon-600: #C25749;
|
|
116
|
+
$color-salmon-700: #924137;
|
|
117
|
+
$color-salmon-800: #612C24;
|
|
118
|
+
$color-salmon-900: #311612;
|
|
119
|
+
|
|
120
|
+
$color-yellow-100: #FFF7D4;
|
|
121
|
+
$color-yellow-200: #FFEFA9;
|
|
122
|
+
$color-yellow-300: #FFE87D;
|
|
123
|
+
$color-yellow-400: #FFE052;
|
|
124
|
+
$color-yellow-500: #FFD827;
|
|
125
|
+
$color-yellow-600: #CCAD1F;
|
|
126
|
+
$color-yellow-700: #998217;
|
|
127
|
+
$color-yellow-800: #665610;
|
|
128
|
+
$color-yellow-900: #332B08;
|
|
129
|
+
|
|
130
|
+
$color-grey-100: #F1F1F1;
|
|
131
|
+
$color-grey-200: #F9F9F9;
|
|
132
|
+
$color-grey-300: #EEEEEE;
|
|
133
|
+
$color-grey-400: #C6C6C6;
|
|
134
|
+
$color-grey-500: #B8B8B8;
|
|
135
|
+
$color-grey-600: #939393;
|
|
136
|
+
$color-grey-700: #6E6E6E;
|
|
137
|
+
$color-grey-800: #4A4A4A;
|
|
138
|
+
$color-grey-900: #252525;
|
|
139
|
+
|
|
140
|
+
// Default Accessible Colors
|
|
141
|
+
$color-a11y-blue: #3678BA;
|
|
142
|
+
$color-a11y-blue-hover: #2B6094;
|
|
143
|
+
$color-a11y-dark-blue: #1F3970;
|
|
144
|
+
$color-a11y-light-blue: #EFF4F9;
|
|
145
|
+
|
|
146
|
+
$color-a11y-red: #D0391B;
|
|
147
|
+
$color-a11y-light-red: #FCF6F3;
|
|
148
|
+
|
|
149
|
+
$color-a11y-default-button: #CF3E00;
|
|
150
|
+
$color-a11y-default-button-hover: #7b2500;
|
|
151
|
+
|
|
152
|
+
// Best Company Brand Colors
|
|
153
|
+
$color-bc-green: #18A571;
|
|
154
|
+
$color-bc-black: #272B30;
|
|
155
|
+
$color-bc-gray: #5C5D5F;
|
|
156
|
+
$color-bc-light-gray: #F8F8FA;
|
|
157
|
+
$color-bc-gold: #FFC502;
|
|
158
|
+
$color-bc-blue: #234978;
|
|
159
|
+
$color-bc-light-blue: #EFF5FB;
|
|
160
|
+
$color-bc-medium-blue: #A5BDD4;
|
|
161
|
+
$color-bc-bright-blue: #4A90E2;
|
|
162
|
+
$color-bc-dark-blue: #18365B;
|
|
163
|
+
$color-bc-orange: #FB8424;
|
|
164
|
+
|
|
165
|
+
$color-bc-green-hover: #02b985;
|
|
166
|
+
$color-bc-blue-hover: #496486;
|
|
167
|
+
$color-bc-orange-hover: #E86A04;
|
|
168
|
+
|
|
169
|
+
// "Old" Modernize Brand Colors
|
|
10
170
|
$color-red1: #FAE2DD;
|
|
11
171
|
$color-red2: #F6C6BC;
|
|
12
172
|
$color-red3: #F1A99A;
|
|
@@ -17,7 +177,6 @@ $color-red7: #8B4334;
|
|
|
17
177
|
$color-red8: #5D2D23;
|
|
18
178
|
$color-red9: #2E1611;
|
|
19
179
|
|
|
20
|
-
// Orange
|
|
21
180
|
$color-orange1: #FDE9D1;
|
|
22
181
|
$color-orange2: #FBD3A4;
|
|
23
182
|
$color-orange3: #F9BE77;
|
|
@@ -28,7 +187,6 @@ $color-orange7: #935811;
|
|
|
28
187
|
$color-orange8: #623A0B;
|
|
29
188
|
$color-orange9: #311D05;
|
|
30
189
|
|
|
31
|
-
// Yellow
|
|
32
190
|
$color-yellow1: #FEF2DB;
|
|
33
191
|
$color-yellow2: #FEE6B7;
|
|
34
192
|
$color-yellow3: #FED993;
|
|
@@ -39,7 +197,6 @@ $color-yellow7: #98732D;
|
|
|
39
197
|
$color-yellow8: #654D1E;
|
|
40
198
|
$color-yellow9: #32260F;
|
|
41
199
|
|
|
42
|
-
// Green
|
|
43
200
|
$color-green1: #ECF1DD;
|
|
44
201
|
$color-green2: #D9E4BB;
|
|
45
202
|
$color-green3: #C6D69A;
|
|
@@ -50,7 +207,6 @@ $color-green7: #607034;
|
|
|
50
207
|
$color-green8: #404B22;
|
|
51
208
|
$color-green9: #202511;
|
|
52
209
|
|
|
53
|
-
// Blue
|
|
54
210
|
$color-blue1: #E2F0F2;
|
|
55
211
|
$color-blue2: #C5E2E6;
|
|
56
212
|
$color-blue3: #A8D3DA;
|
|
@@ -61,7 +217,6 @@ $color-blue7: #426D74;
|
|
|
61
217
|
$color-blue8: #2C494D;
|
|
62
218
|
$color-blue9: #162426;
|
|
63
219
|
|
|
64
|
-
// Purple
|
|
65
220
|
$color-purple1: #EEEDF7;
|
|
66
221
|
$color-purple2: #DDDBEF;
|
|
67
222
|
$color-purple3: #CCCAE7;
|
|
@@ -72,7 +227,6 @@ $color-purple7: #666481;
|
|
|
72
227
|
$color-purple8: #444256;
|
|
73
228
|
$color-purple9: #22212B;
|
|
74
229
|
|
|
75
|
-
// Charcoal
|
|
76
230
|
$color-charcoal1: #DCDCDC;
|
|
77
231
|
$color-charcoal2: #BAB9BA;
|
|
78
232
|
$color-charcoal3: #989797;
|
|
@@ -83,7 +237,6 @@ $color-charcoal7: #323131;
|
|
|
83
237
|
$color-charcoal8: #212021;
|
|
84
238
|
$color-charcoal9: #101010;
|
|
85
239
|
|
|
86
|
-
// Ivory
|
|
87
240
|
$color-ivory1: #FDFDFC;
|
|
88
241
|
$color-ivory2: #FBFBF9;
|
|
89
242
|
$color-ivory3: #F9F9F6;
|
|
@@ -93,15 +246,3 @@ $color-ivory6: #C4C4C0;
|
|
|
93
246
|
$color-ivory7: #939390;
|
|
94
247
|
$color-ivory8: #626260;
|
|
95
248
|
$color-ivory9: #313130;
|
|
96
|
-
|
|
97
|
-
// Accessible Colors
|
|
98
|
-
$color-a11y-blue: #3678BA;
|
|
99
|
-
$color-a11y-blue-hover: #2B6094;
|
|
100
|
-
$color-a11y-dark-blue: #1F3970;
|
|
101
|
-
$color-a11y-light-blue: #EFF4F9;
|
|
102
|
-
|
|
103
|
-
$color-a11y-red: #D0391B;
|
|
104
|
-
$color-a11y-light-red: #FCF6F3;
|
|
105
|
-
|
|
106
|
-
$color-a11y-default-button: #CF3E00;
|
|
107
|
-
$color-a11y-default-button-hover: #7b2500;
|
|
@@ -15,35 +15,47 @@
|
|
|
15
15
|
@mixin h1($font-family, $font-weight: 400) {
|
|
16
16
|
@include font($font-family, $font-weight);
|
|
17
17
|
@include font-size(1.5rem, 2.625rem);
|
|
18
|
-
|
|
18
|
+
& {
|
|
19
|
+
line-height: 1.25;
|
|
20
|
+
}
|
|
19
21
|
}
|
|
20
22
|
|
|
21
23
|
@mixin h2($font-family, $font-weight: 400) {
|
|
22
24
|
@include font($font-family, $font-weight);
|
|
23
|
-
@include font-size(
|
|
24
|
-
|
|
25
|
+
@include font-size($h2-font-size, $h2-font-size-desktop);
|
|
26
|
+
& {
|
|
27
|
+
line-height: $h2-line-height;
|
|
28
|
+
}
|
|
25
29
|
}
|
|
26
30
|
|
|
27
31
|
@mixin body($font-family, $font-weight: 400) {
|
|
28
32
|
@include font($font-family, $font-weight);
|
|
29
|
-
@include font-size(
|
|
30
|
-
|
|
33
|
+
@include font-size($body-font-size, $body-font-size-desktop);
|
|
34
|
+
& {
|
|
35
|
+
line-height: $body-line-height;
|
|
36
|
+
}
|
|
31
37
|
}
|
|
32
38
|
|
|
33
39
|
@mixin disclaimer($font-family, $font-weight: 400) {
|
|
34
40
|
@include font($font-family, $font-weight);
|
|
35
|
-
@include font-size(
|
|
36
|
-
|
|
41
|
+
@include font-size($disclaimer-font-size);
|
|
42
|
+
& {
|
|
43
|
+
line-height: $disclaimer-line-height;
|
|
44
|
+
}
|
|
37
45
|
}
|
|
38
46
|
|
|
39
47
|
@mixin button($font-family, $font-weight: 700) {
|
|
40
48
|
@include font($font-family, $font-weight);
|
|
41
49
|
@include font-size(1.25rem);
|
|
42
|
-
|
|
50
|
+
& {
|
|
51
|
+
line-height: 1.2;
|
|
52
|
+
}
|
|
43
53
|
}
|
|
44
54
|
|
|
45
55
|
@mixin form-element($font-family, $font-weight: 400) {
|
|
46
56
|
@include font($font-family, $font-weight);
|
|
47
|
-
@include font-size(
|
|
48
|
-
|
|
57
|
+
@include font-size($body-font-size, $body-font-size-desktop);
|
|
58
|
+
& {
|
|
59
|
+
line-height: 1.25;
|
|
60
|
+
}
|
|
49
61
|
}
|