material_components_web-sass 0.17.0 → 0.18.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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +9 -0
- data/lib/material_components_web/sass/version.rb +1 -1
- data/vendor/assets/javascripts/material-components-web.js +1207 -1035
- data/vendor/assets/stylesheets/@material/button/mdc-button.scss +91 -110
- data/vendor/assets/stylesheets/@material/dialog/mdc-dialog.scss +2 -2
- data/vendor/assets/stylesheets/@material/drawer/permanent/mdc-permanent-drawer.scss +1 -1
- data/vendor/assets/stylesheets/@material/drawer/persistent/mdc-persistent-drawer.scss +1 -1
- data/vendor/assets/stylesheets/@material/drawer/slidable/_mixins.scss +15 -15
- data/vendor/assets/stylesheets/@material/drawer/slidable/_variables.scss +15 -15
- data/vendor/assets/stylesheets/@material/fab/mdc-fab.scss +2 -2
- data/vendor/assets/stylesheets/@material/grid-list/mdc-grid-list.scss +3 -0
- data/vendor/assets/stylesheets/@material/icon-toggle/mdc-icon-toggle.scss +3 -3
- data/vendor/assets/stylesheets/@material/layout-grid/_variables.scss +1 -1
- data/vendor/assets/stylesheets/@material/layout-grid/mdc-layout-grid.scss +3 -3
- data/vendor/assets/stylesheets/@material/linear-progress/mdc-linear-progress.scss +1 -1
- data/vendor/assets/stylesheets/@material/ripple/mdc-ripple.scss +2 -2
- data/vendor/assets/stylesheets/@material/snackbar/mdc-snackbar.scss +1 -1
- data/vendor/assets/stylesheets/@material/tabs/tab-bar/mdc-tab-bar.scss +3 -3
- data/vendor/assets/stylesheets/@material/textfield/mdc-textfield.scss +1 -1
- data/vendor/assets/stylesheets/@material/theme/_color_palette.scss +290 -0
- data/vendor/assets/stylesheets/@material/theme/_constants.scss +10 -12
- data/vendor/assets/stylesheets/@material/theme/_functions.scss +6 -12
- data/vendor/assets/stylesheets/@material/theme/_mixins.scss +36 -40
- data/vendor/assets/stylesheets/@material/theme/_variables.scss +79 -17
- data/vendor/assets/stylesheets/@material/theme/mdc-theme.scss +4 -4
- data/vendor/assets/stylesheets/@material/toolbar/mdc-toolbar.scss +2 -2
- metadata +3 -2
@@ -132,7 +132,7 @@
|
|
132
132
|
/* stylelint-enable plugin/selector-bem-pattern */
|
133
133
|
|
134
134
|
&__action-button {
|
135
|
-
@include mdc-theme-prop(color,
|
135
|
+
@include mdc-theme-prop(color, secondary);
|
136
136
|
|
137
137
|
@include mdc-theme-dark(".mdc-snackbar") {
|
138
138
|
@include mdc-theme-prop(color, primary);
|
@@ -97,15 +97,15 @@
|
|
97
97
|
.mdc-tab-bar--indicator-accent,
|
98
98
|
.mdc-toolbar .mdc-tab-bar--indicator-accent {
|
99
99
|
.mdc-tab-bar__indicator {
|
100
|
-
@include mdc-theme-prop(background-color,
|
100
|
+
@include mdc-theme-prop(background-color, secondary);
|
101
101
|
|
102
102
|
@include mdc-theme-dark(".mdc-tab-bar") {
|
103
|
-
@include mdc-theme-prop(background-color,
|
103
|
+
@include mdc-theme-prop(background-color, secondary);
|
104
104
|
};
|
105
105
|
}
|
106
106
|
|
107
107
|
&.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
|
108
|
-
@include mdc-theme-prop(background-color,
|
108
|
+
@include mdc-theme-prop(background-color, secondary);
|
109
109
|
}
|
110
110
|
}
|
111
111
|
// postcss-bem-linter: end
|
@@ -433,7 +433,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
|
|
433
433
|
// stylelint-disable plugin/selector-bem-pattern
|
434
434
|
.mdc-textfield__input,
|
435
435
|
.mdc-textfield__label,
|
436
|
-
|
436
|
+
+ .mdc-textfield-helptext {
|
437
437
|
@include mdc-theme-prop(color, text-disabled-on-light);
|
438
438
|
}
|
439
439
|
// stylelint-enable plugin/selector-bem-pattern
|
@@ -0,0 +1,290 @@
|
|
1
|
+
//
|
2
|
+
// Copyright 2017 Google Inc. All Rights Reserved.
|
3
|
+
//
|
4
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
+
// you may not use this file except in compliance with the License.
|
6
|
+
// You may obtain a copy of the License at
|
7
|
+
//
|
8
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
9
|
+
//
|
10
|
+
// Unless required by applicable law or agreed to in writing, software
|
11
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
+
// See the License for the specific language governing permissions and
|
14
|
+
// limitations under the License.
|
15
|
+
//
|
16
|
+
|
17
|
+
// stylelint-disable scss/dollar-variable-pattern, color-hex-length
|
18
|
+
|
19
|
+
$material-color-red-50: #ffebee;
|
20
|
+
$material-color-red-100: #ffcdd2;
|
21
|
+
$material-color-red-200: #ef9a9a;
|
22
|
+
$material-color-red-300: #e57373;
|
23
|
+
$material-color-red-400: #ef5350;
|
24
|
+
$material-color-red-500: #f44336;
|
25
|
+
$material-color-red-600: #e53935;
|
26
|
+
$material-color-red-700: #d32f2f;
|
27
|
+
$material-color-red-800: #c62828;
|
28
|
+
$material-color-red-900: #b71c1c;
|
29
|
+
$material-color-red-a100: #ff8a80;
|
30
|
+
$material-color-red-a200: #ff5252;
|
31
|
+
$material-color-red-a400: #ff1744;
|
32
|
+
$material-color-red-a700: #d50000;
|
33
|
+
|
34
|
+
$material-color-pink-50: #fce4ec;
|
35
|
+
$material-color-pink-100: #f8bbd0;
|
36
|
+
$material-color-pink-200: #f48fb1;
|
37
|
+
$material-color-pink-300: #f06292;
|
38
|
+
$material-color-pink-400: #ec407a;
|
39
|
+
$material-color-pink-500: #e91e63;
|
40
|
+
$material-color-pink-600: #d81b60;
|
41
|
+
$material-color-pink-700: #c2185b;
|
42
|
+
$material-color-pink-800: #ad1457;
|
43
|
+
$material-color-pink-900: #880e4f;
|
44
|
+
$material-color-pink-a100: #ff80ab;
|
45
|
+
$material-color-pink-a200: #ff4081;
|
46
|
+
$material-color-pink-a400: #f50057;
|
47
|
+
$material-color-pink-a700: #c51162;
|
48
|
+
|
49
|
+
$material-color-purple-50: #f3e5f5;
|
50
|
+
$material-color-purple-100: #e1bee7;
|
51
|
+
$material-color-purple-200: #ce93d8;
|
52
|
+
$material-color-purple-300: #ba68c8;
|
53
|
+
$material-color-purple-400: #ab47bc;
|
54
|
+
$material-color-purple-500: #9c27b0;
|
55
|
+
$material-color-purple-600: #8e24aa;
|
56
|
+
$material-color-purple-700: #7b1fa2;
|
57
|
+
$material-color-purple-800: #6a1b9a;
|
58
|
+
$material-color-purple-900: #4a148c;
|
59
|
+
$material-color-purple-a100: #ea80fc;
|
60
|
+
$material-color-purple-a200: #e040fb;
|
61
|
+
$material-color-purple-a400: #d500f9;
|
62
|
+
$material-color-purple-a700: #aa00ff;
|
63
|
+
|
64
|
+
$material-color-deep-purple-50: #ede7f6;
|
65
|
+
$material-color-deep-purple-100: #d1c4e9;
|
66
|
+
$material-color-deep-purple-200: #b39ddb;
|
67
|
+
$material-color-deep-purple-300: #9575cd;
|
68
|
+
$material-color-deep-purple-400: #7e57c2;
|
69
|
+
$material-color-deep-purple-500: #673ab7;
|
70
|
+
$material-color-deep-purple-600: #5e35b1;
|
71
|
+
$material-color-deep-purple-700: #512da8;
|
72
|
+
$material-color-deep-purple-800: #4527a0;
|
73
|
+
$material-color-deep-purple-900: #311b92;
|
74
|
+
$material-color-deep-purple-a100: #b388ff;
|
75
|
+
$material-color-deep-purple-a200: #7c4dff;
|
76
|
+
$material-color-deep-purple-a400: #651fff;
|
77
|
+
$material-color-deep-purple-a700: #6200ea;
|
78
|
+
|
79
|
+
$material-color-indigo-50: #e8eaf6;
|
80
|
+
$material-color-indigo-100: #c5cae9;
|
81
|
+
$material-color-indigo-200: #9fa8da;
|
82
|
+
$material-color-indigo-300: #7986cb;
|
83
|
+
$material-color-indigo-400: #5c6bc0;
|
84
|
+
$material-color-indigo-500: #3f51b5;
|
85
|
+
$material-color-indigo-600: #3949ab;
|
86
|
+
$material-color-indigo-700: #303f9f;
|
87
|
+
$material-color-indigo-800: #283593;
|
88
|
+
$material-color-indigo-900: #1a237e;
|
89
|
+
$material-color-indigo-a100: #8c9eff;
|
90
|
+
$material-color-indigo-a200: #536dfe;
|
91
|
+
$material-color-indigo-a400: #3d5afe;
|
92
|
+
$material-color-indigo-a700: #304ffe;
|
93
|
+
|
94
|
+
$material-color-blue-50: #e3f2fd;
|
95
|
+
$material-color-blue-100: #bbdefb;
|
96
|
+
$material-color-blue-200: #90caf9;
|
97
|
+
$material-color-blue-300: #64b5f6;
|
98
|
+
$material-color-blue-400: #42a5f5;
|
99
|
+
$material-color-blue-500: #2196f3;
|
100
|
+
$material-color-blue-600: #1e88e5;
|
101
|
+
$material-color-blue-700: #1976d2;
|
102
|
+
$material-color-blue-800: #1565c0;
|
103
|
+
$material-color-blue-900: #0d47a1;
|
104
|
+
$material-color-blue-a100: #82b1ff;
|
105
|
+
$material-color-blue-a200: #448aff;
|
106
|
+
$material-color-blue-a400: #2979ff;
|
107
|
+
$material-color-blue-a700: #2962ff;
|
108
|
+
|
109
|
+
$material-color-light-blue-50: #e1f5fe;
|
110
|
+
$material-color-light-blue-100: #b3e5fc;
|
111
|
+
$material-color-light-blue-200: #81d4fa;
|
112
|
+
$material-color-light-blue-300: #4fc3f7;
|
113
|
+
$material-color-light-blue-400: #29b6f6;
|
114
|
+
$material-color-light-blue-500: #03a9f4;
|
115
|
+
$material-color-light-blue-600: #039be5;
|
116
|
+
$material-color-light-blue-700: #0288d1;
|
117
|
+
$material-color-light-blue-800: #0277bd;
|
118
|
+
$material-color-light-blue-900: #01579b;
|
119
|
+
$material-color-light-blue-a100: #80d8ff;
|
120
|
+
$material-color-light-blue-a200: #40c4ff;
|
121
|
+
$material-color-light-blue-a400: #00b0ff;
|
122
|
+
$material-color-light-blue-a700: #0091ea;
|
123
|
+
|
124
|
+
$material-color-cyan-50: #e0f7fa;
|
125
|
+
$material-color-cyan-100: #b2ebf2;
|
126
|
+
$material-color-cyan-200: #80deea;
|
127
|
+
$material-color-cyan-300: #4dd0e1;
|
128
|
+
$material-color-cyan-400: #26c6da;
|
129
|
+
$material-color-cyan-500: #00bcd4;
|
130
|
+
$material-color-cyan-600: #00acc1;
|
131
|
+
$material-color-cyan-700: #0097a7;
|
132
|
+
$material-color-cyan-800: #00838f;
|
133
|
+
$material-color-cyan-900: #006064;
|
134
|
+
$material-color-cyan-a100: #84ffff;
|
135
|
+
$material-color-cyan-a200: #18ffff;
|
136
|
+
$material-color-cyan-a400: #00e5ff;
|
137
|
+
$material-color-cyan-a700: #00b8d4;
|
138
|
+
|
139
|
+
$material-color-teal-50: #e0f2f1;
|
140
|
+
$material-color-teal-100: #b2dfdb;
|
141
|
+
$material-color-teal-200: #80cbc4;
|
142
|
+
$material-color-teal-300: #4db6ac;
|
143
|
+
$material-color-teal-400: #26a69a;
|
144
|
+
$material-color-teal-500: #009688;
|
145
|
+
$material-color-teal-600: #00897b;
|
146
|
+
$material-color-teal-700: #00796b;
|
147
|
+
$material-color-teal-800: #00695c;
|
148
|
+
$material-color-teal-900: #004d40;
|
149
|
+
$material-color-teal-a100: #a7ffeb;
|
150
|
+
$material-color-teal-a200: #64ffda;
|
151
|
+
$material-color-teal-a400: #1de9b6;
|
152
|
+
$material-color-teal-a700: #00bfa5;
|
153
|
+
|
154
|
+
$material-color-green-50: #e8f5e9;
|
155
|
+
$material-color-green-100: #c8e6c9;
|
156
|
+
$material-color-green-200: #a5d6a7;
|
157
|
+
$material-color-green-300: #81c784;
|
158
|
+
$material-color-green-400: #66bb6a;
|
159
|
+
$material-color-green-500: #4caf50;
|
160
|
+
$material-color-green-600: #43a047;
|
161
|
+
$material-color-green-700: #388e3c;
|
162
|
+
$material-color-green-800: #2e7d32;
|
163
|
+
$material-color-green-900: #1b5e20;
|
164
|
+
$material-color-green-a100: #b9f6ca;
|
165
|
+
$material-color-green-a200: #69f0ae;
|
166
|
+
$material-color-green-a400: #00e676;
|
167
|
+
$material-color-green-a700: #00c853;
|
168
|
+
|
169
|
+
$material-color-light-green-50: #f1f8e9;
|
170
|
+
$material-color-light-green-100: #dcedc8;
|
171
|
+
$material-color-light-green-200: #c5e1a5;
|
172
|
+
$material-color-light-green-300: #aed581;
|
173
|
+
$material-color-light-green-400: #9ccc65;
|
174
|
+
$material-color-light-green-500: #8bc34a;
|
175
|
+
$material-color-light-green-600: #7cb342;
|
176
|
+
$material-color-light-green-700: #689f38;
|
177
|
+
$material-color-light-green-800: #558b2f;
|
178
|
+
$material-color-light-green-900: #33691e;
|
179
|
+
$material-color-light-green-a100: #ccff90;
|
180
|
+
$material-color-light-green-a200: #b2ff59;
|
181
|
+
$material-color-light-green-a400: #76ff03;
|
182
|
+
$material-color-light-green-a700: #64dd17;
|
183
|
+
|
184
|
+
$material-color-lime-50: #f9fbe7;
|
185
|
+
$material-color-lime-100: #f0f4c3;
|
186
|
+
$material-color-lime-200: #e6ee9c;
|
187
|
+
$material-color-lime-300: #dce775;
|
188
|
+
$material-color-lime-400: #d4e157;
|
189
|
+
$material-color-lime-500: #cddc39;
|
190
|
+
$material-color-lime-600: #c0ca33;
|
191
|
+
$material-color-lime-700: #afb42b;
|
192
|
+
$material-color-lime-800: #9e9d24;
|
193
|
+
$material-color-lime-900: #827717;
|
194
|
+
$material-color-lime-a100: #f4ff81;
|
195
|
+
$material-color-lime-a200: #eeff41;
|
196
|
+
$material-color-lime-a400: #c6ff00;
|
197
|
+
$material-color-lime-a700: #aeea00;
|
198
|
+
|
199
|
+
$material-color-yellow-50: #fffde7;
|
200
|
+
$material-color-yellow-100: #fff9c4;
|
201
|
+
$material-color-yellow-200: #fff59d;
|
202
|
+
$material-color-yellow-300: #fff176;
|
203
|
+
$material-color-yellow-400: #ffee58;
|
204
|
+
$material-color-yellow-500: #ffeb3b;
|
205
|
+
$material-color-yellow-600: #fdd835;
|
206
|
+
$material-color-yellow-700: #fbc02d;
|
207
|
+
$material-color-yellow-800: #f9a825;
|
208
|
+
$material-color-yellow-900: #f57f17;
|
209
|
+
$material-color-yellow-a100: #ffff8d;
|
210
|
+
$material-color-yellow-a200: #ffff00;
|
211
|
+
$material-color-yellow-a400: #ffea00;
|
212
|
+
$material-color-yellow-a700: #ffd600;
|
213
|
+
|
214
|
+
$material-color-amber-50: #fff8e1;
|
215
|
+
$material-color-amber-100: #ffecb3;
|
216
|
+
$material-color-amber-200: #ffe082;
|
217
|
+
$material-color-amber-300: #ffd54f;
|
218
|
+
$material-color-amber-400: #ffca28;
|
219
|
+
$material-color-amber-500: #ffc107;
|
220
|
+
$material-color-amber-600: #ffb300;
|
221
|
+
$material-color-amber-700: #ffa000;
|
222
|
+
$material-color-amber-800: #ff8f00;
|
223
|
+
$material-color-amber-900: #ff6f00;
|
224
|
+
$material-color-amber-a100: #ffe57f;
|
225
|
+
$material-color-amber-a200: #ffd740;
|
226
|
+
$material-color-amber-a400: #ffc400;
|
227
|
+
$material-color-amber-a700: #ffab00;
|
228
|
+
|
229
|
+
$material-color-orange-50: #fff3e0;
|
230
|
+
$material-color-orange-100: #ffe0b2;
|
231
|
+
$material-color-orange-200: #ffcc80;
|
232
|
+
$material-color-orange-300: #ffb74d;
|
233
|
+
$material-color-orange-400: #ffa726;
|
234
|
+
$material-color-orange-500: #ff9800;
|
235
|
+
$material-color-orange-600: #fb8c00;
|
236
|
+
$material-color-orange-700: #f57c00;
|
237
|
+
$material-color-orange-800: #ef6c00;
|
238
|
+
$material-color-orange-900: #e65100;
|
239
|
+
$material-color-orange-a100: #ffd180;
|
240
|
+
$material-color-orange-a200: #ffab40;
|
241
|
+
$material-color-orange-a400: #ff9100;
|
242
|
+
$material-color-orange-a700: #ff6d00;
|
243
|
+
|
244
|
+
$material-color-deep-orange-50: #fbe9e7;
|
245
|
+
$material-color-deep-orange-100: #ffccbc;
|
246
|
+
$material-color-deep-orange-200: #ffab91;
|
247
|
+
$material-color-deep-orange-300: #ff8a65;
|
248
|
+
$material-color-deep-orange-400: #ff7043;
|
249
|
+
$material-color-deep-orange-500: #ff5722;
|
250
|
+
$material-color-deep-orange-600: #f4511e;
|
251
|
+
$material-color-deep-orange-700: #e64a19;
|
252
|
+
$material-color-deep-orange-800: #d84315;
|
253
|
+
$material-color-deep-orange-900: #bf360c;
|
254
|
+
$material-color-deep-orange-a100: #ff9e80;
|
255
|
+
$material-color-deep-orange-a200: #ff6e40;
|
256
|
+
$material-color-deep-orange-a400: #ff3d00;
|
257
|
+
$material-color-deep-orange-a700: #dd2c00;
|
258
|
+
|
259
|
+
$material-color-brown-50: #efebe9;
|
260
|
+
$material-color-brown-100: #d7ccc8;
|
261
|
+
$material-color-brown-200: #bcaaa4;
|
262
|
+
$material-color-brown-300: #a1887f;
|
263
|
+
$material-color-brown-400: #8d6e63;
|
264
|
+
$material-color-brown-500: #795548;
|
265
|
+
$material-color-brown-600: #6d4c41;
|
266
|
+
$material-color-brown-700: #5d4037;
|
267
|
+
$material-color-brown-800: #4e342e;
|
268
|
+
$material-color-brown-900: #3e2723;
|
269
|
+
|
270
|
+
$material-color-grey-50: #fafafa;
|
271
|
+
$material-color-grey-100: #f5f5f5;
|
272
|
+
$material-color-grey-200: #eeeeee;
|
273
|
+
$material-color-grey-300: #e0e0e0;
|
274
|
+
$material-color-grey-400: #bdbdbd;
|
275
|
+
$material-color-grey-500: #9e9e9e;
|
276
|
+
$material-color-grey-600: #757575;
|
277
|
+
$material-color-grey-700: #616161;
|
278
|
+
$material-color-grey-800: #424242;
|
279
|
+
$material-color-grey-900: #212121;
|
280
|
+
|
281
|
+
$material-color-blue-grey-50: #eceff1;
|
282
|
+
$material-color-blue-grey-100: #cfd8dc;
|
283
|
+
$material-color-blue-grey-200: #b0bec5;
|
284
|
+
$material-color-blue-grey-300: #90a4ae;
|
285
|
+
$material-color-blue-grey-400: #78909c;
|
286
|
+
$material-color-blue-grey-500: #607d8b;
|
287
|
+
$material-color-blue-grey-600: #546e7a;
|
288
|
+
$material-color-blue-grey-700: #455a64;
|
289
|
+
$material-color-blue-grey-800: #37474f;
|
290
|
+
$material-color-blue-grey-900: #263238;
|
@@ -14,18 +14,16 @@
|
|
14
14
|
// limitations under the License.
|
15
15
|
//
|
16
16
|
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
This lookup table is needed since there is no `pow` in SASS.
|
28
|
-
*/
|
17
|
+
// Precomputed linear color channel values, for use in contrast calculations.
|
18
|
+
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
19
|
+
//
|
20
|
+
// Algorithm, for c in 0 to 255:
|
21
|
+
// f(c) {
|
22
|
+
// c = c / 255;
|
23
|
+
// return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
24
|
+
// }
|
25
|
+
//
|
26
|
+
// This lookup table is needed since there is no `pow` in SASS.
|
29
27
|
$mdc-theme-linear-channel-values:
|
30
28
|
0
|
31
29
|
.0003035269835488375
|
@@ -16,10 +16,8 @@
|
|
16
16
|
|
17
17
|
@import "./constants";
|
18
18
|
|
19
|
-
|
20
|
-
|
21
|
-
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
22
|
-
*/
|
19
|
+
// Calculate the luminance for a color.
|
20
|
+
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
23
21
|
@function mdc-theme-luminance($color) {
|
24
22
|
$red: nth($mdc-theme-linear-channel-values, red($color) + 1);
|
25
23
|
$green: nth($mdc-theme-linear-channel-values, green($color) + 1);
|
@@ -28,10 +26,8 @@
|
|
28
26
|
@return .2126 * $red + .7152 * $green + .0722 * $blue;
|
29
27
|
}
|
30
28
|
|
31
|
-
|
32
|
-
|
33
|
-
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
34
|
-
*/
|
29
|
+
// Calculate the contrast ratio between two colors.
|
30
|
+
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
35
31
|
@function mdc-theme-contrast($back, $front) {
|
36
32
|
$backLum: mdc-theme-luminance($back) + .05;
|
37
33
|
$foreLum: mdc-theme-luminance($front) + .05;
|
@@ -39,10 +35,8 @@
|
|
39
35
|
@return max($backLum, $foreLum) / min($backLum, $foreLum);
|
40
36
|
}
|
41
37
|
|
42
|
-
|
43
|
-
|
44
|
-
* Returns "dark" for dark text and "light" for light text.
|
45
|
-
*/
|
38
|
+
// Determine whether to use dark or light text on top of given color.
|
39
|
+
// Returns "dark" for dark text and "light" for light text.
|
46
40
|
@function mdc-theme-light-or-dark($color) {
|
47
41
|
$minimumContrast: 3.1;
|
48
42
|
|
@@ -16,14 +16,12 @@
|
|
16
16
|
|
17
17
|
@import "./variables";
|
18
18
|
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
* $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
|
23
|
-
*/
|
19
|
+
// Applies the correct theme color style to the specified property.
|
20
|
+
// $property is typically color or background-color, but can be any CSS property that accepts color values.
|
21
|
+
// $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
|
24
22
|
@mixin mdc-theme-prop($property, $style, $important: false) {
|
25
23
|
@if not map-has-key($mdc-theme-property-values, $style) {
|
26
|
-
@error "Invalid style
|
24
|
+
@error "Invalid style: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}";
|
27
25
|
}
|
28
26
|
|
29
27
|
@if $important {
|
@@ -39,40 +37,38 @@
|
|
39
37
|
}
|
40
38
|
}
|
41
39
|
|
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
|
-
*/
|
40
|
+
// Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
|
41
|
+
// Should provide the $root-selector option if applied to anything other than the root selector.
|
42
|
+
// When used with a modifier class, provide a second argument of `true` for the $compound parameter
|
43
|
+
// to specify that this should be attached as a compound class.
|
44
|
+
//
|
45
|
+
// Usage example:
|
46
|
+
//
|
47
|
+
// ```scss
|
48
|
+
// .mdc-foo {
|
49
|
+
// color: black;
|
50
|
+
//
|
51
|
+
// @include mdc-theme-dark {
|
52
|
+
// color: white;
|
53
|
+
// }
|
54
|
+
//
|
55
|
+
// &__bar {
|
56
|
+
// background: black;
|
57
|
+
//
|
58
|
+
// @include mdc-theme-dark(".mdc-foo") {
|
59
|
+
// background: white;
|
60
|
+
// }
|
61
|
+
// }
|
62
|
+
// }
|
63
|
+
//
|
64
|
+
// .mdc-foo--disabled {
|
65
|
+
// opacity: .38;
|
66
|
+
//
|
67
|
+
// @include mdc-theme-dark(".mdc-foo", true) {
|
68
|
+
// opacity: .5;
|
69
|
+
// }
|
70
|
+
// }
|
71
|
+
// ```
|
76
72
|
@mixin mdc-theme-dark($root-selector: null, $compound: false) {
|
77
73
|
@if ($root-selector) {
|
78
74
|
@at-root {
|