react-ui-basics 0.0.206 → 0.0.207

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,296 +1,234 @@
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
+ }
140
+ }
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);
152
143
  }
153
144
 
154
- .AutocompleteSelect > .selected.nolabel {
155
- margin-top: 0px;
156
- border-bottom: 1px solid #e5e3e3;
145
+ .Button.raised:hover {
146
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
157
147
  }
158
148
 
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;
149
+ .Button.raised:active {
150
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
167
151
  }
168
152
 
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;
153
+ .Button.disabled {
154
+ box-shadow: none;
155
+ background: #D9D9D9;
156
+ color: #999999;
178
157
  }
179
158
 
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;
159
+ .Button.disabled:hover {
160
+ background-color: #cccccc;
189
161
  }
190
162
 
191
- .AutocompleteSelect > .selected.clickable {
192
- overflow: hidden;
193
- cursor: pointer;
194
- padding: 10px;
195
- margin-left: -10px;
196
- margin-right: -10px;
163
+ .Button::-moz-focus-inner {
164
+ border: 0;
197
165
  }
198
166
 
199
- .AutocompleteSelect.inlineSelected {
200
- flex-flow: row wrap;
201
- justify-content: flex-start;
167
+ .Checkbox {
168
+ position: relative;
169
+ white-space: pre;
202
170
  }
203
171
 
204
- .AutocompleteSelect.inlineSelected.hasSelected {
205
- padding-top: 7px;
172
+ .Checkbox *, .Checkbox *:before, .Checkbox *:after {
173
+ box-sizing: border-box;
206
174
  }
207
175
 
208
- .AutocompleteSelect.inlineSelected > .label {
209
- width: 100%;
210
- height: 100%;
176
+ .Checkbox label {
177
+ font-family: Roboto, sans-serif;
178
+ font-size: 14px;
179
+ color: #1e252d;
180
+ cursor: pointer;
211
181
  }
212
182
 
213
- .AutocompleteSelect.inlineSelected > .label.active {
214
- z-index: 0;
183
+ .Checkbox label:before, .Checkbox label:after {
184
+ content: "";
185
+ position: absolute;
186
+ left: 0;
187
+ top: 0;
215
188
  }
216
189
 
217
- .AutocompleteSelect.inlineSelected .input {
218
- width: unset;
219
- flex-basis: 50px;
220
- flex-grow: 1;
190
+ .Checkbox label:before {
191
+ width: 20px;
192
+ height: 20px;
193
+ background: #fff;
194
+ border: 2px solid #252525;
195
+ border-radius: 2px;
196
+ cursor: pointer;
197
+ transition: background 0.3s;
221
198
  }
222
199
 
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;
200
+ .Checkbox input[type=checkbox] {
231
201
  outline: 0;
232
- float: left;
233
- display: inline-block;
234
- margin-top: -24px;
235
- font-size: 14px;
236
- padding: 2px;
237
- }
238
-
239
- .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
240
- margin-top: 7px;
202
+ margin-right: 10px;
203
+ visibility: hidden;
241
204
  }
242
205
 
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;
206
+ .Checkbox input[type=checkbox]:checked + label:before {
207
+ background: #4AC263;
208
+ border: none;
256
209
  }
257
210
 
258
- .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
259
- padding-left: 35px;
260
- padding-right: 10px;
211
+ .Checkbox input[type=checkbox]:checked + label:after {
212
+ transform: rotate(-45deg);
213
+ top: 6px;
214
+ left: 4px;
215
+ width: 12px;
216
+ height: 6px;
217
+ border: 2px solid #fff;
218
+ border-top-style: none;
219
+ border-right-style: none;
261
220
  }
262
221
 
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;
222
+ .Checkbox input[type=checkbox]:disabled + label {
223
+ color: gray;
281
224
  }
282
225
 
283
- .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
284
- font-size: 22px;
226
+ .Checkbox input[type=checkbox]:disabled + label:before {
227
+ border-color: rgba(0, 0, 0, 0.26);
285
228
  }
286
229
 
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;
230
+ .Checkbox input[type=checkbox]:disabled:checked + label:before {
231
+ background: rgba(0, 0, 0, 0.26);
294
232
  }
295
233
 
296
234
  .animated {
@@ -344,822 +282,633 @@
344
282
  margin-bottom: 0;
345
283
  }
346
284
 
347
- .CircleProgress {
348
- width: 48px;
349
- height: 48px;
285
+ .AutocompleteSelect {
286
+ display: inline-flex;
287
+ flex-flow: column;
288
+ justify-content: center;
289
+ position: relative;
290
+ min-width: 250px;
291
+ min-height: 36px;
292
+ user-select: none;
350
293
  }
351
294
 
352
- .CircleProgress .line {
353
- stroke-width: 2px;
354
- stroke: black;
355
- stroke-linecap: square;
356
- fill: none;
357
- transition: stroke-dashoffset 0.2s ease;
295
+ @keyframes clockwise {
296
+ 0% {
297
+ -webkit-transform: rotate(-90deg);
298
+ }
299
+ 100% {
300
+ -webkit-transform: translateX(0px);
301
+ }
358
302
  }
359
-
360
- .FilteredList {
361
- max-height: 250px;
362
- position: relative;
303
+ @keyframes anticlockwise {
304
+ 0% {
305
+ -webkit-transform: rotate(90deg);
306
+ }
307
+ 100% {
308
+ -webkit-transform: translateX(0px);
309
+ }
310
+ }
311
+ .AutocompleteSelect > .input {
312
+ width: 100%;
363
313
  }
364
314
 
365
- .FilteredList.popup {
366
- padding: 0;
367
- visibility: hidden;
368
- position: absolute;
369
- background: white;
370
- z-index: 4;
371
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
372
- transition: all 0.2s ease-out;
373
- top: calc(100% + 4px);
374
- opacity: 0;
375
- border-radius: 2px;
315
+ .AutocompleteSelect .Scrollable {
316
+ padding-right: 0;
317
+ min-width: 100%;
376
318
  }
377
319
 
378
- .FilteredList.popup.visible {
379
- opacity: 1;
380
- visibility: visible;
320
+ .AutocompleteSelect.inline-multiple > .label {
321
+ top: -12px;
381
322
  }
382
323
 
383
- .FilteredList.portal {
384
- transition: opacity 0.2s ease-out;
324
+ .AutocompleteSelect.inline-multiple > .selected {
325
+ flex-flow: row wrap;
385
326
  }
386
327
 
387
- .FilteredList.inline {
388
- max-height: 225px;
389
- margin-top: 5px;
328
+ .AutocompleteSelect.multiple-mini-inline {
329
+ height: 42px;
390
330
  }
391
331
 
392
- .FilteredList .child {
393
- display: flex;
394
- flex-flow: row nowrap;
395
- align-items: center;
396
- white-space: nowrap;
397
- font-size: 14px;
398
- color: rgb(34, 34, 34);
399
- height: 30px;
400
- padding: 5px 10px;
401
- padding-right: 15px;
332
+ .AutocompleteSelect.multiple-mini-inline > .label {
402
333
  cursor: pointer;
403
- overflow: hidden;
404
- transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
405
- border-left: 5px solid #4AC263;
406
- padding-left: 15px;
407
- margin-left: -5px;
334
+ width: 100%;
335
+ margin-left: -10px;
336
+ padding: 10px;
337
+ box-sizing: border-box;
338
+ top: 0;
408
339
  }
409
340
 
410
- .FilteredList .child.hidden {
411
- height: 0 !important;
412
- padding: 0 !important;
341
+ .AutocompleteSelect.multiple-mini-inline > .label.active {
342
+ padding: 0 10px;
413
343
  }
414
344
 
415
- .FilteredList .child.selected {
416
- background-color: #F0F0F0;
417
- padding-left: 10px;
418
- margin-left: 0px;
345
+ .AutocompleteSelect.multiple-mini-inline > .selected {
346
+ width: 250px;
419
347
  }
420
348
 
421
- .FilteredList .child.active {
422
- background-color: rgb(238, 238, 238);
349
+ .AutocompleteSelect.multiple-mini-inline > .input {
350
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
351
+ position: absolute;
352
+ top: 38px;
353
+ z-index: 2;
354
+ background-color: white;
355
+ min-width: 130%;
423
356
  }
424
357
 
425
- .FilteredList .child {
426
- margin-top: 8px;
358
+ .AutocompleteSelect.multiple-mini-inline > .input .TextField {
359
+ padding-left: 10px;
360
+ padding-right: 10px;
361
+ width: 100%;
362
+ box-sizing: border-box;
427
363
  }
428
364
 
429
- .FilteredList .child.hidden {
430
- margin-top: 0;
365
+ .AutocompleteSelect.multiple-mini-inline > .input.hidden {
366
+ opacity: 0;
367
+ visibility: hidden;
431
368
  }
432
369
 
433
- .FilteredList .child:not(.hidden) ~ .child {
370
+ .AutocompleteSelect.multiple-mini-inline .FilteredList .child:first-child {
434
371
  margin-top: 0;
435
372
  }
436
373
 
437
- .FilteredList .child:not(.hidden) ~ .child:last-child {
438
- margin-bottom: 8px;
374
+ .AutocompleteSelect .TextField {
375
+ margin-top: 8px;
439
376
  }
440
377
 
441
- .FilteredList .child:not(.hidden):last-child {
442
- margin-bottom: 8px;
378
+ .AutocompleteSelect .TextField input {
379
+ font-size: 14px;
443
380
  }
444
381
 
445
- .Button {
446
- position: relative;
447
- min-width: 64px;
448
- min-height: 36px;
449
- height: 24px;
450
- margin: 0px;
451
- padding: 0px 16px;
452
- border: none;
453
- outline: none;
454
- font-size: 14px;
455
- font-weight: 500;
456
- letter-spacing: 1.25px;
457
- background: #dfdfdf;
458
- text-transform: uppercase;
459
- font-family: Roboto, sans-serif;
460
- -webkit-tap-highlight-color: transparent;
461
- display: inline-flex;
462
- justify-content: center;
463
- align-items: center;
464
- cursor: pointer;
465
- overflow: hidden;
466
- user-select: none;
467
- border-radius: 3px;
468
- transition: all 0.2s ease;
469
- }
470
-
471
- .Button.flat {
472
- background-color: transparent;
473
- }
474
-
475
- .Button.flat:hover {
476
- background-color: rgba(0, 0, 0, 0.05);
477
- }
478
-
479
- .Button.green {
480
- background-color: #43a047;
481
- color: white;
482
- }
483
-
484
- .Button.green:hover {
485
- background-color: #3b8e3f;
486
- }
487
-
488
- .Button.blue {
489
- background-color: #039be5;
490
- color: white;
491
- }
492
-
493
- .Button.blue:hover {
494
- background-color: #038acc;
495
- }
496
-
497
- .Button.red {
498
- background-color: #e53935;
499
- color: white;
500
- }
501
-
502
- .Button.red:hover {
503
- background-color: #e2231e;
504
- }
505
-
506
- .Button.black {
507
- background-color: #1e252d;
508
- color: white;
509
- }
510
-
511
- .Button.black:hover {
512
- background-color: #14181e;
513
- }
514
-
515
- .Button.gray {
516
- background: #D9D9D9;
517
- color: #999999;
518
- }
519
-
520
- .Button.gray:hover {
521
- background-color: #cccccc;
522
- }
523
-
524
- .Button.small {
525
- padding: 0px 8px;
526
- min-height: 16px;
527
- min-width: 16px;
528
- }
529
-
530
- .Button > .material-icons {
531
- margin-right: 10px;
532
- }
533
-
534
- .Button.round {
535
- padding: 0px;
536
- min-width: 36px;
537
- border-radius: 50%;
538
- }
539
-
540
- .Button.round > .material-icons {
541
- margin: 0px;
542
- }
543
-
544
- .Button .ripple {
545
- position: absolute;
546
- background: rgba(0, 0, 0, 0.1);
547
- border-radius: 100%;
548
- transform: scale(0);
549
- pointer-events: none;
550
- transition: opacity 0.2s ease-out;
551
- }
552
-
553
- .Button .ripple.show {
554
- animation: ripple 0.35s ease-out;
555
- }
556
-
557
- .Button:active .ripple.showed {
558
- opacity: 1;
559
- }
560
-
561
- .Button:focus .ripple.focused {
562
- opacity: 1;
563
- transition: opacity 0.2s ease-out, transform 0.2s ease-out;
564
- transform: scale(1);
565
- animation: resize 1.25s ease-out infinite;
566
- animation-delay: 0.2s;
567
- animation-direction: alternate;
568
- }
569
-
570
- .Button .ripple.showed {
571
- transform: scale(2);
572
- opacity: 0;
573
- }
574
-
575
- @keyframes ripple {
576
- to {
577
- transform: scale(2);
578
- }
579
- }
580
- @keyframes resize {
581
- to {
582
- transform: scale(0.9);
583
- }
584
- }
585
- .Button.raised {
586
- transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
587
- }
588
-
589
- .Button.raised:hover {
590
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
591
- }
592
-
593
- .Button.raised:active {
594
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
595
- }
596
-
597
- .Button.disabled {
598
- box-shadow: none;
599
- background: #D9D9D9;
600
- color: #999999;
601
- }
602
-
603
- .Button.disabled:hover {
604
- background-color: #cccccc;
605
- }
606
-
607
- .Button::-moz-focus-inner {
608
- border: 0;
609
- }
610
-
611
- .Checkbox {
612
- position: relative;
613
- white-space: pre;
614
- }
615
-
616
- .Checkbox *, .Checkbox *:before, .Checkbox *:after {
617
- box-sizing: border-box;
618
- }
619
-
620
- .Checkbox label {
382
+ .AutocompleteSelect > .label {
383
+ position: absolute;
384
+ transition: all 0.2s ease;
621
385
  font-family: Roboto, sans-serif;
622
386
  font-size: 14px;
623
- color: #1e252d;
624
- cursor: pointer;
625
- }
626
-
627
- .Checkbox label:before, .Checkbox label:after {
628
- content: "";
629
- position: absolute;
630
- left: 0;
631
- top: 0;
632
- }
633
-
634
- .Checkbox label:before {
635
- width: 20px;
636
- height: 20px;
637
- background: #fff;
638
- border: 2px solid #252525;
639
- border-radius: 2px;
640
- cursor: pointer;
641
- transition: background 0.3s;
642
- }
643
-
644
- .Checkbox input[type=checkbox] {
645
- outline: 0;
646
- margin-right: 10px;
647
- visibility: hidden;
648
- }
649
-
650
- .Checkbox input[type=checkbox]:checked + label:before {
651
- background: #4AC263;
652
- border: none;
653
- }
654
-
655
- .Checkbox input[type=checkbox]:checked + label:after {
656
- transform: rotate(-45deg);
657
- top: 6px;
658
- left: 4px;
659
- width: 12px;
660
- height: 6px;
661
- border: 2px solid #fff;
662
- border-top-style: none;
663
- border-right-style: none;
664
- }
665
-
666
- .Checkbox input[type=checkbox]:disabled + label {
667
- color: gray;
668
- }
669
-
670
- .Checkbox input[type=checkbox]:disabled + label:before {
671
- border-color: rgba(0, 0, 0, 0.26);
672
- }
673
-
674
- .Checkbox input[type=checkbox]:disabled:checked + label:before {
675
- background: rgba(0, 0, 0, 0.26);
676
- }
677
-
678
- .DropFileInput {
679
- flex-grow: 1;
680
- }
681
-
682
- .DropFileInput .Dropzone {
683
- border: 1px dashed #808080;
684
- padding: 12px;
685
- display: flex;
686
- flex-flow: row nowrap;
687
- justify-content: center;
688
- align-items: center;
689
- color: gray;
690
- cursor: pointer;
691
- border-radius: 3px;
692
- font-weight: normal;
693
- line-height: 22px;
694
- font-size: 14px;
695
- color: #7E7E7E;
696
- max-width: 100%;
697
- word-break: break-all;
698
- word-break: break-word;
699
- }
700
-
701
- .DropFileInput .Dropzone .icon.withText {
702
- margin-right: 10px;
703
- }
704
-
705
- .Modal {
706
- display: block;
707
- position: fixed;
708
- top: 0;
709
- left: 0;
710
- right: 0;
711
- bottom: 100%;
712
- overflow-y: scroll;
713
- transition: bottom 0ms linear;
714
- transition-delay: 0.2s;
715
- }
716
-
717
- .Modal.show {
718
- transition-delay: 0s;
719
- bottom: 0;
720
- }
721
-
722
- .Modal > .overlay {
723
- position: fixed;
724
- top: 0;
725
- bottom: 100%;
726
- left: 0;
727
- right: 0;
728
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
729
- opacity: 0;
730
- background-color: black;
731
- pointer-events: none;
732
- }
733
-
734
- .Modal > .overlay.show {
735
- opacity: 0.5;
736
- bottom: 0;
387
+ color: rgba(0, 0, 0, 0.5);
388
+ z-index: 1;
389
+ cursor: text;
390
+ user-select: none;
391
+ left: 4px;
392
+ top: 12px;
737
393
  }
738
394
 
739
- .Modal > .content {
740
- left: 50%;
741
- top: 10vh;
742
- margin-bottom: 10vh;
743
- font-size: 16px;
744
- padding: 0;
745
- opacity: 0;
746
- transition: opacity 0.25s ease, transform 0.25s ease;
747
- transform: scaleY(0) translateY(-200px) translateX(-50%);
748
- transform-origin: top;
749
- position: absolute;
750
- border-radius: 2px;
751
- box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
395
+ .AutocompleteSelect > .label.active {
396
+ font-size: 10px;
397
+ top: 2px;
752
398
  }
753
399
 
754
- .Modal > .content.show {
755
- opacity: 1;
756
- transform: scaleY(1) translateY(0px) translateX(-50%);
400
+ .AutocompleteSelect > .label.active .arrow {
401
+ border-width: 4px 4px 0 4px;
402
+ margin-bottom: 1px;
757
403
  }
758
404
 
759
- .Modal > .content > .Scrollable {
760
- overflow: visible;
761
- max-height: 80vh;
405
+ .AutocompleteSelect > .label .arrow {
406
+ width: 0;
407
+ height: 0;
408
+ border-style: solid;
409
+ border-width: 5px 5px 0 5px;
410
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
411
+ display: inline-block;
412
+ margin-left: 5px;
413
+ margin-bottom: 2px;
414
+ transition: all 0.2s ease;
762
415
  }
763
416
 
764
- .Modal > .content > .Scrollable > .viewport {
765
- min-width: 10px;
766
- min-height: 10px;
417
+ .AutocompleteSelect > .selected {
418
+ margin-top: 8px;
419
+ display: flex;
420
+ cursor: pointer;
767
421
  }
768
422
 
769
- .Modal > .content > .Button.close {
770
- top: 10px;
771
- right: 10px;
423
+ .AutocompleteSelect > .selected > .reset {
424
+ min-width: 36px;
425
+ max-width: 36px;
772
426
  position: absolute;
773
- }
774
-
775
- .ImageGallery {
776
- position: fixed;
777
- top: 0;
778
- left: 0;
779
- bottom: 0;
780
427
  right: 0;
781
- z-index: 1000;
782
- background-color: rgba(0, 0, 0, 0.01);
783
- user-select: none;
784
- }
785
-
786
- .ImageGallery:focus {
787
- outline-width: 0px;
428
+ top: 0;
429
+ background-color: white;
788
430
  }
789
431
 
790
- .ImageGallery.animated {
791
- transition: background-color 0.25s ease;
792
- opacity: 1;
432
+ .AutocompleteSelect > .selected > .reset .material-icons {
433
+ margin: 0;
434
+ color: #BFBFBF;
435
+ font-size: 20px;
793
436
  }
794
437
 
795
- .ImageGallery.mounting, .ImageGallery.mounted {
796
- background-color: rgba(0, 0, 0, 0.8);
438
+ .AutocompleteSelect > .selected.nolabel {
439
+ margin-top: 0px;
440
+ border-bottom: 1px solid #e5e3e3;
797
441
  }
798
442
 
799
- .ImageGallery .image {
800
- position: absolute;
801
- cursor: grab;
443
+ .AutocompleteSelect > .selected.nolabel .DummyChild {
444
+ display: inline-flex;
445
+ align-items: center;
446
+ flex-grow: 1;
447
+ font-size: 16px;
448
+ margin: 0px 10px;
449
+ margin-bottom: 5px;
450
+ height: 19px;
802
451
  }
803
452
 
804
- .ImageGallery .image .counter {
805
- display: none;
453
+ .AutocompleteSelect > .selected.nolabel .arrow {
454
+ width: 0;
455
+ height: 0;
456
+ border-style: solid;
457
+ border-width: 5px 5px 0 5px;
458
+ border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
459
+ display: inline-block;
460
+ transition: all 0.2s ease;
461
+ margin: 0px 17px 3px 5px;
806
462
  }
807
463
 
808
- .ImageGallery .image img {
809
- border-radius: 4px;
810
- max-width: 100%;
811
- min-width: 100%;
464
+ .AutocompleteSelect > .selected.inline {
465
+ font-size: 14px;
466
+ font-family: Roboto, sans-serif;
467
+ color: #1e252d;
468
+ text-overflow: ellipsis;
469
+ white-space: nowrap;
470
+ overflow: hidden;
471
+ display: flex;
472
+ align-items: center;
812
473
  }
813
474
 
814
- .ImageGallery .image.animated {
815
- transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
816
- will-change: top, left, width, height, opacity;
475
+ .AutocompleteSelect > .selected.clickable {
476
+ overflow: hidden;
477
+ cursor: pointer;
478
+ padding: 10px;
479
+ margin-left: -10px;
480
+ margin-right: -10px;
817
481
  }
818
482
 
819
- .ImageGallery .image.animated.mounting, .ImageGallery .image.animated.mounted, .ImageGallery .image.animated.unmounting {
820
- opacity: 1;
483
+ .AutocompleteSelect.inlineSelected {
484
+ flex-flow: row wrap;
485
+ justify-content: flex-start;
821
486
  }
822
487
 
823
- .ImageGallery .image.zoomed {
824
- text-align: center;
825
- overflow: hidden;
488
+ .AutocompleteSelect.inlineSelected.hasSelected {
489
+ padding-top: 7px;
826
490
  }
827
491
 
828
- .ImageGallery .image.dragging {
829
- transition: none;
830
- cursor: move;
492
+ .AutocompleteSelect.inlineSelected > .label {
493
+ width: 100%;
494
+ height: 100%;
831
495
  }
832
496
 
833
- .ImageGallery .image .close {
834
- position: absolute;
835
- top: -18px;
836
- right: -18px;
497
+ .AutocompleteSelect.inlineSelected > .label.active {
498
+ z-index: 0;
837
499
  }
838
500
 
839
- .ImageGallery .image .spinner {
840
- position: absolute;
841
- top: 0;
842
- bottom: 0;
843
- left: 0;
844
- right: 0;
845
- background: rgba(0, 0, 0, 0.65);
501
+ .AutocompleteSelect.inlineSelected .input {
502
+ width: unset;
503
+ flex-basis: 50px;
504
+ flex-grow: 1;
846
505
  }
847
506
 
848
- .ImageGallery .image .spinner .SpinningProgress {
849
- position: absolute;
850
- top: 50%;
851
- left: 50%;
852
- margin-left: -24px;
507
+ .AutocompleteSelect.inlineSelected .input::after {
508
+ content: attr(data-value);
509
+ visibility: hidden;
510
+ white-space: pre;
511
+ font: inherit;
512
+ min-width: 2px;
513
+ border: 0;
514
+ margin: 0;
515
+ outline: 0;
516
+ float: left;
517
+ display: inline-block;
853
518
  margin-top: -24px;
519
+ font-size: 14px;
520
+ padding: 2px;
854
521
  }
855
522
 
856
- .ImageGallery .image .spinner .SpinningProgress .line {
857
- stroke: #2196F3;
523
+ .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
524
+ margin-top: 7px;
858
525
  }
859
526
 
860
- .ImageGallery .Button.animated {
861
- transition: all 0.25s ease;
862
- opacity: 0;
863
- transform: scale(0);
527
+ .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
528
+ cursor: pointer;
529
+ margin: 5px 10px 5px 0px;
530
+ display: inline-flex;
531
+ flex-flow: row wrap;
532
+ height: 30px;
533
+ align-items: center;
534
+ background-color: #f0f0f0;
535
+ border-radius: 30px;
536
+ position: relative;
537
+ font-family: Roboto, sans-serif;
538
+ font-size: 14px;
539
+ color: #1e252d;
864
540
  }
865
541
 
866
- .ImageGallery .Button.animated.mounted, .ImageGallery .Button.animated.mounting {
867
- opacity: 1;
868
- transform: scale(1);
542
+ .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
543
+ padding-left: 35px;
544
+ padding-right: 10px;
869
545
  }
870
546
 
871
- .ImageGallery .Button {
547
+ .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
548
+ cursor: pointer;
549
+ min-width: 30px;
550
+ width: 30px;
551
+ height: 30px;
552
+ opacity: 0;
553
+ position: absolute;
554
+ top: 0px;
555
+ left: 0px;
556
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
557
+ background-color: deepskyblue;
872
558
  color: white;
873
- background: rgba(0, 0, 0, 0.4);
559
+ border-radius: 30px;
560
+ display: flex;
561
+ flex-flow: row;
562
+ justify-content: center;
563
+ align-items: center;
564
+ animation: anticlockwise 0.15s linear;
874
565
  }
875
566
 
876
- .ImageGallery .Button:hover {
877
- background: rgba(0, 0, 0, 0.7);
567
+ .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
568
+ font-size: 22px;
878
569
  }
879
570
 
880
- .ImageGallery > .arrow {
571
+ .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
572
+ width: 30px;
573
+ height: 30px;
574
+ opacity: 1;
575
+ animation: clockwise 0.15s linear;
576
+ overflow: hidden;
881
577
  position: absolute;
882
- top: 50%;
883
- height: 76px;
884
- width: 76px;
885
- margin-top: -38px;
886
- }
887
-
888
- .ImageGallery > .arrow.left {
889
- left: 5%;
890
578
  }
891
579
 
892
- .ImageGallery > .arrow.right {
893
- right: 5%;
580
+ .FilteredList {
581
+ max-height: 250px;
582
+ position: relative;
894
583
  }
895
584
 
896
- .ImageGallery > .arrow .material-icons {
897
- font-size: 40px;
585
+ .FilteredList.popup {
586
+ padding: 0;
587
+ visibility: hidden;
588
+ position: absolute;
589
+ background: white;
590
+ z-index: 4;
591
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
592
+ transition: all 0.2s ease-out;
593
+ top: calc(100% + 4px);
594
+ opacity: 0;
595
+ border-radius: 2px;
898
596
  }
899
597
 
900
- .ImageGallery .counter {
901
- position: absolute;
902
- top: 10px;
903
- left: 10px;
904
- color: white;
905
- font-size: 13px;
598
+ .FilteredList.popup.visible {
599
+ opacity: 1;
600
+ visibility: visible;
906
601
  }
907
602
 
908
- .ImageGallery .previews {
909
- height: 80px;
910
- position: absolute;
911
- bottom: 15px;
912
- left: 50%;
913
- transform: translateX(-50%);
914
- padding: 0 45px;
603
+ .FilteredList.portal {
604
+ transition: opacity 0.2s ease-out;
915
605
  }
916
606
 
917
- .ImageGallery .previews .viewport {
918
- overflow: hidden;
919
- position: relative;
920
- height: 100%;
607
+ .FilteredList.inline {
608
+ max-height: 225px;
609
+ margin-top: 5px;
921
610
  }
922
611
 
923
- .ImageGallery .previews .container {
924
- position: relative;
612
+ .FilteredList .child {
925
613
  display: flex;
926
614
  flex-flow: row nowrap;
927
- height: 100%;
928
- transition: left 0.25s ease;
929
- }
930
-
931
- .ImageGallery .previews .preview {
932
- position: relative;
933
- height: 100%;
934
- display: inline-block;
935
- width: 106.66px;
936
- overflow: hidden;
937
- margin-left: 12px;
938
- border-radius: 2px;
615
+ align-items: center;
616
+ white-space: nowrap;
617
+ font-size: 14px;
618
+ color: rgb(34, 34, 34);
619
+ height: 30px;
620
+ padding: 5px 10px;
621
+ padding-right: 15px;
939
622
  cursor: pointer;
940
- box-sizing: border-box;
623
+ overflow: hidden;
624
+ transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
625
+ border-left: 5px solid #4AC263;
626
+ padding-left: 15px;
627
+ margin-left: -5px;
941
628
  }
942
629
 
943
- .ImageGallery .previews .preview:first-child {
944
- margin-left: 0;
630
+ .FilteredList .child.hidden {
631
+ height: 0 !important;
632
+ padding: 0 !important;
945
633
  }
946
634
 
947
- .ImageGallery .previews .preview > .border {
948
- position: absolute;
949
- bottom: 0;
950
- width: 100%;
951
- height: 3px;
635
+ .FilteredList .child.selected {
636
+ background-color: #F0F0F0;
637
+ padding-left: 10px;
638
+ margin-left: 0px;
952
639
  }
953
640
 
954
- .ImageGallery .previews .preview > .border .line {
955
- left: 50%;
956
- width: 0;
957
- height: 3px;
958
- min-height: 3px;
959
- background-color: #4AC263;
960
- transition: all 0.2s ease;
961
- position: absolute;
641
+ .FilteredList .child.active {
642
+ background-color: rgb(238, 238, 238);
962
643
  }
963
644
 
964
- .ImageGallery .previews .preview:after {
965
- content: "";
966
- position: absolute;
967
- top: 0;
968
- right: 0;
969
- bottom: 0;
970
- left: 0;
971
- background: rgba(0, 0, 0, 0.35);
972
- transition: background 0.2s ease;
645
+ .FilteredList .child {
646
+ margin-top: 8px;
973
647
  }
974
648
 
975
- .ImageGallery .previews .preview:hover:after {
976
- background: rgba(0, 0, 0, 0.1);
649
+ .FilteredList .child.hidden {
650
+ margin-top: 0;
977
651
  }
978
652
 
979
- .ImageGallery .previews .preview.selected .border .line {
980
- left: 0;
981
- width: 100%;
653
+ .FilteredList .child:not(.hidden) ~ .child {
654
+ margin-top: 0;
982
655
  }
983
656
 
984
- .ImageGallery .previews .preview.selected:after {
985
- background: rgba(0, 0, 0, 0);
657
+ .FilteredList .child:not(.hidden) ~ .child:last-child {
658
+ margin-bottom: 8px;
986
659
  }
987
660
 
988
- .ImageGallery .previews > .arrow {
989
- position: absolute;
990
- top: 50%;
991
- height: 30px;
992
- width: 30px;
993
- min-width: 30px;
994
- min-height: 30px;
995
- margin-top: -15px;
661
+ .FilteredList .child:not(.hidden):last-child {
662
+ margin-bottom: 8px;
996
663
  }
997
664
 
998
- .ImageGallery .previews > .arrow.left {
999
- left: 0;
665
+ .Dropzone {
666
+ position: relative;
1000
667
  }
1001
668
 
1002
- .ImageGallery .previews > .arrow.right {
669
+ .Dropzone > .overlay {
670
+ position: absolute;
671
+ left: 0;
1003
672
  right: 0;
673
+ top: 0;
674
+ bottom: 0;
675
+ background-color: #38ADC4;
676
+ z-index: 1;
677
+ opacity: 0;
678
+ transition: all 0.2s ease;
679
+ transition-delay: 100ms;
680
+ visibility: hidden;
681
+ display: flex;
682
+ justify-content: center;
683
+ align-items: center;
1004
684
  }
1005
685
 
1006
- .ImageGallery .previews > .arrow .material-icons {
1007
- font-size: 24px;
1008
- }
1009
-
1010
- .Scrollable {
1011
- max-height: 250px;
1012
- max-width: 250px;
1013
- padding-right: 5px;
1014
- position: relative;
686
+ .Dropzone > .overlay .drop {
687
+ border-radius: 4px;
688
+ border: 1px dashed #FFFFFF;
689
+ position: absolute;
690
+ top: 18px;
691
+ left: 18px;
692
+ right: 18px;
693
+ bottom: 18px;
1015
694
  display: flex;
1016
- flex-flow: column;
1017
- align-items: stretch;
1018
- overflow: hidden;
695
+ justify-content: center;
696
+ align-items: center;
697
+ font-weight: 500;
698
+ font-size: 18px;
699
+ color: #FFFFFF;
1019
700
  }
1020
701
 
1021
- .Scrollable:hover > .scrollbar.auto {
702
+ .Dropzone.dragging > .overlay {
703
+ opacity: 0.7;
704
+ visibility: visible;
1022
705
  transition-delay: 0s;
1023
- opacity: 1;
1024
706
  }
1025
707
 
1026
- .Scrollable .viewport {
1027
- overflow-y: scroll;
1028
- overflow-x: scroll;
1029
- max-height: 100%;
1030
- scroll-behavior: smooth;
1031
- scrollbar-width: none;
708
+ .Dropzone.dragging > * {
709
+ pointer-events: none;
1032
710
  }
1033
711
 
1034
- .Scrollable .viewport::-webkit-scrollbar {
1035
- display: none;
712
+ .Dropzone > input.file {
713
+ position: absolute;
714
+ left: 0;
715
+ right: 0;
716
+ top: 0;
717
+ bottom: 0;
718
+ width: 100%;
719
+ height: 100%;
720
+ opacity: 0;
721
+ cursor: pointer;
722
+ z-index: 1;
1036
723
  }
1037
724
 
1038
- .Scrollable.without-scroll-horizontal {
1039
- max-width: unset;
725
+ .CircleProgress {
726
+ width: 48px;
727
+ height: 48px;
1040
728
  }
1041
729
 
1042
- .Scrollable.without-scroll {
1043
- padding-right: 0;
1044
- max-height: unset;
730
+ .CircleProgress .line {
731
+ stroke-width: 2px;
732
+ stroke: black;
733
+ stroke-linecap: square;
734
+ fill: none;
735
+ transition: stroke-dashoffset 0.2s ease;
1045
736
  }
1046
737
 
1047
- .Scrollable.without-scroll > .viewport {
1048
- padding-right: 0;
1049
- margin-right: 0;
738
+ .Modal {
739
+ display: block;
740
+ position: fixed;
741
+ top: 0;
742
+ left: 0;
743
+ right: 0;
744
+ bottom: 100%;
745
+ overflow-y: scroll;
746
+ transition: bottom 0ms linear;
747
+ transition-delay: 0.2s;
1050
748
  }
1051
749
 
1052
- .Scrollable.without-scroll > .scrollbar {
1053
- visibility: hidden;
750
+ .Modal.show {
751
+ transition-delay: 0s;
752
+ bottom: 0;
1054
753
  }
1055
754
 
1056
- .Scrollable .scrollbar {
1057
- position: absolute;
1058
- right: 0px;
1059
- top: 0px;
1060
- width: 5px;
755
+ .Modal > .overlay {
756
+ position: fixed;
757
+ top: 0;
758
+ bottom: 100%;
759
+ left: 0;
760
+ right: 0;
1061
761
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1062
- transition-delay: 0.5s;
1063
- z-index: 1;
1064
- }
1065
-
1066
- .Scrollable .scrollbar.auto, .Scrollable .scrollbar.hidden {
1067
762
  opacity: 0;
763
+ background-color: black;
764
+ pointer-events: none;
1068
765
  }
1069
766
 
1070
- .Scrollable .scrollbar .thumb {
1071
- background-color: rgba(0, 0, 0, 0.3);
1072
- width: 5px;
1073
- position: absolute;
1074
- right: 0px;
1075
- top: 0px;
1076
- user-select: none;
1077
- will-change: top;
1078
- border-radius: 2px;
767
+ .Modal > .overlay.show {
768
+ opacity: 0.5;
769
+ bottom: 0;
1079
770
  }
1080
771
 
1081
- .Scrollable .scrollbar .thumb:hover {
1082
- background-color: rgba(0, 0, 0, 0.5);
772
+ .Modal > .content {
773
+ left: 50%;
774
+ top: 10vh;
775
+ margin-bottom: 10vh;
776
+ font-size: 16px;
777
+ padding: 0;
778
+ opacity: 0;
779
+ transition: opacity 0.25s ease, transform 0.25s ease;
780
+ transform: scaleY(0) translateY(-200px) translateX(-50%);
781
+ transform-origin: top;
782
+ position: absolute;
783
+ border-radius: 2px;
784
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
1083
785
  }
1084
786
 
1085
- .Scrollable .scrollbar .thumb:active {
1086
- background-color: rgba(0, 0, 0, 0.7);
787
+ .Modal > .content.show {
788
+ opacity: 1;
789
+ transform: scaleY(1) translateY(0px) translateX(-50%);
1087
790
  }
1088
791
 
1089
- .Scrollable .scrollbar.horizontal {
1090
- left: 0px;
1091
- right: 0px;
1092
- height: 5px;
1093
- bottom: 0;
1094
- width: unset;
1095
- top: unset;
792
+ .Modal > .content > .Scrollable {
793
+ overflow: visible;
794
+ max-height: 80vh;
1096
795
  }
1097
796
 
1098
- .Scrollable .scrollbar.horizontal .thumb {
1099
- height: 5px;
1100
- left: 0px;
1101
- bottom: 0px;
1102
- will-change: left;
797
+ .Modal > .content > .Scrollable > .viewport {
798
+ min-width: 10px;
799
+ min-height: 10px;
1103
800
  }
1104
801
 
1105
- .Dropzone {
1106
- position: relative;
802
+ .Modal > .content > .Button.close {
803
+ top: 10px;
804
+ right: 10px;
805
+ position: absolute;
1107
806
  }
1108
807
 
1109
- .Dropzone > .overlay {
808
+ .FormUploadProgress {
1110
809
  position: absolute;
1111
810
  left: 0;
1112
811
  right: 0;
1113
812
  top: 0;
1114
813
  bottom: 0;
1115
- background-color: #38ADC4;
1116
- z-index: 1;
1117
- opacity: 0;
1118
- transition: all 0.2s ease;
1119
- transition-delay: 100ms;
1120
- visibility: hidden;
814
+ background-color: rgba(255, 255, 255, 0.6);
815
+ z-index: 2;
816
+ }
817
+
818
+ .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
819
+ transition-delay: 500ms;
820
+ }
821
+
822
+ .FormUploadProgress .wrapper {
823
+ position: sticky;
824
+ top: 40%;
825
+ margin-top: 40%;
826
+ margin-left: 50%;
827
+ transform: translateX(-50%);
1121
828
  display: flex;
829
+ flex-flow: column;
1122
830
  justify-content: center;
1123
831
  align-items: center;
1124
832
  }
1125
833
 
1126
- .Dropzone > .overlay .drop {
1127
- border-radius: 4px;
1128
- border: 1px dashed #FFFFFF;
834
+ .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
1129
835
  position: absolute;
1130
- top: 18px;
1131
- left: 18px;
1132
- right: 18px;
1133
- bottom: 18px;
836
+ width: 107px;
837
+ height: 107px;
838
+ top: 0;
839
+ left: 0;
840
+ }
841
+
842
+ .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
843
+ stroke: #2196F3;
844
+ }
845
+
846
+ .FormUploadProgress .wrapper > .progress {
847
+ width: 107px;
848
+ height: 107px;
849
+ min-height: 107px;
1134
850
  display: flex;
1135
851
  justify-content: center;
1136
852
  align-items: center;
1137
- font-weight: 500;
1138
- font-size: 18px;
1139
- color: #FFFFFF;
853
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
854
+ border-radius: 50%;
855
+ background: white;
856
+ position: relative;
1140
857
  }
1141
858
 
1142
- .Dropzone.dragging > .overlay {
1143
- opacity: 0.7;
1144
- visibility: visible;
1145
- transition-delay: 0s;
859
+ .FormUploadProgress .wrapper > .progress > .value {
860
+ display: inline-block;
861
+ margin-top: 5px;
862
+ font-weight: bold;
863
+ line-height: 16px;
864
+ font-size: 13px;
865
+ text-align: center;
866
+ color: #818181;
1146
867
  }
1147
868
 
1148
- .Dropzone.dragging > * {
1149
- pointer-events: none;
869
+ .FormUploadProgress .wrapper .cancel {
870
+ min-width: 107px;
871
+ margin-top: 20px;
872
+ background-color: white;
873
+ color: #F96B5C;
874
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1150
875
  }
1151
876
 
1152
- .Dropzone > input.file {
877
+ .ModalMenu {
1153
878
  position: absolute;
1154
- left: 0;
879
+ top: 10px;
880
+ right: 50px;
881
+ }
882
+
883
+ .ModalMenu .material-icons {
884
+ color: #818181;
885
+ }
886
+
887
+ .ModalMenu .Button.animated {
888
+ position: absolute;
889
+ transition: opacity 150ms ease-in, right 200ms ease-in;
890
+ opacity: 0;
1155
891
  right: 0;
1156
892
  top: 0;
1157
- bottom: 0;
1158
- width: 100%;
1159
- height: 100%;
1160
- opacity: 0;
1161
- cursor: pointer;
1162
- z-index: 1;
893
+ }
894
+
895
+ .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
896
+ opacity: 1;
897
+ }
898
+
899
+ .ModalMenu .Button.animated.unmounting {
900
+ transition: opacity 100ms ease-out, right 200ms ease-out;
901
+ }
902
+
903
+ .ModalMenu .Button.active {
904
+ background: #EBEBEB;
905
+ }
906
+
907
+ .ModalMenu .separator {
908
+ height: 24px;
909
+ width: 1px;
910
+ background-color: #D9D9D9;
911
+ margin-left: 4px;
1163
912
  }
1164
913
 
1165
914
  .Switch {
@@ -1227,169 +976,258 @@
1227
976
  margin-right: 5px;
1228
977
  }
1229
978
 
1230
- .Switch .switch-input:checked + .switch-label:before {
1231
- background-color: #A5D6A7;
979
+ .Switch .switch-input:checked + .switch-label:before {
980
+ background-color: #A5D6A7;
981
+ }
982
+
983
+ .Switch .switch-input:checked + .switch-label:after {
984
+ background-color: #4CAF50;
985
+ transform: translate(80%, -50%);
986
+ }
987
+
988
+ .Switch .switch-input:checked + .switch-label .toggle--on {
989
+ display: inline-block;
990
+ }
991
+
992
+ .Switch .switch-input:checked + .switch-label .toggle--off {
993
+ display: none;
994
+ }
995
+
996
+ .ImageGallery {
997
+ position: fixed;
998
+ top: 0;
999
+ left: 0;
1000
+ bottom: 0;
1001
+ right: 0;
1002
+ z-index: 1000;
1003
+ background-color: rgba(0, 0, 0, 0.01);
1004
+ user-select: none;
1005
+ }
1006
+
1007
+ .ImageGallery:focus {
1008
+ outline-width: 0px;
1009
+ }
1010
+
1011
+ .ImageGallery.animated {
1012
+ transition: background-color 0.25s ease;
1013
+ opacity: 1;
1014
+ }
1015
+
1016
+ .ImageGallery.mounting, .ImageGallery.mounted {
1017
+ background-color: rgba(0, 0, 0, 0.8);
1018
+ }
1019
+
1020
+ .ImageGallery .image {
1021
+ position: absolute;
1022
+ cursor: grab;
1023
+ }
1024
+
1025
+ .ImageGallery .image .counter {
1026
+ display: none;
1027
+ }
1028
+
1029
+ .ImageGallery .image img {
1030
+ border-radius: 4px;
1031
+ max-width: 100%;
1032
+ min-width: 100%;
1033
+ }
1034
+
1035
+ .ImageGallery .image.animated {
1036
+ transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
1037
+ will-change: top, left, width, height, opacity;
1038
+ }
1039
+
1040
+ .ImageGallery .image.animated.mounting, .ImageGallery .image.animated.mounted, .ImageGallery .image.animated.unmounting {
1041
+ opacity: 1;
1042
+ }
1043
+
1044
+ .ImageGallery .image.zoomed {
1045
+ text-align: center;
1046
+ overflow: hidden;
1047
+ }
1048
+
1049
+ .ImageGallery .image.dragging {
1050
+ transition: none;
1051
+ cursor: move;
1052
+ }
1053
+
1054
+ .ImageGallery .image .close {
1055
+ position: absolute;
1056
+ top: -18px;
1057
+ right: -18px;
1058
+ }
1059
+
1060
+ .ImageGallery .image .spinner {
1061
+ position: absolute;
1062
+ top: 0;
1063
+ bottom: 0;
1064
+ left: 0;
1065
+ right: 0;
1066
+ background: rgba(0, 0, 0, 0.65);
1067
+ }
1068
+
1069
+ .ImageGallery .image .spinner .SpinningProgress {
1070
+ position: absolute;
1071
+ top: 50%;
1072
+ left: 50%;
1073
+ margin-left: -24px;
1074
+ margin-top: -24px;
1075
+ }
1076
+
1077
+ .ImageGallery .image .spinner .SpinningProgress .line {
1078
+ stroke: #2196F3;
1079
+ }
1080
+
1081
+ .ImageGallery .Button.animated {
1082
+ transition: all 0.25s ease;
1083
+ opacity: 0;
1084
+ transform: scale(0);
1085
+ }
1086
+
1087
+ .ImageGallery .Button.animated.mounted, .ImageGallery .Button.animated.mounting {
1088
+ opacity: 1;
1089
+ transform: scale(1);
1090
+ }
1091
+
1092
+ .ImageGallery .Button {
1093
+ color: white;
1094
+ background: rgba(0, 0, 0, 0.4);
1232
1095
  }
1233
1096
 
1234
- .Switch .switch-input:checked + .switch-label:after {
1235
- background-color: #4CAF50;
1236
- transform: translate(80%, -50%);
1097
+ .ImageGallery .Button:hover {
1098
+ background: rgba(0, 0, 0, 0.7);
1237
1099
  }
1238
1100
 
1239
- .Switch .switch-input:checked + .switch-label .toggle--on {
1240
- display: inline-block;
1101
+ .ImageGallery > .arrow {
1102
+ position: absolute;
1103
+ top: 50%;
1104
+ height: 76px;
1105
+ width: 76px;
1106
+ margin-top: -38px;
1241
1107
  }
1242
1108
 
1243
- .Switch .switch-input:checked + .switch-label .toggle--off {
1244
- display: none;
1109
+ .ImageGallery > .arrow.left {
1110
+ left: 5%;
1245
1111
  }
1246
1112
 
1247
- .FormUploadProgress {
1248
- position: absolute;
1249
- left: 0;
1250
- right: 0;
1251
- top: 0;
1252
- bottom: 0;
1253
- background-color: rgba(255, 255, 255, 0.6);
1254
- z-index: 2;
1113
+ .ImageGallery > .arrow.right {
1114
+ right: 5%;
1255
1115
  }
1256
1116
 
1257
- .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
1258
- transition-delay: 500ms;
1117
+ .ImageGallery > .arrow .material-icons {
1118
+ font-size: 40px;
1259
1119
  }
1260
1120
 
1261
- .FormUploadProgress .wrapper {
1262
- position: sticky;
1263
- top: 40%;
1264
- margin-top: 40%;
1265
- margin-left: 50%;
1266
- transform: translateX(-50%);
1267
- display: flex;
1268
- flex-flow: column;
1269
- justify-content: center;
1270
- align-items: center;
1121
+ .ImageGallery .counter {
1122
+ position: absolute;
1123
+ top: 10px;
1124
+ left: 10px;
1125
+ color: white;
1126
+ font-size: 13px;
1271
1127
  }
1272
1128
 
1273
- .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
1129
+ .ImageGallery .previews {
1130
+ height: 80px;
1274
1131
  position: absolute;
1275
- width: 107px;
1276
- height: 107px;
1277
- top: 0;
1278
- left: 0;
1132
+ bottom: 15px;
1133
+ left: 50%;
1134
+ transform: translateX(-50%);
1135
+ padding: 0 45px;
1279
1136
  }
1280
1137
 
1281
- .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
1282
- stroke: #2196F3;
1138
+ .ImageGallery .previews .viewport {
1139
+ overflow: hidden;
1140
+ position: relative;
1141
+ height: 100%;
1283
1142
  }
1284
1143
 
1285
- .FormUploadProgress .wrapper > .progress {
1286
- width: 107px;
1287
- height: 107px;
1288
- min-height: 107px;
1289
- display: flex;
1290
- justify-content: center;
1291
- align-items: center;
1292
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1293
- border-radius: 50%;
1294
- background: white;
1144
+ .ImageGallery .previews .container {
1295
1145
  position: relative;
1146
+ display: flex;
1147
+ flex-flow: row nowrap;
1148
+ height: 100%;
1149
+ transition: left 0.25s ease;
1296
1150
  }
1297
1151
 
1298
- .FormUploadProgress .wrapper > .progress > .value {
1152
+ .ImageGallery .previews .preview {
1153
+ position: relative;
1154
+ height: 100%;
1299
1155
  display: inline-block;
1300
- margin-top: 5px;
1301
- font-weight: bold;
1302
- line-height: 16px;
1303
- font-size: 13px;
1304
- text-align: center;
1305
- color: #818181;
1156
+ width: 106.66px;
1157
+ overflow: hidden;
1158
+ margin-left: 12px;
1159
+ border-radius: 2px;
1160
+ cursor: pointer;
1161
+ box-sizing: border-box;
1306
1162
  }
1307
1163
 
1308
- .FormUploadProgress .wrapper .cancel {
1309
- min-width: 107px;
1310
- margin-top: 20px;
1311
- background-color: white;
1312
- color: #F96B5C;
1313
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1164
+ .ImageGallery .previews .preview:first-child {
1165
+ margin-left: 0;
1314
1166
  }
1315
1167
 
1316
- .Button.FloatingActionButton {
1168
+ .ImageGallery .previews .preview > .border {
1317
1169
  position: absolute;
1318
- right: 16px;
1319
- bottom: 16px;
1320
- width: 56px;
1321
- height: 56px;
1322
- padding: 16px;
1323
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1170
+ bottom: 0;
1171
+ width: 100%;
1172
+ height: 3px;
1324
1173
  }
1325
1174
 
1326
- .Button.FloatingActionButton.raised {
1327
- 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);
1175
+ .ImageGallery .previews .preview > .border .line {
1176
+ left: 50%;
1177
+ width: 0;
1178
+ height: 3px;
1179
+ min-height: 3px;
1180
+ background-color: #4AC263;
1181
+ transition: all 0.2s ease;
1182
+ position: absolute;
1328
1183
  }
1329
1184
 
1330
- .Button.FloatingActionButton.mini {
1331
- width: 40px;
1332
- height: 40px;
1333
- padding: 8px;
1185
+ .ImageGallery .previews .preview:after {
1186
+ content: "";
1187
+ position: absolute;
1188
+ top: 0;
1189
+ right: 0;
1190
+ bottom: 0;
1191
+ left: 0;
1192
+ background: rgba(0, 0, 0, 0.35);
1193
+ transition: background 0.2s ease;
1334
1194
  }
1335
1195
 
1336
- .Button.FloatingActionButton.hidden {
1337
- bottom: -100px;
1196
+ .ImageGallery .previews .preview:hover:after {
1197
+ background: rgba(0, 0, 0, 0.1);
1338
1198
  }
1339
1199
 
1340
- .SpinningProgress {
1341
- width: 48px;
1342
- height: 48px;
1343
- position: relative;
1344
- margin: 0 auto;
1200
+ .ImageGallery .previews .preview.selected .border .line {
1201
+ left: 0;
1202
+ width: 100%;
1345
1203
  }
1346
1204
 
1347
- .SpinningProgress:before {
1348
- content: "";
1349
- display: block;
1350
- padding-top: 100%;
1205
+ .ImageGallery .previews .preview.selected:after {
1206
+ background: rgba(0, 0, 0, 0);
1351
1207
  }
1352
1208
 
1353
- .SpinningProgress .circular {
1354
- animation: rotate 2s linear infinite;
1355
- height: 100%;
1356
- transform-origin: center center;
1357
- width: 100%;
1209
+ .ImageGallery .previews > .arrow {
1358
1210
  position: absolute;
1359
- top: 0;
1360
- bottom: 0;
1361
- left: 0;
1362
- right: 0;
1363
- margin: auto;
1211
+ top: 50%;
1212
+ height: 30px;
1213
+ width: 30px;
1214
+ min-width: 30px;
1215
+ min-height: 30px;
1216
+ margin-top: -15px;
1364
1217
  }
1365
1218
 
1366
- .SpinningProgress .line {
1367
- stroke: black;
1368
- stroke-width: 2px;
1369
- stroke-dasharray: 1, 96;
1370
- stroke-dashoffset: 0;
1371
- animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1219
+ .ImageGallery .previews > .arrow.left {
1220
+ left: 0;
1372
1221
  }
1373
1222
 
1374
- @keyframes rotate {
1375
- 100% {
1376
- transform: rotate(360deg);
1377
- }
1223
+ .ImageGallery .previews > .arrow.right {
1224
+ right: 0;
1378
1225
  }
1379
- @keyframes dash {
1380
- 0% {
1381
- stroke-dasharray: 1, 96;
1382
- stroke-dashoffset: 0;
1383
- }
1384
- 50% {
1385
- stroke-dasharray: 43, 96;
1386
- stroke-dashoffset: -17px;
1387
- }
1388
- 100% {
1389
- stroke-dasharray: 43, 96;
1390
- stroke-dashoffset: -53px;
1391
- }
1226
+
1227
+ .ImageGallery .previews > .arrow .material-icons {
1228
+ font-size: 24px;
1392
1229
  }
1230
+
1393
1231
  .Snackbar {
1394
1232
  transform: translateX(-50%);
1395
1233
  overflow: hidden;
@@ -1423,71 +1261,135 @@
1423
1261
  flex: 1;
1424
1262
  }
1425
1263
 
1426
- .Snackbar .action {
1427
- text-transform: uppercase;
1428
- font-weight: bold;
1429
- margin-left: 48px;
1430
- color: #bf3727;
1264
+ .Snackbar .action {
1265
+ text-transform: uppercase;
1266
+ font-weight: bold;
1267
+ margin-left: 48px;
1268
+ color: #bf3727;
1269
+ }
1270
+
1271
+ .Snackbar .action a {
1272
+ text-decoration: none;
1273
+ color: #bf3727;
1274
+ }
1275
+
1276
+ .Button.FloatingActionButton {
1277
+ position: absolute;
1278
+ right: 16px;
1279
+ bottom: 16px;
1280
+ width: 56px;
1281
+ height: 56px;
1282
+ padding: 16px;
1283
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1284
+ }
1285
+
1286
+ .Button.FloatingActionButton.raised {
1287
+ 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);
1288
+ }
1289
+
1290
+ .Button.FloatingActionButton.mini {
1291
+ width: 40px;
1292
+ height: 40px;
1293
+ padding: 8px;
1294
+ }
1295
+
1296
+ .Button.FloatingActionButton.hidden {
1297
+ bottom: -100px;
1298
+ }
1299
+
1300
+ .Scrollable {
1301
+ max-height: 250px;
1302
+ max-width: 250px;
1303
+ padding-right: 5px;
1304
+ position: relative;
1305
+ display: flex;
1306
+ flex-flow: column;
1307
+ align-items: stretch;
1308
+ overflow: hidden;
1309
+ }
1310
+
1311
+ .Scrollable:hover > .scrollbar.auto {
1312
+ transition-delay: 0s;
1313
+ opacity: 1;
1314
+ }
1315
+
1316
+ .Scrollable .viewport {
1317
+ overflow-y: scroll;
1318
+ overflow-x: scroll;
1319
+ max-height: 100%;
1320
+ scroll-behavior: smooth;
1321
+ scrollbar-width: none;
1431
1322
  }
1432
1323
 
1433
- .Snackbar .action a {
1434
- text-decoration: none;
1435
- color: #bf3727;
1324
+ .Scrollable .viewport::-webkit-scrollbar {
1325
+ display: none;
1436
1326
  }
1437
1327
 
1438
- .DNDContainer .DroppableList .Draggable {
1439
- transform: unset;
1440
- transition: unset;
1441
- opacity: 1;
1328
+ .Scrollable.without-scroll-horizontal {
1329
+ max-width: unset;
1442
1330
  }
1443
1331
 
1444
- .DNDContainer .DroppableList .Draggable.dragged {
1445
- transition: unset !important;
1332
+ .Scrollable.without-scroll {
1333
+ padding-right: 0;
1334
+ max-height: unset;
1446
1335
  }
1447
1336
 
1448
- .DNDContainer .DroppableList.hover .Draggable {
1449
- transition: transform 0.2s ease-in;
1337
+ .Scrollable.without-scroll > .viewport {
1338
+ padding-right: 0;
1339
+ margin-right: 0;
1450
1340
  }
1451
1341
 
1452
- .DNDContainer .DroppableList.resetting .Draggable {
1453
- transition: transform 0.1s ease-in;
1342
+ .Scrollable.without-scroll > .scrollbar {
1343
+ visibility: hidden;
1454
1344
  }
1455
1345
 
1456
- .ModalMenu {
1346
+ .Scrollable .scrollbar {
1457
1347
  position: absolute;
1458
- top: 10px;
1459
- right: 50px;
1348
+ right: 0px;
1349
+ top: 0px;
1350
+ width: 5px;
1351
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1352
+ transition-delay: 0.5s;
1353
+ z-index: 1;
1460
1354
  }
1461
1355
 
1462
- .ModalMenu .material-icons {
1463
- color: #818181;
1356
+ .Scrollable .scrollbar.auto, .Scrollable .scrollbar.hidden {
1357
+ opacity: 0;
1464
1358
  }
1465
1359
 
1466
- .ModalMenu .Button.animated {
1360
+ .Scrollable .scrollbar .thumb {
1361
+ background-color: rgba(0, 0, 0, 0.3);
1362
+ width: 5px;
1467
1363
  position: absolute;
1468
- transition: opacity 150ms ease-in, right 200ms ease-in;
1469
- opacity: 0;
1470
- right: 0;
1471
- top: 0;
1364
+ right: 0px;
1365
+ top: 0px;
1366
+ user-select: none;
1367
+ will-change: top;
1368
+ border-radius: 2px;
1472
1369
  }
1473
1370
 
1474
- .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
1475
- opacity: 1;
1371
+ .Scrollable .scrollbar .thumb:hover {
1372
+ background-color: rgba(0, 0, 0, 0.5);
1476
1373
  }
1477
1374
 
1478
- .ModalMenu .Button.animated.unmounting {
1479
- transition: opacity 100ms ease-out, right 200ms ease-out;
1375
+ .Scrollable .scrollbar .thumb:active {
1376
+ background-color: rgba(0, 0, 0, 0.7);
1480
1377
  }
1481
1378
 
1482
- .ModalMenu .Button.active {
1483
- background: #EBEBEB;
1379
+ .Scrollable .scrollbar.horizontal {
1380
+ left: 0px;
1381
+ right: 0px;
1382
+ height: 5px;
1383
+ bottom: 0;
1384
+ width: unset;
1385
+ top: unset;
1484
1386
  }
1485
1387
 
1486
- .ModalMenu .separator {
1487
- height: 24px;
1488
- width: 1px;
1489
- background-color: #D9D9D9;
1490
- margin-left: 4px;
1388
+ .Scrollable .scrollbar.horizontal .thumb {
1389
+ height: 5px;
1390
+ left: 0px;
1391
+ bottom: 0px;
1392
+ will-change: left;
1491
1393
  }
1492
1394
 
1493
1395
  .TextField {
@@ -1633,6 +1535,104 @@
1633
1535
  animation-name: shake;
1634
1536
  }
1635
1537
 
1538
+ .DropFileInput {
1539
+ flex-grow: 1;
1540
+ }
1541
+
1542
+ .DropFileInput .Dropzone {
1543
+ border: 1px dashed #808080;
1544
+ padding: 12px;
1545
+ display: flex;
1546
+ flex-flow: row nowrap;
1547
+ justify-content: center;
1548
+ align-items: center;
1549
+ color: gray;
1550
+ cursor: pointer;
1551
+ border-radius: 3px;
1552
+ font-weight: normal;
1553
+ line-height: 22px;
1554
+ font-size: 14px;
1555
+ color: #7E7E7E;
1556
+ max-width: 100%;
1557
+ word-break: break-all;
1558
+ word-break: break-word;
1559
+ }
1560
+
1561
+ .DropFileInput .Dropzone .icon.withText {
1562
+ margin-right: 10px;
1563
+ }
1564
+
1565
+ .SpinningProgress {
1566
+ width: 48px;
1567
+ height: 48px;
1568
+ position: relative;
1569
+ margin: 0 auto;
1570
+ }
1571
+
1572
+ .SpinningProgress:before {
1573
+ content: "";
1574
+ display: block;
1575
+ padding-top: 100%;
1576
+ }
1577
+
1578
+ .SpinningProgress .circular {
1579
+ animation: rotate 2s linear infinite;
1580
+ height: 100%;
1581
+ transform-origin: center center;
1582
+ width: 100%;
1583
+ position: absolute;
1584
+ top: 0;
1585
+ bottom: 0;
1586
+ left: 0;
1587
+ right: 0;
1588
+ margin: auto;
1589
+ }
1590
+
1591
+ .SpinningProgress .line {
1592
+ stroke: black;
1593
+ stroke-width: 2px;
1594
+ stroke-dasharray: 1, 96;
1595
+ stroke-dashoffset: 0;
1596
+ animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1597
+ }
1598
+
1599
+ @keyframes rotate {
1600
+ 100% {
1601
+ transform: rotate(360deg);
1602
+ }
1603
+ }
1604
+ @keyframes dash {
1605
+ 0% {
1606
+ stroke-dasharray: 1, 96;
1607
+ stroke-dashoffset: 0;
1608
+ }
1609
+ 50% {
1610
+ stroke-dasharray: 43, 96;
1611
+ stroke-dashoffset: -17px;
1612
+ }
1613
+ 100% {
1614
+ stroke-dasharray: 43, 96;
1615
+ stroke-dashoffset: -53px;
1616
+ }
1617
+ }
1618
+ .DNDContainer .DroppableList .Draggable {
1619
+ transform: unset;
1620
+ transition: unset;
1621
+ opacity: 1;
1622
+ }
1623
+
1624
+ .DNDContainer .DroppableList .Draggable.dragged {
1625
+ transition: unset !important;
1626
+ }
1627
+
1628
+ .DNDContainer .DroppableList.hover .Draggable {
1629
+ transition: transform 0.2s ease-in;
1630
+ }
1631
+
1632
+ .DNDContainer .DroppableList.resetting .Draggable {
1633
+ transition: transform 0.1s ease-in;
1634
+ }
1635
+
1636
1636
  .CalendarMonthView {
1637
1637
  display: flex;
1638
1638
  flex-flow: column nowrap;
@@ -1658,6 +1658,38 @@
1658
1658
  height: 100%;
1659
1659
  }
1660
1660
 
1661
+ .DNDContainer {
1662
+ position: relative;
1663
+ }
1664
+
1665
+ .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
1666
+ cursor: pointer;
1667
+ }
1668
+
1669
+ .DNDContainer .Draggable.placeholder {
1670
+ opacity: 0.2;
1671
+ }
1672
+
1673
+ .DNDContainer .Draggable.copy {
1674
+ position: absolute;
1675
+ box-sizing: border-box;
1676
+ will-change: transform;
1677
+ opacity: 0;
1678
+ }
1679
+
1680
+ .DNDContainer .Draggable.dragged {
1681
+ z-index: 10;
1682
+ }
1683
+
1684
+ .DNDContainer .overlay {
1685
+ position: absolute;
1686
+ top: 0;
1687
+ left: 0;
1688
+ right: 0;
1689
+ bottom: 0;
1690
+ pointer-events: none;
1691
+ }
1692
+
1661
1693
  .DatePicker {
1662
1694
  position: relative;
1663
1695
  }
@@ -1775,38 +1807,6 @@
1775
1807
  background-color: #51adf6;
1776
1808
  }
1777
1809
 
1778
- .DNDContainer {
1779
- position: relative;
1780
- }
1781
-
1782
- .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
1783
- cursor: pointer;
1784
- }
1785
-
1786
- .DNDContainer .Draggable.placeholder {
1787
- opacity: 0.2;
1788
- }
1789
-
1790
- .DNDContainer .Draggable.copy {
1791
- position: absolute;
1792
- box-sizing: border-box;
1793
- will-change: transform;
1794
- opacity: 0;
1795
- }
1796
-
1797
- .DNDContainer .Draggable.dragged {
1798
- z-index: 10;
1799
- }
1800
-
1801
- .DNDContainer .overlay {
1802
- position: absolute;
1803
- top: 0;
1804
- left: 0;
1805
- right: 0;
1806
- bottom: 0;
1807
- pointer-events: none;
1808
- }
1809
-
1810
1810
  .Table {
1811
1811
  font-family: Roboto, sans-serif;
1812
1812
  font-size: 14px;