1 | <div class="demo-preview-block demo-page--palette">
|
2 | <div class="demo-palette">
|
3 | <div class="demo-palette-heading mdl-color--red-500">
|
4 | <div class="demo-palette-name">Red</div>
|
5 |
|
6 | 500
|
7 | </div>
|
8 | <div class="demo-palette-color mdl-color--red-50 demo-palette--dark-text">50</div>
|
9 | <div class="demo-palette-color mdl-color--red-100 demo-palette--dark-text">100</div>
|
10 | <div class="demo-palette-color mdl-color--red-200 demo-palette--dark-text">200</div>
|
11 | <div class="demo-palette-color mdl-color--red-300 demo-palette--dark-text">300</div>
|
12 | <div class="demo-palette-color mdl-color--red-400 demo-palette--dark-text">400</div>
|
13 | <div class="demo-palette-color mdl-color--red-500">500</div>
|
14 | <div class="demo-palette-color mdl-color--red-600">600</div>
|
15 | <div class="demo-palette-color mdl-color--red-700">700</div>
|
16 | <div class="demo-palette-color mdl-color--red-800">800</div>
|
17 | <div class="demo-palette-color mdl-color--red-900">900</div>
|
18 | <div class="demo-palette-color mdl-color--red-A100 demo-palette--dark-text">A100</div>
|
19 | <div class="demo-palette-color mdl-color--red-A200">A200</div>
|
20 | <div class="demo-palette-color mdl-color--red-A400">A400</div>
|
21 | <div class="demo-palette-color mdl-color--red-A700">A700</div>
|
22 | </div>
|
23 |
|
24 | <div class="demo-palette">
|
25 | <div class="demo-palette-heading mdl-color--pink-500">
|
26 | <div class="demo-palette-name">Pink</div>
|
27 |
|
28 | 500
|
29 | </div>
|
30 | <div class="demo-palette-color mdl-color--pink-50 demo-palette--dark-text">50</div>
|
31 | <div class="demo-palette-color mdl-color--pink-100 demo-palette--dark-text">100</div>
|
32 | <div class="demo-palette-color mdl-color--pink-200 demo-palette--dark-text">200</div>
|
33 | <div class="demo-palette-color mdl-color--pink-300 demo-palette--dark-text">300</div>
|
34 | <div class="demo-palette-color mdl-color--pink-400 demo-palette--dark-text">400</div>
|
35 | <div class="demo-palette-color mdl-color--pink-500">500</div>
|
36 | <div class="demo-palette-color mdl-color--pink-600">600</div>
|
37 | <div class="demo-palette-color mdl-color--pink-700">700</div>
|
38 | <div class="demo-palette-color mdl-color--pink-800">800</div>
|
39 | <div class="demo-palette-color mdl-color--pink-900">900</div>
|
40 | <div class="demo-palette-color mdl-color--pink-A100 demo-palette--dark-text">A100</div>
|
41 | <div class="demo-palette-color mdl-color--pink-A200">A200</div>
|
42 | <div class="demo-palette-color mdl-color--pink-A400">A400</div>
|
43 | <div class="demo-palette-color mdl-color--pink-A700">A700</div>
|
44 | </div>
|
45 |
|
46 | <div class="demo-palette">
|
47 | <div class="demo-palette-heading mdl-color--purple-500">
|
48 | <div class="demo-palette-name">Purple</div>
|
49 |
|
50 | 500
|
51 | </div>
|
52 | <div class="demo-palette-color mdl-color--purple-50 demo-palette--dark-text">50</div>
|
53 | <div class="demo-palette-color mdl-color--purple-100 demo-palette--dark-text">100</div>
|
54 | <div class="demo-palette-color mdl-color--purple-200 demo-palette--dark-text">200</div>
|
55 | <div class="demo-palette-color mdl-color--purple-300">300</div>
|
56 | <div class="demo-palette-color mdl-color--purple-400">400</div>
|
57 | <div class="demo-palette-color mdl-color--purple-500">500</div>
|
58 | <div class="demo-palette-color mdl-color--purple-600">600</div>
|
59 | <div class="demo-palette-color mdl-color--purple-700">700</div>
|
60 | <div class="demo-palette-color mdl-color--purple-800">800</div>
|
61 | <div class="demo-palette-color mdl-color--purple-900">900</div>
|
62 | <div class="demo-palette-color mdl-color--purple-A100 demo-palette--dark-text">A100</div>
|
63 | <div class="demo-palette-color mdl-color--purple-A200">A200</div>
|
64 | <div class="demo-palette-color mdl-color--purple-A400">A400</div>
|
65 | <div class="demo-palette-color mdl-color--purple-A700">A700</div>
|
66 | </div>
|
67 |
|
68 | <div class="demo-palette">
|
69 | <div class="demo-palette-heading mdl-color--deep-purple-500">
|
70 | <div class="demo-palette-name">Deep Purple</div>
|
71 |
|
72 | 500
|
73 | </div>
|
74 | <div class="demo-palette-color mdl-color--deep-purple-50 demo-palette--dark-text">50</div>
|
75 | <div class="demo-palette-color mdl-color--deep-purple-100 demo-palette--dark-text">100</div>
|
76 | <div class="demo-palette-color mdl-color--deep-purple-200 demo-palette--dark-text">200</div>
|
77 | <div class="demo-palette-color mdl-color--deep-purple-300">300</div>
|
78 | <div class="demo-palette-color mdl-color--deep-purple-400">400</div>
|
79 | <div class="demo-palette-color mdl-color--deep-purple-500">500</div>
|
80 | <div class="demo-palette-color mdl-color--deep-purple-600">600</div>
|
81 | <div class="demo-palette-color mdl-color--deep-purple-700">700</div>
|
82 | <div class="demo-palette-color mdl-color--deep-purple-800">800</div>
|
83 | <div class="demo-palette-color mdl-color--deep-purple-900">900</div>
|
84 | <div class="demo-palette-color mdl-color--deep-purple-A100 demo-palette--dark-text">A100</div>
|
85 | <div class="demo-palette-color mdl-color--deep-purple-A200">A200</div>
|
86 | <div class="demo-palette-color mdl-color--deep-purple-A400">A400</div>
|
87 | <div class="demo-palette-color mdl-color--deep-purple-A700">A700</div>
|
88 | </div>
|
89 |
|
90 | <div class="demo-palette">
|
91 | <div class="demo-palette-heading mdl-color--indigo-500">
|
92 | <div class="demo-palette-name">Indigo</div>
|
93 |
|
94 | 500
|
95 | </div>
|
96 | <div class="demo-palette-color mdl-color--indigo-50 demo-palette--dark-text">50</div>
|
97 | <div class="demo-palette-color mdl-color--indigo-100 demo-palette--dark-text">100</div>
|
98 | <div class="demo-palette-color mdl-color--indigo-200 demo-palette--dark-text">200</div>
|
99 | <div class="demo-palette-color mdl-color--indigo-300">300</div>
|
100 | <div class="demo-palette-color mdl-color--indigo-400">400</div>
|
101 | <div class="demo-palette-color mdl-color--indigo-500">500</div>
|
102 | <div class="demo-palette-color mdl-color--indigo-600">600</div>
|
103 | <div class="demo-palette-color mdl-color--indigo-700">700</div>
|
104 | <div class="demo-palette-color mdl-color--indigo-800">800</div>
|
105 | <div class="demo-palette-color mdl-color--indigo-900">900</div>
|
106 | <div class="demo-palette-color mdl-color--indigo-A100 demo-palette--dark-text">A100</div>
|
107 | <div class="demo-palette-color mdl-color--indigo-A200">A200</div>
|
108 | <div class="demo-palette-color mdl-color--indigo-A400">A400</div>
|
109 | <div class="demo-palette-color mdl-color--indigo-A700">A700</div>
|
110 | </div>
|
111 |
|
112 | <div class="demo-palette">
|
113 | <div class="demo-palette-heading mdl-color--blue-500">
|
114 | <div class="demo-palette-name">Blue</div>
|
115 |
|
116 | 500
|
117 | </div>
|
118 | <div class="demo-palette-color mdl-color--blue-50 demo-palette--dark-text">50</div>
|
119 | <div class="demo-palette-color mdl-color--blue-100 demo-palette--dark-text">100</div>
|
120 | <div class="demo-palette-color mdl-color--blue-200 demo-palette--dark-text">200</div>
|
121 | <div class="demo-palette-color mdl-color--blue-300 demo-palette--dark-text">300</div>
|
122 | <div class="demo-palette-color mdl-color--blue-400 demo-palette--dark-text">400</div>
|
123 | <div class="demo-palette-color mdl-color--blue-500">500</div>
|
124 | <div class="demo-palette-color mdl-color--blue-600">600</div>
|
125 | <div class="demo-palette-color mdl-color--blue-700">700</div>
|
126 | <div class="demo-palette-color mdl-color--blue-800">800</div>
|
127 | <div class="demo-palette-color mdl-color--blue-900">900</div>
|
128 | <div class="demo-palette-color mdl-color--blue-A100 demo-palette--dark-text">A100</div>
|
129 | <div class="demo-palette-color mdl-color--blue-A200">A200</div>
|
130 | <div class="demo-palette-color mdl-color--blue-A400">A400</div>
|
131 | <div class="demo-palette-color mdl-color--blue-A700">A700</div>
|
132 | </div>
|
133 |
|
134 | <div class="demo-palette">
|
135 | <div class="demo-palette-heading mdl-color--light-blue-500">
|
136 | <div class="demo-palette-name">Light Blue</div>
|
137 |
|
138 | 500
|
139 | </div>
|
140 | <div class="demo-palette-color mdl-color--light-blue-50 demo-palette--dark-text">50</div>
|
141 | <div class="demo-palette-color mdl-color--light-blue-100 demo-palette--dark-text">100</div>
|
142 | <div class="demo-palette-color mdl-color--light-blue-200 demo-palette--dark-text">200</div>
|
143 | <div class="demo-palette-color mdl-color--light-blue-300 demo-palette--dark-text">300</div>
|
144 | <div class="demo-palette-color mdl-color--light-blue-400 demo-palette--dark-text">400</div>
|
145 | <div class="demo-palette-color mdl-color--light-blue-500">500</div>
|
146 | <div class="demo-palette-color mdl-color--light-blue-600">600</div>
|
147 | <div class="demo-palette-color mdl-color--light-blue-700">700</div>
|
148 | <div class="demo-palette-color mdl-color--light-blue-800">800</div>
|
149 | <div class="demo-palette-color mdl-color--light-blue-900">900</div>
|
150 | <div class="demo-palette-color mdl-color--light-blue-A100 demo-palette--dark-text">A100</div>
|
151 | <div class="demo-palette-color mdl-color--light-blue-A200 demo-palette--dark-text">A200</div>
|
152 | <div class="demo-palette-color mdl-color--light-blue-A400 demo-palette--dark-text">A400</div>
|
153 | <div class="demo-palette-color mdl-color--light-blue-A700">A700</div>
|
154 | </div>
|
155 |
|
156 | <div class="demo-palette">
|
157 | <div class="demo-palette-heading mdl-color--cyan-500">
|
158 | <div class="demo-palette-name">Cyan</div>
|
159 |
|
160 | 500
|
161 | </div>
|
162 | <div class="demo-palette-color mdl-color--cyan-50 demo-palette--dark-text">50</div>
|
163 | <div class="demo-palette-color mdl-color--cyan-100 demo-palette--dark-text">100</div>
|
164 | <div class="demo-palette-color mdl-color--cyan-200 demo-palette--dark-text">200</div>
|
165 | <div class="demo-palette-color mdl-color--cyan-300 demo-palette--dark-text">300</div>
|
166 | <div class="demo-palette-color mdl-color--cyan-400 demo-palette--dark-text">400</div>
|
167 | <div class="demo-palette-color mdl-color--cyan-500">500</div>
|
168 | <div class="demo-palette-color mdl-color--cyan-600">600</div>
|
169 | <div class="demo-palette-color mdl-color--cyan-700">700</div>
|
170 | <div class="demo-palette-color mdl-color--cyan-800">800</div>
|
171 | <div class="demo-palette-color mdl-color--cyan-900">900</div>
|
172 | <div class="demo-palette-color mdl-color--cyan-A100 demo-palette--dark-text">A100</div>
|
173 | <div class="demo-palette-color mdl-color--cyan-A200 demo-palette--dark-text">A200</div>
|
174 | <div class="demo-palette-color mdl-color--cyan-A400 demo-palette--dark-text">A400</div>
|
175 | <div class="demo-palette-color mdl-color--cyan-A700 demo-palette--dark-text">A700</div>
|
176 | </div>
|
177 |
|
178 | <div class="demo-palette">
|
179 | <div class="demo-palette-heading mdl-color--teal-500">
|
180 | <div class="demo-palette-name">Teal</div>
|
181 |
|
182 | 500
|
183 | </div>
|
184 | <div class="demo-palette-color mdl-color--teal-50 demo-palette--dark-text">50</div>
|
185 | <div class="demo-palette-color mdl-color--teal-100 demo-palette--dark-text">100</div>
|
186 | <div class="demo-palette-color mdl-color--teal-200 demo-palette--dark-text">200</div>
|
187 | <div class="demo-palette-color mdl-color--teal-300 demo-palette--dark-text">300</div>
|
188 | <div class="demo-palette-color mdl-color--teal-400 demo-palette--dark-text">400</div>
|
189 | <div class="demo-palette-color mdl-color--teal-500">500</div>
|
190 | <div class="demo-palette-color mdl-color--teal-600">600</div>
|
191 | <div class="demo-palette-color mdl-color--teal-700">700</div>
|
192 | <div class="demo-palette-color mdl-color--teal-800">800</div>
|
193 | <div class="demo-palette-color mdl-color--teal-900">900</div>
|
194 | <div class="demo-palette-color mdl-color--teal-A100 demo-palette--dark-text">A100</div>
|
195 | <div class="demo-palette-color mdl-color--teal-A200 demo-palette--dark-text">A200</div>
|
196 | <div class="demo-palette-color mdl-color--teal-A400 demo-palette--dark-text">A400</div>
|
197 | <div class="demo-palette-color mdl-color--teal-A700 demo-palette--dark-text">A700</div>
|
198 | </div>
|
199 |
|
200 | <div class="demo-palette">
|
201 | <div class="demo-palette-heading mdl-color--green-500">
|
202 | <div class="demo-palette-name">Green</div>
|
203 |
|
204 | 500
|
205 | </div>
|
206 | <div class="demo-palette-color mdl-color--green-50 demo-palette--dark-text">50</div>
|
207 | <div class="demo-palette-color mdl-color--green-100 demo-palette--dark-text">100</div>
|
208 | <div class="demo-palette-color mdl-color--green-200 demo-palette--dark-text">200</div>
|
209 | <div class="demo-palette-color mdl-color--green-300 demo-palette--dark-text">300</div>
|
210 | <div class="demo-palette-color mdl-color--green-400 demo-palette--dark-text">400</div>
|
211 | <div class="demo-palette-color mdl-color--green-500">500</div>
|
212 | <div class="demo-palette-color mdl-color--green-600">600</div>
|
213 | <div class="demo-palette-color mdl-color--green-700">700</div>
|
214 | <div class="demo-palette-color mdl-color--green-800">800</div>
|
215 | <div class="demo-palette-color mdl-color--green-900">900</div>
|
216 | <div class="demo-palette-color mdl-color--green-A100 demo-palette--dark-text">A100</div>
|
217 | <div class="demo-palette-color mdl-color--green-A200 demo-palette--dark-text">A200</div>
|
218 | <div class="demo-palette-color mdl-color--green-A400 demo-palette--dark-text">A400</div>
|
219 | <div class="demo-palette-color mdl-color--green-A700 demo-palette--dark-text">A700</div>
|
220 | </div>
|
221 |
|
222 | <div class="demo-palette">
|
223 | <div class="demo-palette-heading mdl-color--light-green-500">
|
224 | <div class="demo-palette-name">Light Green</div>
|
225 |
|
226 | 500
|
227 | </div>
|
228 | <div class="demo-palette-color mdl-color--light-green-50 demo-palette--dark-text">50</div>
|
229 | <div class="demo-palette-color mdl-color--light-green-100 demo-palette--dark-text">100</div>
|
230 | <div class="demo-palette-color mdl-color--light-green-200 demo-palette--dark-text">200</div>
|
231 | <div class="demo-palette-color mdl-color--light-green-300 demo-palette--dark-text">300</div>
|
232 | <div class="demo-palette-color mdl-color--light-green-400 demo-palette--dark-text">400</div>
|
233 | <div class="demo-palette-color mdl-color--light-green-500 demo-palette--dark-text">500</div>
|
234 | <div class="demo-palette-color mdl-color--light-green-600 demo-palette--dark-text">600</div>
|
235 | <div class="demo-palette-color mdl-color--light-green-700 demo-palette--dark-text">700</div>
|
236 | <div class="demo-palette-color mdl-color--light-green-800">800</div>
|
237 | <div class="demo-palette-color mdl-color--light-green-900">900</div>
|
238 | <div class="demo-palette-color mdl-color--light-green-A100 demo-palette--dark-text">A100</div>
|
239 | <div class="demo-palette-color mdl-color--light-green-A200 demo-palette--dark-text">A200</div>
|
240 | <div class="demo-palette-color mdl-color--light-green-A400 demo-palette--dark-text">A400</div>
|
241 | <div class="demo-palette-color mdl-color--light-green-A700 demo-palette--dark-text">A700</div>
|
242 | </div>
|
243 |
|
244 | <div class="demo-palette">
|
245 | <div class="demo-palette-heading mdl-color--lime-500 demo-palette--dark-text">
|
246 | <div class="demo-palette-name">Lime</div>
|
247 |
|
248 | 500
|
249 | </div>
|
250 | <div class="demo-palette-color mdl-color--lime-50 demo-palette--dark-text">50</div>
|
251 | <div class="demo-palette-color mdl-color--lime-100 demo-palette--dark-text">100</div>
|
252 | <div class="demo-palette-color mdl-color--lime-200 demo-palette--dark-text">200</div>
|
253 | <div class="demo-palette-color mdl-color--lime-300 demo-palette--dark-text">300</div>
|
254 | <div class="demo-palette-color mdl-color--lime-400 demo-palette--dark-text">400</div>
|
255 | <div class="demo-palette-color mdl-color--lime-500 demo-palette--dark-text">500</div>
|
256 | <div class="demo-palette-color mdl-color--lime-600 demo-palette--dark-text">600</div>
|
257 | <div class="demo-palette-color mdl-color--lime-700 demo-palette--dark-text">700</div>
|
258 | <div class="demo-palette-color mdl-color--lime-800 demo-palette--dark-text">800</div>
|
259 | <div class="demo-palette-color mdl-color--lime-900">900</div>
|
260 | <div class="demo-palette-color mdl-color--lime-A100 demo-palette--dark-text">A100</div>
|
261 | <div class="demo-palette-color mdl-color--lime-A200 demo-palette--dark-text">A200</div>
|
262 | <div class="demo-palette-color mdl-color--lime-A400 demo-palette--dark-text">A400</div>
|
263 | <div class="demo-palette-color mdl-color--lime-A700 demo-palette--dark-text">A700</div>
|
264 | </div>
|
265 |
|
266 | <div class="demo-palette">
|
267 | <div class="demo-palette-heading mdl-color--yellow-500 demo-palette--dark-text">
|
268 | <div class="demo-palette-name">Yellow</div>
|
269 |
|
270 | 500
|
271 | </div>
|
272 | <div class="demo-palette-color mdl-color--yellow-50 demo-palette--dark-text">50</div>
|
273 | <div class="demo-palette-color mdl-color--yellow-100 demo-palette--dark-text">100</div>
|
274 | <div class="demo-palette-color mdl-color--yellow-200 demo-palette--dark-text">200</div>
|
275 | <div class="demo-palette-color mdl-color--yellow-300 demo-palette--dark-text">300</div>
|
276 | <div class="demo-palette-color mdl-color--yellow-400 demo-palette--dark-text">400</div>
|
277 | <div class="demo-palette-color mdl-color--yellow-500 demo-palette--dark-text">500</div>
|
278 | <div class="demo-palette-color mdl-color--yellow-600 demo-palette--dark-text">600</div>
|
279 | <div class="demo-palette-color mdl-color--yellow-700 demo-palette--dark-text">700</div>
|
280 | <div class="demo-palette-color mdl-color--yellow-800 demo-palette--dark-text">800</div>
|
281 | <div class="demo-palette-color mdl-color--yellow-900 demo-palette--dark-text">900</div>
|
282 | <div class="demo-palette-color mdl-color--yellow-A100 demo-palette--dark-text">A100</div>
|
283 | <div class="demo-palette-color mdl-color--yellow-A200 demo-palette--dark-text">A200</div>
|
284 | <div class="demo-palette-color mdl-color--yellow-A400 demo-palette--dark-text">A400</div>
|
285 | <div class="demo-palette-color mdl-color--yellow-A700 demo-palette--dark-text">A700</div>
|
286 | </div>
|
287 |
|
288 | <div class="demo-palette">
|
289 | <div class="demo-palette-heading mdl-color--amber-500 demo-palette--dark-text">
|
290 | <div class="demo-palette-name">Amber</div>
|
291 |
|
292 | 500
|
293 | </div>
|
294 | <div class="demo-palette-color mdl-color--amber-50 demo-palette--dark-text">50</div>
|
295 | <div class="demo-palette-color mdl-color--amber-100 demo-palette--dark-text">100</div>
|
296 | <div class="demo-palette-color mdl-color--amber-200 demo-palette--dark-text">200</div>
|
297 | <div class="demo-palette-color mdl-color--amber-300 demo-palette--dark-text">300</div>
|
298 | <div class="demo-palette-color mdl-color--amber-400 demo-palette--dark-text">400</div>
|
299 | <div class="demo-palette-color mdl-color--amber-500 demo-palette--dark-text">500</div>
|
300 | <div class="demo-palette-color mdl-color--amber-600 demo-palette--dark-text">600</div>
|
301 | <div class="demo-palette-color mdl-color--amber-700 demo-palette--dark-text">700</div>
|
302 | <div class="demo-palette-color mdl-color--amber-800 demo-palette--dark-text">800</div>
|
303 | <div class="demo-palette-color mdl-color--amber-900 demo-palette--dark-text">900</div>
|
304 | <div class="demo-palette-color mdl-color--amber-A100 demo-palette--dark-text">A100</div>
|
305 | <div class="demo-palette-color mdl-color--amber-A200 demo-palette--dark-text">A200</div>
|
306 | <div class="demo-palette-color mdl-color--amber-A400 demo-palette--dark-text">A400</div>
|
307 | <div class="demo-palette-color mdl-color--amber-A700 demo-palette--dark-text">A700</div>
|
308 | </div>
|
309 |
|
310 | <div class="demo-palette">
|
311 | <div class="demo-palette-heading mdl-color--orange-500 demo-palette--dark-text">
|
312 | <div class="demo-palette-name">Orange</div>
|
313 |
|
314 | 500
|
315 | </div>
|
316 | <div class="demo-palette-color mdl-color--orange-50 demo-palette--dark-text">50</div>
|
317 | <div class="demo-palette-color mdl-color--orange-100 demo-palette--dark-text">100</div>
|
318 | <div class="demo-palette-color mdl-color--orange-200 demo-palette--dark-text">200</div>
|
319 | <div class="demo-palette-color mdl-color--orange-300 demo-palette--dark-text">300</div>
|
320 | <div class="demo-palette-color mdl-color--orange-400 demo-palette--dark-text">400</div>
|
321 | <div class="demo-palette-color mdl-color--orange-500 demo-palette--dark-text">500</div>
|
322 | <div class="demo-palette-color mdl-color--orange-600 demo-palette--dark-text">600</div>
|
323 | <div class="demo-palette-color mdl-color--orange-700 demo-palette--dark-text">700</div>
|
324 | <div class="demo-palette-color mdl-color--orange-800">800</div>
|
325 | <div class="demo-palette-color mdl-color--orange-900">900</div>
|
326 | <div class="demo-palette-color mdl-color--orange-A100 demo-palette--dark-text">A100</div>
|
327 | <div class="demo-palette-color mdl-color--orange-A200 demo-palette--dark-text">A200</div>
|
328 | <div class="demo-palette-color mdl-color--orange-A400 demo-palette--dark-text">A400</div>
|
329 | <div class="demo-palette-color mdl-color--orange-A700 demo-palette--dark-text">A700</div>
|
330 | </div>
|
331 |
|
332 | <div class="demo-palette">
|
333 | <div class="demo-palette-heading mdl-color--deep-orange-500">
|
334 | <div class="demo-palette-name">Deep Orange</div>
|
335 |
|
336 | 500
|
337 | </div>
|
338 | <div class="demo-palette-color mdl-color--deep-orange-50 demo-palette--dark-text">50</div>
|
339 | <div class="demo-palette-color mdl-color--deep-orange-100 demo-palette--dark-text">100</div>
|
340 | <div class="demo-palette-color mdl-color--deep-orange-200 demo-palette--dark-text">200</div>
|
341 | <div class="demo-palette-color mdl-color--deep-orange-300 demo-palette--dark-text">300</div>
|
342 | <div class="demo-palette-color mdl-color--deep-orange-400 demo-palette--dark-text">400</div>
|
343 | <div class="demo-palette-color mdl-color--deep-orange-500">500</div>
|
344 | <div class="demo-palette-color mdl-color--deep-orange-600">600</div>
|
345 | <div class="demo-palette-color mdl-color--deep-orange-700">700</div>
|
346 | <div class="demo-palette-color mdl-color--deep-orange-800">800</div>
|
347 | <div class="demo-palette-color mdl-color--deep-orange-900">900</div>
|
348 | <div class="demo-palette-color mdl-color--deep-orange-A100 demo-palette--dark-text">A100</div>
|
349 | <div class="demo-palette-color mdl-color--deep-orange-A200 demo-palette--dark-text">A200</div>
|
350 | <div class="demo-palette-color mdl-color--deep-orange-A400">A400</div>
|
351 | <div class="demo-palette-color mdl-color--deep-orange-A700">A700</div>
|
352 | </div>
|
353 |
|
354 | <div class="demo-palette">
|
355 | <div class="demo-palette-heading mdl-color--brown-500">
|
356 | <div class="demo-palette-name">Brown</div>
|
357 |
|
358 | 500
|
359 | </div>
|
360 | <div class="demo-palette-color mdl-color--brown-50 demo-palette--dark-text">50</div>
|
361 | <div class="demo-palette-color mdl-color--brown-100 demo-palette--dark-text">100</div>
|
362 | <div class="demo-palette-color mdl-color--brown-200 demo-palette--dark-text">200</div>
|
363 | <div class="demo-palette-color mdl-color--brown-300">300</div>
|
364 | <div class="demo-palette-color mdl-color--brown-400">400</div>
|
365 | <div class="demo-palette-color mdl-color--brown-500">500</div>
|
366 | <div class="demo-palette-color mdl-color--brown-600">600</div>
|
367 | <div class="demo-palette-color mdl-color--brown-700">700</div>
|
368 | <div class="demo-palette-color mdl-color--brown-800">800</div>
|
369 | <div class="demo-palette-color mdl-color--brown-900">900</div>
|
370 | </div>
|
371 |
|
372 | <div class="demo-palette">
|
373 | <div class="demo-palette-heading mdl-color--grey-500 demo-palette--dark-text">
|
374 | <div class="demo-palette-name">Grey</div>
|
375 |
|
376 | 500
|
377 | </div>
|
378 | <div class="demo-palette-color mdl-color--grey-50 demo-palette--dark-text">50</div>
|
379 | <div class="demo-palette-color mdl-color--grey-100 demo-palette--dark-text">100</div>
|
380 | <div class="demo-palette-color mdl-color--grey-200 demo-palette--dark-text">200</div>
|
381 | <div class="demo-palette-color mdl-color--grey-300 demo-palette--dark-text">300</div>
|
382 | <div class="demo-palette-color mdl-color--grey-400 demo-palette--dark-text">400</div>
|
383 | <div class="demo-palette-color mdl-color--grey-500 demo-palette--dark-text">500</div>
|
384 | <div class="demo-palette-color mdl-color--grey-600">600</div>
|
385 | <div class="demo-palette-color mdl-color--grey-700">700</div>
|
386 | <div class="demo-palette-color mdl-color--grey-800">800</div>
|
387 | <div class="demo-palette-color mdl-color--grey-900">900</div>
|
388 | </div>
|
389 |
|
390 | <div class="demo-palette">
|
391 | <div class="demo-palette-heading mdl-color--blue-grey-500">
|
392 | <div class="demo-palette-name">Blue Grey</div>
|
393 |
|
394 | 500
|
395 | </div>
|
396 | <div class="demo-palette-color mdl-color--blue-grey-50 demo-palette--dark-text">50</div>
|
397 | <div class="demo-palette-color mdl-color--blue-grey-100 demo-palette--dark-text">100</div>
|
398 | <div class="demo-palette-color mdl-color--blue-grey-200 demo-palette--dark-text">200</div>
|
399 | <div class="demo-palette-color mdl-color--blue-grey-300 demo-palette--dark-text">300</div>
|
400 | <div class="demo-palette-color mdl-color--blue-grey-400">400</div>
|
401 | <div class="demo-palette-color mdl-color--blue-grey-500">500</div>
|
402 | <div class="demo-palette-color mdl-color--blue-grey-600">600</div>
|
403 | <div class="demo-palette-color mdl-color--blue-grey-700">700</div>
|
404 | <div class="demo-palette-color mdl-color--blue-grey-800">800</div>
|
405 | <div class="demo-palette-color mdl-color--blue-grey-900">900</div>
|
406 | </div>
|
407 |
|
408 | <div class="demo-palette">
|
409 | <div class="demo-palette-heading demo-palette-single mdl-color--black">
|
410 | <div class="demo-palette-name">Black</div>
|
411 | </div>
|
412 | <div class="demo-palette-heading demo-palette-single mdl-color--white demo-palette--dark-text">
|
413 | <div class="demo-palette-name">White</div>
|
414 | </div>
|
415 | </div>
|
416 |
|
417 | </div>
|