react-ui-basics 0.0.136 → 0.0.140

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/Table.js +57 -29
  2. package/Table.js.map +1 -1
  3. package/bundle.css +578 -578
  4. package/package.json +1 -1
package/bundle.css CHANGED
@@ -1,3 +1,177 @@
1
+ .animated {
2
+ transition: opacity 250ms ease;
3
+ opacity: 0;
4
+ }
5
+
6
+ .animated.mounting, .animated.mounted {
7
+ opacity: 1;
8
+ }
9
+
10
+ .Button {
11
+ position: relative;
12
+ min-width: 64px;
13
+ min-height: 36px;
14
+ height: 24px;
15
+ margin: 0px;
16
+ padding: 0px 16px;
17
+ border: none;
18
+ outline: none;
19
+ font-size: 14px;
20
+ font-weight: 500;
21
+ letter-spacing: 1.25px;
22
+ background: #dfdfdf;
23
+ text-transform: uppercase;
24
+ font-family: Roboto, sans-serif;
25
+ display: inline-flex;
26
+ justify-content: center;
27
+ align-items: center;
28
+ cursor: pointer;
29
+ overflow: hidden;
30
+ user-select: none;
31
+ border-radius: 3px;
32
+ transition: all 0.2s ease;
33
+ }
34
+
35
+ .Button.flat {
36
+ background-color: transparent;
37
+ }
38
+
39
+ .Button.flat:hover {
40
+ background-color: rgba(0, 0, 0, 0.05);
41
+ }
42
+
43
+ .Button.green {
44
+ background-color: #43a047;
45
+ color: white;
46
+ }
47
+
48
+ .Button.green:hover {
49
+ background-color: #3b8e3f;
50
+ }
51
+
52
+ .Button.blue {
53
+ background-color: #039be5;
54
+ color: white;
55
+ }
56
+
57
+ .Button.blue:hover {
58
+ background-color: #038acc;
59
+ }
60
+
61
+ .Button.red {
62
+ background-color: #e53935;
63
+ color: white;
64
+ }
65
+
66
+ .Button.red:hover {
67
+ background-color: #e2231e;
68
+ }
69
+
70
+ .Button.black {
71
+ background-color: #1e252d;
72
+ color: white;
73
+ }
74
+
75
+ .Button.black:hover {
76
+ background-color: #14181e;
77
+ }
78
+
79
+ .Button.gray {
80
+ background: #D9D9D9;
81
+ color: #999999;
82
+ }
83
+
84
+ .Button.gray:hover {
85
+ background-color: #cccccc;
86
+ }
87
+
88
+ .Button.small {
89
+ padding: 0px 8px;
90
+ min-height: 16px;
91
+ min-width: 16px;
92
+ }
93
+
94
+ .Button > .material-icons {
95
+ margin-right: 10px;
96
+ }
97
+
98
+ .Button.round {
99
+ padding: 0px;
100
+ min-width: 36px;
101
+ border-radius: 50%;
102
+ }
103
+
104
+ .Button.round > .material-icons {
105
+ margin: 0px;
106
+ }
107
+
108
+ .Button .ripple {
109
+ position: absolute;
110
+ background: rgba(0, 0, 0, 0.1);
111
+ border-radius: 100%;
112
+ transform: scale(0);
113
+ pointer-events: none;
114
+ transition: opacity 0.2s ease-out;
115
+ }
116
+
117
+ .Button .ripple.show {
118
+ animation: ripple 0.35s ease-out;
119
+ }
120
+
121
+ .Button:active .ripple.showed {
122
+ opacity: 1;
123
+ }
124
+
125
+ .Button:focus .ripple.focused {
126
+ opacity: 1;
127
+ transition: opacity 0.2s ease-out, transform 0.2s ease-out;
128
+ transform: scale(1);
129
+ animation: resize 1.25s ease-out infinite;
130
+ animation-delay: 0.2s;
131
+ animation-direction: alternate;
132
+ }
133
+
134
+ .Button .ripple.showed {
135
+ transform: scale(2);
136
+ opacity: 0;
137
+ }
138
+
139
+ @keyframes ripple {
140
+ to {
141
+ transform: scale(2);
142
+ }
143
+ }
144
+ @keyframes resize {
145
+ to {
146
+ transform: scale(0.9);
147
+ }
148
+ }
149
+ .Button.raised {
150
+ transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
151
+ }
152
+
153
+ .Button.raised:hover {
154
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
155
+ }
156
+
157
+ .Button.raised:active {
158
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
159
+ }
160
+
161
+ .Button.disabled {
162
+ box-shadow: none;
163
+ background: #D9D9D9;
164
+ color: #999999;
165
+ }
166
+
167
+ .Button.disabled:hover {
168
+ background-color: #cccccc;
169
+ }
170
+
171
+ .Button::-moz-focus-inner {
172
+ border: 0;
173
+ }
174
+
1
175
  .Checkbox {
2
176
  position: relative;
3
177
  white-space: pre;
@@ -65,67 +239,154 @@
65
239
  background: rgba(0, 0, 0, 0.26);
66
240
  }
67
241
 
68
- .AutocompleteSelect {
69
- display: inline-flex;
70
- flex-flow: column;
71
- justify-content: center;
72
- position: relative;
73
- min-width: 250px;
74
- min-height: 36px;
75
- user-select: none;
242
+ .CircleProgress {
243
+ width: 48px;
244
+ height: 48px;
76
245
  }
77
246
 
78
- @keyframes clockwise {
79
- 0% {
80
- -webkit-transform: rotate(-90deg);
81
- }
82
- 100% {
83
- -webkit-transform: translateX(0px);
84
- }
85
- }
86
- @keyframes anticlockwise {
87
- 0% {
88
- -webkit-transform: rotate(90deg);
89
- }
90
- 100% {
91
- -webkit-transform: translateX(0px);
92
- }
247
+ .CircleProgress .line {
248
+ stroke-width: 2px;
249
+ stroke: black;
250
+ stroke-linecap: square;
251
+ fill: none;
252
+ transition: stroke-dashoffset 0.2s ease;
93
253
  }
94
- .AutocompleteSelect > .input {
95
- width: 100%;
254
+
255
+ .DialogModal {
256
+ overflow: hidden;
96
257
  }
97
258
 
98
- .AutocompleteSelect .Scrollable {
99
- padding-right: 0;
100
- min-width: 100%;
259
+ .DialogModal .content {
260
+ top: 20vh;
101
261
  }
102
262
 
103
- .AutocompleteSelect.inline-multiple > .label {
104
- top: -12px;
263
+ .Dialog {
264
+ background-color: white;
265
+ min-width: 460px;
266
+ max-width: 40vw;
267
+ padding: 15px;
105
268
  }
106
269
 
107
- .AutocompleteSelect.inline-multiple > .selected {
108
- flex-flow: row wrap;
270
+ .Dialog .title {
271
+ margin-bottom: 15px;
272
+ padding: 20px 50px 0px 30px;
273
+ font-size: 1.25rem;
274
+ line-height: 2rem;
275
+ font-weight: 400;
276
+ letter-spacing: 0.0125em;
109
277
  }
110
278
 
111
- .AutocompleteSelect.multiple-mini-inline {
112
- height: 42px;
279
+ .Dialog .description {
280
+ color: rgba(0, 0, 0, 0.54);
281
+ font-size: 1rem;
282
+ line-height: 1.5rem;
283
+ font-weight: 400;
284
+ letter-spacing: 0.03125em;
285
+ margin-top: 20px;
286
+ padding: 0 24px 24px;
113
287
  }
114
288
 
115
- .AutocompleteSelect.multiple-mini-inline > .label {
116
- cursor: pointer;
117
- width: 100%;
118
- margin-left: -10px;
119
- padding: 10px;
120
- box-sizing: border-box;
121
- top: 0;
289
+ .Dialog > div.row {
290
+ margin-bottom: 15px;
122
291
  }
123
292
 
124
- .AutocompleteSelect.multiple-mini-inline > .label.active {
125
- padding: 0 10px;
293
+ .Dialog > div.row:last-child {
294
+ margin-bottom: 0;
126
295
  }
127
296
 
128
- .AutocompleteSelect.multiple-mini-inline > .selected {
297
+ .DNDContainer {
298
+ position: relative;
299
+ }
300
+
301
+ .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
302
+ cursor: pointer;
303
+ }
304
+
305
+ .DNDContainer .Draggable.placeholder {
306
+ opacity: 0.2;
307
+ }
308
+
309
+ .DNDContainer .Draggable.copy {
310
+ position: absolute;
311
+ box-sizing: border-box;
312
+ will-change: transform;
313
+ opacity: 0;
314
+ }
315
+
316
+ .DNDContainer .Draggable.dragged {
317
+ z-index: 10;
318
+ }
319
+
320
+ .DNDContainer .overlay {
321
+ position: absolute;
322
+ top: 0;
323
+ left: 0;
324
+ right: 0;
325
+ bottom: 0;
326
+ pointer-events: none;
327
+ }
328
+
329
+ .AutocompleteSelect {
330
+ display: inline-flex;
331
+ flex-flow: column;
332
+ justify-content: center;
333
+ position: relative;
334
+ min-width: 250px;
335
+ min-height: 36px;
336
+ user-select: none;
337
+ }
338
+
339
+ @keyframes clockwise {
340
+ 0% {
341
+ -webkit-transform: rotate(-90deg);
342
+ }
343
+ 100% {
344
+ -webkit-transform: translateX(0px);
345
+ }
346
+ }
347
+ @keyframes anticlockwise {
348
+ 0% {
349
+ -webkit-transform: rotate(90deg);
350
+ }
351
+ 100% {
352
+ -webkit-transform: translateX(0px);
353
+ }
354
+ }
355
+ .AutocompleteSelect > .input {
356
+ width: 100%;
357
+ }
358
+
359
+ .AutocompleteSelect .Scrollable {
360
+ padding-right: 0;
361
+ min-width: 100%;
362
+ }
363
+
364
+ .AutocompleteSelect.inline-multiple > .label {
365
+ top: -12px;
366
+ }
367
+
368
+ .AutocompleteSelect.inline-multiple > .selected {
369
+ flex-flow: row wrap;
370
+ }
371
+
372
+ .AutocompleteSelect.multiple-mini-inline {
373
+ height: 42px;
374
+ }
375
+
376
+ .AutocompleteSelect.multiple-mini-inline > .label {
377
+ cursor: pointer;
378
+ width: 100%;
379
+ margin-left: -10px;
380
+ padding: 10px;
381
+ box-sizing: border-box;
382
+ top: 0;
383
+ }
384
+
385
+ .AutocompleteSelect.multiple-mini-inline > .label.active {
386
+ padding: 0 10px;
387
+ }
388
+
389
+ .AutocompleteSelect.multiple-mini-inline > .selected {
129
390
  width: 250px;
130
391
  }
131
392
 
@@ -250,375 +511,114 @@
250
511
  color: #1e252d;
251
512
  text-overflow: ellipsis;
252
513
  white-space: nowrap;
253
- overflow: hidden;
254
- display: flex;
255
- align-items: center;
256
- }
257
-
258
- .AutocompleteSelect > .selected.clickable {
259
- overflow: hidden;
260
- cursor: pointer;
261
- padding: 10px;
262
- margin-left: -10px;
263
- margin-right: -10px;
264
- }
265
-
266
- .AutocompleteSelect.inlineSelected {
267
- flex-flow: row wrap;
268
- justify-content: flex-start;
269
- }
270
-
271
- .AutocompleteSelect.inlineSelected.hasSelected {
272
- padding-top: 7px;
273
- }
274
-
275
- .AutocompleteSelect.inlineSelected > .label {
276
- width: 100%;
277
- height: 100%;
278
- }
279
-
280
- .AutocompleteSelect.inlineSelected > .label.active {
281
- z-index: 0;
282
- }
283
-
284
- .AutocompleteSelect.inlineSelected .input {
285
- width: unset;
286
- flex-basis: 50px;
287
- flex-grow: 1;
288
- }
289
-
290
- .AutocompleteSelect.inlineSelected .input::after {
291
- content: attr(data-value);
292
- visibility: hidden;
293
- white-space: pre;
294
- font: inherit;
295
- min-width: 2px;
296
- border: 0;
297
- margin: 0;
298
- outline: 0;
299
- float: left;
300
- display: inline-block;
301
- margin-top: -24px;
302
- font-size: 14px;
303
- padding: 2px;
304
- }
305
-
306
- .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
307
- margin-top: 7px;
308
- }
309
-
310
- .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
311
- cursor: pointer;
312
- margin: 5px 10px 5px 0px;
313
- display: inline-flex;
314
- flex-flow: row wrap;
315
- height: 30px;
316
- align-items: center;
317
- background-color: #f0f0f0;
318
- border-radius: 30px;
319
- position: relative;
320
- font-family: Roboto, sans-serif;
321
- font-size: 14px;
322
- color: #1e252d;
323
- }
324
-
325
- .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
326
- padding-left: 35px;
327
- padding-right: 10px;
328
- }
329
-
330
- .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
331
- cursor: pointer;
332
- min-width: 30px;
333
- width: 30px;
334
- height: 30px;
335
- opacity: 0;
336
- position: absolute;
337
- top: 0px;
338
- left: 0px;
339
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
340
- background-color: deepskyblue;
341
- color: white;
342
- border-radius: 30px;
343
- display: flex;
344
- flex-flow: row;
345
- justify-content: center;
346
- align-items: center;
347
- animation: anticlockwise 0.15s linear;
348
- }
349
-
350
- .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
351
- font-size: 22px;
352
- }
353
-
354
- .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
355
- width: 30px;
356
- height: 30px;
357
- opacity: 1;
358
- animation: clockwise 0.15s linear;
359
- overflow: hidden;
360
- position: absolute;
361
- }
362
-
363
- .Button {
364
- position: relative;
365
- min-width: 64px;
366
- min-height: 36px;
367
- height: 24px;
368
- margin: 0px;
369
- padding: 0px 16px;
370
- border: none;
371
- outline: none;
372
- font-size: 14px;
373
- font-weight: 500;
374
- letter-spacing: 1.25px;
375
- background: #dfdfdf;
376
- text-transform: uppercase;
377
- font-family: Roboto, sans-serif;
378
- display: inline-flex;
379
- justify-content: center;
380
- align-items: center;
381
- cursor: pointer;
382
- overflow: hidden;
383
- user-select: none;
384
- border-radius: 3px;
385
- transition: all 0.2s ease;
386
- }
387
-
388
- .Button.flat {
389
- background-color: transparent;
390
- }
391
-
392
- .Button.flat:hover {
393
- background-color: rgba(0, 0, 0, 0.05);
394
- }
395
-
396
- .Button.green {
397
- background-color: #43a047;
398
- color: white;
399
- }
400
-
401
- .Button.green:hover {
402
- background-color: #3b8e3f;
403
- }
404
-
405
- .Button.blue {
406
- background-color: #039be5;
407
- color: white;
408
- }
409
-
410
- .Button.blue:hover {
411
- background-color: #038acc;
412
- }
413
-
414
- .Button.red {
415
- background-color: #e53935;
416
- color: white;
417
- }
418
-
419
- .Button.red:hover {
420
- background-color: #e2231e;
421
- }
422
-
423
- .Button.black {
424
- background-color: #1e252d;
425
- color: white;
426
- }
427
-
428
- .Button.black:hover {
429
- background-color: #14181e;
430
- }
431
-
432
- .Button.gray {
433
- background: #D9D9D9;
434
- color: #999999;
435
- }
436
-
437
- .Button.gray:hover {
438
- background-color: #cccccc;
439
- }
440
-
441
- .Button.small {
442
- padding: 0px 8px;
443
- min-height: 16px;
444
- min-width: 16px;
445
- }
446
-
447
- .Button > .material-icons {
448
- margin-right: 10px;
449
- }
450
-
451
- .Button.round {
452
- padding: 0px;
453
- min-width: 36px;
454
- border-radius: 50%;
455
- }
456
-
457
- .Button.round > .material-icons {
458
- margin: 0px;
459
- }
460
-
461
- .Button .ripple {
462
- position: absolute;
463
- background: rgba(0, 0, 0, 0.1);
464
- border-radius: 100%;
465
- transform: scale(0);
466
- pointer-events: none;
467
- transition: opacity 0.2s ease-out;
468
- }
469
-
470
- .Button .ripple.show {
471
- animation: ripple 0.35s ease-out;
472
- }
473
-
474
- .Button:active .ripple.showed {
475
- opacity: 1;
476
- }
477
-
478
- .Button:focus .ripple.focused {
479
- opacity: 1;
480
- transition: opacity 0.2s ease-out, transform 0.2s ease-out;
481
- transform: scale(1);
482
- animation: resize 1.25s ease-out infinite;
483
- animation-delay: 0.2s;
484
- animation-direction: alternate;
485
- }
486
-
487
- .Button .ripple.showed {
488
- transform: scale(2);
489
- opacity: 0;
490
- }
491
-
492
- @keyframes ripple {
493
- to {
494
- transform: scale(2);
495
- }
496
- }
497
- @keyframes resize {
498
- to {
499
- transform: scale(0.9);
500
- }
501
- }
502
- .Button.raised {
503
- transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
504
- }
505
-
506
- .Button.raised:hover {
507
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
508
- }
509
-
510
- .Button.raised:active {
511
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
512
- }
513
-
514
- .Button.disabled {
515
- box-shadow: none;
516
- background: #D9D9D9;
517
- color: #999999;
518
- }
519
-
520
- .Button.disabled:hover {
521
- background-color: #cccccc;
522
- }
523
-
524
- .Button::-moz-focus-inner {
525
- border: 0;
526
- }
527
-
528
- .animated {
529
- transition: opacity 250ms ease;
530
- opacity: 0;
531
- }
532
-
533
- .animated.mounting, .animated.mounted {
534
- opacity: 1;
535
- }
536
-
537
- .CircleProgress {
538
- width: 48px;
539
- height: 48px;
540
- }
541
-
542
- .CircleProgress .line {
543
- stroke-width: 2px;
544
- stroke: black;
545
- stroke-linecap: square;
546
- fill: none;
547
- transition: stroke-dashoffset 0.2s ease;
514
+ overflow: hidden;
515
+ display: flex;
516
+ align-items: center;
548
517
  }
549
518
 
550
- .DialogModal {
519
+ .AutocompleteSelect > .selected.clickable {
551
520
  overflow: hidden;
521
+ cursor: pointer;
522
+ padding: 10px;
523
+ margin-left: -10px;
524
+ margin-right: -10px;
552
525
  }
553
526
 
554
- .DialogModal .content {
555
- top: 20vh;
527
+ .AutocompleteSelect.inlineSelected {
528
+ flex-flow: row wrap;
529
+ justify-content: flex-start;
556
530
  }
557
531
 
558
- .Dialog {
559
- background-color: white;
560
- min-width: 460px;
561
- max-width: 40vw;
562
- padding: 15px;
532
+ .AutocompleteSelect.inlineSelected.hasSelected {
533
+ padding-top: 7px;
563
534
  }
564
535
 
565
- .Dialog .title {
566
- margin-bottom: 15px;
567
- padding: 20px 50px 0px 30px;
568
- font-size: 1.25rem;
569
- line-height: 2rem;
570
- font-weight: 400;
571
- letter-spacing: 0.0125em;
536
+ .AutocompleteSelect.inlineSelected > .label {
537
+ width: 100%;
538
+ height: 100%;
572
539
  }
573
540
 
574
- .Dialog .description {
575
- color: rgba(0, 0, 0, 0.54);
576
- font-size: 1rem;
577
- line-height: 1.5rem;
578
- font-weight: 400;
579
- letter-spacing: 0.03125em;
580
- margin-top: 20px;
581
- padding: 0 24px 24px;
541
+ .AutocompleteSelect.inlineSelected > .label.active {
542
+ z-index: 0;
582
543
  }
583
544
 
584
- .Dialog > div.row {
585
- margin-bottom: 15px;
545
+ .AutocompleteSelect.inlineSelected .input {
546
+ width: unset;
547
+ flex-basis: 50px;
548
+ flex-grow: 1;
586
549
  }
587
550
 
588
- .Dialog > div.row:last-child {
589
- margin-bottom: 0;
551
+ .AutocompleteSelect.inlineSelected .input::after {
552
+ content: attr(data-value);
553
+ visibility: hidden;
554
+ white-space: pre;
555
+ font: inherit;
556
+ min-width: 2px;
557
+ border: 0;
558
+ margin: 0;
559
+ outline: 0;
560
+ float: left;
561
+ display: inline-block;
562
+ margin-top: -24px;
563
+ font-size: 14px;
564
+ padding: 2px;
590
565
  }
591
566
 
592
- .DNDContainer {
593
- position: relative;
567
+ .AutocompleteSelect.inlineSelected > .value:nth-child(2) {
568
+ margin-top: 7px;
594
569
  }
595
570
 
596
- .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
571
+ .AutocompleteSelect.inlineSelected > .value, .AutocompleteSelect > .selected > .value {
597
572
  cursor: pointer;
573
+ margin: 5px 10px 5px 0px;
574
+ display: inline-flex;
575
+ flex-flow: row wrap;
576
+ height: 30px;
577
+ align-items: center;
578
+ background-color: #f0f0f0;
579
+ border-radius: 30px;
580
+ position: relative;
581
+ font-family: Roboto, sans-serif;
582
+ font-size: 14px;
583
+ color: #1e252d;
598
584
  }
599
585
 
600
- .DNDContainer .Draggable.placeholder {
601
- opacity: 0.2;
586
+ .AutocompleteSelect.inlineSelected > .value .DummyChild, .AutocompleteSelect > .selected > .value .DummyChild {
587
+ padding-left: 35px;
588
+ padding-right: 10px;
602
589
  }
603
590
 
604
- .DNDContainer .Draggable.copy {
605
- position: absolute;
606
- box-sizing: border-box;
607
- will-change: transform;
591
+ .AutocompleteSelect.inlineSelected > .value .button, .AutocompleteSelect > .selected > .value .button {
592
+ cursor: pointer;
593
+ min-width: 30px;
594
+ width: 30px;
595
+ height: 30px;
608
596
  opacity: 0;
597
+ position: absolute;
598
+ top: 0px;
599
+ left: 0px;
600
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
601
+ background-color: deepskyblue;
602
+ color: white;
603
+ border-radius: 30px;
604
+ display: flex;
605
+ flex-flow: row;
606
+ justify-content: center;
607
+ align-items: center;
608
+ animation: anticlockwise 0.15s linear;
609
609
  }
610
610
 
611
- .DNDContainer .Draggable.dragged {
612
- z-index: 10;
611
+ .AutocompleteSelect.inlineSelected > .value .button .material-icons, .AutocompleteSelect > .selected > .value .button .material-icons {
612
+ font-size: 22px;
613
613
  }
614
614
 
615
- .DNDContainer .overlay {
615
+ .AutocompleteSelect.inlineSelected > .value:hover .button, .AutocompleteSelect > .selected > .value:hover .button {
616
+ width: 30px;
617
+ height: 30px;
618
+ opacity: 1;
619
+ animation: clockwise 0.15s linear;
620
+ overflow: hidden;
616
621
  position: absolute;
617
- top: 0;
618
- left: 0;
619
- right: 0;
620
- bottom: 0;
621
- pointer-events: none;
622
622
  }
623
623
 
624
624
  .DropFileInput {
@@ -648,6 +648,66 @@
648
648
  margin-right: 10px;
649
649
  }
650
650
 
651
+ .Dropzone {
652
+ position: relative;
653
+ }
654
+
655
+ .Dropzone > .overlay {
656
+ position: absolute;
657
+ left: 0;
658
+ right: 0;
659
+ top: 0;
660
+ bottom: 0;
661
+ background-color: #38ADC4;
662
+ z-index: 1;
663
+ opacity: 0;
664
+ transition: all 0.2s ease;
665
+ transition-delay: 100ms;
666
+ visibility: hidden;
667
+ display: flex;
668
+ justify-content: center;
669
+ align-items: center;
670
+ }
671
+
672
+ .Dropzone > .overlay .drop {
673
+ border-radius: 4px;
674
+ border: 1px dashed #FFFFFF;
675
+ position: absolute;
676
+ top: 18px;
677
+ left: 18px;
678
+ right: 18px;
679
+ bottom: 18px;
680
+ display: flex;
681
+ justify-content: center;
682
+ align-items: center;
683
+ font-weight: 500;
684
+ font-size: 18px;
685
+ color: #FFFFFF;
686
+ }
687
+
688
+ .Dropzone.dragging > .overlay {
689
+ opacity: 0.7;
690
+ visibility: visible;
691
+ transition-delay: 0s;
692
+ }
693
+
694
+ .Dropzone.dragging > * {
695
+ pointer-events: none;
696
+ }
697
+
698
+ .Dropzone > input.file {
699
+ position: absolute;
700
+ left: 0;
701
+ right: 0;
702
+ top: 0;
703
+ bottom: 0;
704
+ width: 100%;
705
+ height: 100%;
706
+ opacity: 0;
707
+ cursor: pointer;
708
+ z-index: 1;
709
+ }
710
+
651
711
  .FilteredList {
652
712
  max-height: 250px;
653
713
  position: relative;
@@ -729,64 +789,97 @@
729
789
  margin-bottom: 8px;
730
790
  }
731
791
 
732
- .Dropzone {
733
- position: relative;
734
- }
735
-
736
- .Dropzone > .overlay {
792
+ .FormUploadProgress {
737
793
  position: absolute;
738
794
  left: 0;
739
795
  right: 0;
740
796
  top: 0;
741
797
  bottom: 0;
742
- background-color: #38ADC4;
743
- z-index: 1;
744
- opacity: 0;
745
- transition: all 0.2s ease;
746
- transition-delay: 100ms;
747
- visibility: hidden;
798
+ background-color: rgba(255, 255, 255, 0.6);
799
+ z-index: 2;
800
+ }
801
+
802
+ .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
803
+ transition-delay: 500ms;
804
+ }
805
+
806
+ .FormUploadProgress .wrapper {
807
+ position: sticky;
808
+ top: 40%;
809
+ margin-top: 40%;
810
+ margin-left: 50%;
811
+ transform: translateX(-50%);
748
812
  display: flex;
813
+ flex-flow: column;
749
814
  justify-content: center;
750
815
  align-items: center;
751
816
  }
752
817
 
753
- .Dropzone > .overlay .drop {
754
- border-radius: 4px;
755
- border: 1px dashed #FFFFFF;
818
+ .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
819
+ position: absolute;
820
+ width: 107px;
821
+ height: 107px;
822
+ top: 0;
823
+ left: 0;
824
+ }
825
+
826
+ .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
827
+ stroke: #2196F3;
828
+ }
829
+
830
+ .FormUploadProgress .wrapper > .progress {
831
+ width: 107px;
832
+ height: 107px;
833
+ min-height: 107px;
834
+ display: flex;
835
+ justify-content: center;
836
+ align-items: center;
837
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
838
+ border-radius: 50%;
839
+ background: white;
840
+ position: relative;
841
+ }
842
+
843
+ .FormUploadProgress .wrapper > .progress > .value {
844
+ display: inline-block;
845
+ margin-top: 5px;
846
+ font-weight: bold;
847
+ line-height: 16px;
848
+ font-size: 13px;
849
+ text-align: center;
850
+ color: #818181;
851
+ }
852
+
853
+ .FormUploadProgress .wrapper .cancel {
854
+ min-width: 107px;
855
+ margin-top: 20px;
856
+ background-color: white;
857
+ color: #F96B5C;
858
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
859
+ }
860
+
861
+ .Button.FloatingActionButton {
756
862
  position: absolute;
757
- top: 18px;
758
- left: 18px;
759
- right: 18px;
760
- bottom: 18px;
761
- display: flex;
762
- justify-content: center;
763
- align-items: center;
764
- font-weight: 500;
765
- font-size: 18px;
766
- color: #FFFFFF;
863
+ right: 16px;
864
+ bottom: 16px;
865
+ width: 56px;
866
+ height: 56px;
867
+ padding: 16px;
868
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
767
869
  }
768
870
 
769
- .Dropzone.dragging > .overlay {
770
- opacity: 0.7;
771
- visibility: visible;
772
- transition-delay: 0s;
871
+ .Button.FloatingActionButton.raised {
872
+ 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);
773
873
  }
774
874
 
775
- .Dropzone.dragging > * {
776
- pointer-events: none;
875
+ .Button.FloatingActionButton.mini {
876
+ width: 40px;
877
+ height: 40px;
878
+ padding: 8px;
777
879
  }
778
880
 
779
- .Dropzone > input.file {
780
- position: absolute;
781
- left: 0;
782
- right: 0;
783
- top: 0;
784
- bottom: 0;
785
- width: 100%;
786
- height: 100%;
787
- opacity: 0;
788
- cursor: pointer;
789
- z-index: 1;
881
+ .Button.FloatingActionButton.hidden {
882
+ bottom: -100px;
790
883
  }
791
884
 
792
885
  .Modal {
@@ -859,75 +952,6 @@
859
952
  position: absolute;
860
953
  }
861
954
 
862
- .FormUploadProgress {
863
- position: absolute;
864
- left: 0;
865
- right: 0;
866
- top: 0;
867
- bottom: 0;
868
- background-color: rgba(255, 255, 255, 0.6);
869
- z-index: 2;
870
- }
871
-
872
- .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
873
- transition-delay: 500ms;
874
- }
875
-
876
- .FormUploadProgress .wrapper {
877
- position: sticky;
878
- top: 40%;
879
- margin-top: 40%;
880
- margin-left: 50%;
881
- transform: translateX(-50%);
882
- display: flex;
883
- flex-flow: column;
884
- justify-content: center;
885
- align-items: center;
886
- }
887
-
888
- .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
889
- position: absolute;
890
- width: 107px;
891
- height: 107px;
892
- top: 0;
893
- left: 0;
894
- }
895
-
896
- .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
897
- stroke: #2196F3;
898
- }
899
-
900
- .FormUploadProgress .wrapper > .progress {
901
- width: 107px;
902
- height: 107px;
903
- min-height: 107px;
904
- display: flex;
905
- justify-content: center;
906
- align-items: center;
907
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
908
- border-radius: 50%;
909
- background: white;
910
- position: relative;
911
- }
912
-
913
- .FormUploadProgress .wrapper > .progress > .value {
914
- display: inline-block;
915
- margin-top: 5px;
916
- font-weight: bold;
917
- line-height: 16px;
918
- font-size: 13px;
919
- text-align: center;
920
- color: #818181;
921
- }
922
-
923
- .FormUploadProgress .wrapper .cancel {
924
- min-width: 107px;
925
- margin-top: 20px;
926
- background-color: white;
927
- color: #F96B5C;
928
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
929
- }
930
-
931
955
  .ImageGallery {
932
956
  position: fixed;
933
957
  top: 0;
@@ -1200,30 +1224,6 @@
1200
1224
  margin-left: 4px;
1201
1225
  }
1202
1226
 
1203
- .Button.FloatingActionButton {
1204
- position: absolute;
1205
- right: 16px;
1206
- bottom: 16px;
1207
- width: 56px;
1208
- height: 56px;
1209
- padding: 16px;
1210
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1211
- }
1212
-
1213
- .Button.FloatingActionButton.raised {
1214
- 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);
1215
- }
1216
-
1217
- .Button.FloatingActionButton.mini {
1218
- width: 40px;
1219
- height: 40px;
1220
- padding: 8px;
1221
- }
1222
-
1223
- .Button.FloatingActionButton.hidden {
1224
- bottom: -100px;
1225
- }
1226
-
1227
1227
  .Scrollable {
1228
1228
  max-height: 250px;
1229
1229
  max-width: 250px;
@@ -1364,59 +1364,6 @@
1364
1364
  color: #bf3727;
1365
1365
  }
1366
1366
 
1367
- .SpinningProgress {
1368
- width: 48px;
1369
- height: 48px;
1370
- position: relative;
1371
- margin: 0 auto;
1372
- }
1373
-
1374
- .SpinningProgress:before {
1375
- content: "";
1376
- display: block;
1377
- padding-top: 100%;
1378
- }
1379
-
1380
- .SpinningProgress .circular {
1381
- animation: rotate 2s linear infinite;
1382
- height: 100%;
1383
- transform-origin: center center;
1384
- width: 100%;
1385
- position: absolute;
1386
- top: 0;
1387
- bottom: 0;
1388
- left: 0;
1389
- right: 0;
1390
- margin: auto;
1391
- }
1392
-
1393
- .SpinningProgress .line {
1394
- stroke: black;
1395
- stroke-width: 2px;
1396
- stroke-dasharray: 1, 96;
1397
- stroke-dashoffset: 0;
1398
- animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1399
- }
1400
-
1401
- @keyframes rotate {
1402
- 100% {
1403
- transform: rotate(360deg);
1404
- }
1405
- }
1406
- @keyframes dash {
1407
- 0% {
1408
- stroke-dasharray: 1, 96;
1409
- stroke-dashoffset: 0;
1410
- }
1411
- 50% {
1412
- stroke-dasharray: 43, 96;
1413
- stroke-dashoffset: -17px;
1414
- }
1415
- 100% {
1416
- stroke-dasharray: 43, 96;
1417
- stroke-dashoffset: -53px;
1418
- }
1419
- }
1420
1367
  .Switch {
1421
1368
  display: inline-flex;
1422
1369
  padding-top: 5px;
@@ -1499,14 +1446,6 @@
1499
1446
  display: none;
1500
1447
  }
1501
1448
 
1502
- .ScrollableTable .Scrollable .scrollbar {
1503
- top: 56px;
1504
- }
1505
-
1506
- .ScrollableTable .Table {
1507
- position: static;
1508
- }
1509
-
1510
1449
  .Table {
1511
1450
  font-family: Roboto, sans-serif;
1512
1451
  font-size: 14px;
@@ -1621,6 +1560,59 @@
1621
1560
  background-color: #f0f0f0;
1622
1561
  }
1623
1562
 
1563
+ .SpinningProgress {
1564
+ width: 48px;
1565
+ height: 48px;
1566
+ position: relative;
1567
+ margin: 0 auto;
1568
+ }
1569
+
1570
+ .SpinningProgress:before {
1571
+ content: "";
1572
+ display: block;
1573
+ padding-top: 100%;
1574
+ }
1575
+
1576
+ .SpinningProgress .circular {
1577
+ animation: rotate 2s linear infinite;
1578
+ height: 100%;
1579
+ transform-origin: center center;
1580
+ width: 100%;
1581
+ position: absolute;
1582
+ top: 0;
1583
+ bottom: 0;
1584
+ left: 0;
1585
+ right: 0;
1586
+ margin: auto;
1587
+ }
1588
+
1589
+ .SpinningProgress .line {
1590
+ stroke: black;
1591
+ stroke-width: 2px;
1592
+ stroke-dasharray: 1, 96;
1593
+ stroke-dashoffset: 0;
1594
+ animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1595
+ }
1596
+
1597
+ @keyframes rotate {
1598
+ 100% {
1599
+ transform: rotate(360deg);
1600
+ }
1601
+ }
1602
+ @keyframes dash {
1603
+ 0% {
1604
+ stroke-dasharray: 1, 96;
1605
+ stroke-dashoffset: 0;
1606
+ }
1607
+ 50% {
1608
+ stroke-dasharray: 43, 96;
1609
+ stroke-dashoffset: -17px;
1610
+ }
1611
+ 100% {
1612
+ stroke-dasharray: 43, 96;
1613
+ stroke-dashoffset: -53px;
1614
+ }
1615
+ }
1624
1616
  .TextField {
1625
1617
  position: relative;
1626
1618
  width: 100%;
@@ -1764,6 +1756,14 @@
1764
1756
  animation-name: shake;
1765
1757
  }
1766
1758
 
1759
+ .ScrollableTable .Scrollable .scrollbar {
1760
+ top: 56px;
1761
+ }
1762
+
1763
+ .ScrollableTable .Table {
1764
+ position: static;
1765
+ }
1766
+
1767
1767
  .DNDContainer .DroppableList .Draggable {
1768
1768
  transform: unset;
1769
1769
  transition: unset;