react-ui-basics 0.0.184 → 0.0.186

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 (85) hide show
  1. package/Animated.js +2 -8
  2. package/AutocompleteSelect.js +2 -8
  3. package/Button.js +2 -8
  4. package/CalendarMonthView.js +2 -8
  5. package/Checkbox.js +2 -8
  6. package/CircleProgress.js +2 -8
  7. package/DNDContainer.js +2 -8
  8. package/DNDDraggable.js +2 -7
  9. package/DNDDroppable.js +2 -7
  10. package/DatePicker.js +2 -8
  11. package/DateTools.js +1 -3
  12. package/Dialog.js +2 -8
  13. package/DropFileInput.js +2 -8
  14. package/DroppableHorizontalList.js +2 -7
  15. package/DroppableList.js +2 -8
  16. package/Dropzone.js +2 -8
  17. package/FilteredList.js +2 -8
  18. package/FloatingActionButton.js +2 -8
  19. package/FormUploadProgress.js +2 -8
  20. package/HttpTools.js +2 -4
  21. package/ImageGallery.js +2 -8
  22. package/MaterialIcon.js +2 -7
  23. package/Modal.js +2 -8
  24. package/ModalMenu.js +2 -8
  25. package/ReactCreateElement.js +1 -3
  26. package/ReadyListener.js +2 -7
  27. package/Scrollable.js +2 -8
  28. package/ScrollableTable.js +2 -8
  29. package/Size.js +2 -7
  30. package/Snackbar.js +2 -8
  31. package/SpinningProgress.js +2 -8
  32. package/Switch.js +2 -8
  33. package/Table.js +2 -8
  34. package/TextField.js +2 -8
  35. package/Tools.js +1 -3
  36. package/_virtual/_commonjsHelpers.js +1 -3
  37. package/_virtual/_react.js +1 -3
  38. package/_virtual/react-jsx-runtime.development.js +1 -3
  39. package/bundle.css +458 -458
  40. package/index.js +2 -7
  41. package/package.json +1 -1
  42. package/router/HistoryTools.js +1 -3
  43. package/router/Link.js +2 -7
  44. package/router/NavLink.js +2 -7
  45. package/router/Route.js +2 -7
  46. package/router/index.js +2 -7
  47. package/src/Animated.js +2 -8
  48. package/src/AutocompleteSelect.js +2 -8
  49. package/src/Button.js +2 -8
  50. package/src/Checkbox.js +2 -8
  51. package/src/CircleProgress.js +2 -8
  52. package/src/DNDDraggable.js +2 -7
  53. package/src/DNDDroppable.js +2 -7
  54. package/src/Dialog.js +2 -8
  55. package/src/DropFileInput.js +2 -8
  56. package/src/DroppableHorizontalList.js +2 -7
  57. package/src/DroppableList.js +2 -8
  58. package/src/Dropzone.js +2 -8
  59. package/src/FilteredList.js +2 -8
  60. package/src/FloatingActionButton.js +2 -8
  61. package/src/FormUploadProgress.js +2 -8
  62. package/src/ImageGallery.js +2 -8
  63. package/src/MaterialIcon.js +2 -7
  64. package/src/Modal.js +2 -8
  65. package/src/ModalMenu.js +2 -8
  66. package/src/ReactCreateElement.js +1 -3
  67. package/src/ReadyListener.js +2 -7
  68. package/src/Scrollable.js +2 -8
  69. package/src/Size.js +2 -7
  70. package/src/Snackbar.js +2 -8
  71. package/src/SpinningProgress.js +2 -8
  72. package/src/Switch.js +2 -8
  73. package/src/TextField.js +2 -8
  74. package/src/Tools.test.js +1 -3
  75. package/src/index.js +2 -7
  76. package/src/router/HistoryTools.js +1 -3
  77. package/src/router/Link.js +2 -7
  78. package/src/router/NavLink.js +2 -7
  79. package/src/router/Route.js +2 -7
  80. package/src/router/Route.test.js +2 -7
  81. package/src/router/index.js +2 -7
  82. package/src/store/ProxyTools.js +1 -3
  83. package/src/store/ProxyTools.test.js +1 -3
  84. package/store/ProxyTools.js +2 -7
  85. package/store/Store.js +2 -7
package/bundle.css CHANGED
@@ -293,6 +293,28 @@
293
293
  position: absolute;
294
294
  }
295
295
 
296
+ .animated {
297
+ transition: opacity 250ms ease;
298
+ opacity: 0;
299
+ }
300
+
301
+ .animated.mounting, .animated.mounted {
302
+ opacity: 1;
303
+ }
304
+
305
+ .CircleProgress {
306
+ width: 48px;
307
+ height: 48px;
308
+ }
309
+
310
+ .CircleProgress .line {
311
+ stroke-width: 2px;
312
+ stroke: black;
313
+ stroke-linecap: square;
314
+ fill: none;
315
+ transition: stroke-dashoffset 0.2s ease;
316
+ }
317
+
296
318
  .Button {
297
319
  position: relative;
298
320
  min-width: 64px;
@@ -459,28 +481,6 @@
459
481
  border: 0;
460
482
  }
461
483
 
462
- .animated {
463
- transition: opacity 250ms ease;
464
- opacity: 0;
465
- }
466
-
467
- .animated.mounting, .animated.mounted {
468
- opacity: 1;
469
- }
470
-
471
- .CircleProgress {
472
- width: 48px;
473
- height: 48px;
474
- }
475
-
476
- .CircleProgress .line {
477
- stroke-width: 2px;
478
- stroke: black;
479
- stroke-linecap: square;
480
- fill: none;
481
- transition: stroke-dashoffset 0.2s ease;
482
- }
483
-
484
484
  .Checkbox {
485
485
  position: relative;
486
486
  white-space: pre;
@@ -548,6 +548,201 @@
548
548
  background: rgba(0, 0, 0, 0.26);
549
549
  }
550
550
 
551
+ .DialogModal {
552
+ overflow: hidden;
553
+ }
554
+
555
+ .DialogModal .content {
556
+ top: 20vh;
557
+ }
558
+
559
+ .Dialog {
560
+ background-color: white;
561
+ min-width: 460px;
562
+ max-width: 40vw;
563
+ padding: 15px;
564
+ }
565
+
566
+ .Dialog .title {
567
+ margin-bottom: 15px;
568
+ padding: 20px 50px 0px 30px;
569
+ font-size: 1.25rem;
570
+ line-height: 2rem;
571
+ font-weight: 400;
572
+ letter-spacing: 0.0125em;
573
+ }
574
+
575
+ .Dialog .description {
576
+ color: rgba(0, 0, 0, 0.54);
577
+ font-size: 1rem;
578
+ line-height: 1.5rem;
579
+ font-weight: 400;
580
+ letter-spacing: 0.03125em;
581
+ margin-top: 20px;
582
+ padding: 0 24px 24px;
583
+ }
584
+
585
+ .Dialog > div.row {
586
+ margin-bottom: 15px;
587
+ }
588
+
589
+ .Dialog > div.row:last-child {
590
+ margin-bottom: 0;
591
+ }
592
+
593
+ .Dropzone {
594
+ position: relative;
595
+ }
596
+
597
+ .Dropzone > .overlay {
598
+ position: absolute;
599
+ left: 0;
600
+ right: 0;
601
+ top: 0;
602
+ bottom: 0;
603
+ background-color: #38ADC4;
604
+ z-index: 1;
605
+ opacity: 0;
606
+ transition: all 0.2s ease;
607
+ transition-delay: 100ms;
608
+ visibility: hidden;
609
+ display: flex;
610
+ justify-content: center;
611
+ align-items: center;
612
+ }
613
+
614
+ .Dropzone > .overlay .drop {
615
+ border-radius: 4px;
616
+ border: 1px dashed #FFFFFF;
617
+ position: absolute;
618
+ top: 18px;
619
+ left: 18px;
620
+ right: 18px;
621
+ bottom: 18px;
622
+ display: flex;
623
+ justify-content: center;
624
+ align-items: center;
625
+ font-weight: 500;
626
+ font-size: 18px;
627
+ color: #FFFFFF;
628
+ }
629
+
630
+ .Dropzone.dragging > .overlay {
631
+ opacity: 0.7;
632
+ visibility: visible;
633
+ transition-delay: 0s;
634
+ }
635
+
636
+ .Dropzone.dragging > * {
637
+ pointer-events: none;
638
+ }
639
+
640
+ .Dropzone > input.file {
641
+ position: absolute;
642
+ left: 0;
643
+ right: 0;
644
+ top: 0;
645
+ bottom: 0;
646
+ width: 100%;
647
+ height: 100%;
648
+ opacity: 0;
649
+ cursor: pointer;
650
+ z-index: 1;
651
+ }
652
+
653
+ .FormUploadProgress {
654
+ position: absolute;
655
+ left: 0;
656
+ right: 0;
657
+ top: 0;
658
+ bottom: 0;
659
+ background-color: rgba(255, 255, 255, 0.6);
660
+ z-index: 2;
661
+ }
662
+
663
+ .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
664
+ transition-delay: 500ms;
665
+ }
666
+
667
+ .FormUploadProgress .wrapper {
668
+ position: sticky;
669
+ top: 40%;
670
+ margin-top: 40%;
671
+ margin-left: 50%;
672
+ transform: translateX(-50%);
673
+ display: flex;
674
+ flex-flow: column;
675
+ justify-content: center;
676
+ align-items: center;
677
+ }
678
+
679
+ .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
680
+ position: absolute;
681
+ width: 107px;
682
+ height: 107px;
683
+ top: 0;
684
+ left: 0;
685
+ }
686
+
687
+ .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
688
+ stroke: #2196F3;
689
+ }
690
+
691
+ .FormUploadProgress .wrapper > .progress {
692
+ width: 107px;
693
+ height: 107px;
694
+ min-height: 107px;
695
+ display: flex;
696
+ justify-content: center;
697
+ align-items: center;
698
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
699
+ border-radius: 50%;
700
+ background: white;
701
+ position: relative;
702
+ }
703
+
704
+ .FormUploadProgress .wrapper > .progress > .value {
705
+ display: inline-block;
706
+ margin-top: 5px;
707
+ font-weight: bold;
708
+ line-height: 16px;
709
+ font-size: 13px;
710
+ text-align: center;
711
+ color: #818181;
712
+ }
713
+
714
+ .FormUploadProgress .wrapper .cancel {
715
+ min-width: 107px;
716
+ margin-top: 20px;
717
+ background-color: white;
718
+ color: #F96B5C;
719
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
720
+ }
721
+
722
+ .Button.FloatingActionButton {
723
+ position: absolute;
724
+ right: 16px;
725
+ bottom: 16px;
726
+ width: 56px;
727
+ height: 56px;
728
+ padding: 16px;
729
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
730
+ }
731
+
732
+ .Button.FloatingActionButton.raised {
733
+ 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);
734
+ }
735
+
736
+ .Button.FloatingActionButton.mini {
737
+ width: 40px;
738
+ height: 40px;
739
+ padding: 8px;
740
+ }
741
+
742
+ .Button.FloatingActionButton.hidden {
743
+ bottom: -100px;
744
+ }
745
+
551
746
  .FilteredList {
552
747
  max-height: 250px;
553
748
  position: relative;
@@ -629,32 +824,8 @@
629
824
  margin-bottom: 8px;
630
825
  }
631
826
 
632
- .Button.FloatingActionButton {
633
- position: absolute;
634
- right: 16px;
635
- bottom: 16px;
636
- width: 56px;
637
- height: 56px;
638
- padding: 16px;
639
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
640
- }
641
-
642
- .Button.FloatingActionButton.raised {
643
- 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);
644
- }
645
-
646
- .Button.FloatingActionButton.mini {
647
- width: 40px;
648
- height: 40px;
649
- padding: 8px;
650
- }
651
-
652
- .Button.FloatingActionButton.hidden {
653
- bottom: -100px;
654
- }
655
-
656
- .DropFileInput {
657
- flex-grow: 1;
827
+ .DropFileInput {
828
+ flex-grow: 1;
658
829
  }
659
830
 
660
831
  .DropFileInput .Dropzone {
@@ -680,6 +851,43 @@
680
851
  margin-right: 10px;
681
852
  }
682
853
 
854
+ .ModalMenu {
855
+ position: absolute;
856
+ top: 10px;
857
+ right: 50px;
858
+ }
859
+
860
+ .ModalMenu .material-icons {
861
+ color: #818181;
862
+ }
863
+
864
+ .ModalMenu .Button.animated {
865
+ position: absolute;
866
+ transition: opacity 150ms ease-in, right 200ms ease-in;
867
+ opacity: 0;
868
+ right: 0;
869
+ top: 0;
870
+ }
871
+
872
+ .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
873
+ opacity: 1;
874
+ }
875
+
876
+ .ModalMenu .Button.animated.unmounting {
877
+ transition: opacity 100ms ease-out, right 200ms ease-out;
878
+ }
879
+
880
+ .ModalMenu .Button.active {
881
+ background: #EBEBEB;
882
+ }
883
+
884
+ .ModalMenu .separator {
885
+ height: 24px;
886
+ width: 1px;
887
+ background-color: #D9D9D9;
888
+ margin-left: 4px;
889
+ }
890
+
683
891
  .ImageGallery {
684
892
  position: fixed;
685
893
  top: 0;
@@ -915,135 +1123,6 @@
915
1123
  font-size: 24px;
916
1124
  }
917
1125
 
918
- .FormUploadProgress {
919
- position: absolute;
920
- left: 0;
921
- right: 0;
922
- top: 0;
923
- bottom: 0;
924
- background-color: rgba(255, 255, 255, 0.6);
925
- z-index: 2;
926
- }
927
-
928
- .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
929
- transition-delay: 500ms;
930
- }
931
-
932
- .FormUploadProgress .wrapper {
933
- position: sticky;
934
- top: 40%;
935
- margin-top: 40%;
936
- margin-left: 50%;
937
- transform: translateX(-50%);
938
- display: flex;
939
- flex-flow: column;
940
- justify-content: center;
941
- align-items: center;
942
- }
943
-
944
- .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
945
- position: absolute;
946
- width: 107px;
947
- height: 107px;
948
- top: 0;
949
- left: 0;
950
- }
951
-
952
- .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
953
- stroke: #2196F3;
954
- }
955
-
956
- .FormUploadProgress .wrapper > .progress {
957
- width: 107px;
958
- height: 107px;
959
- min-height: 107px;
960
- display: flex;
961
- justify-content: center;
962
- align-items: center;
963
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
964
- border-radius: 50%;
965
- background: white;
966
- position: relative;
967
- }
968
-
969
- .FormUploadProgress .wrapper > .progress > .value {
970
- display: inline-block;
971
- margin-top: 5px;
972
- font-weight: bold;
973
- line-height: 16px;
974
- font-size: 13px;
975
- text-align: center;
976
- color: #818181;
977
- }
978
-
979
- .FormUploadProgress .wrapper .cancel {
980
- min-width: 107px;
981
- margin-top: 20px;
982
- background-color: white;
983
- color: #F96B5C;
984
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
985
- }
986
-
987
- .Dropzone {
988
- position: relative;
989
- }
990
-
991
- .Dropzone > .overlay {
992
- position: absolute;
993
- left: 0;
994
- right: 0;
995
- top: 0;
996
- bottom: 0;
997
- background-color: #38ADC4;
998
- z-index: 1;
999
- opacity: 0;
1000
- transition: all 0.2s ease;
1001
- transition-delay: 100ms;
1002
- visibility: hidden;
1003
- display: flex;
1004
- justify-content: center;
1005
- align-items: center;
1006
- }
1007
-
1008
- .Dropzone > .overlay .drop {
1009
- border-radius: 4px;
1010
- border: 1px dashed #FFFFFF;
1011
- position: absolute;
1012
- top: 18px;
1013
- left: 18px;
1014
- right: 18px;
1015
- bottom: 18px;
1016
- display: flex;
1017
- justify-content: center;
1018
- align-items: center;
1019
- font-weight: 500;
1020
- font-size: 18px;
1021
- color: #FFFFFF;
1022
- }
1023
-
1024
- .Dropzone.dragging > .overlay {
1025
- opacity: 0.7;
1026
- visibility: visible;
1027
- transition-delay: 0s;
1028
- }
1029
-
1030
- .Dropzone.dragging > * {
1031
- pointer-events: none;
1032
- }
1033
-
1034
- .Dropzone > input.file {
1035
- position: absolute;
1036
- left: 0;
1037
- right: 0;
1038
- top: 0;
1039
- bottom: 0;
1040
- width: 100%;
1041
- height: 100%;
1042
- opacity: 0;
1043
- cursor: pointer;
1044
- z-index: 1;
1045
- }
1046
-
1047
1126
  .Modal {
1048
1127
  display: block;
1049
1128
  position: fixed;
@@ -1114,41 +1193,131 @@
1114
1193
  position: absolute;
1115
1194
  }
1116
1195
 
1117
- .ModalMenu {
1118
- position: absolute;
1119
- top: 10px;
1120
- right: 50px;
1196
+ .Snackbar {
1197
+ transform: translateX(-50%);
1198
+ overflow: hidden;
1199
+ background-color: #323232;
1200
+ padding: 14px 24px 14px 24px;
1201
+ color: #fff;
1202
+ min-width: 288px;
1203
+ max-width: 568px;
1204
+ position: fixed;
1205
+ bottom: -50px;
1206
+ left: 50%;
1207
+ display: flex;
1208
+ flex-wrap: nowrap;
1209
+ align-items: center;
1210
+ opacity: 0;
1211
+ transition: bottom 0.25s ease, opacity 0.2s ease;
1212
+ border-radius: 4px;
1213
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1121
1214
  }
1122
1215
 
1123
- .ModalMenu .material-icons {
1124
- color: #818181;
1216
+ .Snackbar.shown {
1217
+ bottom: 15px;
1218
+ opacity: 1;
1125
1219
  }
1126
1220
 
1127
- .ModalMenu .Button.animated {
1128
- position: absolute;
1129
- transition: opacity 150ms ease-in, right 200ms ease-in;
1130
- opacity: 0;
1131
- right: 0;
1132
- top: 0;
1221
+ .Snackbar .message {
1222
+ overflow: hidden;
1223
+ line-height: 1.2em;
1224
+ min-height: 1.2em;
1225
+ max-height: 2.4em;
1226
+ flex: 1;
1133
1227
  }
1134
1228
 
1135
- .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
1136
- opacity: 1;
1229
+ .Snackbar .action {
1230
+ text-transform: uppercase;
1231
+ font-weight: bold;
1232
+ margin-left: 48px;
1233
+ color: #bf3727;
1137
1234
  }
1138
1235
 
1139
- .ModalMenu .Button.animated.unmounting {
1140
- transition: opacity 100ms ease-out, right 200ms ease-out;
1236
+ .Snackbar .action a {
1237
+ text-decoration: none;
1238
+ color: #bf3727;
1141
1239
  }
1142
1240
 
1143
- .ModalMenu .Button.active {
1144
- background: #EBEBEB;
1241
+ .Switch {
1242
+ display: inline-flex;
1243
+ padding-top: 5px;
1145
1244
  }
1146
1245
 
1147
- .ModalMenu .separator {
1246
+ .Switch .switch-input {
1247
+ display: none;
1248
+ }
1249
+
1250
+ .Switch .switch-label {
1251
+ position: relative;
1252
+ display: inline-flex;
1253
+ align-items: center;
1254
+ min-width: 38px;
1148
1255
  height: 24px;
1149
- width: 1px;
1150
- background-color: #D9D9D9;
1151
- margin-left: 4px;
1256
+ cursor: pointer;
1257
+ font-weight: 500;
1258
+ text-align: left;
1259
+ user-select: none;
1260
+ margin: 0;
1261
+ padding: 0;
1262
+ padding-left: 44px;
1263
+ box-sizing: border-box;
1264
+ }
1265
+
1266
+ .Switch .switch-label:before, .Switch .switch-label:after {
1267
+ content: "";
1268
+ box-sizing: border-box;
1269
+ position: absolute;
1270
+ margin: 0;
1271
+ outline: 0;
1272
+ top: 50%;
1273
+ transform: translate(0, -50%);
1274
+ transition: all 0.3s ease;
1275
+ }
1276
+
1277
+ .Switch .switch-label:before {
1278
+ left: 1px;
1279
+ width: 34px;
1280
+ height: 14px;
1281
+ background-color: #9E9E9E;
1282
+ border-radius: 8px;
1283
+ }
1284
+
1285
+ .Switch .switch-label:after {
1286
+ left: 0;
1287
+ width: 20px;
1288
+ height: 20px;
1289
+ background-color: #FAFAFA;
1290
+ border-radius: 50%;
1291
+ 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);
1292
+ }
1293
+
1294
+ .Switch .switch-label .toggle--on {
1295
+ display: none;
1296
+ }
1297
+
1298
+ .Switch .switch-label .toggle--off {
1299
+ display: inline-block;
1300
+ }
1301
+
1302
+ .Switch .switch-label .label {
1303
+ margin-right: 5px;
1304
+ }
1305
+
1306
+ .Switch .switch-input:checked + .switch-label:before {
1307
+ background-color: #A5D6A7;
1308
+ }
1309
+
1310
+ .Switch .switch-input:checked + .switch-label:after {
1311
+ background-color: #4CAF50;
1312
+ transform: translate(80%, -50%);
1313
+ }
1314
+
1315
+ .Switch .switch-input:checked + .switch-label .toggle--on {
1316
+ display: inline-block;
1317
+ }
1318
+
1319
+ .Switch .switch-input:checked + .switch-label .toggle--off {
1320
+ display: none;
1152
1321
  }
1153
1322
 
1154
1323
  .Scrollable {
@@ -1218,158 +1387,105 @@
1218
1387
  right: 0px;
1219
1388
  top: 0px;
1220
1389
  user-select: none;
1221
- will-change: top;
1222
- border-radius: 2px;
1223
- }
1224
-
1225
- .Scrollable .scrollbar .thumb:hover {
1226
- background-color: rgba(0, 0, 0, 0.5);
1227
- }
1228
-
1229
- .Scrollable .scrollbar .thumb:active {
1230
- background-color: rgba(0, 0, 0, 0.7);
1231
- }
1232
-
1233
- .Scrollable .scrollbar.horizontal {
1234
- left: 0px;
1235
- right: 0px;
1236
- height: 5px;
1237
- bottom: 0;
1238
- width: unset;
1239
- top: unset;
1240
- }
1241
-
1242
- .Scrollable .scrollbar.horizontal .thumb {
1243
- height: 5px;
1244
- left: 0px;
1245
- bottom: 0px;
1246
- will-change: left;
1247
- }
1248
-
1249
- .DialogModal {
1250
- overflow: hidden;
1251
- }
1252
-
1253
- .DialogModal .content {
1254
- top: 20vh;
1255
- }
1256
-
1257
- .Dialog {
1258
- background-color: white;
1259
- min-width: 460px;
1260
- max-width: 40vw;
1261
- padding: 15px;
1262
- }
1263
-
1264
- .Dialog .title {
1265
- margin-bottom: 15px;
1266
- padding: 20px 50px 0px 30px;
1267
- font-size: 1.25rem;
1268
- line-height: 2rem;
1269
- font-weight: 400;
1270
- letter-spacing: 0.0125em;
1271
- }
1272
-
1273
- .Dialog .description {
1274
- color: rgba(0, 0, 0, 0.54);
1275
- font-size: 1rem;
1276
- line-height: 1.5rem;
1277
- font-weight: 400;
1278
- letter-spacing: 0.03125em;
1279
- margin-top: 20px;
1280
- padding: 0 24px 24px;
1281
- }
1282
-
1283
- .Dialog > div.row {
1284
- margin-bottom: 15px;
1285
- }
1286
-
1287
- .Dialog > div.row:last-child {
1288
- margin-bottom: 0;
1289
- }
1290
-
1291
- .Switch {
1292
- display: inline-flex;
1293
- padding-top: 5px;
1294
- }
1295
-
1296
- .Switch .switch-input {
1297
- display: none;
1298
- }
1299
-
1300
- .Switch .switch-label {
1301
- position: relative;
1302
- display: inline-flex;
1303
- align-items: center;
1304
- min-width: 38px;
1305
- height: 24px;
1306
- cursor: pointer;
1307
- font-weight: 500;
1308
- text-align: left;
1309
- user-select: none;
1310
- margin: 0;
1311
- padding: 0;
1312
- padding-left: 44px;
1313
- box-sizing: border-box;
1390
+ will-change: top;
1391
+ border-radius: 2px;
1314
1392
  }
1315
1393
 
1316
- .Switch .switch-label:before, .Switch .switch-label:after {
1317
- content: "";
1318
- box-sizing: border-box;
1319
- position: absolute;
1320
- margin: 0;
1321
- outline: 0;
1322
- top: 50%;
1323
- transform: translate(0, -50%);
1324
- transition: all 0.3s ease;
1394
+ .Scrollable .scrollbar .thumb:hover {
1395
+ background-color: rgba(0, 0, 0, 0.5);
1325
1396
  }
1326
1397
 
1327
- .Switch .switch-label:before {
1328
- left: 1px;
1329
- width: 34px;
1330
- height: 14px;
1331
- background-color: #9E9E9E;
1332
- border-radius: 8px;
1398
+ .Scrollable .scrollbar .thumb:active {
1399
+ background-color: rgba(0, 0, 0, 0.7);
1333
1400
  }
1334
1401
 
1335
- .Switch .switch-label:after {
1336
- left: 0;
1337
- width: 20px;
1338
- height: 20px;
1339
- background-color: #FAFAFA;
1340
- border-radius: 50%;
1341
- 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);
1402
+ .Scrollable .scrollbar.horizontal {
1403
+ left: 0px;
1404
+ right: 0px;
1405
+ height: 5px;
1406
+ bottom: 0;
1407
+ width: unset;
1408
+ top: unset;
1342
1409
  }
1343
1410
 
1344
- .Switch .switch-label .toggle--on {
1345
- display: none;
1411
+ .Scrollable .scrollbar.horizontal .thumb {
1412
+ height: 5px;
1413
+ left: 0px;
1414
+ bottom: 0px;
1415
+ will-change: left;
1346
1416
  }
1347
1417
 
1348
- .Switch .switch-label .toggle--off {
1349
- display: inline-block;
1418
+ .DNDContainer .DroppableList .Draggable {
1419
+ transform: unset;
1420
+ transition: unset;
1421
+ opacity: 1;
1350
1422
  }
1351
1423
 
1352
- .Switch .switch-label .label {
1353
- margin-right: 5px;
1424
+ .DNDContainer .DroppableList .Draggable.dragged {
1425
+ transition: unset !important;
1354
1426
  }
1355
1427
 
1356
- .Switch .switch-input:checked + .switch-label:before {
1357
- background-color: #A5D6A7;
1428
+ .DNDContainer .DroppableList.hover .Draggable {
1429
+ transition: transform 0.2s ease-in;
1358
1430
  }
1359
1431
 
1360
- .Switch .switch-input:checked + .switch-label:after {
1361
- background-color: #4CAF50;
1362
- transform: translate(80%, -50%);
1432
+ .DNDContainer .DroppableList.resetting .Draggable {
1433
+ transition: transform 0.1s ease-in;
1363
1434
  }
1364
1435
 
1365
- .Switch .switch-input:checked + .switch-label .toggle--on {
1366
- display: inline-block;
1436
+ .SpinningProgress {
1437
+ width: 48px;
1438
+ height: 48px;
1439
+ position: relative;
1440
+ margin: 0 auto;
1367
1441
  }
1368
1442
 
1369
- .Switch .switch-input:checked + .switch-label .toggle--off {
1370
- display: none;
1443
+ .SpinningProgress:before {
1444
+ content: "";
1445
+ display: block;
1446
+ padding-top: 100%;
1447
+ }
1448
+
1449
+ .SpinningProgress .circular {
1450
+ animation: rotate 2s linear infinite;
1451
+ height: 100%;
1452
+ transform-origin: center center;
1453
+ width: 100%;
1454
+ position: absolute;
1455
+ top: 0;
1456
+ bottom: 0;
1457
+ left: 0;
1458
+ right: 0;
1459
+ margin: auto;
1460
+ }
1461
+
1462
+ .SpinningProgress .line {
1463
+ stroke: black;
1464
+ stroke-width: 2px;
1465
+ stroke-dasharray: 1, 96;
1466
+ stroke-dashoffset: 0;
1467
+ animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1371
1468
  }
1372
1469
 
1470
+ @keyframes rotate {
1471
+ 100% {
1472
+ transform: rotate(360deg);
1473
+ }
1474
+ }
1475
+ @keyframes dash {
1476
+ 0% {
1477
+ stroke-dasharray: 1, 96;
1478
+ stroke-dashoffset: 0;
1479
+ }
1480
+ 50% {
1481
+ stroke-dasharray: 43, 96;
1482
+ stroke-dashoffset: -17px;
1483
+ }
1484
+ 100% {
1485
+ stroke-dasharray: 43, 96;
1486
+ stroke-dashoffset: -53px;
1487
+ }
1488
+ }
1373
1489
  .TextField {
1374
1490
  position: relative;
1375
1491
  width: 100%;
@@ -1513,120 +1629,29 @@
1513
1629
  animation-name: shake;
1514
1630
  }
1515
1631
 
1516
- .SpinningProgress {
1517
- width: 48px;
1518
- height: 48px;
1519
- position: relative;
1520
- margin: 0 auto;
1521
- }
1522
-
1523
- .SpinningProgress:before {
1524
- content: "";
1525
- display: block;
1526
- padding-top: 100%;
1527
- }
1528
-
1529
- .SpinningProgress .circular {
1530
- animation: rotate 2s linear infinite;
1632
+ .CalendarMonthView {
1633
+ display: flex;
1634
+ flex-flow: column nowrap;
1531
1635
  height: 100%;
1532
- transform-origin: center center;
1533
- width: 100%;
1534
- position: absolute;
1535
- top: 0;
1536
- bottom: 0;
1537
- left: 0;
1538
- right: 0;
1539
- margin: auto;
1540
- }
1541
-
1542
- .SpinningProgress .line {
1543
- stroke: black;
1544
- stroke-width: 2px;
1545
- stroke-dasharray: 1, 96;
1546
- stroke-dashoffset: 0;
1547
- animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
1548
1636
  }
1549
1637
 
1550
- @keyframes rotate {
1551
- 100% {
1552
- transform: rotate(360deg);
1553
- }
1554
- }
1555
- @keyframes dash {
1556
- 0% {
1557
- stroke-dasharray: 1, 96;
1558
- stroke-dashoffset: 0;
1559
- }
1560
- 50% {
1561
- stroke-dasharray: 43, 96;
1562
- stroke-dashoffset: -17px;
1563
- }
1564
- 100% {
1565
- stroke-dasharray: 43, 96;
1566
- stroke-dashoffset: -53px;
1567
- }
1568
- }
1569
- .Snackbar {
1570
- transform: translateX(-50%);
1571
- overflow: hidden;
1572
- background-color: #323232;
1573
- padding: 14px 24px 14px 24px;
1574
- color: #fff;
1575
- min-width: 288px;
1576
- max-width: 568px;
1577
- position: fixed;
1578
- bottom: -50px;
1579
- left: 50%;
1638
+ .CalendarMonthView > .row {
1580
1639
  display: flex;
1581
- flex-wrap: nowrap;
1582
- align-items: center;
1583
- opacity: 0;
1584
- transition: bottom 0.25s ease, opacity 0.2s ease;
1585
- border-radius: 4px;
1586
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1587
- }
1588
-
1589
- .Snackbar.shown {
1590
- bottom: 15px;
1591
- opacity: 1;
1592
- }
1593
-
1594
- .Snackbar .message {
1595
- overflow: hidden;
1596
- line-height: 1.2em;
1597
- min-height: 1.2em;
1598
- max-height: 2.4em;
1599
- flex: 1;
1600
- }
1601
-
1602
- .Snackbar .action {
1603
- text-transform: uppercase;
1604
- font-weight: bold;
1605
- margin-left: 48px;
1606
- color: #bf3727;
1607
- }
1608
-
1609
- .Snackbar .action a {
1610
- text-decoration: none;
1611
- color: #bf3727;
1612
- }
1613
-
1614
- .DNDContainer .DroppableList .Draggable {
1615
- transform: unset;
1616
- transition: unset;
1617
- opacity: 1;
1640
+ flex-flow: row nowrap;
1618
1641
  }
1619
1642
 
1620
- .DNDContainer .DroppableList .Draggable.dragged {
1621
- transition: unset !important;
1643
+ .CalendarMonthView .days {
1644
+ flex-grow: 1;
1645
+ position: relative;
1622
1646
  }
1623
1647
 
1624
- .DNDContainer .DroppableList.hover .Draggable {
1625
- transition: transform 0.2s ease-in;
1648
+ .CalendarMonthView .day, .CalendarMonthView .header {
1649
+ flex-grow: 1;
1650
+ flex-basis: 1px;
1626
1651
  }
1627
1652
 
1628
- .DNDContainer .DroppableList.resetting .Draggable {
1629
- transition: transform 0.1s ease-in;
1653
+ .CalendarMonthView .day {
1654
+ height: 100%;
1630
1655
  }
1631
1656
 
1632
1657
  .DNDContainer {
@@ -1775,31 +1800,6 @@
1775
1800
  background-color: #51adf6;
1776
1801
  }
1777
1802
 
1778
- .CalendarMonthView {
1779
- display: flex;
1780
- flex-flow: column nowrap;
1781
- height: 100%;
1782
- }
1783
-
1784
- .CalendarMonthView > .row {
1785
- display: flex;
1786
- flex-flow: row nowrap;
1787
- }
1788
-
1789
- .CalendarMonthView .days {
1790
- flex-grow: 1;
1791
- position: relative;
1792
- }
1793
-
1794
- .CalendarMonthView .day, .CalendarMonthView .header {
1795
- flex-grow: 1;
1796
- flex-basis: 1px;
1797
- }
1798
-
1799
- .CalendarMonthView .day {
1800
- height: 100%;
1801
- }
1802
-
1803
1803
  .Table {
1804
1804
  font-family: Roboto, sans-serif;
1805
1805
  font-size: 14px;