react-ui-basics 0.0.239 → 0.0.240

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
@@ -302,6 +302,24 @@
302
302
  position: absolute;
303
303
  }
304
304
 
305
+ .DNDContainer .DroppableList .Draggable {
306
+ transform: unset;
307
+ transition: unset;
308
+ opacity: 1;
309
+ }
310
+
311
+ .DNDContainer .DroppableList .Draggable.dragged {
312
+ transition: unset !important;
313
+ }
314
+
315
+ .DNDContainer .DroppableList.hover .Draggable {
316
+ transition: transform 0.2s ease-in;
317
+ }
318
+
319
+ .DNDContainer .DroppableList.resetting .Draggable {
320
+ transition: transform 0.1s ease-in;
321
+ }
322
+
305
323
  .ImageGallery {
306
324
  position: fixed;
307
325
  top: 0;
@@ -537,24 +555,6 @@
537
555
  font-size: 24px;
538
556
  }
539
557
 
540
- .DNDContainer .DroppableList .Draggable {
541
- transform: unset;
542
- transition: unset;
543
- opacity: 1;
544
- }
545
-
546
- .DNDContainer .DroppableList .Draggable.dragged {
547
- transition: unset !important;
548
- }
549
-
550
- .DNDContainer .DroppableList.hover .Draggable {
551
- transition: transform 0.2s ease-in;
552
- }
553
-
554
- .DNDContainer .DroppableList.resetting .Draggable {
555
- transition: transform 0.1s ease-in;
556
- }
557
-
558
558
  .DatePicker {
559
559
  position: relative;
560
560
  }
@@ -672,6 +672,19 @@
672
672
  background-color: #51adf6;
673
673
  }
674
674
 
675
+ .CircleProgress {
676
+ width: 48px;
677
+ height: 48px;
678
+ }
679
+
680
+ .CircleProgress .line {
681
+ stroke-width: 2px;
682
+ stroke: black;
683
+ stroke-linecap: square;
684
+ fill: none;
685
+ transition: stroke-dashoffset 0.2s ease;
686
+ }
687
+
675
688
  .Checkbox {
676
689
  position: relative;
677
690
  white-space: pre;
@@ -739,6 +752,75 @@
739
752
  background: rgba(0, 0, 0, 0.26);
740
753
  }
741
754
 
755
+ .DropFileInput {
756
+ flex-grow: 1;
757
+ }
758
+
759
+ .DropFileInput .Dropzone {
760
+ border: 1px dashed #808080;
761
+ padding: 12px;
762
+ display: flex;
763
+ flex-flow: row nowrap;
764
+ justify-content: center;
765
+ align-items: center;
766
+ color: gray;
767
+ cursor: pointer;
768
+ border-radius: 3px;
769
+ font-weight: normal;
770
+ line-height: 22px;
771
+ font-size: 14px;
772
+ color: #7E7E7E;
773
+ max-width: 100%;
774
+ word-break: break-all;
775
+ word-break: break-word;
776
+ }
777
+
778
+ .DropFileInput .Dropzone .icon.withText {
779
+ margin-right: 10px;
780
+ }
781
+
782
+ .DialogModal {
783
+ overflow: hidden;
784
+ }
785
+
786
+ .DialogModal .content {
787
+ top: 20vh;
788
+ }
789
+
790
+ .Dialog {
791
+ background-color: white;
792
+ min-width: 460px;
793
+ max-width: 40vw;
794
+ padding: 15px;
795
+ }
796
+
797
+ .Dialog .title {
798
+ margin-bottom: 15px;
799
+ padding: 20px 50px 0px 30px;
800
+ font-size: 1.25rem;
801
+ line-height: 2rem;
802
+ font-weight: 400;
803
+ letter-spacing: 0.0125em;
804
+ }
805
+
806
+ .Dialog .description {
807
+ color: rgba(0, 0, 0, 0.54);
808
+ font-size: 1rem;
809
+ line-height: 1.5rem;
810
+ font-weight: 400;
811
+ letter-spacing: 0.03125em;
812
+ margin-top: 20px;
813
+ padding: 0 24px 24px;
814
+ }
815
+
816
+ .Dialog > div.row {
817
+ margin-bottom: 15px;
818
+ }
819
+
820
+ .Dialog > div.row:last-child {
821
+ margin-bottom: 0;
822
+ }
823
+
742
824
  .Button {
743
825
  position: relative;
744
826
  min-width: 64px;
@@ -905,87 +987,29 @@
905
987
  border: 0;
906
988
  }
907
989
 
908
- .DNDContainer {
909
- position: relative;
910
- }
911
-
912
- .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
913
- cursor: pointer;
914
- }
915
-
916
- .DNDContainer .Draggable.placeholder {
917
- opacity: 0.2;
918
- }
919
-
920
- .DNDContainer .Draggable.copy {
921
- position: absolute;
922
- box-sizing: border-box;
923
- will-change: transform;
924
- opacity: 0;
925
- }
926
-
927
- .DNDContainer .Draggable.dragged {
928
- z-index: 10;
929
- }
930
-
931
- .DNDContainer .overlay {
932
- position: absolute;
933
- top: 0;
934
- left: 0;
935
- right: 0;
936
- bottom: 0;
937
- pointer-events: none;
938
- }
939
-
940
- .DropFileInput {
941
- flex-grow: 1;
990
+ .CalendarMonthView {
991
+ display: flex;
992
+ flex-flow: column nowrap;
993
+ height: 100%;
942
994
  }
943
995
 
944
- .DropFileInput .Dropzone {
945
- border: 1px dashed #808080;
946
- padding: 12px;
996
+ .CalendarMonthView > .row {
947
997
  display: flex;
948
998
  flex-flow: row nowrap;
949
- justify-content: center;
950
- align-items: center;
951
- color: gray;
952
- cursor: pointer;
953
- border-radius: 3px;
954
- font-weight: normal;
955
- line-height: 22px;
956
- font-size: 14px;
957
- color: #7E7E7E;
958
- max-width: 100%;
959
- word-break: break-all;
960
- word-break: break-word;
961
- }
962
-
963
- .DropFileInput .Dropzone .icon.withText {
964
- margin-right: 10px;
965
999
  }
966
1000
 
967
- .Button.FloatingActionButton {
968
- position: absolute;
969
- right: 16px;
970
- bottom: 16px;
971
- width: 56px;
972
- height: 56px;
973
- padding: 16px;
974
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
975
- }
976
-
977
- .Button.FloatingActionButton.raised {
978
- 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);
1001
+ .CalendarMonthView .days {
1002
+ flex-grow: 1;
1003
+ position: relative;
979
1004
  }
980
1005
 
981
- .Button.FloatingActionButton.mini {
982
- width: 40px;
983
- height: 40px;
984
- padding: 8px;
1006
+ .CalendarMonthView .day, .CalendarMonthView .header {
1007
+ flex-grow: 1;
1008
+ flex-basis: 1px;
985
1009
  }
986
1010
 
987
- .Button.FloatingActionButton.hidden {
988
- bottom: -100px;
1011
+ .CalendarMonthView .day {
1012
+ height: 100%;
989
1013
  }
990
1014
 
991
1015
  .Dropzone {
@@ -1048,48 +1072,6 @@
1048
1072
  z-index: 1;
1049
1073
  }
1050
1074
 
1051
- .DialogModal {
1052
- overflow: hidden;
1053
- }
1054
-
1055
- .DialogModal .content {
1056
- top: 20vh;
1057
- }
1058
-
1059
- .Dialog {
1060
- background-color: white;
1061
- min-width: 460px;
1062
- max-width: 40vw;
1063
- padding: 15px;
1064
- }
1065
-
1066
- .Dialog .title {
1067
- margin-bottom: 15px;
1068
- padding: 20px 50px 0px 30px;
1069
- font-size: 1.25rem;
1070
- line-height: 2rem;
1071
- font-weight: 400;
1072
- letter-spacing: 0.0125em;
1073
- }
1074
-
1075
- .Dialog .description {
1076
- color: rgba(0, 0, 0, 0.54);
1077
- font-size: 1rem;
1078
- line-height: 1.5rem;
1079
- font-weight: 400;
1080
- letter-spacing: 0.03125em;
1081
- margin-top: 20px;
1082
- padding: 0 24px 24px;
1083
- }
1084
-
1085
- .Dialog > div.row {
1086
- margin-bottom: 15px;
1087
- }
1088
-
1089
- .Dialog > div.row:last-child {
1090
- margin-bottom: 0;
1091
- }
1092
-
1093
1075
  .Modal {
1094
1076
  display: block;
1095
1077
  position: fixed;
@@ -1160,115 +1142,60 @@
1160
1142
  position: absolute;
1161
1143
  }
1162
1144
 
1163
- .Scrollable {
1164
- max-height: 250px;
1165
- max-width: 250px;
1166
- padding-right: 5px;
1145
+ .DNDContainer {
1167
1146
  position: relative;
1168
- display: flex;
1169
- flex-flow: column;
1170
- align-items: stretch;
1171
- overflow: hidden;
1172
1147
  }
1173
1148
 
1174
- .Scrollable:hover > .scrollbar.auto {
1175
- transition-delay: 0s;
1176
- opacity: 1;
1177
- }
1178
-
1179
- .Scrollable .viewport {
1180
- overflow-y: scroll;
1181
- overflow-x: scroll;
1182
- max-height: 100%;
1183
- scrollbar-width: none;
1184
- }
1185
-
1186
- .Scrollable .viewport::-webkit-scrollbar {
1187
- display: none;
1188
- }
1189
-
1190
- .Scrollable.without-scroll-horizontal {
1191
- max-width: unset;
1192
- }
1193
-
1194
- .Scrollable.undefined-horizontal {
1195
- max-width: unset;
1196
- }
1197
-
1198
- .Scrollable.without-scroll {
1199
- padding-right: 0;
1200
- max-height: unset;
1201
- }
1202
-
1203
- .Scrollable.without-scroll > .viewport {
1204
- padding-right: 0;
1205
- margin-right: 0;
1149
+ .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
1150
+ cursor: pointer;
1206
1151
  }
1207
1152
 
1208
- .Scrollable.without-scroll > .scrollbar {
1209
- visibility: hidden;
1153
+ .DNDContainer .Draggable.placeholder {
1154
+ opacity: 0.2;
1210
1155
  }
1211
1156
 
1212
- .Scrollable .scrollbar {
1157
+ .DNDContainer .Draggable.copy {
1213
1158
  position: absolute;
1214
- right: 0px;
1215
- top: 0px;
1216
- width: 5px;
1217
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1218
- transition-delay: 0.5s;
1219
- z-index: 1;
1220
- }
1221
-
1222
- .Scrollable .scrollbar.auto, .Scrollable .scrollbar.hidden {
1159
+ box-sizing: border-box;
1160
+ will-change: transform;
1223
1161
  opacity: 0;
1224
1162
  }
1225
1163
 
1226
- .Scrollable .scrollbar .thumb {
1227
- background-color: rgba(0, 0, 0, 0.3);
1228
- width: 5px;
1229
- position: absolute;
1230
- right: 0px;
1231
- top: 0px;
1232
- user-select: none;
1233
- will-change: top;
1234
- border-radius: 2px;
1235
- }
1236
-
1237
- .Scrollable .scrollbar .thumb:hover {
1238
- background-color: rgba(0, 0, 0, 0.5);
1164
+ .DNDContainer .Draggable.dragged {
1165
+ z-index: 10;
1239
1166
  }
1240
1167
 
1241
- .Scrollable .scrollbar .thumb:active {
1242
- background-color: rgba(0, 0, 0, 0.7);
1168
+ .DNDContainer .overlay {
1169
+ position: absolute;
1170
+ top: 0;
1171
+ left: 0;
1172
+ right: 0;
1173
+ bottom: 0;
1174
+ pointer-events: none;
1243
1175
  }
1244
1176
 
1245
- .Scrollable .scrollbar.horizontal {
1246
- left: 0px;
1247
- right: 0px;
1248
- height: 5px;
1249
- bottom: 0;
1250
- width: unset;
1251
- top: unset;
1177
+ .Button.FloatingActionButton {
1178
+ position: absolute;
1179
+ right: 16px;
1180
+ bottom: 16px;
1181
+ width: 56px;
1182
+ height: 56px;
1183
+ padding: 16px;
1184
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1252
1185
  }
1253
1186
 
1254
- .Scrollable .scrollbar.horizontal .thumb {
1255
- height: 5px;
1256
- left: 0px;
1257
- bottom: 0px;
1258
- will-change: left;
1187
+ .Button.FloatingActionButton.raised {
1188
+ 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);
1259
1189
  }
1260
1190
 
1261
- .CircleProgress {
1262
- width: 48px;
1263
- height: 48px;
1191
+ .Button.FloatingActionButton.mini {
1192
+ width: 40px;
1193
+ height: 40px;
1194
+ padding: 8px;
1264
1195
  }
1265
1196
 
1266
- .CircleProgress .line {
1267
- stroke-width: 2px;
1268
- stroke: black;
1269
- stroke-linecap: square;
1270
- fill: none;
1271
- transition: stroke-dashoffset 0.2s ease;
1197
+ .Button.FloatingActionButton.hidden {
1198
+ bottom: -100px;
1272
1199
  }
1273
1200
 
1274
1201
  .FilteredList {
@@ -1355,6 +1282,149 @@
1355
1282
  margin-bottom: 8px;
1356
1283
  }
1357
1284
 
1285
+ .Snackbar {
1286
+ transform: translateX(-50%);
1287
+ overflow: hidden;
1288
+ background-color: #323232;
1289
+ padding: 14px 24px 14px 24px;
1290
+ color: #fff;
1291
+ min-width: 288px;
1292
+ max-width: 568px;
1293
+ position: fixed;
1294
+ bottom: -50px;
1295
+ left: 50%;
1296
+ display: flex;
1297
+ flex-wrap: nowrap;
1298
+ align-items: center;
1299
+ opacity: 0;
1300
+ transition: bottom 0.25s ease, opacity 0.2s ease;
1301
+ border-radius: 4px;
1302
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1303
+ }
1304
+
1305
+ .Snackbar.shown {
1306
+ bottom: 15px;
1307
+ opacity: 1;
1308
+ }
1309
+
1310
+ .Snackbar .message {
1311
+ overflow: hidden;
1312
+ line-height: 1.2em;
1313
+ min-height: 1.2em;
1314
+ max-height: 2.4em;
1315
+ flex: 1;
1316
+ }
1317
+
1318
+ .Snackbar .action {
1319
+ text-transform: uppercase;
1320
+ font-weight: bold;
1321
+ margin-left: 48px;
1322
+ color: #bf3727;
1323
+ }
1324
+
1325
+ .Snackbar .action a {
1326
+ text-decoration: none;
1327
+ color: #bf3727;
1328
+ }
1329
+
1330
+ .Scrollable {
1331
+ max-height: 250px;
1332
+ max-width: 250px;
1333
+ padding-right: 5px;
1334
+ position: relative;
1335
+ display: flex;
1336
+ flex-flow: column;
1337
+ align-items: stretch;
1338
+ overflow: hidden;
1339
+ }
1340
+
1341
+ .Scrollable:hover > .scrollbar.auto {
1342
+ transition-delay: 0s;
1343
+ opacity: 1;
1344
+ }
1345
+
1346
+ .Scrollable .viewport {
1347
+ overflow-y: scroll;
1348
+ overflow-x: scroll;
1349
+ max-height: 100%;
1350
+ scrollbar-width: none;
1351
+ }
1352
+
1353
+ .Scrollable .viewport::-webkit-scrollbar {
1354
+ display: none;
1355
+ }
1356
+
1357
+ .Scrollable.without-scroll-horizontal {
1358
+ max-width: unset;
1359
+ }
1360
+
1361
+ .Scrollable.undefined-horizontal {
1362
+ max-width: unset;
1363
+ }
1364
+
1365
+ .Scrollable.without-scroll {
1366
+ padding-right: 0;
1367
+ max-height: unset;
1368
+ }
1369
+
1370
+ .Scrollable.without-scroll > .viewport {
1371
+ padding-right: 0;
1372
+ margin-right: 0;
1373
+ }
1374
+
1375
+ .Scrollable.without-scroll > .scrollbar {
1376
+ visibility: hidden;
1377
+ }
1378
+
1379
+ .Scrollable .scrollbar {
1380
+ position: absolute;
1381
+ right: 0px;
1382
+ top: 0px;
1383
+ width: 5px;
1384
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1385
+ transition-delay: 0.5s;
1386
+ z-index: 1;
1387
+ }
1388
+
1389
+ .Scrollable .scrollbar.auto, .Scrollable .scrollbar.hidden {
1390
+ opacity: 0;
1391
+ }
1392
+
1393
+ .Scrollable .scrollbar .thumb {
1394
+ background-color: rgba(0, 0, 0, 0.3);
1395
+ width: 5px;
1396
+ position: absolute;
1397
+ right: 0px;
1398
+ top: 0px;
1399
+ user-select: none;
1400
+ will-change: top;
1401
+ border-radius: 2px;
1402
+ }
1403
+
1404
+ .Scrollable .scrollbar .thumb:hover {
1405
+ background-color: rgba(0, 0, 0, 0.5);
1406
+ }
1407
+
1408
+ .Scrollable .scrollbar .thumb:active {
1409
+ background-color: rgba(0, 0, 0, 0.7);
1410
+ }
1411
+
1412
+ .Scrollable .scrollbar.horizontal {
1413
+ left: 0px;
1414
+ right: 0px;
1415
+ height: 5px;
1416
+ bottom: 0;
1417
+ width: unset;
1418
+ top: unset;
1419
+ }
1420
+
1421
+ .Scrollable .scrollbar.horizontal .thumb {
1422
+ height: 5px;
1423
+ left: 0px;
1424
+ bottom: 0px;
1425
+ will-change: left;
1426
+ }
1427
+
1358
1428
  .FormUploadProgress {
1359
1429
  position: absolute;
1360
1430
  left: 0;
@@ -1424,6 +1494,88 @@
1424
1494
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1425
1495
  }
1426
1496
 
1497
+ .Switch {
1498
+ display: inline-flex;
1499
+ padding-top: 5px;
1500
+ }
1501
+
1502
+ .Switch .switch-input {
1503
+ display: none;
1504
+ }
1505
+
1506
+ .Switch .switch-label {
1507
+ position: relative;
1508
+ display: inline-flex;
1509
+ align-items: center;
1510
+ min-width: 38px;
1511
+ height: 24px;
1512
+ cursor: pointer;
1513
+ font-weight: 500;
1514
+ text-align: left;
1515
+ user-select: none;
1516
+ margin: 0;
1517
+ padding: 0;
1518
+ padding-left: 44px;
1519
+ box-sizing: border-box;
1520
+ }
1521
+
1522
+ .Switch .switch-label:before, .Switch .switch-label:after {
1523
+ content: "";
1524
+ box-sizing: border-box;
1525
+ position: absolute;
1526
+ margin: 0;
1527
+ outline: 0;
1528
+ top: 50%;
1529
+ transform: translate(0, -50%);
1530
+ transition: all 0.3s ease;
1531
+ }
1532
+
1533
+ .Switch .switch-label:before {
1534
+ left: 1px;
1535
+ width: 34px;
1536
+ height: 14px;
1537
+ background-color: #9E9E9E;
1538
+ border-radius: 8px;
1539
+ }
1540
+
1541
+ .Switch .switch-label:after {
1542
+ left: 0;
1543
+ width: 20px;
1544
+ height: 20px;
1545
+ background-color: #FAFAFA;
1546
+ border-radius: 50%;
1547
+ 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);
1548
+ }
1549
+
1550
+ .Switch .switch-label .toggle--on {
1551
+ display: none;
1552
+ }
1553
+
1554
+ .Switch .switch-label .toggle--off {
1555
+ display: inline-block;
1556
+ }
1557
+
1558
+ .Switch .switch-label .label {
1559
+ margin-right: 5px;
1560
+ }
1561
+
1562
+ .Switch .switch-input:checked + .switch-label:before {
1563
+ background-color: #A5D6A7;
1564
+ }
1565
+
1566
+ .Switch .switch-input:checked + .switch-label:after {
1567
+ background-color: #4CAF50;
1568
+ transform: translate(80%, -50%);
1569
+ }
1570
+
1571
+ .Switch .switch-input:checked + .switch-label .toggle--on {
1572
+ display: inline-block;
1573
+ }
1574
+
1575
+ .Switch .switch-input:checked + .switch-label .toggle--off {
1576
+ display: none;
1577
+ }
1578
+
1427
1579
  .ModalMenu {
1428
1580
  position: absolute;
1429
1581
  top: 10px;
@@ -1461,111 +1613,126 @@
1461
1613
  margin-left: 4px;
1462
1614
  }
1463
1615
 
1464
- .Switch {
1465
- display: inline-flex;
1466
- padding-top: 5px;
1616
+ .Table {
1617
+ font-family: Roboto, sans-serif;
1618
+ font-size: 14px;
1619
+ color: #1e252d;
1620
+ border-spacing: 0;
1621
+ border-collapse: collapse;
1622
+ width: 100%;
1623
+ position: relative;
1467
1624
  }
1468
1625
 
1469
- .Switch .switch-input {
1470
- display: none;
1626
+ .Table td, .Table th {
1627
+ padding: 5px;
1628
+ font-weight: 500;
1629
+ color: #2e2e2e;
1471
1630
  }
1472
1631
 
1473
- .Switch .switch-label {
1474
- position: relative;
1475
- display: inline-flex;
1476
- align-items: center;
1477
- min-width: 38px;
1478
- height: 24px;
1479
- cursor: pointer;
1480
- font-weight: 500;
1481
- text-align: left;
1482
- user-select: none;
1483
- margin: 0;
1484
- padding: 0;
1485
- padding-left: 44px;
1486
- box-sizing: border-box;
1632
+ .Table td {
1633
+ height: 48px;
1634
+ border-bottom: 1px solid #ebebeb;
1635
+ border-top: 1px solid #ebebeb;
1487
1636
  }
1488
1637
 
1489
- .Switch .switch-label:before, .Switch .switch-label:after {
1490
- content: "";
1491
- box-sizing: border-box;
1492
- position: absolute;
1493
- margin: 0;
1494
- outline: 0;
1495
- top: 50%;
1496
- transform: translate(0, -50%);
1497
- transition: all 0.3s ease;
1638
+ .Table td:first-child {
1639
+ padding-left: 45px;
1498
1640
  }
1499
1641
 
1500
- .Switch .switch-label:before {
1501
- left: 1px;
1502
- width: 34px;
1503
- height: 14px;
1504
- background-color: #9E9E9E;
1505
- border-radius: 8px;
1642
+ .Table td:last-child {
1643
+ padding-right: 45px;
1644
+ }
1645
+
1646
+ .Table th {
1647
+ color: #808080;
1648
+ height: 55px;
1649
+ padding: 0px;
1650
+ }
1651
+
1652
+ .Table th .sortable {
1653
+ cursor: pointer;
1654
+ }
1655
+
1656
+ .Table th .sortable.active {
1657
+ font-weight: bold;
1506
1658
  }
1507
1659
 
1508
- .Switch .switch-label:after {
1509
- left: 0;
1510
- width: 20px;
1511
- height: 20px;
1512
- background-color: #FAFAFA;
1513
- border-radius: 50%;
1514
- 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);
1660
+ .Table th .sortable.active .material-icons {
1661
+ font-size: 16px;
1515
1662
  }
1516
1663
 
1517
- .Switch .switch-label .toggle--on {
1518
- display: none;
1664
+ .Table th .sortable.false {
1665
+ padding-right: 22px;
1519
1666
  }
1520
1667
 
1521
- .Switch .switch-label .toggle--off {
1522
- display: inline-block;
1668
+ .Table th:first-child .hidden, .Table th:first-child .fixed {
1669
+ padding-left: 45px;
1523
1670
  }
1524
1671
 
1525
- .Switch .switch-label .label {
1526
- margin-right: 5px;
1672
+ .Table th:last-child .hidden, .Table th:last-child .fixed {
1673
+ padding-right: 45px;
1527
1674
  }
1528
1675
 
1529
- .Switch .switch-input:checked + .switch-label:before {
1530
- background-color: #A5D6A7;
1676
+ .Table th .hidden {
1677
+ color: transparent;
1678
+ height: 0px;
1679
+ padding: 5px;
1531
1680
  }
1532
1681
 
1533
- .Switch .switch-input:checked + .switch-label:after {
1534
- background-color: #4CAF50;
1535
- transform: translate(80%, -50%);
1682
+ .Table th .fixed {
1683
+ font-weight: normal;
1684
+ display: flex;
1685
+ flex-flow: row;
1686
+ justify-items: center;
1687
+ align-items: center;
1688
+ text-align: left;
1689
+ height: 56px;
1690
+ padding: 0px 5px;
1691
+ background-color: white;
1692
+ position: absolute;
1693
+ top: 0px;
1694
+ z-index: 1;
1695
+ box-sizing: border-box;
1696
+ border-bottom: 1px solid #ebebeb;
1697
+ border-top: 1px solid #ebebeb;
1536
1698
  }
1537
1699
 
1538
- .Switch .switch-input:checked + .switch-label .toggle--on {
1539
- display: inline-block;
1700
+ .Table tbody tr:hover {
1701
+ background-color: #f2f2f2;
1540
1702
  }
1541
1703
 
1542
- .Switch .switch-input:checked + .switch-label .toggle--off {
1543
- display: none;
1704
+ .Table tbody tr.disabled td {
1705
+ color: #93a4b7;
1544
1706
  }
1545
1707
 
1546
- .CalendarMonthView {
1547
- display: flex;
1548
- flex-flow: column nowrap;
1549
- height: 100%;
1708
+ .Table .ro {
1709
+ color: #47576a;
1550
1710
  }
1551
1711
 
1552
- .CalendarMonthView > .row {
1553
- display: flex;
1554
- flex-flow: row nowrap;
1712
+ .Table .editable {
1713
+ cursor: pointer;
1555
1714
  }
1556
1715
 
1557
- .CalendarMonthView .days {
1558
- flex-grow: 1;
1716
+ .Table .editable > .TextField {
1717
+ height: 20px !important;
1718
+ margin: 0px;
1559
1719
  position: relative;
1720
+ display: block;
1560
1721
  }
1561
1722
 
1562
- .CalendarMonthView .day, .CalendarMonthView .header {
1563
- flex-grow: 1;
1564
- flex-basis: 1px;
1723
+ .Table .editable > .TextField input {
1724
+ width: 100%;
1725
+ height: 20px;
1726
+ padding: 0px;
1727
+ background-color: rgb(240, 240, 240);
1565
1728
  }
1566
1729
 
1567
- .CalendarMonthView .day {
1568
- height: 100%;
1730
+ .Table .editable > .AutocompleteSelect {
1731
+ min-width: unset;
1732
+ }
1733
+
1734
+ .Table .editable > .AutocompleteSelect > .selected > .DummyChild {
1735
+ margin: 0;
1569
1736
  }
1570
1737
 
1571
1738
  .SpinningProgress {
@@ -1764,173 +1931,6 @@
1764
1931
  animation-name: shake;
1765
1932
  }
1766
1933
 
1767
- .Table {
1768
- font-family: Roboto, sans-serif;
1769
- font-size: 14px;
1770
- color: #1e252d;
1771
- border-spacing: 0;
1772
- border-collapse: collapse;
1773
- width: 100%;
1774
- position: relative;
1775
- }
1776
-
1777
- .Table td, .Table th {
1778
- padding: 5px;
1779
- font-weight: 500;
1780
- color: #2e2e2e;
1781
- }
1782
-
1783
- .Table td {
1784
- height: 48px;
1785
- border-bottom: 1px solid #ebebeb;
1786
- border-top: 1px solid #ebebeb;
1787
- }
1788
-
1789
- .Table td:first-child {
1790
- padding-left: 45px;
1791
- }
1792
-
1793
- .Table td:last-child {
1794
- padding-right: 45px;
1795
- }
1796
-
1797
- .Table th {
1798
- color: #808080;
1799
- height: 55px;
1800
- padding: 0px;
1801
- }
1802
-
1803
- .Table th .sortable {
1804
- cursor: pointer;
1805
- }
1806
-
1807
- .Table th .sortable.active {
1808
- font-weight: bold;
1809
- }
1810
-
1811
- .Table th .sortable.active .material-icons {
1812
- font-size: 16px;
1813
- }
1814
-
1815
- .Table th .sortable.false {
1816
- padding-right: 22px;
1817
- }
1818
-
1819
- .Table th:first-child .hidden, .Table th:first-child .fixed {
1820
- padding-left: 45px;
1821
- }
1822
-
1823
- .Table th:last-child .hidden, .Table th:last-child .fixed {
1824
- padding-right: 45px;
1825
- }
1826
-
1827
- .Table th .hidden {
1828
- color: transparent;
1829
- height: 0px;
1830
- padding: 5px;
1831
- }
1832
-
1833
- .Table th .fixed {
1834
- font-weight: normal;
1835
- display: flex;
1836
- flex-flow: row;
1837
- justify-items: center;
1838
- align-items: center;
1839
- text-align: left;
1840
- height: 56px;
1841
- padding: 0px 5px;
1842
- background-color: white;
1843
- position: absolute;
1844
- top: 0px;
1845
- z-index: 1;
1846
- box-sizing: border-box;
1847
- border-bottom: 1px solid #ebebeb;
1848
- border-top: 1px solid #ebebeb;
1849
- }
1850
-
1851
- .Table tbody tr:hover {
1852
- background-color: #f2f2f2;
1853
- }
1854
-
1855
- .Table tbody tr.disabled td {
1856
- color: #93a4b7;
1857
- }
1858
-
1859
- .Table .ro {
1860
- color: #47576a;
1861
- }
1862
-
1863
- .Table .editable {
1864
- cursor: pointer;
1865
- }
1866
-
1867
- .Table .editable > .TextField {
1868
- height: 20px !important;
1869
- margin: 0px;
1870
- position: relative;
1871
- display: block;
1872
- }
1873
-
1874
- .Table .editable > .TextField input {
1875
- width: 100%;
1876
- height: 20px;
1877
- padding: 0px;
1878
- background-color: rgb(240, 240, 240);
1879
- }
1880
-
1881
- .Table .editable > .AutocompleteSelect {
1882
- min-width: unset;
1883
- }
1884
-
1885
- .Table .editable > .AutocompleteSelect > .selected > .DummyChild {
1886
- margin: 0;
1887
- }
1888
-
1889
- .Snackbar {
1890
- transform: translateX(-50%);
1891
- overflow: hidden;
1892
- background-color: #323232;
1893
- padding: 14px 24px 14px 24px;
1894
- color: #fff;
1895
- min-width: 288px;
1896
- max-width: 568px;
1897
- position: fixed;
1898
- bottom: -50px;
1899
- left: 50%;
1900
- display: flex;
1901
- flex-wrap: nowrap;
1902
- align-items: center;
1903
- opacity: 0;
1904
- transition: bottom 0.25s ease, opacity 0.2s ease;
1905
- border-radius: 4px;
1906
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1907
- }
1908
-
1909
- .Snackbar.shown {
1910
- bottom: 15px;
1911
- opacity: 1;
1912
- }
1913
-
1914
- .Snackbar .message {
1915
- overflow: hidden;
1916
- line-height: 1.2em;
1917
- min-height: 1.2em;
1918
- max-height: 2.4em;
1919
- flex: 1;
1920
- }
1921
-
1922
- .Snackbar .action {
1923
- text-transform: uppercase;
1924
- font-weight: bold;
1925
- margin-left: 48px;
1926
- color: #bf3727;
1927
- }
1928
-
1929
- .Snackbar .action a {
1930
- text-decoration: none;
1931
- color: #bf3727;
1932
- }
1933
-
1934
1934
  .ScrollableTable .Scrollable .scrollbar {
1935
1935
  top: 56px;
1936
1936
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-ui-basics",
3
- "version": "0.0.239",
3
+ "version": "0.0.240",
4
4
  "description": "",
5
5
  "module": "index.js",
6
6
  "_main": "index.cjs.js",
@@ -1,7 +1,7 @@
1
1
  declare const history: History;
2
- declare type HistoryAction = 'pushState' | 'replaceState';
3
- declare type HistoryActionArgs = Parameters<typeof history[HistoryAction]>;
4
- declare type HistoryMiddleware = (action: HistoryAction, args: HistoryActionArgs) => HistoryActionArgs;
2
+ export declare type HistoryAction = 'pushState' | 'replaceState';
3
+ export declare type HistoryActionArgs = Parameters<typeof history[HistoryAction]>;
4
+ export declare type HistoryMiddleware = (action: HistoryAction, args: HistoryActionArgs) => HistoryActionArgs;
5
5
  export declare const pushLocation: (path: string) => void;
6
6
  export declare const replaceLocation: (path: string) => void;
7
7
  export declare const addMiddleware: (middleware: HistoryMiddleware) => void;
@@ -2,9 +2,9 @@ import {WINDOW} from "../Tools";
2
2
 
3
3
  const history = WINDOW.history;
4
4
 
5
- type HistoryAction = 'pushState' | 'replaceState';
6
- type HistoryActionArgs = Parameters<typeof history[HistoryAction]>;
7
- type HistoryMiddleware = (action: HistoryAction, args: HistoryActionArgs) => HistoryActionArgs;
5
+ export type HistoryAction = 'pushState' | 'replaceState';
6
+ export type HistoryActionArgs = Parameters<typeof history[HistoryAction]>;
7
+ export type HistoryMiddleware = (action: HistoryAction, args: HistoryActionArgs) => HistoryActionArgs;
8
8
 
9
9
  const middlewares: HistoryMiddleware[] = []
10
10