react-ui-basics 0.0.170 → 0.0.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/bundle.css CHANGED
@@ -1,888 +1,652 @@
1
- .AutocompleteSelect {
2
- display: inline-flex;
3
- flex-flow: column;
4
- justify-content: center;
1
+ .Button {
5
2
  position: relative;
6
- min-width: 250px;
3
+ min-width: 64px;
7
4
  min-height: 36px;
5
+ height: 24px;
6
+ margin: 0px;
7
+ padding: 0px 16px;
8
+ border: none;
9
+ outline: none;
10
+ font-size: 14px;
11
+ font-weight: 500;
12
+ letter-spacing: 1.25px;
13
+ background: #dfdfdf;
14
+ text-transform: uppercase;
15
+ font-family: Roboto, sans-serif;
16
+ -webkit-tap-highlight-color: transparent;
17
+ display: inline-flex;
18
+ justify-content: center;
19
+ align-items: center;
20
+ cursor: pointer;
21
+ overflow: hidden;
8
22
  user-select: none;
23
+ border-radius: 3px;
24
+ transition: all 0.2s ease;
9
25
  }
10
26
 
11
- @keyframes clockwise {
12
- 0% {
13
- -webkit-transform: rotate(-90deg);
14
- }
15
- 100% {
16
- -webkit-transform: translateX(0px);
17
- }
27
+ .Button.flat {
28
+ background-color: transparent;
18
29
  }
19
- @keyframes anticlockwise {
20
- 0% {
21
- -webkit-transform: rotate(90deg);
22
- }
23
- 100% {
24
- -webkit-transform: translateX(0px);
25
- }
30
+
31
+ .Button.flat:hover {
32
+ background-color: rgba(0, 0, 0, 0.05);
26
33
  }
27
- .AutocompleteSelect > .input {
28
- width: 100%;
34
+
35
+ .Button.green {
36
+ background-color: #43a047;
37
+ color: white;
29
38
  }
30
39
 
31
- .AutocompleteSelect .Scrollable {
32
- padding-right: 0;
33
- min-width: 100%;
40
+ .Button.green:hover {
41
+ background-color: #3b8e3f;
34
42
  }
35
43
 
36
- .AutocompleteSelect.inline-multiple > .label {
37
- top: -12px;
44
+ .Button.blue {
45
+ background-color: #039be5;
46
+ color: white;
38
47
  }
39
48
 
40
- .AutocompleteSelect.inline-multiple > .selected {
41
- flex-flow: row wrap;
49
+ .Button.blue:hover {
50
+ background-color: #038acc;
42
51
  }
43
52
 
44
- .AutocompleteSelect.multiple-mini-inline {
45
- height: 42px;
53
+ .Button.red {
54
+ background-color: #e53935;
55
+ color: white;
46
56
  }
47
57
 
48
- .AutocompleteSelect.multiple-mini-inline > .label {
49
- cursor: pointer;
50
- width: 100%;
51
- margin-left: -10px;
52
- padding: 10px;
53
- box-sizing: border-box;
54
- top: 0;
58
+ .Button.red:hover {
59
+ background-color: #e2231e;
55
60
  }
56
61
 
57
- .AutocompleteSelect.multiple-mini-inline > .label.active {
58
- padding: 0 10px;
62
+ .Button.black {
63
+ background-color: #1e252d;
64
+ color: white;
59
65
  }
60
66
 
61
- .AutocompleteSelect.multiple-mini-inline > .selected {
62
- width: 250px;
67
+ .Button.black:hover {
68
+ background-color: #14181e;
63
69
  }
64
70
 
65
- .AutocompleteSelect.multiple-mini-inline > .input {
66
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
67
- position: absolute;
68
- top: 38px;
69
- z-index: 2;
70
- background-color: white;
71
- min-width: 130%;
71
+ .Button.gray {
72
+ background: #D9D9D9;
73
+ color: #999999;
72
74
  }
73
75
 
74
- .AutocompleteSelect.multiple-mini-inline > .input .TextField {
75
- padding-left: 10px;
76
- padding-right: 10px;
77
- width: 100%;
78
- box-sizing: border-box;
76
+ .Button.gray:hover {
77
+ background-color: #cccccc;
79
78
  }
80
79
 
81
- .AutocompleteSelect.multiple-mini-inline > .input.hidden {
82
- opacity: 0;
83
- visibility: hidden;
80
+ .Button.small {
81
+ padding: 0px 8px;
82
+ min-height: 16px;
83
+ min-width: 16px;
84
84
  }
85
85
 
86
- .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
87
- margin-top: 0;
86
+ .Button > .material-icons {
87
+ margin-right: 10px;
88
88
  }
89
89
 
90
- .AutocompleteSelect .TextField {
91
- margin-top: 8px;
90
+ .Button.round {
91
+ padding: 0px;
92
+ min-width: 36px;
93
+ border-radius: 50%;
92
94
  }
93
95
 
94
- .AutocompleteSelect .TextField input {
95
- font-size: 14px;
96
+ .Button.round > .material-icons {
97
+ margin: 0px;
96
98
  }
97
99
 
98
- .AutocompleteSelect > .label {
100
+ .Button .ripple {
99
101
  position: absolute;
100
- transition: all 0.2s ease;
101
- font-family: Roboto, sans-serif;
102
- font-size: 14px;
103
- color: rgba(0, 0, 0, 0.5);
104
- z-index: 1;
105
- cursor: text;
106
- user-select: none;
107
- left: 4px;
108
- top: 12px;
102
+ background: rgba(0, 0, 0, 0.1);
103
+ border-radius: 100%;
104
+ transform: scale(0);
105
+ pointer-events: none;
106
+ transition: opacity 0.2s ease-out;
109
107
  }
110
108
 
111
- .AutocompleteSelect > .label.active {
112
- font-size: 10px;
113
- top: 2px;
109
+ .Button .ripple.show {
110
+ animation: ripple 0.35s ease-out;
114
111
  }
115
112
 
116
- .AutocompleteSelect > .label.active .arrow {
117
- border-width: 4px 4px 0 4px;
118
- margin-bottom: 1px;
113
+ .Button:active .ripple.showed {
114
+ opacity: 1;
119
115
  }
120
116
 
121
- .AutocompleteSelect > .label .arrow {
122
- width: 0;
123
- height: 0;
124
- border-style: solid;
125
- border-width: 5px 5px 0 5px;
126
- border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
127
- display: inline-block;
128
- margin-left: 5px;
129
- margin-bottom: 2px;
130
- transition: all 0.2s ease;
117
+ .Button:focus .ripple.focused {
118
+ opacity: 1;
119
+ transition: opacity 0.2s ease-out, transform 0.2s ease-out;
120
+ transform: scale(1);
121
+ animation: resize 1.25s ease-out infinite;
122
+ animation-delay: 0.2s;
123
+ animation-direction: alternate;
131
124
  }
132
125
 
133
- .AutocompleteSelect > .selected {
134
- margin-top: 8px;
135
- display: flex;
136
- cursor: pointer;
126
+ .Button .ripple.showed {
127
+ transform: scale(2);
128
+ opacity: 0;
137
129
  }
138
130
 
139
- .AutocompleteSelect > .selected > .reset {
140
- min-width: 36px;
141
- max-width: 36px;
142
- position: absolute;
143
- right: 0;
144
- top: 0;
145
- background-color: white;
131
+ @keyframes ripple {
132
+ to {
133
+ transform: scale(2);
134
+ }
146
135
  }
147
-
148
- .AutocompleteSelect > .selected > .reset .material-icons {
149
- margin: 0;
150
- color: #BFBFBF;
151
- font-size: 20px;
136
+ @keyframes resize {
137
+ to {
138
+ transform: scale(0.9);
139
+ }
152
140
  }
153
-
154
- .AutocompleteSelect > .selected.nolabel {
155
- margin-top: 0px;
156
- border-bottom: 1px solid #e5e3e3;
141
+ .Button.raised {
142
+ transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
157
143
  }
158
144
 
159
- .AutocompleteSelect > .selected.nolabel .DummyChild {
160
- display: inline-flex;
161
- align-items: center;
162
- flex-grow: 1;
163
- font-size: 16px;
164
- margin: 0px 10px;
165
- margin-bottom: 5px;
166
- height: 19px;
145
+ .Button.raised:hover {
146
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
167
147
  }
168
148
 
169
- .AutocompleteSelect > .selected.nolabel .arrow {
170
- width: 0;
171
- height: 0;
172
- border-style: solid;
173
- border-width: 5px 5px 0 5px;
174
- border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
175
- display: inline-block;
176
- transition: all 0.2s ease;
177
- margin: 0px 17px 3px 5px;
149
+ .Button.raised:active {
150
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
178
151
  }
179
152
 
180
- .AutocompleteSelect > .selected.inline {
181
- font-size: 14px;
182
- font-family: Roboto, sans-serif;
183
- color: #1e252d;
184
- text-overflow: ellipsis;
185
- white-space: nowrap;
186
- overflow: hidden;
187
- display: flex;
188
- align-items: center;
153
+ .Button.disabled {
154
+ box-shadow: none;
155
+ background: #D9D9D9;
156
+ color: #999999;
189
157
  }
190
158
 
191
- .AutocompleteSelect > .selected.clickable {
192
- overflow: hidden;
193
- cursor: pointer;
194
- padding: 10px;
195
- margin-left: -10px;
196
- margin-right: -10px;
159
+ .Button.disabled:hover {
160
+ background-color: #cccccc;
197
161
  }
198
162
 
199
- .AutocompleteSelect.inlineSelected {
200
- flex-flow: row wrap;
201
- justify-content: flex-start;
163
+ .Button::-moz-focus-inner {
164
+ border: 0;
202
165
  }
203
166
 
204
- .AutocompleteSelect.inlineSelected.hasSelected {
205
- padding-top: 7px;
167
+ .CircleProgress {
168
+ width: 48px;
169
+ height: 48px;
206
170
  }
207
171
 
208
- .AutocompleteSelect.inlineSelected > .label {
209
- width: 100%;
210
- height: 100%;
172
+ .CircleProgress .line {
173
+ stroke-width: 2px;
174
+ stroke: black;
175
+ stroke-linecap: square;
176
+ fill: none;
177
+ transition: stroke-dashoffset 0.2s ease;
211
178
  }
212
179
 
213
- .AutocompleteSelect.inlineSelected > .label.active {
214
- z-index: 0;
180
+ .animated {
181
+ transition: opacity 250ms ease;
182
+ opacity: 0;
215
183
  }
216
184
 
217
- .AutocompleteSelect.inlineSelected .input {
218
- width: unset;
219
- flex-basis: 50px;
220
- flex-grow: 1;
185
+ .animated.mounting, .animated.mounted {
186
+ opacity: 1;
221
187
  }
222
188
 
223
- .AutocompleteSelect.inlineSelected .input::after {
224
- content: attr(data-value);
225
- visibility: hidden;
226
- white-space: pre;
227
- font: inherit;
228
- min-width: 2px;
229
- border: 0;
230
- margin: 0;
231
- outline: 0;
232
- float: left;
233
- display: inline-block;
234
- margin-top: -24px;
235
- font-size: 14px;
236
- padding: 2px;
189
+ .DialogModal {
190
+ overflow: hidden;
237
191
  }
238
192
 
239
- .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
240
- margin-top: 7px;
193
+ .DialogModal .content {
194
+ top: 20vh;
241
195
  }
242
196
 
243
- .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
244
- cursor: pointer;
245
- margin: 5px 10px 5px 0px;
246
- display: inline-flex;
247
- flex-flow: row wrap;
248
- height: 30px;
249
- align-items: center;
250
- background-color: #f0f0f0;
251
- border-radius: 30px;
252
- position: relative;
253
- font-family: Roboto, sans-serif;
254
- font-size: 14px;
255
- color: #1e252d;
197
+ .Dialog {
198
+ background-color: white;
199
+ min-width: 460px;
200
+ max-width: 40vw;
201
+ padding: 15px;
256
202
  }
257
203
 
258
- .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
259
- padding-left: 35px;
260
- padding-right: 10px;
204
+ .Dialog .title {
205
+ margin-bottom: 15px;
206
+ padding: 20px 50px 0px 30px;
207
+ font-size: 1.25rem;
208
+ line-height: 2rem;
209
+ font-weight: 400;
210
+ letter-spacing: 0.0125em;
261
211
  }
262
212
 
263
- .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
264
- cursor: pointer;
265
- min-width: 30px;
266
- width: 30px;
267
- height: 30px;
268
- opacity: 0;
269
- position: absolute;
270
- top: 0px;
271
- left: 0px;
272
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
273
- background-color: deepskyblue;
274
- color: white;
275
- border-radius: 30px;
276
- display: flex;
277
- flex-flow: row;
278
- justify-content: center;
279
- align-items: center;
280
- animation: anticlockwise 0.15s linear;
213
+ .Dialog .description {
214
+ color: rgba(0, 0, 0, 0.54);
215
+ font-size: 1rem;
216
+ line-height: 1.5rem;
217
+ font-weight: 400;
218
+ letter-spacing: 0.03125em;
219
+ margin-top: 20px;
220
+ padding: 0 24px 24px;
281
221
  }
282
222
 
283
- .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
284
- font-size: 22px;
223
+ .Dialog > div.row {
224
+ margin-bottom: 15px;
285
225
  }
286
226
 
287
- .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
288
- width: 30px;
289
- height: 30px;
290
- opacity: 1;
291
- animation: clockwise 0.15s linear;
292
- overflow: hidden;
293
- position: absolute;
227
+ .Dialog > div.row:last-child {
228
+ margin-bottom: 0;
294
229
  }
295
230
 
296
- .Button {
231
+ .Checkbox {
297
232
  position: relative;
298
- min-width: 64px;
299
- min-height: 36px;
300
- height: 24px;
301
- margin: 0px;
302
- padding: 0px 16px;
303
- border: none;
304
- outline: none;
305
- font-size: 14px;
306
- font-weight: 500;
307
- letter-spacing: 1.25px;
308
- background: #dfdfdf;
309
- text-transform: uppercase;
310
- font-family: Roboto, sans-serif;
311
- -webkit-tap-highlight-color: transparent;
312
- display: inline-flex;
313
- justify-content: center;
314
- align-items: center;
315
- cursor: pointer;
316
- overflow: hidden;
317
- user-select: none;
318
- border-radius: 3px;
319
- transition: all 0.2s ease;
320
- }
321
-
322
- .Button.flat {
323
- background-color: transparent;
233
+ white-space: pre;
324
234
  }
325
235
 
326
- .Button.flat:hover {
327
- background-color: rgba(0, 0, 0, 0.05);
236
+ .Checkbox *, .Checkbox *:before, .Checkbox *:after {
237
+ box-sizing: border-box;
328
238
  }
329
239
 
330
- .Button.green {
331
- background-color: #43a047;
332
- color: white;
240
+ .Checkbox label {
241
+ font-family: Roboto, sans-serif;
242
+ font-size: 14px;
243
+ color: #1e252d;
244
+ cursor: pointer;
333
245
  }
334
246
 
335
- .Button.green:hover {
336
- background-color: #3b8e3f;
247
+ .Checkbox label:before, .Checkbox label:after {
248
+ content: "";
249
+ position: absolute;
250
+ left: 0;
251
+ top: 0;
337
252
  }
338
253
 
339
- .Button.blue {
340
- background-color: #039be5;
341
- color: white;
254
+ .Checkbox label:before {
255
+ width: 20px;
256
+ height: 20px;
257
+ background: #fff;
258
+ border: 2px solid #252525;
259
+ border-radius: 2px;
260
+ cursor: pointer;
261
+ transition: background 0.3s;
342
262
  }
343
263
 
344
- .Button.blue:hover {
345
- background-color: #038acc;
264
+ .Checkbox input[type=checkbox] {
265
+ outline: 0;
266
+ margin-right: 10px;
267
+ visibility: hidden;
346
268
  }
347
269
 
348
- .Button.red {
349
- background-color: #e53935;
350
- color: white;
270
+ .Checkbox input[type=checkbox]:checked + label:before {
271
+ background: #4AC263;
272
+ border: none;
351
273
  }
352
274
 
353
- .Button.red:hover {
354
- background-color: #e2231e;
275
+ .Checkbox input[type=checkbox]:checked + label:after {
276
+ transform: rotate(-45deg);
277
+ top: 6px;
278
+ left: 4px;
279
+ width: 12px;
280
+ height: 6px;
281
+ border: 2px solid #fff;
282
+ border-top-style: none;
283
+ border-right-style: none;
355
284
  }
356
285
 
357
- .Button.black {
358
- background-color: #1e252d;
359
- color: white;
286
+ .Checkbox input[type=checkbox]:disabled + label {
287
+ color: gray;
360
288
  }
361
289
 
362
- .Button.black:hover {
363
- background-color: #14181e;
290
+ .Checkbox input[type=checkbox]:disabled + label:before {
291
+ border-color: rgba(0, 0, 0, 0.26);
364
292
  }
365
293
 
366
- .Button.gray {
367
- background: #D9D9D9;
368
- color: #999999;
294
+ .Checkbox input[type=checkbox]:disabled:checked + label:before {
295
+ background: rgba(0, 0, 0, 0.26);
369
296
  }
370
297
 
371
- .Button.gray:hover {
372
- background-color: #cccccc;
298
+ .DropFileInput {
299
+ flex-grow: 1;
373
300
  }
374
301
 
375
- .Button.small {
376
- padding: 0px 8px;
377
- min-height: 16px;
378
- min-width: 16px;
302
+ .DropFileInput .Dropzone {
303
+ border: 1px dashed #808080;
304
+ padding: 12px;
305
+ display: flex;
306
+ flex-flow: row nowrap;
307
+ justify-content: center;
308
+ align-items: center;
309
+ color: gray;
310
+ cursor: pointer;
311
+ border-radius: 3px;
312
+ font-weight: normal;
313
+ line-height: 22px;
314
+ font-size: 14px;
315
+ color: #7E7E7E;
316
+ max-width: 100%;
317
+ word-break: break-all;
318
+ word-break: break-word;
379
319
  }
380
320
 
381
- .Button > .material-icons {
321
+ .DropFileInput .Dropzone .icon.withText {
382
322
  margin-right: 10px;
383
323
  }
384
324
 
385
- .Button.round {
386
- padding: 0px;
387
- min-width: 36px;
388
- border-radius: 50%;
325
+ .AutocompleteSelect {
326
+ display: inline-flex;
327
+ flex-flow: column;
328
+ justify-content: center;
329
+ position: relative;
330
+ min-width: 250px;
331
+ min-height: 36px;
332
+ user-select: none;
389
333
  }
390
334
 
391
- .Button.round > .material-icons {
392
- margin: 0px;
335
+ @keyframes clockwise {
336
+ 0% {
337
+ -webkit-transform: rotate(-90deg);
338
+ }
339
+ 100% {
340
+ -webkit-transform: translateX(0px);
341
+ }
393
342
  }
394
-
395
- .Button .ripple {
396
- position: absolute;
397
- background: rgba(0, 0, 0, 0.1);
398
- border-radius: 100%;
399
- transform: scale(0);
400
- pointer-events: none;
401
- transition: opacity 0.2s ease-out;
402
- }
403
-
404
- .Button .ripple.show {
405
- animation: ripple 0.35s ease-out;
406
- }
407
-
408
- .Button:active .ripple.showed {
409
- opacity: 1;
410
- }
411
-
412
- .Button:focus .ripple.focused {
413
- opacity: 1;
414
- transition: opacity 0.2s ease-out, transform 0.2s ease-out;
415
- transform: scale(1);
416
- animation: resize 1.25s ease-out infinite;
417
- animation-delay: 0.2s;
418
- animation-direction: alternate;
419
- }
420
-
421
- .Button .ripple.showed {
422
- transform: scale(2);
423
- opacity: 0;
424
- }
425
-
426
- @keyframes ripple {
427
- to {
428
- transform: scale(2);
343
+ @keyframes anticlockwise {
344
+ 0% {
345
+ -webkit-transform: rotate(90deg);
429
346
  }
430
- }
431
- @keyframes resize {
432
- to {
433
- transform: scale(0.9);
347
+ 100% {
348
+ -webkit-transform: translateX(0px);
434
349
  }
435
350
  }
436
- .Button.raised {
437
- transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
438
- }
439
-
440
- .Button.raised:hover {
441
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
442
- }
443
-
444
- .Button.raised:active {
445
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
446
- }
447
-
448
- .Button.disabled {
449
- box-shadow: none;
450
- background: #D9D9D9;
451
- color: #999999;
351
+ .AutocompleteSelect > .input {
352
+ width: 100%;
452
353
  }
453
354
 
454
- .Button.disabled:hover {
455
- background-color: #cccccc;
355
+ .AutocompleteSelect .Scrollable {
356
+ padding-right: 0;
357
+ min-width: 100%;
456
358
  }
457
359
 
458
- .Button::-moz-focus-inner {
459
- border: 0;
360
+ .AutocompleteSelect.inline-multiple > .label {
361
+ top: -12px;
460
362
  }
461
363
 
462
- .Checkbox {
463
- position: relative;
464
- white-space: pre;
364
+ .AutocompleteSelect.inline-multiple > .selected {
365
+ flex-flow: row wrap;
465
366
  }
466
367
 
467
- .Checkbox *, .Checkbox *:before, .Checkbox *:after {
468
- box-sizing: border-box;
368
+ .AutocompleteSelect.multiple-mini-inline {
369
+ height: 42px;
469
370
  }
470
371
 
471
- .Checkbox label {
472
- font-family: Roboto, sans-serif;
473
- font-size: 14px;
474
- color: #1e252d;
372
+ .AutocompleteSelect.multiple-mini-inline > .label {
475
373
  cursor: pointer;
476
- }
477
-
478
- .Checkbox label:before, .Checkbox label:after {
479
- content: "";
480
- position: absolute;
481
- left: 0;
374
+ width: 100%;
375
+ margin-left: -10px;
376
+ padding: 10px;
377
+ box-sizing: border-box;
482
378
  top: 0;
483
379
  }
484
380
 
485
- .Checkbox label:before {
486
- width: 20px;
487
- height: 20px;
488
- background: #fff;
489
- border: 2px solid #252525;
490
- border-radius: 2px;
491
- cursor: pointer;
492
- transition: background 0.3s;
493
- }
494
-
495
- .Checkbox input[type=checkbox] {
496
- outline: 0;
497
- margin-right: 10px;
498
- visibility: hidden;
499
- }
500
-
501
- .Checkbox input[type=checkbox]:checked + label:before {
502
- background: #4AC263;
503
- border: none;
381
+ .AutocompleteSelect.multiple-mini-inline > .label.active {
382
+ padding: 0 10px;
504
383
  }
505
384
 
506
- .Checkbox input[type=checkbox]:checked + label:after {
507
- transform: rotate(-45deg);
508
- top: 6px;
509
- left: 4px;
510
- width: 12px;
511
- height: 6px;
512
- border: 2px solid #fff;
513
- border-top-style: none;
514
- border-right-style: none;
385
+ .AutocompleteSelect.multiple-mini-inline > .selected {
386
+ width: 250px;
515
387
  }
516
388
 
517
- .Checkbox input[type=checkbox]:disabled + label {
518
- color: gray;
389
+ .AutocompleteSelect.multiple-mini-inline > .input {
390
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
391
+ position: absolute;
392
+ top: 38px;
393
+ z-index: 2;
394
+ background-color: white;
395
+ min-width: 130%;
519
396
  }
520
397
 
521
- .Checkbox input[type=checkbox]:disabled + label:before {
522
- border-color: rgba(0, 0, 0, 0.26);
398
+ .AutocompleteSelect.multiple-mini-inline > .input .TextField {
399
+ padding-left: 10px;
400
+ padding-right: 10px;
401
+ width: 100%;
402
+ box-sizing: border-box;
523
403
  }
524
404
 
525
- .Checkbox input[type=checkbox]:disabled:checked + label:before {
526
- background: rgba(0, 0, 0, 0.26);
405
+ .AutocompleteSelect.multiple-mini-inline > .input.hidden {
406
+ opacity: 0;
407
+ visibility: hidden;
527
408
  }
528
409
 
529
- .DNDContainer {
530
- position: relative;
410
+ .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
411
+ margin-top: 0;
531
412
  }
532
413
 
533
- .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
534
- cursor: pointer;
414
+ .AutocompleteSelect .TextField {
415
+ margin-top: 8px;
535
416
  }
536
417
 
537
- .DNDContainer .Draggable.placeholder {
538
- opacity: 0.2;
418
+ .AutocompleteSelect .TextField input {
419
+ font-size: 14px;
539
420
  }
540
421
 
541
- .DNDContainer .Draggable.copy {
422
+ .AutocompleteSelect > .label {
542
423
  position: absolute;
543
- box-sizing: border-box;
544
- will-change: transform;
545
- opacity: 0;
424
+ transition: all 0.2s ease;
425
+ font-family: Roboto, sans-serif;
426
+ font-size: 14px;
427
+ color: rgba(0, 0, 0, 0.5);
428
+ z-index: 1;
429
+ cursor: text;
430
+ user-select: none;
431
+ left: 4px;
432
+ top: 12px;
546
433
  }
547
434
 
548
- .DNDContainer .Draggable.dragged {
549
- z-index: 10;
435
+ .AutocompleteSelect > .label.active {
436
+ font-size: 10px;
437
+ top: 2px;
550
438
  }
551
439
 
552
- .DNDContainer .overlay {
553
- position: absolute;
554
- top: 0;
555
- left: 0;
556
- right: 0;
557
- bottom: 0;
558
- pointer-events: none;
440
+ .AutocompleteSelect > .label.active .arrow {
441
+ border-width: 4px 4px 0 4px;
442
+ margin-bottom: 1px;
559
443
  }
560
444
 
561
- .CircleProgress {
562
- width: 48px;
563
- height: 48px;
445
+ .AutocompleteSelect > .label .arrow {
446
+ width: 0;
447
+ height: 0;
448
+ border-style: solid;
449
+ border-width: 5px 5px 0 5px;
450
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
451
+ display: inline-block;
452
+ margin-left: 5px;
453
+ margin-bottom: 2px;
454
+ transition: all 0.2s ease;
564
455
  }
565
456
 
566
- .CircleProgress .line {
567
- stroke-width: 2px;
568
- stroke: black;
569
- stroke-linecap: square;
570
- fill: none;
571
- transition: stroke-dashoffset 0.2s ease;
457
+ .AutocompleteSelect > .selected {
458
+ margin-top: 8px;
459
+ display: flex;
460
+ cursor: pointer;
572
461
  }
573
462
 
574
- .FormUploadProgress {
463
+ .AutocompleteSelect > .selected > .reset {
464
+ min-width: 36px;
465
+ max-width: 36px;
575
466
  position: absolute;
576
- left: 0;
577
467
  right: 0;
578
468
  top: 0;
579
- bottom: 0;
580
- background-color: rgba(255, 255, 255, 0.6);
581
- z-index: 2;
582
- }
583
-
584
- .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
585
- transition-delay: 500ms;
586
- }
587
-
588
- .FormUploadProgress .wrapper {
589
- position: sticky;
590
- top: 40%;
591
- margin-top: 40%;
592
- margin-left: 50%;
593
- transform: translateX(-50%);
594
- display: flex;
595
- flex-flow: column;
596
- justify-content: center;
597
- align-items: center;
469
+ background-color: white;
598
470
  }
599
471
 
600
- .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
601
- position: absolute;
602
- width: 107px;
603
- height: 107px;
604
- top: 0;
605
- left: 0;
472
+ .AutocompleteSelect > .selected > .reset .material-icons {
473
+ margin: 0;
474
+ color: #BFBFBF;
475
+ font-size: 20px;
606
476
  }
607
477
 
608
- .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
609
- stroke: #2196F3;
478
+ .AutocompleteSelect > .selected.nolabel {
479
+ margin-top: 0px;
480
+ border-bottom: 1px solid #e5e3e3;
610
481
  }
611
482
 
612
- .FormUploadProgress .wrapper > .progress {
613
- width: 107px;
614
- height: 107px;
615
- min-height: 107px;
616
- display: flex;
617
- justify-content: center;
483
+ .AutocompleteSelect > .selected.nolabel .DummyChild {
484
+ display: inline-flex;
618
485
  align-items: center;
619
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
620
- border-radius: 50%;
621
- background: white;
622
- position: relative;
486
+ flex-grow: 1;
487
+ font-size: 16px;
488
+ margin: 0px 10px;
489
+ margin-bottom: 5px;
490
+ height: 19px;
623
491
  }
624
492
 
625
- .FormUploadProgress .wrapper > .progress > .value {
493
+ .AutocompleteSelect > .selected.nolabel .arrow {
494
+ width: 0;
495
+ height: 0;
496
+ border-style: solid;
497
+ border-width: 5px 5px 0 5px;
498
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
626
499
  display: inline-block;
627
- margin-top: 5px;
628
- font-weight: bold;
629
- line-height: 16px;
630
- font-size: 13px;
631
- text-align: center;
632
- color: #818181;
633
- }
634
-
635
- .FormUploadProgress .wrapper .cancel {
636
- min-width: 107px;
637
- margin-top: 20px;
638
- background-color: white;
639
- color: #F96B5C;
640
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
641
- }
642
-
643
- .DropFileInput {
644
- flex-grow: 1;
500
+ transition: all 0.2s ease;
501
+ margin: 0px 17px 3px 5px;
645
502
  }
646
503
 
647
- .DropFileInput .Dropzone {
648
- border: 1px dashed #808080;
649
- padding: 12px;
650
- display: flex;
651
- flex-flow: row nowrap;
652
- justify-content: center;
653
- align-items: center;
654
- color: gray;
655
- cursor: pointer;
656
- border-radius: 3px;
657
- font-weight: normal;
658
- line-height: 22px;
504
+ .AutocompleteSelect > .selected.inline {
659
505
  font-size: 14px;
660
- color: #7E7E7E;
661
- max-width: 100%;
662
- word-break: break-all;
663
- word-break: break-word;
664
- }
665
-
666
- .DropFileInput .Dropzone .icon.withText {
667
- margin-right: 10px;
668
- }
669
-
670
- .animated {
671
- transition: opacity 250ms ease;
672
- opacity: 0;
673
- }
674
-
675
- .animated.mounting, .animated.mounted {
676
- opacity: 1;
677
- }
678
-
679
- .Dropzone {
680
- position: relative;
681
- }
682
-
683
- .Dropzone > .overlay {
684
- position: absolute;
685
- left: 0;
686
- right: 0;
687
- top: 0;
688
- bottom: 0;
689
- background-color: #38ADC4;
690
- z-index: 1;
691
- opacity: 0;
692
- transition: all 0.2s ease;
693
- transition-delay: 100ms;
694
- visibility: hidden;
506
+ font-family: Roboto, sans-serif;
507
+ color: #1e252d;
508
+ text-overflow: ellipsis;
509
+ white-space: nowrap;
510
+ overflow: hidden;
695
511
  display: flex;
696
- justify-content: center;
697
512
  align-items: center;
698
513
  }
699
514
 
700
- .Dropzone > .overlay .drop {
701
- border-radius: 4px;
702
- border: 1px dashed #FFFFFF;
703
- position: absolute;
704
- top: 18px;
705
- left: 18px;
706
- right: 18px;
707
- bottom: 18px;
708
- display: flex;
709
- justify-content: center;
710
- align-items: center;
711
- font-weight: 500;
712
- font-size: 18px;
713
- color: #FFFFFF;
515
+ .AutocompleteSelect > .selected.clickable {
516
+ overflow: hidden;
517
+ cursor: pointer;
518
+ padding: 10px;
519
+ margin-left: -10px;
520
+ margin-right: -10px;
714
521
  }
715
522
 
716
- .Dropzone.dragging > .overlay {
717
- opacity: 0.7;
718
- visibility: visible;
719
- transition-delay: 0s;
523
+ .AutocompleteSelect.inlineSelected {
524
+ flex-flow: row wrap;
525
+ justify-content: flex-start;
720
526
  }
721
527
 
722
- .Dropzone.dragging > * {
723
- pointer-events: none;
528
+ .AutocompleteSelect.inlineSelected.hasSelected {
529
+ padding-top: 7px;
724
530
  }
725
531
 
726
- .Dropzone > input.file {
727
- position: absolute;
728
- left: 0;
729
- right: 0;
730
- top: 0;
731
- bottom: 0;
532
+ .AutocompleteSelect.inlineSelected > .label {
732
533
  width: 100%;
733
534
  height: 100%;
734
- opacity: 0;
735
- cursor: pointer;
736
- z-index: 1;
737
- }
738
-
739
- .DialogModal {
740
- overflow: hidden;
741
- }
742
-
743
- .DialogModal .content {
744
- top: 20vh;
745
- }
746
-
747
- .Dialog {
748
- background-color: white;
749
- min-width: 460px;
750
- max-width: 40vw;
751
- padding: 15px;
752
- }
753
-
754
- .Dialog .title {
755
- margin-bottom: 15px;
756
- padding: 20px 50px 0px 30px;
757
- font-size: 1.25rem;
758
- line-height: 2rem;
759
- font-weight: 400;
760
- letter-spacing: 0.0125em;
761
- }
762
-
763
- .Dialog .description {
764
- color: rgba(0, 0, 0, 0.54);
765
- font-size: 1rem;
766
- line-height: 1.5rem;
767
- font-weight: 400;
768
- letter-spacing: 0.03125em;
769
- margin-top: 20px;
770
- padding: 0 24px 24px;
771
- }
772
-
773
- .Dialog > div.row {
774
- margin-bottom: 15px;
775
- }
776
-
777
- .Dialog > div.row:last-child {
778
- margin-bottom: 0;
779
- }
780
-
781
- .ModalMenu {
782
- position: absolute;
783
- top: 10px;
784
- right: 50px;
785
- }
786
-
787
- .ModalMenu .material-icons {
788
- color: #818181;
789
535
  }
790
536
 
791
- .ModalMenu .Button.animated {
792
- position: absolute;
793
- transition: opacity 150ms ease-in, right 200ms ease-in;
794
- opacity: 0;
795
- right: 0;
796
- top: 0;
797
- }
798
-
799
- .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
800
- opacity: 1;
537
+ .AutocompleteSelect.inlineSelected > .label.active {
538
+ z-index: 0;
801
539
  }
802
540
 
803
- .ModalMenu .Button.animated.unmounting {
804
- transition: opacity 100ms ease-out, right 200ms ease-out;
541
+ .AutocompleteSelect.inlineSelected .input {
542
+ width: unset;
543
+ flex-basis: 50px;
544
+ flex-grow: 1;
805
545
  }
806
546
 
807
- .ModalMenu .Button.active {
808
- background: #EBEBEB;
547
+ .AutocompleteSelect.inlineSelected .input::after {
548
+ content: attr(data-value);
549
+ visibility: hidden;
550
+ white-space: pre;
551
+ font: inherit;
552
+ min-width: 2px;
553
+ border: 0;
554
+ margin: 0;
555
+ outline: 0;
556
+ float: left;
557
+ display: inline-block;
558
+ margin-top: -24px;
559
+ font-size: 14px;
560
+ padding: 2px;
809
561
  }
810
562
 
811
- .ModalMenu .separator {
812
- height: 24px;
813
- width: 1px;
814
- background-color: #D9D9D9;
815
- margin-left: 4px;
563
+ .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
564
+ margin-top: 7px;
816
565
  }
817
566
 
818
- .Modal {
819
- display: block;
820
- position: fixed;
821
- top: 0;
822
- left: 0;
823
- right: 0;
824
- bottom: 100%;
825
- overflow-y: scroll;
826
- transition: bottom 0ms linear;
827
- transition-delay: 0.2s;
567
+ .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
568
+ cursor: pointer;
569
+ margin: 5px 10px 5px 0px;
570
+ display: inline-flex;
571
+ flex-flow: row wrap;
572
+ height: 30px;
573
+ align-items: center;
574
+ background-color: #f0f0f0;
575
+ border-radius: 30px;
576
+ position: relative;
577
+ font-family: Roboto, sans-serif;
578
+ font-size: 14px;
579
+ color: #1e252d;
828
580
  }
829
581
 
830
- .Modal.show {
831
- transition-delay: 0s;
832
- bottom: 0;
582
+ .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
583
+ padding-left: 35px;
584
+ padding-right: 10px;
833
585
  }
834
586
 
835
- .Modal > .overlay {
836
- position: fixed;
837
- top: 0;
838
- bottom: 100%;
839
- left: 0;
840
- right: 0;
841
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
587
+ .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
588
+ cursor: pointer;
589
+ min-width: 30px;
590
+ width: 30px;
591
+ height: 30px;
842
592
  opacity: 0;
843
- background-color: black;
844
- pointer-events: none;
593
+ position: absolute;
594
+ top: 0px;
595
+ left: 0px;
596
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
597
+ background-color: deepskyblue;
598
+ color: white;
599
+ border-radius: 30px;
600
+ display: flex;
601
+ flex-flow: row;
602
+ justify-content: center;
603
+ align-items: center;
604
+ animation: anticlockwise 0.15s linear;
845
605
  }
846
606
 
847
- .Modal > .overlay.show {
848
- opacity: 0.5;
849
- bottom: 0;
607
+ .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
608
+ font-size: 22px;
850
609
  }
851
610
 
852
- .Modal > .content {
853
- left: 50%;
854
- top: 10vh;
855
- margin-bottom: 10vh;
856
- font-size: 16px;
857
- padding: 0;
858
- opacity: 0;
859
- transition: opacity 0.25s ease, transform 0.25s ease;
860
- transform: scaleY(0) translateY(-200px) translateX(-50%);
861
- transform-origin: top;
611
+ .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
612
+ width: 30px;
613
+ height: 30px;
614
+ opacity: 1;
615
+ animation: clockwise 0.15s linear;
616
+ overflow: hidden;
862
617
  position: absolute;
863
- border-radius: 2px;
864
- box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
865
618
  }
866
619
 
867
- .Modal > .content.show {
868
- opacity: 1;
869
- transform: scaleY(1) translateY(0px) translateX(-50%);
620
+ .DNDContainer {
621
+ position: relative;
870
622
  }
871
623
 
872
- .Modal > .content > .Scrollable {
873
- overflow: visible;
874
- max-height: 80vh;
624
+ .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
625
+ cursor: pointer;
875
626
  }
876
627
 
877
- .Modal > .content > .Scrollable > .viewport {
878
- min-width: 10px;
879
- min-height: 10px;
628
+ .DNDContainer .Draggable.placeholder {
629
+ opacity: 0.2;
880
630
  }
881
631
 
882
- .Modal > .content > .Button.close {
883
- top: 10px;
884
- right: 10px;
632
+ .DNDContainer .Draggable.copy {
633
+ position: absolute;
634
+ box-sizing: border-box;
635
+ will-change: transform;
636
+ opacity: 0;
637
+ }
638
+
639
+ .DNDContainer .Draggable.dragged {
640
+ z-index: 10;
641
+ }
642
+
643
+ .DNDContainer .overlay {
885
644
  position: absolute;
645
+ top: 0;
646
+ left: 0;
647
+ right: 0;
648
+ bottom: 0;
649
+ pointer-events: none;
886
650
  }
887
651
 
888
652
  .Scrollable {
@@ -980,6 +744,30 @@
980
744
  will-change: left;
981
745
  }
982
746
 
747
+ .Button.FloatingActionButton {
748
+ position: absolute;
749
+ right: 16px;
750
+ bottom: 16px;
751
+ width: 56px;
752
+ height: 56px;
753
+ padding: 16px;
754
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
755
+ }
756
+
757
+ .Button.FloatingActionButton.raised {
758
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
759
+ }
760
+
761
+ .Button.FloatingActionButton.mini {
762
+ width: 40px;
763
+ height: 40px;
764
+ padding: 8px;
765
+ }
766
+
767
+ .Button.FloatingActionButton.hidden {
768
+ bottom: -100px;
769
+ }
770
+
983
771
  .ImageGallery {
984
772
  position: fixed;
985
773
  top: 0;
@@ -1203,40 +991,183 @@
1203
991
  margin-top: -15px;
1204
992
  }
1205
993
 
1206
- .ImageGallery .previews > .arrow.left {
1207
- left: 0;
994
+ .ImageGallery .previews > .arrow.left {
995
+ left: 0;
996
+ }
997
+
998
+ .ImageGallery .previews > .arrow.right {
999
+ right: 0;
1000
+ }
1001
+
1002
+ .ImageGallery .previews > .arrow .material-icons {
1003
+ font-size: 24px;
1004
+ }
1005
+
1006
+ .Dropzone {
1007
+ position: relative;
1008
+ }
1009
+
1010
+ .Dropzone > .overlay {
1011
+ position: absolute;
1012
+ left: 0;
1013
+ right: 0;
1014
+ top: 0;
1015
+ bottom: 0;
1016
+ background-color: #38ADC4;
1017
+ z-index: 1;
1018
+ opacity: 0;
1019
+ transition: all 0.2s ease;
1020
+ transition-delay: 100ms;
1021
+ visibility: hidden;
1022
+ display: flex;
1023
+ justify-content: center;
1024
+ align-items: center;
1025
+ }
1026
+
1027
+ .Dropzone > .overlay .drop {
1028
+ border-radius: 4px;
1029
+ border: 1px dashed #FFFFFF;
1030
+ position: absolute;
1031
+ top: 18px;
1032
+ left: 18px;
1033
+ right: 18px;
1034
+ bottom: 18px;
1035
+ display: flex;
1036
+ justify-content: center;
1037
+ align-items: center;
1038
+ font-weight: 500;
1039
+ font-size: 18px;
1040
+ color: #FFFFFF;
1041
+ }
1042
+
1043
+ .Dropzone.dragging > .overlay {
1044
+ opacity: 0.7;
1045
+ visibility: visible;
1046
+ transition-delay: 0s;
1047
+ }
1048
+
1049
+ .Dropzone.dragging > * {
1050
+ pointer-events: none;
1051
+ }
1052
+
1053
+ .Dropzone > input.file {
1054
+ position: absolute;
1055
+ left: 0;
1056
+ right: 0;
1057
+ top: 0;
1058
+ bottom: 0;
1059
+ width: 100%;
1060
+ height: 100%;
1061
+ opacity: 0;
1062
+ cursor: pointer;
1063
+ z-index: 1;
1064
+ }
1065
+
1066
+ .Modal {
1067
+ display: block;
1068
+ position: fixed;
1069
+ top: 0;
1070
+ left: 0;
1071
+ right: 0;
1072
+ bottom: 100%;
1073
+ overflow-y: scroll;
1074
+ transition: bottom 0ms linear;
1075
+ transition-delay: 0.2s;
1076
+ }
1077
+
1078
+ .Modal.show {
1079
+ transition-delay: 0s;
1080
+ bottom: 0;
1081
+ }
1082
+
1083
+ .Modal > .overlay {
1084
+ position: fixed;
1085
+ top: 0;
1086
+ bottom: 100%;
1087
+ left: 0;
1088
+ right: 0;
1089
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1090
+ opacity: 0;
1091
+ background-color: black;
1092
+ pointer-events: none;
1093
+ }
1094
+
1095
+ .Modal > .overlay.show {
1096
+ opacity: 0.5;
1097
+ bottom: 0;
1098
+ }
1099
+
1100
+ .Modal > .content {
1101
+ left: 50%;
1102
+ top: 10vh;
1103
+ margin-bottom: 10vh;
1104
+ font-size: 16px;
1105
+ padding: 0;
1106
+ opacity: 0;
1107
+ transition: opacity 0.25s ease, transform 0.25s ease;
1108
+ transform: scaleY(0) translateY(-200px) translateX(-50%);
1109
+ transform-origin: top;
1110
+ position: absolute;
1111
+ border-radius: 2px;
1112
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
1113
+ }
1114
+
1115
+ .Modal > .content.show {
1116
+ opacity: 1;
1117
+ transform: scaleY(1) translateY(0px) translateX(-50%);
1118
+ }
1119
+
1120
+ .Modal > .content > .Scrollable {
1121
+ overflow: visible;
1122
+ max-height: 80vh;
1123
+ }
1124
+
1125
+ .Modal > .content > .Scrollable > .viewport {
1126
+ min-width: 10px;
1127
+ min-height: 10px;
1128
+ }
1129
+
1130
+ .Modal > .content > .Button.close {
1131
+ top: 10px;
1132
+ right: 10px;
1133
+ position: absolute;
1134
+ }
1135
+
1136
+ .ModalMenu {
1137
+ position: absolute;
1138
+ top: 10px;
1139
+ right: 50px;
1208
1140
  }
1209
1141
 
1210
- .ImageGallery .previews > .arrow.right {
1211
- right: 0;
1142
+ .ModalMenu .material-icons {
1143
+ color: #818181;
1212
1144
  }
1213
1145
 
1214
- .ImageGallery .previews > .arrow .material-icons {
1215
- font-size: 24px;
1146
+ .ModalMenu .Button.animated {
1147
+ position: absolute;
1148
+ transition: opacity 150ms ease-in, right 200ms ease-in;
1149
+ opacity: 0;
1150
+ right: 0;
1151
+ top: 0;
1216
1152
  }
1217
1153
 
1218
- .Button.FloatingActionButton {
1219
- position: absolute;
1220
- right: 16px;
1221
- bottom: 16px;
1222
- width: 56px;
1223
- height: 56px;
1224
- padding: 16px;
1225
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1154
+ .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
1155
+ opacity: 1;
1226
1156
  }
1227
1157
 
1228
- .Button.FloatingActionButton.raised {
1229
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
1158
+ .ModalMenu .Button.animated.unmounting {
1159
+ transition: opacity 100ms ease-out, right 200ms ease-out;
1230
1160
  }
1231
1161
 
1232
- .Button.FloatingActionButton.mini {
1233
- width: 40px;
1234
- height: 40px;
1235
- padding: 8px;
1162
+ .ModalMenu .Button.active {
1163
+ background: #EBEBEB;
1236
1164
  }
1237
1165
 
1238
- .Button.FloatingActionButton.hidden {
1239
- bottom: -100px;
1166
+ .ModalMenu .separator {
1167
+ height: 24px;
1168
+ width: 1px;
1169
+ background-color: #D9D9D9;
1170
+ margin-left: 4px;
1240
1171
  }
1241
1172
 
1242
1173
  .Snackbar {
@@ -1284,6 +1215,88 @@
1284
1215
  color: #bf3727;
1285
1216
  }
1286
1217
 
1218
+ .Switch {
1219
+ display: inline-flex;
1220
+ padding-top: 5px;
1221
+ }
1222
+
1223
+ .Switch .switch-input {
1224
+ display: none;
1225
+ }
1226
+
1227
+ .Switch .switch-label {
1228
+ position: relative;
1229
+ display: inline-flex;
1230
+ align-items: center;
1231
+ min-width: 38px;
1232
+ height: 24px;
1233
+ cursor: pointer;
1234
+ font-weight: 500;
1235
+ text-align: left;
1236
+ user-select: none;
1237
+ margin: 0;
1238
+ padding: 0;
1239
+ padding-left: 44px;
1240
+ box-sizing: border-box;
1241
+ }
1242
+
1243
+ .Switch .switch-label:before, .Switch .switch-label:after {
1244
+ content: "";
1245
+ box-sizing: border-box;
1246
+ position: absolute;
1247
+ margin: 0;
1248
+ outline: 0;
1249
+ top: 50%;
1250
+ transform: translate(0, -50%);
1251
+ transition: all 0.3s ease;
1252
+ }
1253
+
1254
+ .Switch .switch-label:before {
1255
+ left: 1px;
1256
+ width: 34px;
1257
+ height: 14px;
1258
+ background-color: #9E9E9E;
1259
+ border-radius: 8px;
1260
+ }
1261
+
1262
+ .Switch .switch-label:after {
1263
+ left: 0;
1264
+ width: 20px;
1265
+ height: 20px;
1266
+ background-color: #FAFAFA;
1267
+ border-radius: 50%;
1268
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
1269
+ }
1270
+
1271
+ .Switch .switch-label .toggle--on {
1272
+ display: none;
1273
+ }
1274
+
1275
+ .Switch .switch-label .toggle--off {
1276
+ display: inline-block;
1277
+ }
1278
+
1279
+ .Switch .switch-label .label {
1280
+ margin-right: 5px;
1281
+ }
1282
+
1283
+ .Switch .switch-input:checked + .switch-label:before {
1284
+ background-color: #A5D6A7;
1285
+ }
1286
+
1287
+ .Switch .switch-input:checked + .switch-label:after {
1288
+ background-color: #4CAF50;
1289
+ transform: translate(80%, -50%);
1290
+ }
1291
+
1292
+ .Switch .switch-input:checked + .switch-label .toggle--on {
1293
+ display: inline-block;
1294
+ }
1295
+
1296
+ .Switch .switch-input:checked + .switch-label .toggle--off {
1297
+ display: none;
1298
+ }
1299
+
1287
1300
  .TextField {
1288
1301
  position: relative;
1289
1302
  width: 100%;
@@ -1427,86 +1440,73 @@
1427
1440
  animation-name: shake;
1428
1441
  }
1429
1442
 
1430
- .Switch {
1431
- display: inline-flex;
1432
- padding-top: 5px;
1443
+ .FormUploadProgress {
1444
+ position: absolute;
1445
+ left: 0;
1446
+ right: 0;
1447
+ top: 0;
1448
+ bottom: 0;
1449
+ background-color: rgba(255, 255, 255, 0.6);
1450
+ z-index: 2;
1433
1451
  }
1434
1452
 
1435
- .Switch .switch-input {
1436
- display: none;
1453
+ .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
1454
+ transition-delay: 500ms;
1437
1455
  }
1438
1456
 
1439
- .Switch .switch-label {
1440
- position: relative;
1441
- display: inline-flex;
1457
+ .FormUploadProgress .wrapper {
1458
+ position: sticky;
1459
+ top: 40%;
1460
+ margin-top: 40%;
1461
+ margin-left: 50%;
1462
+ transform: translateX(-50%);
1463
+ display: flex;
1464
+ flex-flow: column;
1465
+ justify-content: center;
1442
1466
  align-items: center;
1443
- min-width: 38px;
1444
- height: 24px;
1445
- cursor: pointer;
1446
- font-weight: 500;
1447
- text-align: left;
1448
- user-select: none;
1449
- margin: 0;
1450
- padding: 0;
1451
- padding-left: 44px;
1452
- box-sizing: border-box;
1453
1467
  }
1454
1468
 
1455
- .Switch .switch-label:before, .Switch .switch-label:after {
1456
- content: "";
1457
- box-sizing: border-box;
1469
+ .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
1458
1470
  position: absolute;
1459
- margin: 0;
1460
- outline: 0;
1461
- top: 50%;
1462
- transform: translate(0, -50%);
1463
- transition: all 0.3s ease;
1464
- }
1465
-
1466
- .Switch .switch-label:before {
1467
- left: 1px;
1468
- width: 34px;
1469
- height: 14px;
1470
- background-color: #9E9E9E;
1471
- border-radius: 8px;
1472
- }
1473
-
1474
- .Switch .switch-label:after {
1471
+ width: 107px;
1472
+ height: 107px;
1473
+ top: 0;
1475
1474
  left: 0;
1476
- width: 20px;
1477
- height: 20px;
1478
- background-color: #FAFAFA;
1479
- border-radius: 50%;
1480
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
1481
- }
1482
-
1483
- .Switch .switch-label .toggle--on {
1484
- display: none;
1485
- }
1486
-
1487
- .Switch .switch-label .toggle--off {
1488
- display: inline-block;
1489
- }
1490
-
1491
- .Switch .switch-label .label {
1492
- margin-right: 5px;
1493
1475
  }
1494
1476
 
1495
- .Switch .switch-input:checked + .switch-label:before {
1496
- background-color: #A5D6A7;
1477
+ .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
1478
+ stroke: #2196F3;
1497
1479
  }
1498
1480
 
1499
- .Switch .switch-input:checked + .switch-label:after {
1500
- background-color: #4CAF50;
1501
- transform: translate(80%, -50%);
1481
+ .FormUploadProgress .wrapper > .progress {
1482
+ width: 107px;
1483
+ height: 107px;
1484
+ min-height: 107px;
1485
+ display: flex;
1486
+ justify-content: center;
1487
+ align-items: center;
1488
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1489
+ border-radius: 50%;
1490
+ background: white;
1491
+ position: relative;
1502
1492
  }
1503
1493
 
1504
- .Switch .switch-input:checked + .switch-label .toggle--on {
1494
+ .FormUploadProgress .wrapper > .progress > .value {
1505
1495
  display: inline-block;
1496
+ margin-top: 5px;
1497
+ font-weight: bold;
1498
+ line-height: 16px;
1499
+ font-size: 13px;
1500
+ text-align: center;
1501
+ color: #818181;
1506
1502
  }
1507
1503
 
1508
- .Switch .switch-input:checked + .switch-label .toggle--off {
1509
- display: none;
1504
+ .FormUploadProgress .wrapper .cancel {
1505
+ min-width: 107px;
1506
+ margin-top: 20px;
1507
+ background-color: white;
1508
+ color: #F96B5C;
1509
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1510
1510
  }
1511
1511
 
1512
1512
  .SpinningProgress {
@@ -1661,14 +1661,6 @@
1661
1661
  margin-bottom: 8px;
1662
1662
  }
1663
1663
 
1664
- .ScrollableTable .Scrollable .scrollbar {
1665
- top: 56px;
1666
- }
1667
-
1668
- .ScrollableTable .Table {
1669
- position: static;
1670
- }
1671
-
1672
1664
  .Table {
1673
1665
  font-family: Roboto, sans-serif;
1674
1666
  font-size: 14px;
@@ -1781,4 +1773,12 @@
1781
1773
  height: 20px;
1782
1774
  padding: 0px;
1783
1775
  background-color: #f0f0f0;
1776
+ }
1777
+
1778
+ .ScrollableTable .Scrollable .scrollbar {
1779
+ top: 56px;
1780
+ }
1781
+
1782
+ .ScrollableTable .Table {
1783
+ position: static;
1784
1784
  }