react-ui-basics 0.0.216 → 0.0.218

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,3 +1,169 @@
1
+ .Button {
2
+ position: relative;
3
+ min-width: 64px;
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;
22
+ user-select: none;
23
+ border-radius: 3px;
24
+ transition: all 0.2s ease;
25
+ }
26
+
27
+ .Button.flat {
28
+ background-color: transparent;
29
+ }
30
+
31
+ .Button.flat:hover {
32
+ background-color: rgba(0, 0, 0, 0.05);
33
+ }
34
+
35
+ .Button.green {
36
+ background-color: #43a047;
37
+ color: white;
38
+ }
39
+
40
+ .Button.green:hover {
41
+ background-color: #3b8e3f;
42
+ }
43
+
44
+ .Button.blue {
45
+ background-color: #039be5;
46
+ color: white;
47
+ }
48
+
49
+ .Button.blue:hover {
50
+ background-color: #038acc;
51
+ }
52
+
53
+ .Button.red {
54
+ background-color: #e53935;
55
+ color: white;
56
+ }
57
+
58
+ .Button.red:hover {
59
+ background-color: #e2231e;
60
+ }
61
+
62
+ .Button.black {
63
+ background-color: #1e252d;
64
+ color: white;
65
+ }
66
+
67
+ .Button.black:hover {
68
+ background-color: #14181e;
69
+ }
70
+
71
+ .Button.gray {
72
+ background: #D9D9D9;
73
+ color: #999999;
74
+ }
75
+
76
+ .Button.gray:hover {
77
+ background-color: #cccccc;
78
+ }
79
+
80
+ .Button.small {
81
+ padding: 0px 8px;
82
+ min-height: 16px;
83
+ min-width: 16px;
84
+ }
85
+
86
+ .Button > .material-icons {
87
+ margin-right: 10px;
88
+ }
89
+
90
+ .Button.round {
91
+ padding: 0px;
92
+ min-width: 36px;
93
+ border-radius: 50%;
94
+ }
95
+
96
+ .Button.round > .material-icons {
97
+ margin: 0px;
98
+ }
99
+
100
+ .Button .ripple {
101
+ position: absolute;
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;
107
+ }
108
+
109
+ .Button .ripple.show {
110
+ animation: ripple 0.35s ease-out;
111
+ }
112
+
113
+ .Button:active .ripple.showed {
114
+ opacity: 1;
115
+ }
116
+
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;
124
+ }
125
+
126
+ .Button .ripple.showed {
127
+ transform: scale(2);
128
+ opacity: 0;
129
+ }
130
+
131
+ @keyframes ripple {
132
+ to {
133
+ transform: scale(2);
134
+ }
135
+ }
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);
143
+ }
144
+
145
+ .Button.raised:hover {
146
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
147
+ }
148
+
149
+ .Button.raised:active {
150
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
151
+ }
152
+
153
+ .Button.disabled {
154
+ box-shadow: none;
155
+ background: #D9D9D9;
156
+ color: #999999;
157
+ }
158
+
159
+ .Button.disabled:hover {
160
+ background-color: #cccccc;
161
+ }
162
+
163
+ .Button::-moz-focus-inner {
164
+ border: 0;
165
+ }
166
+
1
167
  .AutocompleteSelect {
2
168
  display: inline-flex;
3
169
  flex-flow: column;
@@ -293,264 +459,308 @@
293
459
  position: absolute;
294
460
  }
295
461
 
296
- .Button {
297
- position: relative;
298
- min-width: 64px;
299
- min-height: 36px;
300
- height: 24px;
301
- margin: 0px;
302
- padding: 0px 16px;
303
- border: none;
304
- outline: none;
305
- font-size: 14px;
306
- font-weight: 500;
307
- letter-spacing: 1.25px;
308
- background: #dfdfdf;
309
- text-transform: uppercase;
310
- font-family: Roboto, sans-serif;
311
- -webkit-tap-highlight-color: transparent;
312
- display: inline-flex;
313
- justify-content: center;
314
- align-items: center;
315
- cursor: pointer;
316
- overflow: hidden;
317
- user-select: none;
318
- border-radius: 3px;
319
- transition: all 0.2s ease;
462
+ .animated {
463
+ transition: opacity 250ms ease;
464
+ opacity: 0;
320
465
  }
321
466
 
322
- .Button.flat {
323
- background-color: transparent;
467
+ .animated.mounting, .animated.mounted {
468
+ opacity: 1;
324
469
  }
325
470
 
326
- .Button.flat:hover {
327
- background-color: rgba(0, 0, 0, 0.05);
471
+ .FilteredList {
472
+ max-height: 250px;
473
+ position: relative;
328
474
  }
329
475
 
330
- .Button.green {
331
- background-color: #43a047;
332
- color: white;
476
+ .FilteredList.popup {
477
+ padding: 0;
478
+ visibility: hidden;
479
+ position: absolute;
480
+ background: white;
481
+ z-index: 4;
482
+ 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);
483
+ transition: all 0.2s ease-out;
484
+ top: calc(100% + 4px);
485
+ opacity: 0;
486
+ border-radius: 2px;
333
487
  }
334
488
 
335
- .Button.green:hover {
336
- background-color: #3b8e3f;
489
+ .FilteredList.popup.visible {
490
+ opacity: 1;
491
+ visibility: visible;
337
492
  }
338
493
 
339
- .Button.blue {
340
- background-color: #039be5;
341
- color: white;
494
+ .FilteredList.portal {
495
+ transition: opacity 0.2s ease-out;
342
496
  }
343
497
 
344
- .Button.blue:hover {
345
- background-color: #038acc;
498
+ .FilteredList.inline {
499
+ max-height: 225px;
500
+ margin-top: 5px;
346
501
  }
347
502
 
348
- .Button.red {
349
- background-color: #e53935;
350
- color: white;
503
+ .FilteredList .child {
504
+ display: flex;
505
+ flex-flow: row nowrap;
506
+ align-items: center;
507
+ white-space: nowrap;
508
+ font-size: 14px;
509
+ color: rgb(34, 34, 34);
510
+ height: 30px;
511
+ padding: 5px 10px;
512
+ padding-right: 15px;
513
+ cursor: pointer;
514
+ overflow: hidden;
515
+ transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
516
+ border-left: 5px solid #4AC263;
517
+ padding-left: 15px;
518
+ margin-left: -5px;
351
519
  }
352
520
 
353
- .Button.red:hover {
354
- background-color: #e2231e;
521
+ .FilteredList .child.hidden {
522
+ height: 0 !important;
523
+ padding: 0 !important;
355
524
  }
356
525
 
357
- .Button.black {
358
- background-color: #1e252d;
359
- color: white;
526
+ .FilteredList .child.selected {
527
+ background-color: #F0F0F0;
528
+ padding-left: 10px;
529
+ margin-left: 0px;
360
530
  }
361
531
 
362
- .Button.black:hover {
363
- background-color: #14181e;
532
+ .FilteredList .child.active {
533
+ background-color: rgb(238, 238, 238);
364
534
  }
365
535
 
366
- .Button.gray {
367
- background: #D9D9D9;
368
- color: #999999;
536
+ .FilteredList .child {
537
+ margin-top: 8px;
369
538
  }
370
539
 
371
- .Button.gray:hover {
372
- background-color: #cccccc;
540
+ .FilteredList .child.hidden {
541
+ margin-top: 0;
373
542
  }
374
543
 
375
- .Button.small {
376
- padding: 0px 8px;
377
- min-height: 16px;
378
- min-width: 16px;
544
+ .FilteredList .child:not(.hidden) ~ .child {
545
+ margin-top: 0;
379
546
  }
380
547
 
381
- .Button > .material-icons {
382
- margin-right: 10px;
548
+ .FilteredList .child:not(.hidden) ~ .child:last-child {
549
+ margin-bottom: 8px;
383
550
  }
384
551
 
385
- .Button.round {
386
- padding: 0px;
387
- min-width: 36px;
388
- border-radius: 50%;
552
+ .FilteredList .child:not(.hidden):last-child {
553
+ margin-bottom: 8px;
389
554
  }
390
555
 
391
- .Button.round > .material-icons {
392
- margin: 0px;
556
+ .DialogModal {
557
+ overflow: hidden;
393
558
  }
394
559
 
395
- .Button .ripple {
396
- position: absolute;
397
- background: rgba(0, 0, 0, 0.1);
398
- border-radius: 100%;
399
- transform: scale(0);
400
- pointer-events: none;
401
- transition: opacity 0.2s ease-out;
560
+ .DialogModal .content {
561
+ top: 20vh;
402
562
  }
403
563
 
404
- .Button .ripple.show {
405
- animation: ripple 0.35s ease-out;
564
+ .Dialog {
565
+ background-color: white;
566
+ min-width: 460px;
567
+ max-width: 40vw;
568
+ padding: 15px;
406
569
  }
407
570
 
408
- .Button:active .ripple.showed {
409
- opacity: 1;
571
+ .Dialog .title {
572
+ margin-bottom: 15px;
573
+ padding: 20px 50px 0px 30px;
574
+ font-size: 1.25rem;
575
+ line-height: 2rem;
576
+ font-weight: 400;
577
+ letter-spacing: 0.0125em;
410
578
  }
411
579
 
412
- .Button:focus .ripple.focused {
413
- opacity: 1;
414
- transition: opacity 0.2s ease-out, transform 0.2s ease-out;
415
- transform: scale(1);
416
- animation: resize 1.25s ease-out infinite;
417
- animation-delay: 0.2s;
418
- animation-direction: alternate;
580
+ .Dialog .description {
581
+ color: rgba(0, 0, 0, 0.54);
582
+ font-size: 1rem;
583
+ line-height: 1.5rem;
584
+ font-weight: 400;
585
+ letter-spacing: 0.03125em;
586
+ margin-top: 20px;
587
+ padding: 0 24px 24px;
419
588
  }
420
589
 
421
- .Button .ripple.showed {
422
- transform: scale(2);
423
- opacity: 0;
590
+ .Dialog > div.row {
591
+ margin-bottom: 15px;
424
592
  }
425
593
 
426
- @keyframes ripple {
427
- to {
428
- transform: scale(2);
429
- }
594
+ .Dialog > div.row:last-child {
595
+ margin-bottom: 0;
430
596
  }
431
- @keyframes resize {
432
- to {
433
- transform: scale(0.9);
434
- }
597
+
598
+ .Scrollable {
599
+ max-height: 250px;
600
+ max-width: 250px;
601
+ padding-right: 5px;
602
+ position: relative;
603
+ display: flex;
604
+ flex-flow: column;
605
+ align-items: stretch;
606
+ overflow: hidden;
435
607
  }
436
- .Button.raised {
437
- transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
608
+
609
+ .Scrollable:hover > .scrollbar.auto {
610
+ transition-delay: 0s;
611
+ opacity: 1;
438
612
  }
439
613
 
440
- .Button.raised:hover {
441
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
614
+ .Scrollable .viewport {
615
+ overflow-y: scroll;
616
+ overflow-x: scroll;
617
+ max-height: 100%;
618
+ scroll-behavior: smooth;
619
+ scrollbar-width: none;
442
620
  }
443
621
 
444
- .Button.raised:active {
445
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
622
+ .Scrollable .viewport::-webkit-scrollbar {
623
+ display: none;
446
624
  }
447
625
 
448
- .Button.disabled {
449
- box-shadow: none;
450
- background: #D9D9D9;
451
- color: #999999;
626
+ .Scrollable.without-scroll-horizontal {
627
+ max-width: unset;
452
628
  }
453
629
 
454
- .Button.disabled:hover {
455
- background-color: #cccccc;
630
+ .Scrollable.undefined-horizontal {
631
+ max-width: unset;
456
632
  }
457
633
 
458
- .Button::-moz-focus-inner {
459
- border: 0;
634
+ .Scrollable.without-scroll {
635
+ padding-right: 0;
636
+ max-height: unset;
460
637
  }
461
638
 
462
- .FilteredList {
463
- max-height: 250px;
464
- position: relative;
639
+ .Scrollable.without-scroll > .viewport {
640
+ padding-right: 0;
641
+ margin-right: 0;
465
642
  }
466
643
 
467
- .FilteredList.popup {
468
- padding: 0;
644
+ .Scrollable.without-scroll > .scrollbar {
469
645
  visibility: hidden;
470
- position: absolute;
471
- background: white;
472
- z-index: 4;
473
- 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);
474
- transition: all 0.2s ease-out;
475
- top: calc(100% + 4px);
476
- opacity: 0;
477
- border-radius: 2px;
478
646
  }
479
647
 
480
- .FilteredList.popup.visible {
481
- opacity: 1;
482
- visibility: visible;
648
+ .Scrollable .scrollbar {
649
+ position: absolute;
650
+ right: 0px;
651
+ top: 0px;
652
+ width: 5px;
653
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
654
+ transition-delay: 0.5s;
655
+ z-index: 1;
483
656
  }
484
657
 
485
- .FilteredList.portal {
486
- transition: opacity 0.2s ease-out;
658
+ .Scrollable .scrollbar.auto, .Scrollable .scrollbar.hidden {
659
+ opacity: 0;
487
660
  }
488
661
 
489
- .FilteredList.inline {
490
- max-height: 225px;
491
- margin-top: 5px;
662
+ .Scrollable .scrollbar .thumb {
663
+ background-color: rgba(0, 0, 0, 0.3);
664
+ width: 5px;
665
+ position: absolute;
666
+ right: 0px;
667
+ top: 0px;
668
+ user-select: none;
669
+ will-change: top;
670
+ border-radius: 2px;
492
671
  }
493
672
 
494
- .FilteredList .child {
495
- display: flex;
496
- flex-flow: row nowrap;
497
- align-items: center;
498
- white-space: nowrap;
499
- font-size: 14px;
500
- color: rgb(34, 34, 34);
501
- height: 30px;
502
- padding: 5px 10px;
503
- padding-right: 15px;
504
- cursor: pointer;
505
- overflow: hidden;
506
- transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
507
- border-left: 5px solid #4AC263;
508
- padding-left: 15px;
509
- margin-left: -5px;
673
+ .Scrollable .scrollbar .thumb:hover {
674
+ background-color: rgba(0, 0, 0, 0.5);
510
675
  }
511
676
 
512
- .FilteredList .child.hidden {
513
- height: 0 !important;
514
- padding: 0 !important;
677
+ .Scrollable .scrollbar .thumb:active {
678
+ background-color: rgba(0, 0, 0, 0.7);
515
679
  }
516
680
 
517
- .FilteredList .child.selected {
518
- background-color: #F0F0F0;
519
- padding-left: 10px;
520
- margin-left: 0px;
681
+ .Scrollable .scrollbar.horizontal {
682
+ left: 0px;
683
+ right: 0px;
684
+ height: 5px;
685
+ bottom: 0;
686
+ width: unset;
687
+ top: unset;
521
688
  }
522
689
 
523
- .FilteredList .child.active {
524
- background-color: rgb(238, 238, 238);
690
+ .Scrollable .scrollbar.horizontal .thumb {
691
+ height: 5px;
692
+ left: 0px;
693
+ bottom: 0px;
694
+ will-change: left;
525
695
  }
526
696
 
527
- .FilteredList .child {
528
- margin-top: 8px;
697
+ .FormUploadProgress {
698
+ position: absolute;
699
+ left: 0;
700
+ right: 0;
701
+ top: 0;
702
+ bottom: 0;
703
+ background-color: rgba(255, 255, 255, 0.6);
704
+ z-index: 2;
529
705
  }
530
706
 
531
- .FilteredList .child.hidden {
532
- margin-top: 0;
707
+ .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
708
+ transition-delay: 500ms;
533
709
  }
534
710
 
535
- .FilteredList .child:not(.hidden) ~ .child {
536
- margin-top: 0;
711
+ .FormUploadProgress .wrapper {
712
+ position: sticky;
713
+ top: 40%;
714
+ margin-top: 40%;
715
+ margin-left: 50%;
716
+ transform: translateX(-50%);
717
+ display: flex;
718
+ flex-flow: column;
719
+ justify-content: center;
720
+ align-items: center;
537
721
  }
538
722
 
539
- .FilteredList .child:not(.hidden) ~ .child:last-child {
540
- margin-bottom: 8px;
723
+ .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
724
+ position: absolute;
725
+ width: 107px;
726
+ height: 107px;
727
+ top: 0;
728
+ left: 0;
541
729
  }
542
730
 
543
- .FilteredList .child:not(.hidden):last-child {
544
- margin-bottom: 8px;
731
+ .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
732
+ stroke: #2196F3;
545
733
  }
546
734
 
547
- .animated {
548
- transition: opacity 250ms ease;
549
- opacity: 0;
735
+ .FormUploadProgress .wrapper > .progress {
736
+ width: 107px;
737
+ height: 107px;
738
+ min-height: 107px;
739
+ display: flex;
740
+ justify-content: center;
741
+ align-items: center;
742
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
743
+ border-radius: 50%;
744
+ background: white;
745
+ position: relative;
550
746
  }
551
747
 
552
- .animated.mounting, .animated.mounted {
553
- opacity: 1;
748
+ .FormUploadProgress .wrapper > .progress > .value {
749
+ display: inline-block;
750
+ margin-top: 5px;
751
+ font-weight: bold;
752
+ line-height: 16px;
753
+ font-size: 13px;
754
+ text-align: center;
755
+ color: #818181;
756
+ }
757
+
758
+ .FormUploadProgress .wrapper .cancel {
759
+ min-width: 107px;
760
+ margin-top: 20px;
761
+ background-color: white;
762
+ color: #F96B5C;
763
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
554
764
  }
555
765
 
556
766
  .TextField {
@@ -696,117 +906,6 @@
696
906
  animation-name: shake;
697
907
  }
698
908
 
699
- .DialogModal {
700
- overflow: hidden;
701
- }
702
-
703
- .DialogModal .content {
704
- top: 20vh;
705
- }
706
-
707
- .Dialog {
708
- background-color: white;
709
- min-width: 460px;
710
- max-width: 40vw;
711
- padding: 15px;
712
- }
713
-
714
- .Dialog .title {
715
- margin-bottom: 15px;
716
- padding: 20px 50px 0px 30px;
717
- font-size: 1.25rem;
718
- line-height: 2rem;
719
- font-weight: 400;
720
- letter-spacing: 0.0125em;
721
- }
722
-
723
- .Dialog .description {
724
- color: rgba(0, 0, 0, 0.54);
725
- font-size: 1rem;
726
- line-height: 1.5rem;
727
- font-weight: 400;
728
- letter-spacing: 0.03125em;
729
- margin-top: 20px;
730
- padding: 0 24px 24px;
731
- }
732
-
733
- .Dialog > div.row {
734
- margin-bottom: 15px;
735
- }
736
-
737
- .Dialog > div.row:last-child {
738
- margin-bottom: 0;
739
- }
740
-
741
- .FormUploadProgress {
742
- position: absolute;
743
- left: 0;
744
- right: 0;
745
- top: 0;
746
- bottom: 0;
747
- background-color: rgba(255, 255, 255, 0.6);
748
- z-index: 2;
749
- }
750
-
751
- .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
752
- transition-delay: 500ms;
753
- }
754
-
755
- .FormUploadProgress .wrapper {
756
- position: sticky;
757
- top: 40%;
758
- margin-top: 40%;
759
- margin-left: 50%;
760
- transform: translateX(-50%);
761
- display: flex;
762
- flex-flow: column;
763
- justify-content: center;
764
- align-items: center;
765
- }
766
-
767
- .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
768
- position: absolute;
769
- width: 107px;
770
- height: 107px;
771
- top: 0;
772
- left: 0;
773
- }
774
-
775
- .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
776
- stroke: #2196F3;
777
- }
778
-
779
- .FormUploadProgress .wrapper > .progress {
780
- width: 107px;
781
- height: 107px;
782
- min-height: 107px;
783
- display: flex;
784
- justify-content: center;
785
- align-items: center;
786
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
787
- border-radius: 50%;
788
- background: white;
789
- position: relative;
790
- }
791
-
792
- .FormUploadProgress .wrapper > .progress > .value {
793
- display: inline-block;
794
- margin-top: 5px;
795
- font-weight: bold;
796
- line-height: 16px;
797
- font-size: 13px;
798
- text-align: center;
799
- color: #818181;
800
- }
801
-
802
- .FormUploadProgress .wrapper .cancel {
803
- min-width: 107px;
804
- margin-top: 20px;
805
- background-color: white;
806
- color: #F96B5C;
807
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
808
- }
809
-
810
909
  .Modal {
811
910
  display: block;
812
911
  position: fixed;
@@ -895,105 +994,6 @@
895
994
  transition: transform 0.1s ease-in;
896
995
  }
897
996
 
898
- .Scrollable {
899
- max-height: 250px;
900
- max-width: 250px;
901
- padding-right: 5px;
902
- position: relative;
903
- display: flex;
904
- flex-flow: column;
905
- align-items: stretch;
906
- overflow: hidden;
907
- }
908
-
909
- .Scrollable:hover > .scrollbar.auto {
910
- transition-delay: 0s;
911
- opacity: 1;
912
- }
913
-
914
- .Scrollable .viewport {
915
- overflow-y: scroll;
916
- overflow-x: scroll;
917
- max-height: 100%;
918
- scroll-behavior: smooth;
919
- scrollbar-width: none;
920
- }
921
-
922
- .Scrollable .viewport::-webkit-scrollbar {
923
- display: none;
924
- }
925
-
926
- .Scrollable.without-scroll-horizontal {
927
- max-width: unset;
928
- }
929
-
930
- .Scrollable.undefined-horizontal {
931
- max-width: unset;
932
- }
933
-
934
- .Scrollable.without-scroll {
935
- padding-right: 0;
936
- max-height: unset;
937
- }
938
-
939
- .Scrollable.without-scroll > .viewport {
940
- padding-right: 0;
941
- margin-right: 0;
942
- }
943
-
944
- .Scrollable.without-scroll > .scrollbar {
945
- visibility: hidden;
946
- }
947
-
948
- .Scrollable .scrollbar {
949
- position: absolute;
950
- right: 0px;
951
- top: 0px;
952
- width: 5px;
953
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
954
- transition-delay: 0.5s;
955
- z-index: 1;
956
- }
957
-
958
- .Scrollable .scrollbar.auto, .Scrollable .scrollbar.hidden {
959
- opacity: 0;
960
- }
961
-
962
- .Scrollable .scrollbar .thumb {
963
- background-color: rgba(0, 0, 0, 0.3);
964
- width: 5px;
965
- position: absolute;
966
- right: 0px;
967
- top: 0px;
968
- user-select: none;
969
- will-change: top;
970
- border-radius: 2px;
971
- }
972
-
973
- .Scrollable .scrollbar .thumb:hover {
974
- background-color: rgba(0, 0, 0, 0.5);
975
- }
976
-
977
- .Scrollable .scrollbar .thumb:active {
978
- background-color: rgba(0, 0, 0, 0.7);
979
- }
980
-
981
- .Scrollable .scrollbar.horizontal {
982
- left: 0px;
983
- right: 0px;
984
- height: 5px;
985
- bottom: 0;
986
- width: unset;
987
- top: unset;
988
- }
989
-
990
- .Scrollable .scrollbar.horizontal .thumb {
991
- height: 5px;
992
- left: 0px;
993
- bottom: 0px;
994
- will-change: left;
995
- }
996
-
997
997
  .ImageGallery {
998
998
  position: fixed;
999
999
  top: 0;
@@ -1229,34 +1229,9 @@
1229
1229
  font-size: 24px;
1230
1230
  }
1231
1231
 
1232
- .CalendarMonthView {
1233
- display: flex;
1234
- flex-flow: column nowrap;
1235
- height: 100%;
1236
- }
1237
-
1238
- .CalendarMonthView > .row {
1239
- display: flex;
1240
- flex-flow: row nowrap;
1241
- }
1242
-
1243
- .CalendarMonthView .days {
1244
- flex-grow: 1;
1245
- position: relative;
1246
- }
1247
-
1248
- .CalendarMonthView .day, .CalendarMonthView .header {
1249
- flex-grow: 1;
1250
- flex-basis: 1px;
1251
- }
1252
-
1253
- .CalendarMonthView .day {
1254
- height: 100%;
1255
- }
1256
-
1257
- .CircleProgress {
1258
- width: 48px;
1259
- height: 48px;
1232
+ .CircleProgress {
1233
+ width: 48px;
1234
+ height: 48px;
1260
1235
  }
1261
1236
 
1262
1237
  .CircleProgress .line {
@@ -1267,73 +1242,6 @@
1267
1242
  transition: stroke-dashoffset 0.2s ease;
1268
1243
  }
1269
1244
 
1270
- .Checkbox {
1271
- position: relative;
1272
- white-space: pre;
1273
- }
1274
-
1275
- .Checkbox *, .Checkbox *:before, .Checkbox *:after {
1276
- box-sizing: border-box;
1277
- }
1278
-
1279
- .Checkbox label {
1280
- font-family: Roboto, sans-serif;
1281
- font-size: 14px;
1282
- color: #1e252d;
1283
- cursor: pointer;
1284
- }
1285
-
1286
- .Checkbox label:before, .Checkbox label:after {
1287
- content: "";
1288
- position: absolute;
1289
- left: 0;
1290
- top: 0;
1291
- }
1292
-
1293
- .Checkbox label:before {
1294
- width: 20px;
1295
- height: 20px;
1296
- background: #fff;
1297
- border: 2px solid #252525;
1298
- border-radius: 2px;
1299
- cursor: pointer;
1300
- transition: background 0.3s;
1301
- }
1302
-
1303
- .Checkbox input[type=checkbox] {
1304
- outline: 0;
1305
- margin-right: 10px;
1306
- visibility: hidden;
1307
- }
1308
-
1309
- .Checkbox input[type=checkbox]:checked + label:before {
1310
- background: #4AC263;
1311
- border: none;
1312
- }
1313
-
1314
- .Checkbox input[type=checkbox]:checked + label:after {
1315
- transform: rotate(-45deg);
1316
- top: 6px;
1317
- left: 4px;
1318
- width: 12px;
1319
- height: 6px;
1320
- border: 2px solid #fff;
1321
- border-top-style: none;
1322
- border-right-style: none;
1323
- }
1324
-
1325
- .Checkbox input[type=checkbox]:disabled + label {
1326
- color: gray;
1327
- }
1328
-
1329
- .Checkbox input[type=checkbox]:disabled + label:before {
1330
- border-color: rgba(0, 0, 0, 0.26);
1331
- }
1332
-
1333
- .Checkbox input[type=checkbox]:disabled:checked + label:before {
1334
- background: rgba(0, 0, 0, 0.26);
1335
- }
1336
-
1337
1245
  .DatePicker {
1338
1246
  position: relative;
1339
1247
  }
@@ -1451,36 +1359,71 @@
1451
1359
  background-color: #51adf6;
1452
1360
  }
1453
1361
 
1454
- .DNDContainer {
1362
+ .Checkbox {
1455
1363
  position: relative;
1364
+ white-space: pre;
1456
1365
  }
1457
1366
 
1458
- .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
1459
- cursor: pointer;
1367
+ .Checkbox *, .Checkbox *:before, .Checkbox *:after {
1368
+ box-sizing: border-box;
1460
1369
  }
1461
1370
 
1462
- .DNDContainer .Draggable.placeholder {
1463
- opacity: 0.2;
1371
+ .Checkbox label {
1372
+ font-family: Roboto, sans-serif;
1373
+ font-size: 14px;
1374
+ color: #1e252d;
1375
+ cursor: pointer;
1464
1376
  }
1465
1377
 
1466
- .DNDContainer .Draggable.copy {
1378
+ .Checkbox label:before, .Checkbox label:after {
1379
+ content: "";
1467
1380
  position: absolute;
1468
- box-sizing: border-box;
1469
- will-change: transform;
1470
- opacity: 0;
1381
+ left: 0;
1382
+ top: 0;
1471
1383
  }
1472
1384
 
1473
- .DNDContainer .Draggable.dragged {
1474
- z-index: 10;
1385
+ .Checkbox label:before {
1386
+ width: 20px;
1387
+ height: 20px;
1388
+ background: #fff;
1389
+ border: 2px solid #252525;
1390
+ border-radius: 2px;
1391
+ cursor: pointer;
1392
+ transition: background 0.3s;
1475
1393
  }
1476
1394
 
1477
- .DNDContainer .overlay {
1478
- position: absolute;
1479
- top: 0;
1480
- left: 0;
1481
- right: 0;
1482
- bottom: 0;
1483
- pointer-events: none;
1395
+ .Checkbox input[type=checkbox] {
1396
+ outline: 0;
1397
+ margin-right: 10px;
1398
+ visibility: hidden;
1399
+ }
1400
+
1401
+ .Checkbox input[type=checkbox]:checked + label:before {
1402
+ background: #4AC263;
1403
+ border: none;
1404
+ }
1405
+
1406
+ .Checkbox input[type=checkbox]:checked + label:after {
1407
+ transform: rotate(-45deg);
1408
+ top: 6px;
1409
+ left: 4px;
1410
+ width: 12px;
1411
+ height: 6px;
1412
+ border: 2px solid #fff;
1413
+ border-top-style: none;
1414
+ border-right-style: none;
1415
+ }
1416
+
1417
+ .Checkbox input[type=checkbox]:disabled + label {
1418
+ color: gray;
1419
+ }
1420
+
1421
+ .Checkbox input[type=checkbox]:disabled + label:before {
1422
+ border-color: rgba(0, 0, 0, 0.26);
1423
+ }
1424
+
1425
+ .Checkbox input[type=checkbox]:disabled:checked + label:before {
1426
+ background: rgba(0, 0, 0, 0.26);
1484
1427
  }
1485
1428
 
1486
1429
  .Dropzone {
@@ -1543,280 +1486,125 @@
1543
1486
  z-index: 1;
1544
1487
  }
1545
1488
 
1546
- .Button.FloatingActionButton {
1547
- position: absolute;
1548
- right: 16px;
1549
- bottom: 16px;
1550
- width: 56px;
1551
- height: 56px;
1552
- padding: 16px;
1553
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1554
- }
1555
-
1556
- .Button.FloatingActionButton.raised {
1557
- 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);
1558
- }
1559
-
1560
- .Button.FloatingActionButton.mini {
1561
- width: 40px;
1562
- height: 40px;
1563
- padding: 8px;
1564
- }
1565
-
1566
- .Button.FloatingActionButton.hidden {
1567
- bottom: -100px;
1568
- }
1569
-
1570
- .ModalMenu {
1571
- position: absolute;
1572
- top: 10px;
1573
- right: 50px;
1574
- }
1575
-
1576
- .ModalMenu .material-icons {
1577
- color: #818181;
1578
- }
1579
-
1580
- .ModalMenu .Button.animated {
1581
- position: absolute;
1582
- transition: opacity 150ms ease-in, right 200ms ease-in;
1583
- opacity: 0;
1584
- right: 0;
1585
- top: 0;
1586
- }
1587
-
1588
- .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
1589
- opacity: 1;
1590
- }
1591
-
1592
- .ModalMenu .Button.animated.unmounting {
1593
- transition: opacity 100ms ease-out, right 200ms ease-out;
1594
- }
1595
-
1596
- .ModalMenu .Button.active {
1597
- background: #EBEBEB;
1598
- }
1599
-
1600
- .ModalMenu .separator {
1601
- height: 24px;
1602
- width: 1px;
1603
- background-color: #D9D9D9;
1604
- margin-left: 4px;
1605
- }
1606
-
1607
- .DropFileInput {
1608
- flex-grow: 1;
1489
+ .CalendarMonthView {
1490
+ display: flex;
1491
+ flex-flow: column nowrap;
1492
+ height: 100%;
1609
1493
  }
1610
1494
 
1611
- .DropFileInput .Dropzone {
1612
- border: 1px dashed #808080;
1613
- padding: 12px;
1495
+ .CalendarMonthView > .row {
1614
1496
  display: flex;
1615
1497
  flex-flow: row nowrap;
1616
- justify-content: center;
1617
- align-items: center;
1618
- color: gray;
1619
- cursor: pointer;
1620
- border-radius: 3px;
1621
- font-weight: normal;
1622
- line-height: 22px;
1623
- font-size: 14px;
1624
- color: #7E7E7E;
1625
- max-width: 100%;
1626
- word-break: break-all;
1627
- word-break: break-word;
1628
- }
1629
-
1630
- .DropFileInput .Dropzone .icon.withText {
1631
- margin-right: 10px;
1632
1498
  }
1633
1499
 
1634
- .SpinningProgress {
1635
- width: 48px;
1636
- height: 48px;
1500
+ .CalendarMonthView .days {
1501
+ flex-grow: 1;
1637
1502
  position: relative;
1638
- margin: 0 auto;
1639
1503
  }
1640
1504
 
1641
- .SpinningProgress:before {
1642
- content: "";
1643
- display: block;
1644
- padding-top: 100%;
1505
+ .CalendarMonthView .day, .CalendarMonthView .header {
1506
+ flex-grow: 1;
1507
+ flex-basis: 1px;
1645
1508
  }
1646
1509
 
1647
- .SpinningProgress .circular {
1648
- animation: rotate 2s linear infinite;
1510
+ .CalendarMonthView .day {
1649
1511
  height: 100%;
1650
- transform-origin: center center;
1651
- width: 100%;
1652
- position: absolute;
1653
- top: 0;
1654
- bottom: 0;
1655
- left: 0;
1656
- right: 0;
1657
- margin: auto;
1658
1512
  }
1659
1513
 
1660
- .SpinningProgress .line {
1661
- stroke: black;
1662
- stroke-width: 2px;
1663
- stroke-dasharray: 1, 96;
1664
- stroke-dashoffset: 0;
1665
- animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1514
+ .DNDContainer {
1515
+ position: relative;
1666
1516
  }
1667
1517
 
1668
- @keyframes rotate {
1669
- 100% {
1670
- transform: rotate(360deg);
1671
- }
1672
- }
1673
- @keyframes dash {
1674
- 0% {
1675
- stroke-dasharray: 1, 96;
1676
- stroke-dashoffset: 0;
1677
- }
1678
- 50% {
1679
- stroke-dasharray: 43, 96;
1680
- stroke-dashoffset: -17px;
1681
- }
1682
- 100% {
1683
- stroke-dasharray: 43, 96;
1684
- stroke-dashoffset: -53px;
1685
- }
1686
- }
1687
- .ScrollableTable .Scrollable .scrollbar {
1688
- top: 56px;
1518
+ .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
1519
+ cursor: pointer;
1689
1520
  }
1690
1521
 
1691
- .ScrollableTable .Table {
1692
- position: static;
1522
+ .DNDContainer .Draggable.placeholder {
1523
+ opacity: 0.2;
1693
1524
  }
1694
1525
 
1695
- .Snackbar {
1696
- transform: translateX(-50%);
1697
- overflow: hidden;
1698
- background-color: #323232;
1699
- padding: 14px 24px 14px 24px;
1700
- color: #fff;
1701
- min-width: 288px;
1702
- max-width: 568px;
1703
- position: fixed;
1704
- bottom: -50px;
1705
- left: 50%;
1706
- display: flex;
1707
- flex-wrap: nowrap;
1708
- align-items: center;
1526
+ .DNDContainer .Draggable.copy {
1527
+ position: absolute;
1528
+ box-sizing: border-box;
1529
+ will-change: transform;
1709
1530
  opacity: 0;
1710
- transition: bottom 0.25s ease, opacity 0.2s ease;
1711
- border-radius: 4px;
1712
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1713
- }
1714
-
1715
- .Snackbar.shown {
1716
- bottom: 15px;
1717
- opacity: 1;
1718
- }
1719
-
1720
- .Snackbar .message {
1721
- overflow: hidden;
1722
- line-height: 1.2em;
1723
- min-height: 1.2em;
1724
- max-height: 2.4em;
1725
- flex: 1;
1726
- }
1727
-
1728
- .Snackbar .action {
1729
- text-transform: uppercase;
1730
- font-weight: bold;
1731
- margin-left: 48px;
1732
- color: #bf3727;
1733
- }
1734
-
1735
- .Snackbar .action a {
1736
- text-decoration: none;
1737
- color: #bf3727;
1738
1531
  }
1739
1532
 
1740
- .Switch {
1741
- display: inline-flex;
1742
- padding-top: 5px;
1743
- }
1744
-
1745
- .Switch .switch-input {
1746
- display: none;
1533
+ .DNDContainer .Draggable.dragged {
1534
+ z-index: 10;
1747
1535
  }
1748
1536
 
1749
- .Switch .switch-label {
1750
- position: relative;
1751
- display: inline-flex;
1752
- align-items: center;
1753
- min-width: 38px;
1754
- height: 24px;
1755
- cursor: pointer;
1756
- font-weight: 500;
1757
- text-align: left;
1758
- user-select: none;
1759
- margin: 0;
1760
- padding: 0;
1761
- padding-left: 44px;
1762
- box-sizing: border-box;
1537
+ .DNDContainer .overlay {
1538
+ position: absolute;
1539
+ top: 0;
1540
+ left: 0;
1541
+ right: 0;
1542
+ bottom: 0;
1543
+ pointer-events: none;
1763
1544
  }
1764
1545
 
1765
- .Switch .switch-label:before, .Switch .switch-label:after {
1766
- content: "";
1767
- box-sizing: border-box;
1546
+ .ModalMenu {
1768
1547
  position: absolute;
1769
- margin: 0;
1770
- outline: 0;
1771
- top: 50%;
1772
- transform: translate(0, -50%);
1773
- transition: all 0.3s ease;
1548
+ top: 10px;
1549
+ right: 50px;
1774
1550
  }
1775
1551
 
1776
- .Switch .switch-label:before {
1777
- left: 1px;
1778
- width: 34px;
1779
- height: 14px;
1780
- background-color: #9E9E9E;
1781
- border-radius: 8px;
1552
+ .ModalMenu .material-icons {
1553
+ color: #818181;
1782
1554
  }
1783
1555
 
1784
- .Switch .switch-label:after {
1785
- left: 0;
1786
- width: 20px;
1787
- height: 20px;
1788
- background-color: #FAFAFA;
1789
- border-radius: 50%;
1790
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
1556
+ .ModalMenu .Button.animated {
1557
+ position: absolute;
1558
+ transition: opacity 150ms ease-in, right 200ms ease-in;
1559
+ opacity: 0;
1560
+ right: 0;
1561
+ top: 0;
1791
1562
  }
1792
1563
 
1793
- .Switch .switch-label .toggle--on {
1794
- display: none;
1564
+ .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
1565
+ opacity: 1;
1795
1566
  }
1796
1567
 
1797
- .Switch .switch-label .toggle--off {
1798
- display: inline-block;
1568
+ .ModalMenu .Button.animated.unmounting {
1569
+ transition: opacity 100ms ease-out, right 200ms ease-out;
1799
1570
  }
1800
1571
 
1801
- .Switch .switch-label .label {
1802
- margin-right: 5px;
1572
+ .ModalMenu .Button.active {
1573
+ background: #EBEBEB;
1803
1574
  }
1804
1575
 
1805
- .Switch .switch-input:checked + .switch-label:before {
1806
- background-color: #A5D6A7;
1576
+ .ModalMenu .separator {
1577
+ height: 24px;
1578
+ width: 1px;
1579
+ background-color: #D9D9D9;
1580
+ margin-left: 4px;
1807
1581
  }
1808
1582
 
1809
- .Switch .switch-input:checked + .switch-label:after {
1810
- background-color: #4CAF50;
1811
- transform: translate(80%, -50%);
1583
+ .DropFileInput {
1584
+ flex-grow: 1;
1812
1585
  }
1813
1586
 
1814
- .Switch .switch-input:checked + .switch-label .toggle--on {
1815
- display: inline-block;
1587
+ .DropFileInput .Dropzone {
1588
+ border: 1px dashed #808080;
1589
+ padding: 12px;
1590
+ display: flex;
1591
+ flex-flow: row nowrap;
1592
+ justify-content: center;
1593
+ align-items: center;
1594
+ color: gray;
1595
+ cursor: pointer;
1596
+ border-radius: 3px;
1597
+ font-weight: normal;
1598
+ line-height: 22px;
1599
+ font-size: 14px;
1600
+ color: #7E7E7E;
1601
+ max-width: 100%;
1602
+ word-break: break-all;
1603
+ word-break: break-word;
1816
1604
  }
1817
1605
 
1818
- .Switch .switch-input:checked + .switch-label .toggle--off {
1819
- display: none;
1606
+ .DropFileInput .Dropzone .icon.withText {
1607
+ margin-right: 10px;
1820
1608
  }
1821
1609
 
1822
1610
  .Table {
@@ -1939,4 +1727,216 @@
1939
1727
 
1940
1728
  .Table .editable > .AutocompleteSelect > .selected > .DummyChild {
1941
1729
  margin: 0;
1730
+ }
1731
+
1732
+ .Button.FloatingActionButton {
1733
+ position: absolute;
1734
+ right: 16px;
1735
+ bottom: 16px;
1736
+ width: 56px;
1737
+ height: 56px;
1738
+ padding: 16px;
1739
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1740
+ }
1741
+
1742
+ .Button.FloatingActionButton.raised {
1743
+ 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);
1744
+ }
1745
+
1746
+ .Button.FloatingActionButton.mini {
1747
+ width: 40px;
1748
+ height: 40px;
1749
+ padding: 8px;
1750
+ }
1751
+
1752
+ .Button.FloatingActionButton.hidden {
1753
+ bottom: -100px;
1754
+ }
1755
+
1756
+ .Switch {
1757
+ display: inline-flex;
1758
+ padding-top: 5px;
1759
+ }
1760
+
1761
+ .Switch .switch-input {
1762
+ display: none;
1763
+ }
1764
+
1765
+ .Switch .switch-label {
1766
+ position: relative;
1767
+ display: inline-flex;
1768
+ align-items: center;
1769
+ min-width: 38px;
1770
+ height: 24px;
1771
+ cursor: pointer;
1772
+ font-weight: 500;
1773
+ text-align: left;
1774
+ user-select: none;
1775
+ margin: 0;
1776
+ padding: 0;
1777
+ padding-left: 44px;
1778
+ box-sizing: border-box;
1779
+ }
1780
+
1781
+ .Switch .switch-label:before, .Switch .switch-label:after {
1782
+ content: "";
1783
+ box-sizing: border-box;
1784
+ position: absolute;
1785
+ margin: 0;
1786
+ outline: 0;
1787
+ top: 50%;
1788
+ transform: translate(0, -50%);
1789
+ transition: all 0.3s ease;
1790
+ }
1791
+
1792
+ .Switch .switch-label:before {
1793
+ left: 1px;
1794
+ width: 34px;
1795
+ height: 14px;
1796
+ background-color: #9E9E9E;
1797
+ border-radius: 8px;
1798
+ }
1799
+
1800
+ .Switch .switch-label:after {
1801
+ left: 0;
1802
+ width: 20px;
1803
+ height: 20px;
1804
+ background-color: #FAFAFA;
1805
+ border-radius: 50%;
1806
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
1807
+ }
1808
+
1809
+ .Switch .switch-label .toggle--on {
1810
+ display: none;
1811
+ }
1812
+
1813
+ .Switch .switch-label .toggle--off {
1814
+ display: inline-block;
1815
+ }
1816
+
1817
+ .Switch .switch-label .label {
1818
+ margin-right: 5px;
1819
+ }
1820
+
1821
+ .Switch .switch-input:checked + .switch-label:before {
1822
+ background-color: #A5D6A7;
1823
+ }
1824
+
1825
+ .Switch .switch-input:checked + .switch-label:after {
1826
+ background-color: #4CAF50;
1827
+ transform: translate(80%, -50%);
1828
+ }
1829
+
1830
+ .Switch .switch-input:checked + .switch-label .toggle--on {
1831
+ display: inline-block;
1832
+ }
1833
+
1834
+ .Switch .switch-input:checked + .switch-label .toggle--off {
1835
+ display: none;
1836
+ }
1837
+
1838
+ .SpinningProgress {
1839
+ width: 48px;
1840
+ height: 48px;
1841
+ position: relative;
1842
+ margin: 0 auto;
1843
+ }
1844
+
1845
+ .SpinningProgress:before {
1846
+ content: "";
1847
+ display: block;
1848
+ padding-top: 100%;
1849
+ }
1850
+
1851
+ .SpinningProgress .circular {
1852
+ animation: rotate 2s linear infinite;
1853
+ height: 100%;
1854
+ transform-origin: center center;
1855
+ width: 100%;
1856
+ position: absolute;
1857
+ top: 0;
1858
+ bottom: 0;
1859
+ left: 0;
1860
+ right: 0;
1861
+ margin: auto;
1862
+ }
1863
+
1864
+ .SpinningProgress .line {
1865
+ stroke: black;
1866
+ stroke-width: 2px;
1867
+ stroke-dasharray: 1, 96;
1868
+ stroke-dashoffset: 0;
1869
+ animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1870
+ }
1871
+
1872
+ @keyframes rotate {
1873
+ 100% {
1874
+ transform: rotate(360deg);
1875
+ }
1876
+ }
1877
+ @keyframes dash {
1878
+ 0% {
1879
+ stroke-dasharray: 1, 96;
1880
+ stroke-dashoffset: 0;
1881
+ }
1882
+ 50% {
1883
+ stroke-dasharray: 43, 96;
1884
+ stroke-dashoffset: -17px;
1885
+ }
1886
+ 100% {
1887
+ stroke-dasharray: 43, 96;
1888
+ stroke-dashoffset: -53px;
1889
+ }
1890
+ }
1891
+ .Snackbar {
1892
+ transform: translateX(-50%);
1893
+ overflow: hidden;
1894
+ background-color: #323232;
1895
+ padding: 14px 24px 14px 24px;
1896
+ color: #fff;
1897
+ min-width: 288px;
1898
+ max-width: 568px;
1899
+ position: fixed;
1900
+ bottom: -50px;
1901
+ left: 50%;
1902
+ display: flex;
1903
+ flex-wrap: nowrap;
1904
+ align-items: center;
1905
+ opacity: 0;
1906
+ transition: bottom 0.25s ease, opacity 0.2s ease;
1907
+ border-radius: 4px;
1908
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1909
+ }
1910
+
1911
+ .Snackbar.shown {
1912
+ bottom: 15px;
1913
+ opacity: 1;
1914
+ }
1915
+
1916
+ .Snackbar .message {
1917
+ overflow: hidden;
1918
+ line-height: 1.2em;
1919
+ min-height: 1.2em;
1920
+ max-height: 2.4em;
1921
+ flex: 1;
1922
+ }
1923
+
1924
+ .Snackbar .action {
1925
+ text-transform: uppercase;
1926
+ font-weight: bold;
1927
+ margin-left: 48px;
1928
+ color: #bf3727;
1929
+ }
1930
+
1931
+ .Snackbar .action a {
1932
+ text-decoration: none;
1933
+ color: #bf3727;
1934
+ }
1935
+
1936
+ .ScrollableTable .Scrollable .scrollbar {
1937
+ top: 56px;
1938
+ }
1939
+
1940
+ .ScrollableTable .Table {
1941
+ position: static;
1942
1942
  }