material 0.7.2 → 0.7.4

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.
Files changed (51) hide show
  1. package/LICENSE +9 -18
  2. package/index.js +25 -48
  3. package/package.json +2 -10
  4. package/src/checkbox.js +48 -52
  5. package/src/element/insert.js +4 -4
  6. package/src/list.js +1 -3
  7. package/src/module/build.js +1 -3
  8. package/src/module/dom.js +1 -0
  9. package/src/module/request.js +33 -0
  10. package/src/navigation.js +7 -1
  11. package/src/skin/material/button/action.sass +6 -6
  12. package/src/skin/material/button/button.sass +6 -6
  13. package/src/skin/material/button/file.sass +1 -1
  14. package/src/skin/material/button/floating.sass +5 -5
  15. package/src/skin/material/button/raised.sass +5 -5
  16. package/src/skin/material/button/stroked.sass +5 -5
  17. package/src/skin/material/component/navigation.sass +6 -2
  18. package/src/skin/material/control/checkbox.sass +21 -21
  19. package/src/skin/material/module/ripple.sass +1 -1
  20. package/src/snackbar.js +4 -2
  21. package/src/styles/M3/abstracts/variables.sass +44 -0
  22. package/src/styles/M3/components/button.sass +26 -0
  23. package/src/styles/M3/modules/ripple.sass +9 -0
  24. package/src/styles/M3/themes/classic.sass +2 -0
  25. package/src/tabs.js +2 -3
  26. package/dist/demo-bundle.js +0 -2281
  27. package/dist/demo-bundle.js.map +0 -7
  28. package/dist/demo.css +0 -93
  29. package/dist/demo.css.map +0 -7
  30. package/dist/demo.html +0 -24
  31. package/dist/demo.js +0 -159
  32. package/dist/icon/accessibility.svg +0 -5
  33. package/dist/icon/apps.svg +0 -5
  34. package/dist/icon/happy.svg +0 -6
  35. package/dist/icon/link.svg +0 -5
  36. package/dist/icon/more.svg +0 -5
  37. package/dist/icon/navi.svg +0 -5
  38. package/dist/icon/phone.svg +0 -6
  39. package/dist/icon/share.svg +0 -6
  40. package/dist/icon/side.svg +0 -5
  41. package/dist/icon/star.svg +0 -7
  42. package/dist/icon/star_border.svg +0 -6
  43. package/dist/material.css +0 -2429
  44. package/dist/material.css.map +0 -7
  45. package/dist/styles/demo.sass +0 -110
  46. package/dist/styles.css +0 -23
  47. package/esbuild.js +0 -22
  48. package/esbuild.watch.js +0 -25
  49. package/src/container.js +0 -66
  50. package/src/field/email.js +0 -24
  51. package/src/field/image.js +0 -59
package/dist/material.css DELETED
@@ -1,2429 +0,0 @@
1
- html {
2
- font-size: 100%;
3
- line-height: 1.15;
4
- width: 100%;
5
- height: 100%; }
6
-
7
- body {
8
- color: rgba(0, 0, 0, 0.67);
9
- font-family: Roboto, arial, serif;
10
- font-size: 100%;
11
- margin: 0;
12
- padding: 0; }
13
-
14
- input,
15
- textarea,
16
- keygen,
17
- select,
18
- button {
19
- font-size: 1em;
20
- font-family: Roboto, arial, serif;
21
- color: #333333; }
22
-
23
- p {
24
- line-height: 20px;
25
- padding-top: 6px;
26
- margin-bottom: 14px;
27
- letter-spacing: 0;
28
- font-weight: 400; }
29
-
30
- select,
31
- input,
32
- textarea,
33
- button {
34
- outline: none; }
35
- select:hover,
36
- input:hover,
37
- textarea:hover,
38
- button:hover {
39
- outline: none; }
40
-
41
- * {
42
- box-sizing: border-box; }
43
-
44
- a {
45
- color: rgba(0, 0, 0, 0.7); }
46
-
47
- .material-text.type-display4 {
48
- font-size: 7rem;
49
- font-weight: 300;
50
- letter-spacing: -0.04em;
51
- line-height: 7rem; }
52
- .material-text.type-display3 {
53
- font-size: 3.5rem;
54
- font-weight: 400;
55
- letter-spacing: -0.02em;
56
- line-height: 3.5rem; }
57
- .material-text.type-display2 {
58
- font-size: 2.813rem;
59
- font-weight: 400;
60
- letter-spacing: normal;
61
- line-height: 3rem; }
62
- .material-text.type-display1 {
63
- font-size: 2.125rem;
64
- font-weight: 400;
65
- letter-spacing: normal;
66
- line-height: 2.5rem; }
67
- .material-text.type-headline {
68
- font-size: 1.5rem;
69
- font-weight: 400;
70
- letter-spacing: normal;
71
- line-height: 2rem; }
72
- .material-text.type-title {
73
- font-size: 1.25rem;
74
- font-weight: 500;
75
- letter-spacing: 0.02em;
76
- line-height: 2rem; }
77
- .material-text.type-subheading2 {
78
- font-size: 1rem;
79
- font-weight: 400;
80
- letter-spacing: 0.04em;
81
- line-height: 1.75rem; }
82
- .material-text.type-subheading1 {
83
- font-size: 0.938rem;
84
- font-weight: 400;
85
- letter-spacing: 0.04em;
86
- line-height: 1.5rem; }
87
- .material-text.type-body1 {
88
- font-size: 0.875rem;
89
- font-weight: 400;
90
- letter-spacing: 0.04em;
91
- line-height: 1.25rem; }
92
- .material-text.type-body2 {
93
- font-size: 0.875rem;
94
- font-weight: 500;
95
- letter-spacing: 0.04em;
96
- line-height: 1.5rem; }
97
- .material-text.type-caption {
98
- font-size: 0.75rem;
99
- font-weight: 400;
100
- letter-spacing: 0.08em;
101
- line-height: 1.25rem; }
102
- .material-text.type-button {
103
- font-size: 14px;
104
- font-weight: 500;
105
- margin-left: 8px; }
106
- .material-text.style-adjust.type-display4 {
107
- margin: -1rem 0 3.5rem -0.085em; }
108
- .material-text.style-adjust.type-display3 {
109
- margin: -8px 0 64px -0.07em; }
110
- .material-text.style-adjust.type-display2 {
111
- margin: -0.5rem 0 4rem -0.07em; }
112
- .material-text.style-adjust.type-display1 {
113
- margin: -0.5rem 0 4rem -0.07em; }
114
- .material-text.style-adjust.type-headline {
115
- margin: -0.5rem 0 1rem -0.06em; }
116
- .material-text.style-adjust.type-title {
117
- margin: -0.5rem 0 1rem -0.05em; }
118
- .material-text.style-adjust.type-subheading2 {
119
- margin: -0.5rem 0 1rem -0.06em; }
120
- .material-text.style-adjust.type-subheading1 {
121
- margin: -0.313rem 0 0.813rem -0.06em; }
122
- .material-text.style-adjust.type-body1 {
123
- margin: -0.25rem 0 0.75rem 0; }
124
- .material-text.style-adjust.type-body2 {
125
- margin: -0.25rem 0 0.75rem 0; }
126
- .material-text.style-adjust.type-caption {
127
- line-height: 1.25rem; }
128
-
129
- .elevation-z0 {
130
- box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); }
131
-
132
- .elevation-z1 {
133
- box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); }
134
-
135
- .elevation-z2 {
136
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); }
137
-
138
- .elevation-z3 {
139
- box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); }
140
-
141
- .elevation-z4 {
142
- box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }
143
-
144
- .elevation-z5 {
145
- box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); }
146
-
147
- .elevation-z6 {
148
- box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); }
149
-
150
- .elevation-z7 {
151
- box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12); }
152
-
153
- .elevation-z8 {
154
- box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
155
-
156
- .elevation-z9 {
157
- box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12); }
158
-
159
- .elevation-z10 {
160
- box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12); }
161
-
162
- .elevation-z11 {
163
- box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12); }
164
-
165
- .elevation-z12 {
166
- box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); }
167
-
168
- .elevation-z13 {
169
- box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12); }
170
-
171
- .elevation-z14 {
172
- box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12); }
173
-
174
- .elevation-z15 {
175
- box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12); }
176
-
177
- .elevation-z16 {
178
- box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); }
179
-
180
- .elevation-z17 {
181
- box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12); }
182
-
183
- .elevation-z18 {
184
- box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12); }
185
-
186
- .elevation-z19 {
187
- box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12); }
188
-
189
- .elevation-z20 {
190
- box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12); }
191
-
192
- .elevation-z21 {
193
- box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12); }
194
-
195
- .elevation-z22 {
196
- box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12); }
197
-
198
- .elevation-z23 {
199
- box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12); }
200
-
201
- .elevation-z24 {
202
- box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); }
203
-
204
- .theme-dark,
205
- .dark-theme {
206
- background-color: #333333;
207
- color: rgba(255, 255, 255, 0.95); }
208
-
209
- .material-ripple {
210
- opacity: 1;
211
- pointer-events: none;
212
- z-index: 1;
213
- position: absolute;
214
- background-color: rgba(255, 255, 255, 0.1);
215
- height: 5px;
216
- width: 5px;
217
- border-radius: 50%; }
218
-
219
- .material-component {
220
- background-color: white; }
221
-
222
- .dark-theme .material-component,
223
- .material-component.dark-theme {
224
- background-color: #333333; }
225
-
226
- .ui-text {
227
- font-family: Roboto, sans-serif;
228
- -moz-osx-font-smoothing: grayscale;
229
- -webkit-font-smoothing: antialiased;
230
- margin-left: 16px; }
231
- .ui-text.text-display4 {
232
- font-size: 7rem;
233
- font-weight: 300;
234
- letter-spacing: -0.04em;
235
- line-height: 7rem; }
236
- .ui-text.text-display3 {
237
- font-size: 3.5rem;
238
- font-weight: 400;
239
- letter-spacing: -0.02em;
240
- line-height: 3.5rem; }
241
- .ui-text.text-display2 {
242
- font-size: 2.813rem;
243
- font-weight: 400;
244
- letter-spacing: normal;
245
- line-height: 3rem; }
246
- .ui-text.text-display1 {
247
- font-size: 2.125rem;
248
- font-weight: 400;
249
- letter-spacing: normal;
250
- line-height: 2.5rem; }
251
- .ui-text.text-headline {
252
- font-size: 1.5rem;
253
- font-weight: 400;
254
- letter-spacing: normal;
255
- line-height: 2rem; }
256
- .ui-text.text-title {
257
- font-size: 1.25rem;
258
- font-weight: 500;
259
- letter-spacing: 0.02em;
260
- line-height: 2rem; }
261
- .ui-text.text-subheading2 {
262
- font-size: 1rem;
263
- font-weight: 400;
264
- letter-spacing: 0.04em;
265
- line-height: 1.75rem; }
266
- .ui-text.text-subheading1 {
267
- font-size: 0.938rem;
268
- font-weight: 400;
269
- letter-spacing: 0.04em;
270
- line-height: 1.5rem; }
271
- .ui-text.text-body2 {
272
- font-size: 0.875rem;
273
- font-weight: 500;
274
- letter-spacing: 0.04em;
275
- line-height: 1.5rem; }
276
- .ui-text.text-body1 {
277
- font-size: 0.875rem;
278
- font-weight: 400;
279
- letter-spacing: 0.04em;
280
- line-height: 1.25rem; }
281
- .ui-text.text-caption {
282
- font-size: 0.75rem;
283
- font-weight: 400;
284
- letter-spacing: 0.08em;
285
- line-height: 1.25rem; }
286
- .ui-text.text-button {
287
- font-size: 14px;
288
- font-weight: 500;
289
- text-transform: uppercase; }
290
-
291
- .material-image.item-list {
292
- display: inline-block;
293
- background-size: cover;
294
- width: 300px;
295
- height: 200px; }
296
-
297
- .component-subheader {
298
- margin-left: 16px;
299
- margin-right: 16px; }
300
-
301
- .material-label {
302
- line-height: 1.3rem; }
303
-
304
- .material-divider {
305
- display: block;
306
- font-size: 0.8em;
307
- text-transform: uppercase;
308
- padding: 8px 0;
309
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
310
- margin: 8px 16px; }
311
- .material-divider.divider-space {
312
- display: block;
313
- padding: 0;
314
- margin: 0;
315
- height: 16px;
316
- border-bottom: none; }
317
-
318
- .material-progress {
319
- width: 100%;
320
- height: 4px;
321
- background-color: #b988ff; }
322
- .material-progress .bar {
323
- width: 0%;
324
- height: 100%;
325
- background-color: #6200ee;
326
- transition: width 3s; }
327
-
328
- .material-progress.type-indeterminate {
329
- position: relative;
330
- height: 4px;
331
- display: block;
332
- width: 100%;
333
- background-color: #b988ff;
334
- overflow: hidden; }
335
- .material-progress.type-indeterminate .determinate {
336
- position: absolute;
337
- background-color: inherit;
338
- top: 0;
339
- bottom: 0;
340
- background-color: #6200ee;
341
- transition: width 0.3s linear; }
342
- .material-progress.type-indeterminate .bar {
343
- background-color: #6200ee; }
344
- .material-progress.type-indeterminate .bar:before {
345
- content: "";
346
- position: absolute;
347
- background-color: inherit;
348
- top: 0;
349
- left: 0;
350
- bottom: 0;
351
- will-change: left, right;
352
- -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
353
- animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
354
- .material-progress.type-indeterminate .bar:after {
355
- content: "";
356
- position: absolute;
357
- background-color: inherit;
358
- top: 0;
359
- left: 0;
360
- bottom: 0;
361
- will-change: left, right;
362
- -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
363
- animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
364
- -webkit-animation-delay: 1.15s;
365
- animation-delay: 1.15s; }
366
-
367
- @-webkit-keyframes indeterminate {
368
- 0% {
369
- left: -35%;
370
- right: 100%; }
371
- 60% {
372
- left: 100%;
373
- right: -90%; }
374
- 100% {
375
- left: 100%;
376
- right: -90%; } }
377
- @keyframes indeterminate {
378
- 0% {
379
- left: -35%;
380
- right: 100%; }
381
- 60% {
382
- left: 100%;
383
- right: -90%; }
384
- 100% {
385
- left: 100%;
386
- right: -90%; } }
387
- @-webkit-keyframes indeterminate-short {
388
- 0% {
389
- left: -200%;
390
- right: 100%; }
391
- 60% {
392
- left: 107%;
393
- right: -8%; }
394
- 100% {
395
- left: 107%;
396
- right: -8%; } }
397
- @keyframes indeterminate-short {
398
- 0% {
399
- left: -200%;
400
- right: 100%; }
401
- 60% {
402
- left: 107%;
403
- right: -8%; }
404
- 100% {
405
- left: 107%;
406
- right: -8%; } }
407
- .material-progress.type-circular .progress {
408
- animation: rotator 1.4s linear infinite; }
409
- @keyframes rotator {
410
- 0% {
411
- transform: rotate(0deg); }
412
- 100% {
413
- transform: rotate(270deg); } }
414
- .material-progress.type-circular .path {
415
- stroke: #4285F4;
416
- stroke-dasharray: 187;
417
- stroke-dashoffset: 0;
418
- transform-origin: center;
419
- animation: dash 1.4s ease-in-out infinite; }
420
- @keyframes dash {
421
- 0% {
422
- stroke-dashoffset: 187; }
423
- 50% {
424
- stroke-dashoffset: 187/4;
425
- transform: rotate(135deg); }
426
- 100% {
427
- stroke-dashoffset: 187;
428
- transform: rotate(450deg); } }
429
- .material-banner {
430
- padding: 20px 16px 16px;
431
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
432
- background-color: white;
433
- position: absolute;
434
- overflow: hidden;
435
- bottom: 0;
436
- left: 0;
437
- right: 0; }
438
- .material-banner .material-toolbar {
439
- padding-top: 16px; }
440
-
441
- .banner-wrapper {
442
- position: relative;
443
- overflow: hidden;
444
- z-index: 4;
445
- height: 0;
446
- transition: height 0.2s; }
447
- .banner-wrapper.is-fixed {
448
- z-index: 4;
449
- position: absolute;
450
- top: 0;
451
- left: 0;
452
- right: 0; }
453
- .banner-wrapper.is-shown {
454
- transition: height 0.2s; }
455
-
456
- .material-card {
457
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
458
- flex-direction: column;
459
- -webkit-box-pack: end;
460
- -ms-flex-pack: end;
461
- justify-content: flex-end;
462
- padding: 0;
463
- -webkit-box-sizing: border-box;
464
- box-sizing: border-box;
465
- border-radius: 2px;
466
- overflow: hidden;
467
- display: block;
468
- background-color: white; }
469
- .material-card .material-container {
470
- padding: 1rem; }
471
- .material-card .toolbar-action {
472
- text-align: right;
473
- display: block;
474
- padding: 8px; }
475
-
476
- .material-menu {
477
- z-index: 50;
478
- position: absolute;
479
- display: inline-block;
480
- background-color: white;
481
- border-radius: 2px;
482
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
483
- top: -1000px;
484
- overflow: hidden;
485
- height: 0; }
486
- .material-menu.menu-show {
487
- height: auto;
488
- transition: height 1s; }
489
- .material-menu .material-list {
490
- position: relative;
491
- bottom: 0;
492
- padding: 8px 0; }
493
- .material-menu .material-list .material-item,
494
- .material-menu .material-item {
495
- display: block;
496
- padding: 8px 64px 8px 16px; }
497
- .material-menu .material-list .material-item:active,
498
- .material-menu .material-item:active {
499
- transition: 0.2s;
500
- background-color: rgba(0, 0, 0, 0.05); }
501
- .material-menu .material-divider {
502
- display: block;
503
- height: 1px;
504
- padding: 0;
505
- background-color: rgba(0, 0, 0, 0.05);
506
- margin: 8px 0; }
507
-
508
- .menu-mask {
509
- top: 0;
510
- pointer-events: none;
511
- z-index: 49;
512
- position: fixed;
513
- height: 100%;
514
- width: 100%;
515
- transition: 0.3s; }
516
- .menu-mask.mask-show {
517
- transition: 0.3s;
518
- pointer-events: auto;
519
- background-color: rgba(0, 0, 0, 0.05); }
520
-
521
- .material-dialog {
522
- position: fixed;
523
- top: 0;
524
- left: 0;
525
- bottom: 0;
526
- right: 0;
527
- background-color: rgba(0, 0, 0, 0.5);
528
- display: -webkit-box;
529
- display: -ms-flexbox;
530
- display: flex;
531
- align-items: center;
532
- justify-content: center;
533
- overflow: hidden;
534
- z-index: 20;
535
- opacity: 0;
536
- transition: 0.2s; }
537
- .material-dialog .dialog-surface {
538
- transition: 0.1s;
539
- max-height: 600px;
540
- display: flex;
541
- min-width: 320px;
542
- flex-direction: column;
543
- flex-wrap: nowrap;
544
- opacity: 0;
545
- overflow: hidden;
546
- border-radius: 2px;
547
- background-color: white;
548
- overflow: scroll;
549
- box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
550
- transform: translateY(150px) scale(0.8); }
551
- .material-dialog .dialog-surface > *:first-child {
552
- margin-top: 24px; }
553
- .material-dialog .dialog-surface .dialog-title {
554
- font-weight: bold;
555
- flex: none;
556
- margin: 24px 24px 24px 24px;
557
- padding: 0; }
558
- .material-dialog .dialog-surface .dialog-content {
559
- flex: 1;
560
- padding: 0 24px 24px 24px; }
561
- .material-dialog .dialog-surface .dialog-content.material-text {
562
- opacity: 0.7; }
563
- .material-dialog .dialog-surface .dialog-actions {
564
- flex: none;
565
- display: block;
566
- text-align: right; }
567
- .material-dialog .dialog-surface .material-toolbar {
568
- position: relative; }
569
- .material-dialog .dialog-surface .component-body {
570
- flex: 1;
571
- overflow: hidden;
572
- position: relative;
573
- padding: 16px; }
574
- .material-dialog .dialog-surface .list-list {
575
- overflow: scroll;
576
- position: relative;
577
- padding: 0;
578
- border-top: 1px solid rgba(0, 0, 0, 0.1);
579
- border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
580
- .material-dialog .dialog-surface .component-action {
581
- flex: none;
582
- display: "flex";
583
- text-align: right;
584
- padding: 8px; }
585
- .material-dialog .dialog-surface .component-action .material-buttion {
586
- margin: 0 0 0 8px; }
587
- .material-dialog.dialog-show {
588
- transition: 0.1s;
589
- opacity: 1; }
590
- .material-dialog.dialog-show .dialog-surface {
591
- transform: translateY(0) scale(1);
592
- opacity: 1;
593
- margin-top: 0;
594
- transition: 0.1s; }
595
- .material-dialog.dialog-closing {
596
- pointer-events: none;
597
- opacity: 0;
598
- transition: 0.2s; }
599
- .material-dialog.dialog-closing .dialog-surface {
600
- opacity: 0;
601
- transform: translateY(150px) scale(0.8);
602
- transition: 0.1s; }
603
-
604
- .dark-theme .material-dialog .dialog-surface,
605
- .material-dialog.dark-theme .dialog-surface {
606
- background-color: #333333; }
607
-
608
- .material-drawer {
609
- opacity: 0;
610
- pointer-events: none;
611
- z-index: 15;
612
- position: absolute;
613
- right: 0;
614
- top: 0;
615
- bottom: 0;
616
- left: 0;
617
- background-color: rgba(0, 0, 0, 0); }
618
- .material-drawer.is-fixed {
619
- position: fixed; }
620
- .material-drawer .drawer-panel {
621
- background-color: white;
622
- z-index: 8;
623
- position: relative;
624
- will-change: transfo1rm;
625
- transition: 0.3s cubic-bezier(0.4, 0, 0.6, 1);
626
- transform: translateX(calc(100% - 20px));
627
- background-color: white;
628
- width: 0; }
629
- .material-drawer.show {
630
- pointer-events: initial;
631
- background-color: rgba(0, 0, 0, 0);
632
- opacity: 1; }
633
- .material-drawer.show .drawer-panel {
634
- transition: 233ms cubic-bezier(0, 0, 0.21, 1);
635
- opacity: 1;
636
- transform: translateX(0);
637
- transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
638
- background-color: white; }
639
-
640
- .material-drawer.drawer-temporary {
641
- opacity: 0;
642
- pointer-events: none;
643
- z-index: 15;
644
- position: absolute;
645
- right: 0;
646
- top: 0;
647
- bottom: 0;
648
- left: 0;
649
- transition: 0.2s cubic-bezier(0, 0, 0.2, 1); }
650
- .material-drawer.drawer-temporary.show {
651
- pointer-events: initial;
652
- background-color: rgba(0, 0, 0, 0.7);
653
- opacity: 1;
654
- transition: 0.2s cubic-bezier(0, 0, 0.2, 1); }
655
- .material-drawer.drawer-temporary.show .drawer-panel {
656
- width: 340px;
657
- transform: none; }
658
- .material-drawer.drawer-temporary.is-fixed {
659
- position: fixed; }
660
- .material-drawer.drawer-temporary .drawer-panel {
661
- position: absolute;
662
- height: 100%;
663
- width: 340px;
664
- transform: translateX(calc(-100% - 20px));
665
- z-index: 16;
666
- box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
667
- transition: 233ms cubic-bezier(0, 0, 0.21, 1); }
668
-
669
- .material-drawer.drawer-persistent {
670
- opacity: 0;
671
- pointer-events: none;
672
- z-index: 15;
673
- flex: 1;
674
- position: relative;
675
- right: 0;
676
- top: 0;
677
- bottom: 0;
678
- left: 0;
679
- transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
680
- height: 100%;
681
- width: initial; }
682
- .material-drawer.drawer-persistent.is-fixed {
683
- position: fixed; }
684
- .material-drawer.drawer-persistent .drawer-panel {
685
- position: relative;
686
- height: 100%;
687
- width: 0px;
688
- transform: none;
689
- z-index: 16;
690
- transition: 233ms cubic-bezier(0, 0, 0.21, 1);
691
- border-right: 1px solid #e4e4e4; }
692
- .material-drawer.drawer-persistent.show {
693
- pointer-events: initial;
694
- background-color: rgba(0, 0, 0, 0.7);
695
- opacity: 1;
696
- transition: 0.2s cubic-bezier(0, 0, 0.2, 1); }
697
- .material-drawer.drawer-persistent.show .drawer-panel {
698
- width: 340px;
699
- transform: none; }
700
-
701
- .material-drawer.drawer-permanent {
702
- opacity: 1;
703
- pointer-events: none;
704
- z-index: 15;
705
- flex: 1;
706
- position: relative;
707
- right: 0;
708
- top: 0;
709
- bottom: 0;
710
- left: 0;
711
- transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
712
- height: 100%;
713
- width: initial; }
714
- .material-drawer.drawer-permanent.is-fixed {
715
- position: fixed; }
716
- .material-drawer.drawer-permanent .drawer-panel {
717
- position: relative;
718
- height: 100%;
719
- width: 340px;
720
- transform: none;
721
- z-index: 16;
722
- transition: 233ms cubic-bezier(0, 0, 0.21, 1);
723
- border-right: 1px solid #e4e4e4; }
724
- .material-drawer.drawer-permanent.show {
725
- pointer-events: initial;
726
- background-color: rgba(0, 0, 0, 0.7);
727
- opacity: 1;
728
- transition: 0.2s cubic-bezier(0, 0, 0.2, 1); }
729
- .material-drawer.drawer-permanent.show .drawer-panel {
730
- width: 340px;
731
- transform: none; }
732
-
733
- .material-tabs {
734
- position: relative;
735
- text-align: center;
736
- overflow: hidden;
737
- white-space: nowrap; }
738
- .material-tabs > .material-list {
739
- display: inline-block;
740
- white-space: nowrap;
741
- padding: 0;
742
- margin: 0;
743
- text-align: center;
744
- white-space: nowrap; }
745
- .material-tabs > .material-list .material-button {
746
- font-size: 0.875rem;
747
- font-weight: 500;
748
- letter-spacing: 0.04em;
749
- line-height: 1.5rem;
750
- text-decoration: inherit;
751
- text-transform: uppercase;
752
- display: table-cell;
753
- position: relative;
754
- display: inline-block;
755
- width: initial;
756
- min-width: 160px;
757
- min-height: 48px;
758
- padding: 0 24px;
759
- text-align: center;
760
- text-decoration: none;
761
- white-space: nowrap;
762
- cursor: pointer;
763
- overflow: hidden;
764
- vertical-align: middle;
765
- transition: 0.4s;
766
- margin: 0;
767
- background-color: transparent; }
768
- .material-tabs .material-indicator {
769
- position: absolute;
770
- height: 2px;
771
- bottom: 0;
772
- background-color: #6200ee;
773
- transition: 0.2s; }
774
- .material-tabs.primary-color {
775
- background-color: #6200ee; }
776
- .material-tabs.primary-color .material-list .material-button {
777
- color: rgba(255, 255, 255, 0.95); }
778
- .material-tabs.primary-color .material-list .material-ripple {
779
- background-color: rgba(255, 255, 255, 0.95); }
780
- .material-tabs.primary-color .material-indicator {
781
- background-color: rgba(255, 255, 255, 0.95); }
782
- .material-tabs.secondary-color {
783
- background-color: #1A9989; }
784
- .material-tabs.secondary-color .material-list .material-button {
785
- color: rgba(255, 255, 255, 0.95); }
786
- .material-tabs.secondary-color .material-list .material-ripple {
787
- background-color: rgba(255, 255, 255, 0.95); }
788
- .material-tabs.secondary-color .material-indicator {
789
- background-color: rgba(255, 255, 255, 0.95); }
790
-
791
- .material-tabs.small .material-list .material-button {
792
- font-size: 0.475rem;
793
- font-weight: 500;
794
- letter-spacing: 0.04em;
795
- line-height: 1rem;
796
- min-width: 80px;
797
- min-height: 18px;
798
- padding: 0 14px;
799
- margin: 0;
800
- background-color: transparent; }
801
- .material-tabs.small .material-list .material-button label {
802
- padding: 8px; }
803
-
804
- .material-appbar {
805
- display: flex;
806
- flex-direction: row;
807
- height: 64px;
808
- position: absolute;
809
- top: 0;
810
- left: 0;
811
- right: 0;
812
- z-index: 3;
813
- flex: none;
814
- display: flex;
815
- flex-direction: row;
816
- flex-wrap: nowrap;
817
- padding: 14px 16px; }
818
- .material-appbar.type-bottom {
819
- bottom: 0;
820
- top: inherit; }
821
- .material-appbar.type-app {
822
- z-index: 5;
823
- padding: 14px 16px;
824
- position: fixed; }
825
- .material-appbar.type-app.is-flexible {
826
- position: fixed; }
827
- .material-appbar.type-app.is-scrolled {
828
- transition: box-shadow 0.3s;
829
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); }
830
- .material-appbar.is-flexible {
831
- position: absolute;
832
- top: 0;
833
- left: 0;
834
- right: 0; }
835
- .material-appbar.is-fixed {
836
- position: absolute;
837
- top: 0;
838
- left: 0;
839
- right: 0; }
840
- .material-appbar.is-fixed.is-scrolled {
841
- transition: box-shadow 0.3s;
842
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); }
843
- .material-appbar.is-fixed.type-bottom {
844
- bottom: 0;
845
- top: inherit; }
846
- .material-appbar > *:first-child {
847
- margin-left: 0; }
848
- .material-appbar > *:last-child {
849
- margin-right: 0; }
850
- .material-appbar .material-text {
851
- flex: 1;
852
- display: inline-block;
853
- font-size: 1.3rem;
854
- font-weight: 300;
855
- line-height: 2.3rem;
856
- color: rgba(255, 255, 255, 0.95);
857
- padding: 0;
858
- margin-left: 16px;
859
- overflow: hidden;
860
- white-space: nowrap;
861
- text-overflow: ellipsis; }
862
- .material-appbar .material-checkbox {
863
- padding: 0; }
864
- .material-appbar .material-checkbox .checkbox-control {
865
- height: 36px;
866
- width: 36px;
867
- margin: 0; }
868
- .material-appbar .material-checkbox .checkbox-control .checkbox-icon {
869
- border: 2px solid rgba(255, 255, 255, 0.95); }
870
- .material-appbar .material-checkbox .checkbox-label {
871
- color: rgba(255, 255, 255, 0.95);
872
- padding: 10px 0 6px; }
873
- .material-appbar .material-button .button-icon svg {
874
- fill: rgba(255, 255, 255, 0.95); }
875
- .material-appbar.transparent-color {
876
- background-color: transparent; }
877
- .material-appbar.transparent-color .material-text {
878
- color: rgba(0, 0, 0, 0.87); }
879
- .material-appbar.transparent-color .material-button .button-icon svg {
880
- fill: rgba(0, 0, 0, 0.87); }
881
- .material-appbar.transparent-color .material-checkbox {
882
- padding: 0; }
883
- .material-appbar.transparent-color .material-checkbox .checkbox-control {
884
- height: 36px;
885
- width: 36px;
886
- margin: 0; }
887
- .material-appbar.transparent-color .material-checkbox .checkbox-control .checkbox-icon {
888
- border: 2px solid rgba(255, 255, 255, 0.95); }
889
- .material-appbar.transparent-color .material-checkbox .checkbox-label {
890
- color: rgba(0, 0, 0, 0.87);
891
- padding: 10px 0 6px; }
892
- .material-appbar.primary-color {
893
- background-color: #6200ee; }
894
- .material-appbar.primary-color .material-text {
895
- color: rgba(255, 255, 255, 0.95); }
896
- .material-appbar.primary-color .material-button .button-icon svg {
897
- fill: rgba(255, 255, 255, 0.95); }
898
- .material-appbar.primary-color .material-checkbox {
899
- padding: 0; }
900
- .material-appbar.primary-color .material-checkbox .checkbox-control {
901
- height: 36px;
902
- width: 36px;
903
- margin: 0; }
904
- .material-appbar.primary-color .material-checkbox .checkbox-control .checkbox-icon {
905
- border: 2px solid rgba(255, 255, 255, 0.95); }
906
- .material-appbar.primary-color .material-checkbox .checkbox-label {
907
- color: rgba(255, 255, 255, 0.95);
908
- padding: 10px 0 6px; }
909
- .material-appbar.secondary-color {
910
- background-color: #1A9989; }
911
- .material-appbar.secondary-color .material-text {
912
- color: rgba(255, 255, 255, 0.95); }
913
- .material-appbar.secondary-color .material-button .button-icon svg {
914
- fill: rgba(255, 255, 255, 0.95); }
915
- .material-appbar.secondary-color .material-checkbox {
916
- padding: 0; }
917
- .material-appbar.secondary-color .material-checkbox .checkbox-control {
918
- height: 36px;
919
- width: 36px;
920
- margin: 0; }
921
- .material-appbar.secondary-color .material-checkbox .checkbox-control .checkbox-icon {
922
- border: 2px solid rgba(255, 255, 255, 0.95); }
923
- .material-appbar.secondary-color .material-checkbox .checkbox-label {
924
- color: rgba(255, 255, 255, 0.95);
925
- padding: 10px 0 6px; }
926
-
927
- .material-toolbar {
928
- display: flex;
929
- flex-direction: row;
930
- z-index: 3;
931
- flex: none;
932
- display: flex;
933
- flex-direction: row;
934
- flex-wrap: nowrap; }
935
- .material-toolbar.type-app {
936
- z-index: 5;
937
- padding: 14px 16px;
938
- position: fixed; }
939
- .material-toolbar.type-app.is-flexible {
940
- position: fixed; }
941
- .material-toolbar.type-app.is-scrolled {
942
- transition: box-shadow 0.3s;
943
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); }
944
- .material-toolbar.is-flexible {
945
- position: absolute;
946
- top: 0;
947
- left: 0;
948
- right: 0; }
949
- .material-toolbar.is-fixed {
950
- position: absolute;
951
- top: 0;
952
- left: 0;
953
- right: 0; }
954
- .material-toolbar.is-fixed.is-scrolled {
955
- transition: box-shadow 0.3s;
956
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); }
957
- .material-toolbar > *:first-child {
958
- margin-left: 0; }
959
- .material-toolbar > *:last-child {
960
- margin-right: 0; }
961
- .material-toolbar .material-text {
962
- flex: 1;
963
- display: inline-block;
964
- font-size: 1.3rem;
965
- font-weight: 300;
966
- line-height: 2.3rem;
967
- padding: 0;
968
- margin-left: 16px;
969
- overflow: hidden;
970
- white-space: nowrap;
971
- text-overflow: ellipsis; }
972
- .material-toolbar .material-checkbox {
973
- padding: 0; }
974
- .material-toolbar .material-checkbox .checkbox-control {
975
- height: 36px;
976
- width: 36px;
977
- margin: 0; }
978
- .material-toolbar .material-checkbox .checkbox-control .checkbox-icon {
979
- border: 2px solid rgba(255, 255, 255, 0.95); }
980
- .material-toolbar .material-checkbox .checkbox-label {
981
- color: rgba(255, 255, 255, 0.95);
982
- padding: 10px 0 6px; }
983
- .material-toolbar .material-button .button-icon svg {
984
- fill: rgba(255, 255, 255, 0.95); }
985
- .material-toolbar.transparent-color {
986
- background-color: transparent; }
987
- .material-toolbar.transparent-color .material-text {
988
- color: rgba(0, 0, 0, 0.87); }
989
- .material-toolbar.transparent-color .material-button .button-icon svg {
990
- fill: rgba(0, 0, 0, 0.87); }
991
- .material-toolbar.transparent-color .material-checkbox {
992
- padding: 0; }
993
- .material-toolbar.transparent-color .material-checkbox .checkbox-control {
994
- height: 36px;
995
- width: 36px;
996
- margin: 0; }
997
- .material-toolbar.transparent-color .material-checkbox .checkbox-control .checkbox-icon {
998
- border: 2px solid rgba(255, 255, 255, 0.95); }
999
- .material-toolbar.transparent-color .material-checkbox .checkbox-label {
1000
- color: rgba(0, 0, 0, 0.87);
1001
- padding: 10px 0 6px; }
1002
- .material-toolbar.primary-color {
1003
- background-color: #6200ee; }
1004
- .material-toolbar.primary-color .material-text {
1005
- color: rgba(255, 255, 255, 0.95); }
1006
- .material-toolbar.primary-color .material-button .button-icon svg {
1007
- fill: rgba(255, 255, 255, 0.95); }
1008
- .material-toolbar.primary-color .material-checkbox {
1009
- padding: 0; }
1010
- .material-toolbar.primary-color .material-checkbox .checkbox-control {
1011
- height: 36px;
1012
- width: 36px;
1013
- margin: 0; }
1014
- .material-toolbar.primary-color .material-checkbox .checkbox-control .checkbox-icon {
1015
- border: 2px solid rgba(255, 255, 255, 0.95); }
1016
- .material-toolbar.primary-color .material-checkbox .checkbox-label {
1017
- color: rgba(255, 255, 255, 0.95);
1018
- padding: 10px 0 6px; }
1019
- .material-toolbar.secondary-color {
1020
- background-color: #1A9989; }
1021
- .material-toolbar.secondary-color .material-text {
1022
- color: rgba(255, 255, 255, 0.95); }
1023
- .material-toolbar.secondary-color .material-button .button-icon svg {
1024
- fill: rgba(255, 255, 255, 0.95); }
1025
- .material-toolbar.secondary-color .material-checkbox {
1026
- padding: 0; }
1027
- .material-toolbar.secondary-color .material-checkbox .checkbox-control {
1028
- height: 36px;
1029
- width: 36px;
1030
- margin: 0; }
1031
- .material-toolbar.secondary-color .material-checkbox .checkbox-control .checkbox-icon {
1032
- border: 2px solid rgba(255, 255, 255, 0.95); }
1033
- .material-toolbar.secondary-color .material-checkbox .checkbox-label {
1034
- color: rgba(255, 255, 255, 0.95);
1035
- padding: 10px 0 6px; }
1036
-
1037
- .material-snackbar {
1038
- position: absolute;
1039
- display: inline-block;
1040
- bottom: 0;
1041
- left: 50%;
1042
- box-sizing: border-box;
1043
- border-radius: 2px;
1044
- overflow: hidden;
1045
- background-color: #323232;
1046
- padding: 8px 16px;
1047
- bottom: -56px;
1048
- transition: 0.3s; }
1049
- .material-snackbar.show {
1050
- bottom: 0;
1051
- transition: 0.3s; }
1052
- .material-snackbar .material-text {
1053
- line-height: 2.4rem;
1054
- color: rgba(255, 255, 255, 0.95); }
1055
-
1056
- .material-button {
1057
- display: inline-block;
1058
- color: rgba(0, 0, 0, 0.87);
1059
- -webkit-font-smoothing: antialiased;
1060
- white-space: nowrap;
1061
- position: relative;
1062
- vertical-align: middle;
1063
- cursor: default;
1064
- height: 36px;
1065
- padding: 6px 8px 6px 8px;
1066
- margin: 0 8px;
1067
- border: none;
1068
- border-radius: 2px;
1069
- overflow: hidden;
1070
- background-color: transparent; }
1071
- .material-button > * {
1072
- pointer-events: none; }
1073
- .material-button .button-icon {
1074
- pointer-events: none;
1075
- z-index: 2;
1076
- display: inline-block;
1077
- width: 24px;
1078
- height: 24px;
1079
- padding: 0 8px;
1080
- vertical-align: bottom;
1081
- padding: 0;
1082
- background-repeat: no-repeat;
1083
- background-position: center center; }
1084
- .material-button .button-icon svg {
1085
- fill: rgba(0, 0, 0, 0.87); }
1086
- .material-button .button-label {
1087
- order: 2;
1088
- pointer-events: none;
1089
- font-size: 0.875rem;
1090
- font-weight: 600;
1091
- line-height: 1.1rem;
1092
- display: inline-block;
1093
- z-index: 2;
1094
- text-transform: uppercase;
1095
- padding: 3px 8px 3px 8px;
1096
- margin: 0; }
1097
- .material-button .material-ripple {
1098
- opacity: 1;
1099
- pointer-events: none;
1100
- z-index: 1;
1101
- position: absolute;
1102
- background-color: rgba(0, 0, 0, 0.1);
1103
- height: 5px;
1104
- width: 5px;
1105
- border-radius: 50%; }
1106
-
1107
- .material-button.is-disabled {
1108
- pointer-events: none;
1109
- opacity: 0.3; }
1110
- .material-button:focus {
1111
- transition-duration: 0.3s;
1112
- background-color: rgba(0, 0, 0, 0.05); }
1113
- .material-button:focus:hover {
1114
- background-color: rgba(0, 0, 0, 0.05); }
1115
- .material-button:active {
1116
- transition-duration: 0.2s; }
1117
- .material-button:hover {
1118
- transition-duration: 0.2s;
1119
- background-color: rgba(0, 0, 0, 0.03); }
1120
- .material-button:disabled {
1121
- pointer-events: none;
1122
- opacity: 0.3; }
1123
-
1124
- .material-button.style-compact > .button-label {
1125
- padding-left: 0;
1126
- padding-right: 0; }
1127
- .material-button.style-dense {
1128
- height: 32px; }
1129
- .material-button.style-dense > .button-label {
1130
- font-size: 0.8125rem;
1131
- padding-top: 2px;
1132
- padding-bottom: 2px; }
1133
-
1134
- .material-button.primary-color {
1135
- color: #6200ee; }
1136
- .material-button.primary-color:focus {
1137
- background-color: rgba(98, 0, 238, 0.1); }
1138
- .material-button.primary-color:focus:hover {
1139
- background-color: rgba(98, 0, 238, 0.1); }
1140
- .material-button.primary-color:hover {
1141
- background-color: rgba(98, 0, 238, 0.05); }
1142
- .material-button.primary-color .button-icon svg {
1143
- fill: #6200ee; }
1144
- .material-button.primary-color .material-ripple {
1145
- background-color: rgba(98, 0, 238, 0.1); }
1146
- .material-button.secondary-color {
1147
- color: #1A9989; }
1148
- .material-button.secondary-color .button-icon svg {
1149
- fill: #1A9989; }
1150
- .material-button.secondary-color .material-ripple {
1151
- background-color: rgba(26, 153, 137, 0.1); }
1152
- .material-button.secondary-color:focus {
1153
- background-color: rgba(26, 153, 137, 0.1); }
1154
- .material-button.secondary-color:focus:hover {
1155
- background-color: rgba(26, 153, 137, 0.1); }
1156
- .material-button.secondary-color:hover {
1157
- background-color: rgba(26, 153, 137, 0.05); }
1158
-
1159
- .dark-theme .material-button,
1160
- .material-button.dark-theme {
1161
- color: rgba(255, 255, 255, 0.95); }
1162
- .dark-theme .material-button .button-icon svg,
1163
- .material-button.dark-theme .button-icon svg {
1164
- fill: rgba(255, 255, 255, 0.95); }
1165
- .dark-theme .material-button .material-ripple,
1166
- .material-button.dark-theme .material-ripple {
1167
- background-color: rgba(255, 255, 255, 0.1); }
1168
- .dark-theme .material-button:focus,
1169
- .material-button.dark-theme:focus {
1170
- background-color: rgba(255, 255, 255, 0.1); }
1171
- .dark-theme .material-button:focus:hover,
1172
- .material-button.dark-theme:focus:hover {
1173
- background-color: rgba(255, 255, 255, 0.1); }
1174
- .dark-theme .material-button:hover,
1175
- .material-button.dark-theme:hover {
1176
- background-color: rgba(255, 255, 255, 0.05); }
1177
- .dark-theme .material-button.primary-color,
1178
- .material-button.dark-theme.primary-color {
1179
- color: #6200ee; }
1180
- .dark-theme .material-button.primary-color .button-icon svg,
1181
- .material-button.dark-theme.primary-color .button-icon svg {
1182
- fill: #6200ee; }
1183
- .dark-theme .material-button.primary-color .material-ripple,
1184
- .material-button.dark-theme.primary-color .material-ripple {
1185
- background-color: rgba(98, 0, 238, 0.3); }
1186
- .dark-theme .material-button.primary-color:focus,
1187
- .material-button.dark-theme.primary-color:focus {
1188
- background-color: rgba(98, 0, 238, 0.2); }
1189
- .dark-theme .material-button.primary-color:focus:hover,
1190
- .material-button.dark-theme.primary-color:focus:hover {
1191
- background-color: rgba(98, 0, 238, 0.2); }
1192
- .dark-theme .material-button.primary-color:hover,
1193
- .material-button.dark-theme.primary-color:hover {
1194
- background-color: rgba(98, 0, 238, 0.1); }
1195
- .dark-theme .material-button.secondary-color,
1196
- .material-button.dark-theme.secondary-color {
1197
- color: #1A9989; }
1198
- .dark-theme .material-button.secondary-color .button-icon svg,
1199
- .material-button.dark-theme.secondary-color .button-icon svg {
1200
- fill: #1A9989; }
1201
- .dark-theme .material-button.secondary-color .material-ripple,
1202
- .material-button.dark-theme.secondary-color .material-ripple {
1203
- background-color: rgba(26, 153, 137, 0.3); }
1204
- .dark-theme .material-button.secondary-color:focus,
1205
- .material-button.dark-theme.secondary-color:focus {
1206
- background-color: rgba(26, 153, 137, 0.2); }
1207
- .dark-theme .material-button.secondary-color:focus:hover,
1208
- .material-button.dark-theme.secondary-color:focus:hover {
1209
- background-color: rgba(26, 153, 137, 0.2); }
1210
- .dark-theme .material-button.secondary-color:hover,
1211
- .material-button.dark-theme.secondary-color:hover {
1212
- background-color: rgba(26, 153, 137, 0.1); }
1213
-
1214
- .material-button.type-raised {
1215
- min-width: 36px;
1216
- transition: box-shadow 0.2s;
1217
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
1218
- .material-button.type-raised .material-ripple {
1219
- opacity: 0.1;
1220
- background-color: black; }
1221
-
1222
- .material-button.type-raised {
1223
- background-color: rgba(0, 0, 0, 0.05); }
1224
- .material-button.type-raised:focus {
1225
- background-color: rgba(0, 0, 0, 0.15); }
1226
- .material-button.type-raised:focus:hover {
1227
- background-color: rgba(0, 0, 0, 0.15); }
1228
- .material-button.type-raised:hover {
1229
- background-color: rgba(0, 0, 0, 0.1); }
1230
- .material-button.type-raised:active {
1231
- box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 6px 8px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
1232
-
1233
- .material-button.type-raised.primary-color {
1234
- background-color: #6200ee;
1235
- color: rgba(255, 255, 255, 0.95); }
1236
- .material-button.type-raised.primary-color .button-icon svg {
1237
- fill: rgba(255, 255, 255, 0.95); }
1238
- .material-button.type-raised.primary-color .material-ripple {
1239
- opacity: 0.3;
1240
- background-color: white; }
1241
- .material-button.type-raised.primary-color:focus {
1242
- background-color: #8c3cff; }
1243
- .material-button.type-raised.primary-color:focus:hover {
1244
- background-color: #8c3cff; }
1245
- .material-button.type-raised.primary-color:hover {
1246
- background-color: #7413ff; }
1247
- .material-button.type-raised.secondary-color {
1248
- background-color: #1A9989;
1249
- color: rgba(255, 255, 255, 0.95); }
1250
- .material-button.type-raised.secondary-color .button-icon svg {
1251
- fill: rgba(255, 255, 255, 0.95); }
1252
- .material-button.type-raised.secondary-color .material-ripple {
1253
- opacity: 0.3;
1254
- background-color: white; }
1255
- .material-button.type-raised.secondary-color:focus {
1256
- background-color: #21c5b0; }
1257
- .material-button.type-raised.secondary-color:focus:hover {
1258
- background-color: #21c5b0; }
1259
- .material-button.type-raised.secondary-color:hover {
1260
- background-color: #1eaf9d; }
1261
-
1262
- .dark-theme .material-button.type-raised,
1263
- .material-button.type-raised.dark-theme {
1264
- background-color: rgba(255, 255, 255, 0.1);
1265
- color: rgba(255, 255, 255, 0.95); }
1266
- .dark-theme .material-button.type-raised .material-ripple,
1267
- .material-button.type-raised.dark-theme .material-ripple {
1268
- opacity: 0.1;
1269
- background-color: white; }
1270
- .dark-theme .material-button.type-raised:focus,
1271
- .material-button.type-raised.dark-theme:focus {
1272
- background-color: rgba(255, 255, 255, 0.2); }
1273
- .dark-theme .material-button.type-raised:focus:hover,
1274
- .material-button.type-raised.dark-theme:focus:hover {
1275
- background-color: rgba(255, 255, 255, 0.2); }
1276
- .dark-theme .material-button.type-raised:hover,
1277
- .material-button.type-raised.dark-theme:hover {
1278
- background-color: rgba(255, 255, 255, 0.15); }
1279
- .dark-theme .material-button.type-raised .button-icon svg,
1280
- .material-button.type-raised.dark-theme .button-icon svg {
1281
- fill: rgba(255, 255, 255, 0.95); }
1282
- .dark-theme .material-button.type-raised.primary-color,
1283
- .material-button.type-raised.dark-theme.primary-color {
1284
- background-color: #6200ee;
1285
- color: rgba(255, 255, 255, 0.95); }
1286
- .dark-theme .material-button.type-raised.primary-color .button-icon svg,
1287
- .material-button.type-raised.dark-theme.primary-color .button-icon svg {
1288
- fill: rgba(255, 255, 255, 0.95); }
1289
- .dark-theme .material-button.type-raised.primary-color:focus,
1290
- .material-button.type-raised.dark-theme.primary-color:focus {
1291
- background-color: #8c3cff; }
1292
- .dark-theme .material-button.type-raised.primary-color:focus:hover,
1293
- .material-button.type-raised.dark-theme.primary-color:focus:hover {
1294
- background-color: #8c3cff; }
1295
- .dark-theme .material-button.type-raised.primary-color:hover,
1296
- .material-button.type-raised.dark-theme.primary-color:hover {
1297
- background-color: #7413ff; }
1298
- .dark-theme .material-button.type-raised.secondary-color,
1299
- .material-button.type-raised.dark-theme.secondary-color {
1300
- background-color: #1A9989;
1301
- color: rgba(255, 255, 255, 0.95); }
1302
- .dark-theme .material-button.type-raised.secondary-color .button-icon svg,
1303
- .material-button.type-raised.dark-theme.secondary-color .button-icon svg {
1304
- fill: rgba(255, 255, 255, 0.95); }
1305
- .dark-theme .material-button.type-raised.secondary-color:focus,
1306
- .material-button.type-raised.dark-theme.secondary-color:focus {
1307
- background-color: #21c5b0; }
1308
- .dark-theme .material-button.type-raised.secondary-color:focus:hover,
1309
- .material-button.type-raised.dark-theme.secondary-color:focus:hover {
1310
- background-color: #21c5b0; }
1311
- .dark-theme .material-button.type-raised.secondary-color:hover,
1312
- .material-button.type-raised.dark-theme.secondary-color:hover {
1313
- background-color: #1eaf9d; }
1314
-
1315
- .material-button.type-floating {
1316
- min-width: 56px;
1317
- min-height: 56px;
1318
- transition: box-shadow 0.2s;
1319
- border-radius: 28px;
1320
- padding: 6px;
1321
- box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); }
1322
- .material-button.type-floating .button-label {
1323
- display: none; }
1324
- .material-button.type-floating .button-icon {
1325
- padding: 0;
1326
- height: 24px;
1327
- width: 24px;
1328
- margin-left: 0; }
1329
- .material-button.type-floating .button-icon svg {
1330
- fill: rgba(0, 0, 0, 0.87); }
1331
- .material-button.type-floating .material-ripple {
1332
- opacity: 0.1;
1333
- background-color: black; }
1334
-
1335
- .material-button.type-floating {
1336
- background-color: rgba(0, 0, 0, 0.05); }
1337
- .material-button.type-floating:focus {
1338
- background-color: rgba(0, 0, 0, 0.15); }
1339
- .material-button.type-floating:focus:hover {
1340
- background-color: rgba(0, 0, 0, 0.15); }
1341
- .material-button.type-floating:hover {
1342
- background-color: rgba(0, 0, 0, 0.1); }
1343
- .material-button.type-floating:active {
1344
- box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); }
1345
-
1346
- .material-button.type-floating.primary-color {
1347
- background-color: #6200ee;
1348
- color: rgba(255, 255, 255, 0.95); }
1349
- .material-button.type-floating.primary-color .button-icon svg {
1350
- fill: rgba(255, 255, 255, 0.95); }
1351
- .material-button.type-floating.primary-color .material-ripple {
1352
- opacity: 0.3;
1353
- background-color: white; }
1354
- .material-button.type-floating.primary-color:focus {
1355
- background-color: #8c3cff; }
1356
- .material-button.type-floating.primary-color:focus:hover {
1357
- background-color: #8c3cff; }
1358
- .material-button.type-floating.primary-color:hover {
1359
- background-color: #7413ff; }
1360
- .material-button.type-floating.secondary-color {
1361
- background-color: #1A9989;
1362
- color: rgba(255, 255, 255, 0.95); }
1363
- .material-button.type-floating.secondary-color .button-icon svg {
1364
- fill: rgba(255, 255, 255, 0.95); }
1365
- .material-button.type-floating.secondary-color .material-ripple {
1366
- opacity: 0.3;
1367
- background-color: white; }
1368
- .material-button.type-floating.secondary-color:focus {
1369
- background-color: #21c5b0; }
1370
- .material-button.type-floating.secondary-color:focus:hover {
1371
- background-color: #21c5b0; }
1372
- .material-button.type-floating.secondary-color:hover {
1373
- background-color: #1eaf9d; }
1374
-
1375
- .dark-theme .material-button.type-floating,
1376
- .material-button.type-floating.dark-theme {
1377
- background-color: rgba(255, 255, 255, 0.1);
1378
- color: rgba(255, 255, 255, 0.95); }
1379
- .dark-theme .material-button.type-floating .material-ripple,
1380
- .material-button.type-floating.dark-theme .material-ripple {
1381
- opacity: 0.1;
1382
- background-color: white; }
1383
- .dark-theme .material-button.type-floating:focus,
1384
- .material-button.type-floating.dark-theme:focus {
1385
- background-color: rgba(255, 255, 255, 0.2); }
1386
- .dark-theme .material-button.type-floating:focus:hover,
1387
- .material-button.type-floating.dark-theme:focus:hover {
1388
- background-color: rgba(255, 255, 255, 0.2); }
1389
- .dark-theme .material-button.type-floating:hover,
1390
- .material-button.type-floating.dark-theme:hover {
1391
- background-color: rgba(255, 255, 255, 0.15); }
1392
- .dark-theme .material-button.type-floating .button-icon svg,
1393
- .material-button.type-floating.dark-theme .button-icon svg {
1394
- fill: rgba(255, 255, 255, 0.95); }
1395
- .dark-theme .material-button.type-floating.primary-color,
1396
- .material-button.type-floating.dark-theme.primary-color {
1397
- background-color: #6200ee;
1398
- color: rgba(255, 255, 255, 0.95); }
1399
- .dark-theme .material-button.type-floating.primary-color .button-icon svg,
1400
- .material-button.type-floating.dark-theme.primary-color .button-icon svg {
1401
- fill: rgba(255, 255, 255, 0.95); }
1402
- .dark-theme .material-button.type-floating.primary-color:focus,
1403
- .material-button.type-floating.dark-theme.primary-color:focus {
1404
- background-color: #8c3cff; }
1405
- .dark-theme .material-button.type-floating.primary-color:focus:hover,
1406
- .material-button.type-floating.dark-theme.primary-color:focus:hover {
1407
- background-color: #8c3cff; }
1408
- .dark-theme .material-button.type-floating.primary-color:hover,
1409
- .material-button.type-floating.dark-theme.primary-color:hover {
1410
- background-color: #7413ff; }
1411
- .dark-theme .material-button.type-floating.secondary-color,
1412
- .material-button.type-floating.dark-theme.secondary-color {
1413
- background-color: #1A9989;
1414
- color: rgba(255, 255, 255, 0.95); }
1415
- .dark-theme .material-button.type-floating.secondary-color .button-icon svg,
1416
- .material-button.type-floating.dark-theme.secondary-color .button-icon svg {
1417
- fill: rgba(255, 255, 255, 0.95); }
1418
- .dark-theme .material-button.type-floating.secondary-color:focus,
1419
- .material-button.type-floating.dark-theme.secondary-color:focus {
1420
- background-color: #21c5b0; }
1421
- .dark-theme .material-button.type-floating.secondary-color:focus:hover,
1422
- .material-button.type-floating.dark-theme.secondary-color:focus:hover {
1423
- background-color: #21c5b0; }
1424
- .dark-theme .material-button.type-floating.secondary-color:hover,
1425
- .material-button.type-floating.dark-theme.secondary-color:hover {
1426
- background-color: #1eaf9d; }
1427
-
1428
- .material-button.type-action {
1429
- min-width: 36px;
1430
- transition: box-shadow 0.2s;
1431
- box-shadow: none;
1432
- border-radius: 18px;
1433
- padding: 6px; }
1434
- .material-button.type-action .button-icon {
1435
- padding: 0;
1436
- height: 24px;
1437
- width: 24px;
1438
- margin-left: 0; }
1439
- .material-button.type-action .button-icon svg {
1440
- fill: rgba(0, 0, 0, 0.87); }
1441
-
1442
- .material-button.type-action.style-dense, .material-button.type-action.style-compact {
1443
- height: 32px;
1444
- width: 32px;
1445
- min-width: 32px;
1446
- border-radius: 16px; }
1447
- .material-button.type-action.style-dense .button-icon, .material-button.type-action.style-compact .button-icon {
1448
- width: 20px;
1449
- height: 20px; }
1450
- .material-button.type-action.style-dense .button-icon svg, .material-button.type-action.style-compact .button-icon svg {
1451
- width: 20px;
1452
- height: 20px;
1453
- viewbox: 0 0 20 20; }
1454
-
1455
- .material-button.type-action.primary-color {
1456
- background-color: #6200ee;
1457
- color: rgba(255, 255, 255, 0.95); }
1458
- .material-button.type-action.primary-color .button-icon svg {
1459
- fill: rgba(255, 255, 255, 0.95); }
1460
- .material-button.type-action.primary-color:focus {
1461
- background-color: #7d22ff;
1462
- color: rgba(255, 255, 255, 0.95); }
1463
- .material-button.type-action.secondary-color {
1464
- background-color: #1A9989;
1465
- color: rgba(255, 255, 255, 0.95); }
1466
- .material-button.type-action.secondary-color .button-icon svg {
1467
- fill: rgba(255, 255, 255, 0.95); }
1468
- .material-button.type-action.secondary-color:focus {
1469
- background-color: #1eaf9d;
1470
- color: rgba(255, 255, 255, 0.95); }
1471
-
1472
- .dark-theme .material-button.type-action,
1473
- .material-button.type-action.dark-theme {
1474
- color: rgba(255, 255, 255, 0.95); }
1475
- .dark-theme .material-button.type-action.primary-color,
1476
- .material-button.type-action.dark-theme.primary-color {
1477
- background-color: #6200ee;
1478
- color: rgba(255, 255, 255, 0.95); }
1479
- .dark-theme .material-button.type-action.primary-color .button-icon svg,
1480
- .material-button.type-action.dark-theme.primary-color .button-icon svg {
1481
- fill: rgba(255, 255, 255, 0.95); }
1482
- .dark-theme .material-button.type-action.secondary-color,
1483
- .material-button.type-action.dark-theme.secondary-color {
1484
- background-color: #1A9989;
1485
- color: rgba(255, 255, 255, 0.95); }
1486
- .dark-theme .material-button.type-action.secondary-color .button-icon svg,
1487
- .material-button.type-action.dark-theme.secondary-color .button-icon svg {
1488
- fill: rgba(255, 255, 255, 0.95); }
1489
-
1490
- .material-button.type-file {
1491
- overflow: hidden;
1492
- position: relative;
1493
- vertical-align: middle; }
1494
- .material-button.type-file input[type=file] {
1495
- z-index: 20;
1496
- position: absolute;
1497
- height: 48px;
1498
- width: 48px;
1499
- top: 0;
1500
- right: 0;
1501
- margin: 0;
1502
- padding: 0;
1503
- font-size: 10px;
1504
- cursor: pointer;
1505
- opacity: 0;
1506
- filter: alpha(opacity=0); }
1507
- .material-button.type-file .button-icon {
1508
- z-index: 1;
1509
- padding-right: 6px; }
1510
-
1511
- .material-textfield {
1512
- display: block;
1513
- position: relative;
1514
- margin-right: 16px;
1515
- padding-top: 8px;
1516
- margin-bottom: 16px;
1517
- vertical-align: top; }
1518
- .material-textfield .textfield-label {
1519
- transition: 0.2s;
1520
- color: rgba(0, 0, 0, 0.3);
1521
- position: absolute;
1522
- font-size: 0.7em;
1523
- top: 0; }
1524
- .material-textfield .textfield-underline {
1525
- position: absolute;
1526
- opacity: 0;
1527
- left: 50%;
1528
- bottom: 0px;
1529
- height: 2px;
1530
- width: 2px;
1531
- background-color: #4891F4;
1532
- transition: 0.1s; }
1533
- .material-textfield.textfield-error .textfield-label {
1534
- color: #F44336;
1535
- color: #D6392C; }
1536
- .material-textfield.textfield-error textarea,
1537
- .material-textfield.textfield-error input {
1538
- border-bottom: 1px solid #F44336; }
1539
-
1540
- .material-textfield.is-focused .textfield-label {
1541
- transition: 0.2s;
1542
- color: #4891F4;
1543
- font-size: 0.7em;
1544
- top: 0; }
1545
- .material-textfield.is-focused .textfield-underline {
1546
- opacity: 1;
1547
- display: block;
1548
- width: 100%;
1549
- left: 0;
1550
- transition: 0.1s; }
1551
- .material-textfield.is-empty .textfield-label {
1552
- transition: 0.2s;
1553
- pointer-events: none;
1554
- position: absolute;
1555
- top: 20px;
1556
- left: 0;
1557
- display: block;
1558
- font-size: 1em;
1559
- color: rgba(0, 0, 0, 0.3);
1560
- padding: 0 2px 0 0; }
1561
- .material-textfield.is-empty.is-focused .textfield-label {
1562
- transition: 0.2s;
1563
- color: #4891F4;
1564
- font-size: 0.7em;
1565
- top: 0; }
1566
- .material-textfield.is-empty .textfield-input {
1567
- float: none;
1568
- width: 100%;
1569
- border: none;
1570
- margin: 0;
1571
- background-color: transparent;
1572
- border-radius: 0;
1573
- border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
1574
- .material-textfield .textfield-input {
1575
- float: none;
1576
- width: 100%;
1577
- padding: 12px 8px 8px 0;
1578
- border: none;
1579
- margin: 0;
1580
- background-color: transparent;
1581
- border-radius: 0;
1582
- border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
1583
- .material-textfield .textfield-input:hover {
1584
- cursor: default; }
1585
- .material-textfield .textfield-input:focus {
1586
- cursor: text; }
1587
- .material-textfield input[readonly],
1588
- .material-textfield textarea[readonly] {
1589
- border-bottom: 1px dashed rgba(0, 0, 0, 0.12); }
1590
- .material-textfield input[readonly]:hover,
1591
- .material-textfield textarea[readonly]:hover {
1592
- cursor: default; }
1593
- .material-textfield input[readonly]:focus, .material-textfield input[readonly]:active,
1594
- .material-textfield textarea[readonly]:focus,
1595
- .material-textfield textarea[readonly]:active {
1596
- cursor: text;
1597
- border-bottom: 1px dashed rgba(0, 0, 0, 0.12) !important; }
1598
-
1599
- .dark-theme .material-textfield .textfield-label {
1600
- transition: 0.2s;
1601
- color: rgba(255, 255, 255, 0.3); }
1602
- .dark-theme .material-textfield .textfield-input {
1603
- border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
1604
-
1605
- .material-switch {
1606
- display: block;
1607
- position: relative;
1608
- padding-top: 0;
1609
- padding-bottom: 0;
1610
- margin-right: 16px;
1611
- vertical-align: top;
1612
- display: flex;
1613
- flew-direction: horizontal;
1614
- flex-wrap: nowrap; }
1615
- .material-switch input {
1616
- position: absolute;
1617
- left: -10000px; }
1618
- .material-switch .switch-label {
1619
- flex: 1;
1620
- order: 1;
1621
- cursor: default;
1622
- font-size: 1rem;
1623
- line-height: 1.2rem;
1624
- padding: 14px 0;
1625
- margin: 0px 2px 0px 0;
1626
- overflow: hidden; }
1627
- .material-switch .switch-control {
1628
- order: 3;
1629
- cursor: pointer;
1630
- width: 48px;
1631
- height: 48px;
1632
- padding: 17px 7px;
1633
- border-radius: 50%;
1634
- transition: 0.3s; }
1635
- .material-switch .switch-control .switch-track {
1636
- cursor: pointer;
1637
- position: relative;
1638
- display: block;
1639
- height: 14px;
1640
- padding: 2px;
1641
- background-color: rgba(34, 31, 31, 0.26);
1642
- border-radius: 7px;
1643
- transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1); }
1644
- .material-switch .switch-control .switch-track .switch-knob {
1645
- cursor: pointer;
1646
- position: absolute;
1647
- top: -3px;
1648
- left: -2px;
1649
- display: block;
1650
- height: 20px;
1651
- width: 20px;
1652
- margin: 0;
1653
- border-radius: 50%;
1654
- background-color: #f1f1f1;
1655
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
1656
- transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1); }
1657
- .material-switch .switch-control .switch-track .switch-knob::after {
1658
- position: absolute;
1659
- top: -14px;
1660
- left: -14px;
1661
- width: 48px;
1662
- height: 48px;
1663
- border-radius: 24px;
1664
- content: "";
1665
- transition: 0.2s; }
1666
- .material-switch.is-checked .switch-track {
1667
- background-color: rgba(26, 153, 137, 0.3); }
1668
- .material-switch.is-checked .switch-track .switch-knob {
1669
- background-color: #1A9989;
1670
- left: 15px; }
1671
- .material-switch.is-focused .switch-track .switch-knob::after {
1672
- transition: 0.2s;
1673
- position: absolute;
1674
- top: -14px;
1675
- left: -14px;
1676
- width: 48px;
1677
- height: 48px;
1678
- border-radius: 24px;
1679
- background-color: rgba(0, 0, 0, 0.05);
1680
- content: ""; }
1681
- .material-switch.is-disabled .switch-label {
1682
- opacity: 0.5; }
1683
- .material-switch.is-disabled .switch-control {
1684
- order: 3;
1685
- cursor: pointer;
1686
- width: 48px;
1687
- height: 48px;
1688
- padding: 17px 7px; }
1689
- .material-switch.is-disabled .switch-control .switch-track {
1690
- background-color: rgba(34, 31, 31, 0.1); }
1691
- .material-switch.is-disabled .switch-control .switch-track .switch-knob {
1692
- background-color: #bdbdbd;
1693
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.06); }
1694
-
1695
- .dark-theme .material-switch .switch-control .switch-track {
1696
- background-color: rgba(255, 255, 255, 0.5); }
1697
- .dark-theme .material-switch.is-checked .switch-track {
1698
- background-color: rgba(26, 153, 137, 0.3); }
1699
- .dark-theme .material-switch.is-focused .switch-control .switch-track .switch-knob::after {
1700
- background-color: rgba(255, 255, 255, 0.05); }
1701
-
1702
- .material-checkbox {
1703
- display: block;
1704
- position: relative;
1705
- margin-left: 4px;
1706
- margin-right: 12px;
1707
- padding-top: 4px;
1708
- padding-top: 4px;
1709
- padding-bottom: 4px;
1710
- vertical-align: top;
1711
- overflow: hidden;
1712
- display: flex;
1713
- flew-direction: horizontal;
1714
- flex-wrap: nowrap; }
1715
- .material-checkbox input {
1716
- position: absolute;
1717
- left: -10000px;
1718
- order: 2; }
1719
- .material-checkbox .checkbox-control {
1720
- order: 1;
1721
- cursor: pointer;
1722
- position: relative;
1723
- height: 40px;
1724
- width: 40px;
1725
- padding: 0;
1726
- margin: 4px;
1727
- border-radius: 50%; }
1728
- .material-checkbox .checkbox-control .checkbox-icon {
1729
- position: absolute;
1730
- top: 11px;
1731
- left: 11px;
1732
- border: 2px solid rgba(0, 0, 0, 0.5);
1733
- border-radius: 2px;
1734
- transition: 0.3s; }
1735
- .material-checkbox .checkbox-control .checkbox-icon .checkbox-check {
1736
- opacity: 0;
1737
- position: absolute;
1738
- fill: rgba(255, 255, 255, 0.95);
1739
- top: 8px;
1740
- left: 8px; }
1741
- .material-checkbox .checkbox-label {
1742
- flex: 1;
1743
- order: 3;
1744
- font-size: 1rem;
1745
- line-height: 1.25rem;
1746
- cursor: default;
1747
- padding: 15px 0 9px;
1748
- margin: 0px 2px 0px 12px;
1749
- overflow: hidden; }
1750
- .material-checkbox.is-checked .checkbox-control .checkbox-icon {
1751
- transition: 0.3s;
1752
- border-color: #1A9989;
1753
- background-color: #1A9989; }
1754
- .material-checkbox.is-checked .checkbox-control .checkbox-icon .checkbox-check {
1755
- opacity: 1;
1756
- position: absolute;
1757
- fill: rgba(255, 255, 255, 0.95);
1758
- top: 8px;
1759
- left: 8px; }
1760
- .material-checkbox.is-disabled .checkbox-label {
1761
- opacity: 0.4; }
1762
- .material-checkbox.is-disabled .checkbox-icon {
1763
- background-color: rgba(0, 0, 0, 0.26);
1764
- border-color: rgba(0, 0, 0, 0.26); }
1765
- .material-checkbox.is-disabled .checkbox-control .checkbox-icon {
1766
- opacity: 0.4; }
1767
- .material-checkbox.is-focused .checkbox-control {
1768
- background-color: rgba(34, 31, 31, 0.05); }
1769
-
1770
- .dark-theme .material-checkbox > .material-control > .checkbox-icon,
1771
- .material-checkbox.dark-theme > .material-control > .checkbox-icon {
1772
- border: 2px solid rgba(255, 255, 255, 0.5); }
1773
- .dark-theme .material-checkbox.is-focused .checkbox-control,
1774
- .material-checkbox.dark-theme.is-focused .checkbox-control {
1775
- background-color: rgba(255, 255, 255, 0.05); }
1776
- .dark-theme .material-checkbox.is-checked .material-control,
1777
- .material-checkbox.dark-theme.is-checked .material-control {
1778
- background-color: rgba(255, 255, 255, 0.5); }
1779
-
1780
- .material-slider {
1781
- display: block;
1782
- position: relative;
1783
- padding-top: 0;
1784
- padding-bottom: 16px;
1785
- margin-right: 8px;
1786
- vertical-align: top;
1787
- display: flex;
1788
- flex-direction: column;
1789
- flex-wrap: nowrap; }
1790
- .material-slider input {
1791
- position: absolute;
1792
- left: -10000px; }
1793
- .material-slider .slider-label {
1794
- flex: 1;
1795
- order: 1;
1796
- cursor: default;
1797
- padding: 16px 0;
1798
- margin: 0px 2px 0px 0;
1799
- overflow: hidden; }
1800
- .material-slider .slider-control {
1801
- order: 3;
1802
- position: relative;
1803
- cursor: pointer;
1804
- width: 100%;
1805
- height: 48px;
1806
- padding: 0 8px; }
1807
- .material-slider .slider-control .slider-track {
1808
- position: absolute;
1809
- z-index: 1;
1810
- cursor: pointer;
1811
- position: relative;
1812
- display: block;
1813
- height: 48px;
1814
- padding: 0;
1815
- transition: 0.3s; }
1816
- .material-slider .slider-control .slider-canvas {
1817
- position: absolute;
1818
- top: 0;
1819
- left: 0; }
1820
- .material-slider .slider-control .slider-track-value {
1821
- position: absolute;
1822
- width: 0;
1823
- top: 50%;
1824
- z-index: 2;
1825
- cursor: pointer;
1826
- display: block;
1827
- height: 2px;
1828
- padding: 0;
1829
- background-color: #4054B2;
1830
- border-radius: 7px; }
1831
- .material-slider .slider-control .slider-marker {
1832
- opacity: 0;
1833
- transform: scale(0.1) translateY(60px);
1834
- text-align: center;
1835
- font-size: 9px;
1836
- color: white;
1837
- position: absolute;
1838
- width: 32px;
1839
- height: 32px;
1840
- top: -17px;
1841
- z-index: 2;
1842
- cursor: pointer;
1843
- margin: auto;
1844
- border-radius: 50%;
1845
- transition: 0.2s; }
1846
- .material-slider .slider-control .slider-marker .slider-pin {
1847
- fill: #1A9989; }
1848
- .material-slider .slider-control .slider-knob {
1849
- z-index: 3;
1850
- cursor: pointer;
1851
- position: absolute;
1852
- top: 50%;
1853
- left: 0px;
1854
- display: block;
1855
- height: 12px;
1856
- width: 12px;
1857
- margin: 0;
1858
- transform: translateY(-5px);
1859
- border-radius: 50%;
1860
- background-color: white;
1861
- border: 2px solid #f1f1f1;
1862
- transition: 0.2s; }
1863
- .material-slider .slider-control .slider-knob.notnull {
1864
- background-color: #4054B2;
1865
- border: 2px solid #4054B2; }
1866
- .material-slider .slider-control .slider-knob:active {
1867
- background-color: #4054B2;
1868
- border: 2px solid #4054B2; }
1869
- .material-slider .slider-control.dragging .slider-knob {
1870
- top: 50%;
1871
- background-color: white;
1872
- border: 2px solid #f1f1f1;
1873
- transition: none;
1874
- transform: scale(1.5) translateY(-4px); }
1875
- .material-slider .slider-control.dragging .slider-knob.notnull {
1876
- background-color: #4054B2;
1877
- border: 2px solid #4054B2; }
1878
- .material-slider.is-checked .slider-track {
1879
- background-color: rgba(0, 150, 136, 0.5); }
1880
- .material-slider.is-checked .slider-track .slider-knob {
1881
- background-color: #009688;
1882
- left: 15px; }
1883
- .material-slider.is-disabled .slider-label {
1884
- opacity: 0.5; }
1885
- .material-slider.is-disabled .slider-control {
1886
- order: 3;
1887
- cursor: pointer; }
1888
- .material-slider.is-disabled .slider-control .slider-track .slider-knob {
1889
- background-color: #BDBDBD;
1890
- border: 2px solid white; }
1891
- .material-slider.is-disabled .slider-control .slider-track .slider-track-value {
1892
- background-color: #BDBDBD; }
1893
- .material-slider.is-focused .slider-control .slider-knob {
1894
- height: 18px;
1895
- width: 18px;
1896
- border: 32px solid rgba(0, 0, 0, 0.05); }
1897
- .material-slider.type-discrete .slider-control.dragging .slider-marker {
1898
- opacity: 1;
1899
- transform: scale(1) translateY(0);
1900
- display: block;
1901
- transition: none; }
1902
- .material-slider.type-discrete .slider-control.dragging .slider-knob {
1903
- opacity: 0;
1904
- transform: scale(0.2);
1905
- display: block;
1906
- transition: 0.2s; }
1907
-
1908
- .dark-theme .material-slider .slider-control .slider-track .slider-tarck-value {
1909
- background-color: #5C5C5C; }
1910
-
1911
- .material-list {
1912
- padding: 0;
1913
- overflow: scroll; }
1914
- .material-list .material-item {
1915
- display: flex;
1916
- flex-direction: horizontal;
1917
- flex-wrap: nowrap;
1918
- text-align: left;
1919
- width: 100%;
1920
- display: block;
1921
- font-size: 1rem;
1922
- line-height: 1.2rem;
1923
- appearance: span;
1924
- padding: 14px 16px;
1925
- transition: 0.1s; }
1926
- .material-list .material-item.is-selected {
1927
- background-color: rgba(0, 0, 0, 0.05);
1928
- transition: 0.1s; }
1929
- .material-list .material-item .ui-icon {
1930
- flex: none;
1931
- padding: 24px; }
1932
- .material-list .material-item .ui-text {
1933
- flex: 1;
1934
- padding: 16px 12px 16px 0; }
1935
- .material-list .material-button {
1936
- display: flex;
1937
- flex-direction: horizontal;
1938
- flex-wrap: nowrap;
1939
- text-align: left;
1940
- width: 100%;
1941
- display: block;
1942
- -ms-appearance: span;
1943
- -moz-appearance: span;
1944
- -webkit-appearance: span;
1945
- appearance: span; }
1946
- .material-list .material-button .ui-icon {
1947
- flex: none;
1948
- padding: 24px; }
1949
- .material-list .material-button .button-label {
1950
- flex: 1;
1951
- padding: 16px 12px 16px 0; }
1952
- .material-list .ui-separator {
1953
- display: block;
1954
- height: 1px;
1955
- margin: 12px;
1956
- background-color: #DDD; }
1957
- .material-list.type-image {
1958
- max-width: 1000px;
1959
- display: flex;
1960
- flex-wrap: wrap;
1961
- margin: 0 auto;
1962
- padding: 0; }
1963
- .material-list.type-image .material-image {
1964
- position: relative;
1965
- display: list-item;
1966
- width: 125px;
1967
- overflow: hidden;
1968
- margin: 2px 2px;
1969
- padding: 0;
1970
- -webkit-column-break-inside: avoid;
1971
- break-inside: avoid-column;
1972
- display: list-item;
1973
- text-align: -webkit-match-parent;
1974
- position: relative;
1975
- box-sizing: border-box; }
1976
- .material-list.type-image .material-image .image-image {
1977
- width: 125px;
1978
- display: block; }
1979
- .material-list.type-image .material-image .image-info {
1980
- background-color: rgba(0, 0, 0, 0.6);
1981
- display: block;
1982
- position: absolute;
1983
- bottom: 0;
1984
- left: 0;
1985
- right: 0;
1986
- display: flex;
1987
- flex-direction: row;
1988
- flex-wrap: nowrap;
1989
- padding: 8px 16px; }
1990
- .material-list.type-image .material-image .image-info .image-label {
1991
- line-height: 24px;
1992
- flex: 1;
1993
- color: rgba(255, 255, 255, 0.8);
1994
- overflow: hidden;
1995
- text-overflow: ellipsis;
1996
- height: 24px; }
1997
- .material-list.type-image .material-image .image-info .image-icon {
1998
- flex: none; }
1999
- .material-list.type-image .material-image .image-info .image-icon svg {
2000
- fill: white; }
2001
- .material-list.type-image.hide-info .image-info {
2002
- display: none !important; }
2003
- .material-list.type-image.info-below .image-info {
2004
- color: initial !important;
2005
- padding: 16px;
2006
- background-color: transparent !important;
2007
- position: initial !important;
2008
- padding: 8px 0 !important;
2009
- line-height: 16px; }
2010
- .material-list.type-image.info-below .image-info .image-label {
2011
- line-height: 24px;
2012
- flex: 1;
2013
- color: rgba(0, 0, 0, 0.8); }
2014
- .material-list.type-image.info-below .image-info .image-icon {
2015
- flex: none; }
2016
- .material-list.type-image.info-below .image-info .image-icon svg {
2017
- fill: rgba(0, 0, 0, 0.8); }
2018
- .material-list.type-image.layout-masonry {
2019
- -webkit-column-count: 3;
2020
- column-count: 3;
2021
- -webkit-column-gap: 16px;
2022
- column-gap: 16px;
2023
- max-width: 1000px;
2024
- display: block;
2025
- flex-wrap: wrap;
2026
- margin: 0 auto;
2027
- padding: 0; }
2028
- .material-list.type-image.layout-masonry .material-image {
2029
- position: relative;
2030
- display: list-item;
2031
- overflow: hidden;
2032
- margin: 0 2px;
2033
- padding: 0;
2034
- background-color: red;
2035
- -webkit-column-break-inside: avoid;
2036
- break-inside: avoid-column;
2037
- display: list-item;
2038
- text-align: -webkit-match-parent;
2039
- position: relative;
2040
- box-sizing: border-box;
2041
- margin-bottom: 16px; }
2042
-
2043
- .material-form {
2044
- font-size: 0.8em;
2045
- background-color: #E6E6E6; }
2046
- .material-form .component-subheader {
2047
- padding: 16px 0 0; }
2048
- .material-form .material-layout > .layout-component {
2049
- border-bottom: 1px solid rgba(100, 100, 100, 0.3);
2050
- padding: 16px 0; }
2051
- .material-form .material-layout > .layout-component .ui-text {
2052
- margin-left: 16px;
2053
- margin-right: 16px;
2054
- padding-top: 8px;
2055
- margin-bottom: 16px; }
2056
-
2057
- .material-tree {
2058
- padding: 16px 0;
2059
- overflow: scroll; }
2060
- .material-tree ul {
2061
- margin: 0;
2062
- padding: 0; }
2063
- .material-tree ul .item-tree {
2064
- display: flex;
2065
- flex-direction: horizontal;
2066
- flex-wrap: nowrap;
2067
- text-align: left;
2068
- width: 100%;
2069
- display: block;
2070
- -ms-appearance: span;
2071
- -moz-appearance: span;
2072
- -webkit-appearance: span;
2073
- appearance: span;
2074
- padding: 8px 16px; }
2075
- .material-tree ul .material-item {
2076
- display: flex;
2077
- flex-direction: horizontal;
2078
- flex-wrap: nowrap;
2079
- text-align: left;
2080
- width: 100%;
2081
- display: block;
2082
- -ms-appearance: span;
2083
- -moz-appearance: span;
2084
- -webkit-appearance: span;
2085
- appearance: span;
2086
- padding: 8px 16px;
2087
- transition: 0.3s; }
2088
- .material-tree ul .material-item.is-selected {
2089
- background-color: rgba(0, 0, 0, 0.05);
2090
- transition: 0.3s; }
2091
- .material-tree ul .material-item .ui-icon {
2092
- flex: none;
2093
- padding: 24px; }
2094
- .material-tree ul .material-item .ui-text {
2095
- flex: 1;
2096
- padding: 16px 12px 16px 0; }
2097
- .material-tree ul .material-button {
2098
- display: flex;
2099
- flex-direction: horizontal;
2100
- flex-wrap: nowrap;
2101
- text-align: left;
2102
- width: 100%;
2103
- display: block;
2104
- -ms-appearance: span;
2105
- -moz-appearance: span;
2106
- -webkit-appearance: span;
2107
- appearance: span; }
2108
- .material-tree ul .material-button .ui-icon {
2109
- flex: none;
2110
- padding: 24px; }
2111
- .material-tree ul .material-button .ui-text {
2112
- flex: 1;
2113
- padding: 16px 12px 16px 0; }
2114
- .material-tree ul .ui-separator {
2115
- display: block;
2116
- height: 1px;
2117
- margin: 12px;
2118
- background-color: #DDD; }
2119
-
2120
- .material-calendar,
2121
- .material-book {
2122
- margin-left: 10px;
2123
- display: flex;
2124
- flex-direction: column;
2125
- flex-wrap: nowrap; }
2126
- .material-calendar header,
2127
- .material-book header {
2128
- flex: none; }
2129
- .material-calendar header .calendar-headline,
2130
- .material-calendar header .book-headline,
2131
- .material-book header .calendar-headline,
2132
- .material-book header .book-headline {
2133
- font-family: "Helvetica";
2134
- font-weight: light;
2135
- font-size: 17px; }
2136
- .material-calendar header .calendar-headline .week-number,
2137
- .material-calendar header .book-headline .week-number,
2138
- .material-book header .calendar-headline .week-number,
2139
- .material-book header .book-headline .week-number {
2140
- font-size: 14px;
2141
- display: inline-block;
2142
- width: 50%;
2143
- padding: 10px;
2144
- text-align: right; }
2145
- .material-calendar header .calendar-headline .month-year,
2146
- .material-calendar header .book-headline .month-year,
2147
- .material-book header .calendar-headline .month-year,
2148
- .material-book header .book-headline .month-year {
2149
- font-size: 24px;
2150
- display: inline-block;
2151
- width: 50%;
2152
- padding: 10px; }
2153
- .material-calendar header .calendar-headline .material-toolbar,
2154
- .material-calendar header .book-headline .material-toolbar,
2155
- .material-book header .calendar-headline .material-toolbar,
2156
- .material-book header .book-headline .material-toolbar {
2157
- text-align: right;
2158
- font-size: 24px;
2159
- display: inline-block;
2160
- width: 50%;
2161
- padding: 10px; }
2162
- .material-calendar header .calendar-headline .material-toolbar .material-button,
2163
- .material-calendar header .book-headline .material-toolbar .material-button,
2164
- .material-book header .calendar-headline .material-toolbar .material-button,
2165
- .material-book header .book-headline .material-toolbar .material-button {
2166
- margin: 0; }
2167
- .material-calendar header .header-days,
2168
- .material-book header .header-days {
2169
- display: flex;
2170
- flex-direction: horizontal;
2171
- flex-wrap: nowrap;
2172
- padding-bottom: 8px;
2173
- border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
2174
- .material-calendar header .header-days .margin,
2175
- .material-book header .header-days .margin {
2176
- width: 100px;
2177
- flex: none;
2178
- display: inline-block; }
2179
- .material-calendar header .header-days .date,
2180
- .material-book header .header-days .date {
2181
- font-size: 0.8em;
2182
- overflow: hidden;
2183
- flex: 15;
2184
- text-align: center; }
2185
- .material-calendar header .header-days .date .first,
2186
- .material-book header .header-days .date .first {
2187
- font-size: 0.8em;
2188
- flex: 1;
2189
- overflow: hidden;
2190
- text-overflow: ellipsis; }
2191
- .material-calendar header .header-days .date .second,
2192
- .material-book header .header-days .date .second {
2193
- display: block;
2194
- flex: none; }
2195
- .material-calendar header .allday,
2196
- .material-book header .allday {
2197
- height: 24px;
2198
- border-bottom: 4px solid #d4d4d4; }
2199
- .material-calendar header .allday .label,
2200
- .material-book header .allday .label {
2201
- font-size: 11px;
2202
- text-align: right;
2203
- float: left;
2204
- width: 10%;
2205
- border-bottom: 4px solid transparent;
2206
- min-height: 32px;
2207
- padding: 4px;
2208
- color: #D9D9D9; }
2209
- .material-calendar header .allday .day,
2210
- .material-book header .allday .day {
2211
- float: left;
2212
- width: 15%;
2213
- min-height: 32px;
2214
- padding: 4px; }
2215
- .material-calendar .calendar-body,
2216
- .material-book .calendar-body {
2217
- display: flex;
2218
- flex-direction: horizontal;
2219
- flex-wrap: nowrap;
2220
- position: relative;
2221
- overflow: scroll;
2222
- flex: 1; }
2223
- .material-calendar .calendar-body .hours,
2224
- .material-book .calendar-body .hours {
2225
- width: 100px; }
2226
- .material-calendar .calendar-body .hours .hour,
2227
- .material-book .calendar-body .hours .hour {
2228
- position: relative;
2229
- font-size: 11px;
2230
- font-weight: bold;
2231
- line-height: 14px;
2232
- text-align: right;
2233
- height: 60px;
2234
- border-right: 8px solid transaprent;
2235
- color: #D9D9D9;
2236
- padding-right: 5px; }
2237
- .material-calendar .calendar-body canvas,
2238
- .material-book .calendar-body canvas {
2239
- position: absolute;
2240
- top: 0;
2241
- left: 10%;
2242
- width: 2000px;
2243
- height: 1440px; }
2244
- .material-calendar .calendar-body .week-day,
2245
- .material-book .calendar-body .week-day {
2246
- flex: 15;
2247
- position: relative;
2248
- height: 1440px;
2249
- border-right: 1px solid rgba(0, 0, 0, 0.1);
2250
- /*.element-event {
2251
- * background-color: rgba(197, 224, 179, .8);
2252
- * border-left: none;
2253
- * border-radius: 3px;
2254
- * padding: 5px;
2255
- *} */ }
2256
- .material-calendar .calendar-body .week-day[data-day='day-6'],
2257
- .material-book .calendar-body .week-day[data-day='day-6'] {
2258
- background-color: rgba(196, 196, 196, 0.1); }
2259
- .material-calendar .book-body,
2260
- .material-book .book-body {
2261
- position: relative;
2262
- overflow: scroll;
2263
- flex: 1; }
2264
- .material-calendar .book-body .resource-folder .type .title,
2265
- .material-book .book-body .resource-folder .type .title {
2266
- font-size: 0.8em;
2267
- padding-bottom: 4px;
2268
- padding-top: 4px;
2269
- border-bottom: 1px solid rgba(0, 0, 0, 0.05);
2270
- background-color: rgba(0, 0, 0, 0.01); }
2271
- .material-calendar .book-body .resource-folder .type .item,
2272
- .material-book .book-body .resource-folder .type .item {
2273
- display: flex;
2274
- flex-direction: horizontal;
2275
- flex-wrap: nowrap;
2276
- position: relative;
2277
- text-align: left;
2278
- border-right: 8px solid transaprent;
2279
- color: #D9D9D9;
2280
- padding-right: 5px;
2281
- border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
2282
- .material-calendar .book-body .resource-folder .type .item .resource-name,
2283
- .material-book .book-body .resource-folder .type .item .resource-name {
2284
- width: 100px;
2285
- font-size: 1.5em;
2286
- font-weight: bold; }
2287
- .material-calendar .book-body .resource-folder .date,
2288
- .material-book .book-body .resource-folder .date {
2289
- flex: 15;
2290
- position: relative;
2291
- border-left: 1px solid rgba(0, 0, 0, 0.1);
2292
- /* .element-event {
2293
- * background-color: rgba(197, 224, 179, .8);
2294
- * border-left: none;
2295
- * border-radius: 3px;
2296
- * padding: 5px;
2297
- * } */ }
2298
- .material-calendar .book-body .resource-folder .date.weekend,
2299
- .material-book .book-body .resource-folder .date.weekend {
2300
- background-color: rgba(0, 0, 0, 0.01); }
2301
- .material-calendar .book-body .resource-folder .date[data-day='day-6'],
2302
- .material-book .book-body .resource-folder .date[data-day='day-6'] {
2303
- background-color: rgba(196, 196, 196, 0.1); }
2304
-
2305
- .material-page {
2306
- border: none;
2307
- margin: 0; }
2308
-
2309
- .flex-row,
2310
- .flex-raw {
2311
- display: flex;
2312
- flex-direction: row;
2313
- flex-wrap: nowrap; }
2314
- .flex-row > .ui-container,
2315
- .flex-raw > .ui-container {
2316
- height: inherit; }
2317
-
2318
- .flex-column {
2319
- display: flex;
2320
- flex-direction: column;
2321
- flex-wrap: nowrap; }
2322
- .flex-column > .material-container {
2323
- width: inherit; }
2324
-
2325
- .display-absolute {
2326
- display: absolute; }
2327
-
2328
- .flex-none {
2329
- flex: none; }
2330
-
2331
- .flex-1 {
2332
- flex: 1; }
2333
-
2334
- .flex-2 {
2335
- flex: 2; }
2336
-
2337
- .flex-3 {
2338
- flex: 3; }
2339
-
2340
- .flex-4 {
2341
- flex: 4; }
2342
-
2343
- .flex-5 {
2344
- flex: 5; }
2345
-
2346
- .flex-6 {
2347
- flex: 6; }
2348
-
2349
- .flex-7 {
2350
- flex: 7; }
2351
-
2352
- .flex-8 {
2353
- flex: 8; }
2354
-
2355
- .flex-9 {
2356
- flex: 9; }
2357
-
2358
- .flex-10 {
2359
- flex: 10; }
2360
-
2361
- .flex-11 {
2362
- flex: 11; }
2363
-
2364
- .flex-12 {
2365
- flex: 12; }
2366
-
2367
- .resizer-layer {
2368
- position: absolute;
2369
- top: 0;
2370
- left: 0; }
2371
-
2372
- .ui-resizer {
2373
- opacity: 0.2;
2374
- position: absolute;
2375
- z-index: 200;
2376
- right: -3px;
2377
- bottom: -3px;
2378
- width: 12px;
2379
- height: 12px;
2380
- cursor: nwse-resize; }
2381
-
2382
- .resizer-height {
2383
- cursor: ns-resize;
2384
- position: absolute;
2385
- z-index: 100;
2386
- left: 0;
2387
- width: 100%;
2388
- height: 5px; }
2389
-
2390
- .resizer-width {
2391
- cursor: ew-resize;
2392
- position: absolute;
2393
- z-index: 100;
2394
- top: 0;
2395
- height: 100%;
2396
- width: 5px; }
2397
-
2398
- .ui-resizer-height,
2399
- .ui-resizer-width,
2400
- .ui-resizer-top,
2401
- .ui-resizer-right,
2402
- .ui-resizer-bottom,
2403
- .ui-resizer-left {
2404
- background-color: orange;
2405
- opacity: 0.5;
2406
- position: absolute;
2407
- z-index: 100; }
2408
-
2409
- .ui-resizer-height,
2410
- .ui-resizer-top,
2411
- .ui-resizer-bottom {
2412
- cursor: ns-resize;
2413
- position: absolute;
2414
- z-index: 100;
2415
- left: 0;
2416
- width: 100%;
2417
- height: 5px; }
2418
-
2419
- .ui-resizer-width,
2420
- .ui-resizer-right,
2421
- .ui-resizer-left {
2422
- cursor: ew-resize;
2423
- position: absolute;
2424
- z-index: 100;
2425
- top: 0;
2426
- height: 100%;
2427
- width: 5px; }
2428
-
2429
- /*# sourceMappingURL=material.css.map */