material 0.5.1 → 0.5.2

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