@regcheq/ui-vue-2 1.4.1 → 1.5.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.css +1010 -303
  2. package/dist/index.esm.js +3459 -953
  3. package/dist/index.js +3506 -991
  4. package/package.json +6 -7
package/dist/index.css CHANGED
@@ -548,11 +548,18 @@
548
548
  flex-shrink: 0;
549
549
  animation: rq-spin 1s linear infinite;
550
550
  }
551
+ .rq-button--mini {
552
+ height: 24px;
553
+ padding: 2px 8px;
554
+ gap: 4px;
555
+ font-size: 12px;
556
+ line-height: 16px;
557
+ }
551
558
  .rq-button--sm {
552
- height: 36px;
553
- padding: 8px 12px;
559
+ height: 30px;
560
+ padding: 4px 12px;
554
561
  gap: 4px;
555
- font-size: 14px;
562
+ font-size: 12px;
556
563
  line-height: 20px;
557
564
  }
558
565
  .rq-button--md {
@@ -573,6 +580,26 @@
573
580
  font-size: 16px;
574
581
  line-height: 24px;
575
582
  }
583
+ .rq-button--square {
584
+ padding: 0;
585
+ gap: 0;
586
+ flex-shrink: 0;
587
+ }
588
+ .rq-button--square.rq-button--mini {
589
+ width: 24px;
590
+ }
591
+ .rq-button--square.rq-button--sm {
592
+ width: 30px;
593
+ }
594
+ .rq-button--square.rq-button--md {
595
+ width: 36px;
596
+ }
597
+ .rq-button--square.rq-button--lg {
598
+ width: 40px;
599
+ }
600
+ .rq-button--square.rq-button--xl {
601
+ width: 48px;
602
+ }
576
603
  .rq-button--radius-md {
577
604
  border-radius: 8px;
578
605
  }
@@ -642,15 +669,15 @@
642
669
  }
643
670
  .rq-button--ghost {
644
671
  background: transparent;
645
- color: #8c8aa9;
672
+ color: #52525b;
646
673
  }
647
674
  .rq-button--ghost:hover:not(:disabled):not(.rq-button--disabled) {
648
675
  background: #e6e6ec;
649
- color: #52525b;
676
+ color: #18181b;
650
677
  }
651
678
  .rq-button--ghost:active:not(:disabled):not(.rq-button--disabled) {
652
679
  background: #e6e6ec;
653
- color: #52525b;
680
+ color: #18181b;
654
681
  }
655
682
  .rq-button--ghost:focus-visible {
656
683
  color: #18181b;
@@ -679,6 +706,21 @@
679
706
  color: #a1a1aa;
680
707
  opacity: 0.5;
681
708
  }
709
+ .rq-button--custom-bg, .rq-button--custom-bg:hover:not(:disabled):not(.rq-button--disabled), .rq-button--custom-bg:active:not(:disabled):not(.rq-button--disabled), .rq-button--custom-bg:focus-visible {
710
+ background: var(--rq-button-bg);
711
+ }
712
+ .rq-button--custom-bg:hover:not(:disabled):not(.rq-button--disabled) {
713
+ filter: brightness(0.92);
714
+ }
715
+ .rq-button--custom-bg:active:not(:disabled):not(.rq-button--disabled) {
716
+ filter: brightness(0.85);
717
+ }
718
+ .rq-button--custom-text, .rq-button--custom-text:hover:not(:disabled):not(.rq-button--disabled), .rq-button--custom-text:active:not(:disabled):not(.rq-button--disabled), .rq-button--custom-text:focus-visible {
719
+ color: var(--rq-button-text);
720
+ }
721
+ .rq-button--custom-border, .rq-button--custom-border:hover:not(:disabled):not(.rq-button--disabled), .rq-button--custom-border:active:not(:disabled):not(.rq-button--disabled), .rq-button--custom-border:focus-visible {
722
+ border-color: var(--rq-button-border);
723
+ }
682
724
  .rq-checkbox {
683
725
  position: relative;
684
726
  display: inline-flex;
@@ -686,6 +728,7 @@
686
728
  justify-content: center;
687
729
  flex-shrink: 0;
688
730
  vertical-align: middle;
731
+ margin-bottom: 4px;
689
732
  width: 16px;
690
733
  height: 16px;
691
734
  border-radius: 4px;
@@ -708,7 +751,8 @@
708
751
  border: 0;
709
752
  }
710
753
  .rq-checkbox:focus-within {
711
- box-shadow: 0 0 0 1px #0064e0;
754
+ border-color: #0064e0;
755
+ border-width: 2px;
712
756
  }
713
757
  .rq-checkbox__icon {
714
758
  display: flex;
@@ -729,10 +773,9 @@
729
773
  .rq-checkbox--error .rq-checkbox__icon {
730
774
  color: #a5180d;
731
775
  }
732
- .rq-checkbox--error:focus-visible {
733
- border-width: 1px;
776
+ .rq-checkbox--error:focus-within {
777
+ border-width: 2px;
734
778
  border-color: #a5180d;
735
- box-shadow: 0 0 0 1px #ff2414;
736
779
  }
737
780
  .rq-checkbox--disabled {
738
781
  border-color: #d4d4d8;
@@ -839,8 +882,8 @@
839
882
  align-items: center;
840
883
  justify-content: center;
841
884
  gap: 4px;
842
- height: 32px;
843
- padding: 4px 12px;
885
+ height: 20px;
886
+ padding: 0 12px;
844
887
  font-family: "Inter", sans-serif;
845
888
  font-weight: 400;
846
889
  font-size: 12px;
@@ -903,18 +946,70 @@
903
946
  border-color: #ff2414;
904
947
  border-width: 2px;
905
948
  }
949
+ .rq-icon {
950
+ display: inline-block;
951
+ line-height: 1;
952
+ white-space: nowrap;
953
+ direction: ltr;
954
+ font-weight: normal;
955
+ font-style: normal;
956
+ letter-spacing: normal;
957
+ text-transform: none;
958
+ word-wrap: normal;
959
+ -webkit-font-feature-settings: "liga";
960
+ -webkit-font-smoothing: antialiased;
961
+ user-select: none;
962
+ }
963
+ .rq-icon--outlined {
964
+ font-family: "Material Symbols Outlined";
965
+ }
966
+ .rq-icon--rounded {
967
+ font-family: "Material Symbols Rounded";
968
+ }
969
+ .rq-icon--sharp {
970
+ font-family: "Material Symbols Sharp";
971
+ }
972
+ .rq-icon--2xs {
973
+ font-size: 12px;
974
+ }
975
+ .rq-icon--xs {
976
+ font-size: 16px;
977
+ }
978
+ .rq-icon--sm {
979
+ font-size: 20px;
980
+ }
981
+ .rq-icon--md {
982
+ font-size: 24px;
983
+ }
984
+ .rq-icon--lg {
985
+ font-size: 32px;
986
+ }
987
+ .rq-icon--xl {
988
+ font-size: 48px;
989
+ }
990
+ .rq-skeleton {
991
+ display: block;
992
+ border-radius: 4px;
993
+ background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 37%, #f4f4f5 63%);
994
+ background-size: 400% 100%;
995
+ animation: rq-skeleton-shimmer 1500ms ease-in-out infinite;
996
+ }
997
+
998
+ @keyframes rq-skeleton-shimmer {
999
+ 0% {
1000
+ background-position: 100% 50%;
1001
+ }
1002
+ 100% {
1003
+ background-position: 0% 50%;
1004
+ }
1005
+ }
906
1006
  .rq-tooltip-wrapper {
907
1007
  position: relative;
908
1008
  display: inline-block;
909
1009
  }
910
- .rq-tooltip-wrapper:hover .rq-tooltip, .rq-tooltip-wrapper:focus-within .rq-tooltip {
911
- opacity: 1;
912
- pointer-events: auto;
913
- }
914
1010
 
915
1011
  .rq-tooltip {
916
- position: absolute;
917
- z-index: 50;
1012
+ z-index: 1051;
918
1013
  width: max-content;
919
1014
  min-width: 100px;
920
1015
  max-width: 300px;
@@ -932,6 +1027,10 @@
932
1027
  pointer-events: none;
933
1028
  transition: opacity 100ms ease-out;
934
1029
  }
1030
+ .rq-tooltip--visible {
1031
+ opacity: 1;
1032
+ pointer-events: auto;
1033
+ }
935
1034
  .rq-tooltip--text-left {
936
1035
  text-align: left;
937
1036
  }
@@ -948,8 +1047,6 @@
948
1047
  height: 0;
949
1048
  }
950
1049
  .rq-tooltip--top {
951
- bottom: calc(100% + 8px);
952
- left: 50%;
953
1050
  transform: translateX(-50%);
954
1051
  }
955
1052
  .rq-tooltip--top::after {
@@ -961,8 +1058,6 @@
961
1058
  border-top: 5px solid #000000;
962
1059
  }
963
1060
  .rq-tooltip--bottom {
964
- top: calc(100% + 8px);
965
- left: 50%;
966
1061
  transform: translateX(-50%);
967
1062
  }
968
1063
  .rq-tooltip--bottom::after {
@@ -974,8 +1069,6 @@
974
1069
  border-bottom: 5px solid #000000;
975
1070
  }
976
1071
  .rq-tooltip--left {
977
- right: calc(100% + 8px);
978
- top: 50%;
979
1072
  transform: translateY(-50%);
980
1073
  }
981
1074
  .rq-tooltip--left::after {
@@ -987,8 +1080,6 @@
987
1080
  border-left: 5px solid #000000;
988
1081
  }
989
1082
  .rq-tooltip--right {
990
- left: calc(100% + 8px);
991
- top: 50%;
992
1083
  transform: translateY(-50%);
993
1084
  }
994
1085
  .rq-tooltip--right::after {
@@ -1229,11 +1320,76 @@
1229
1320
  color: #52525b;
1230
1321
  }
1231
1322
  .rq-tabs {
1323
+ position: relative;
1232
1324
  display: inline-flex;
1233
1325
  align-items: center;
1234
1326
  width: fit-content;
1327
+ max-width: 100%;
1235
1328
  background: rgba(0, 0, 0, 0.05);
1236
1329
  }
1330
+ .rq-tabs__viewport {
1331
+ display: flex;
1332
+ align-items: center;
1333
+ overflow-x: auto;
1334
+ overflow-y: hidden;
1335
+ padding: 3px;
1336
+ margin: -3px;
1337
+ min-width: 0;
1338
+ scrollbar-width: none;
1339
+ -ms-overflow-style: none;
1340
+ }
1341
+ .rq-tabs__viewport::-webkit-scrollbar {
1342
+ display: none;
1343
+ }
1344
+ .rq-tabs--loading .rq-tabs__viewport {
1345
+ gap: 4px;
1346
+ }
1347
+ .rq-tabs--scroll-prev .rq-tabs__viewport {
1348
+ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px);
1349
+ mask-image: linear-gradient(to right, transparent 0, #000 32px);
1350
+ }
1351
+ .rq-tabs--scroll-next .rq-tabs__viewport {
1352
+ -webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px);
1353
+ mask-image: linear-gradient(to left, transparent 0, #000 32px);
1354
+ }
1355
+ .rq-tabs--scroll-prev.rq-tabs--scroll-next .rq-tabs__viewport {
1356
+ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
1357
+ mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
1358
+ }
1359
+ .rq-tabs__scroll-btn {
1360
+ position: absolute;
1361
+ top: 50%;
1362
+ transform: translateY(-50%);
1363
+ z-index: 2;
1364
+ display: inline-flex;
1365
+ align-items: center;
1366
+ justify-content: center;
1367
+ flex-shrink: 0;
1368
+ padding: 0;
1369
+ background: #ffffff;
1370
+ border: 1px solid #e4e4e7;
1371
+ border-radius: 999px;
1372
+ box-shadow: 0px 1px 1px 0px rgba(15, 15, 21, 0.1);
1373
+ cursor: pointer;
1374
+ color: #18181b;
1375
+ outline: none;
1376
+ transition: background 100ms ease, box-shadow 100ms ease;
1377
+ }
1378
+ .rq-tabs__scroll-btn:hover {
1379
+ background: #fafafa;
1380
+ }
1381
+ .rq-tabs__scroll-btn:active {
1382
+ background: #f4f4f5;
1383
+ }
1384
+ .rq-tabs__scroll-btn:focus-visible {
1385
+ box-shadow: 0 0 0 2px #d4d4d8;
1386
+ }
1387
+ .rq-tabs__scroll-btn--prev {
1388
+ left: 2px;
1389
+ }
1390
+ .rq-tabs__scroll-btn--next {
1391
+ right: 2px;
1392
+ }
1237
1393
  .rq-tabs--regular {
1238
1394
  padding: 3px;
1239
1395
  border-radius: 12px;
@@ -1242,6 +1398,10 @@
1242
1398
  min-height: 29px;
1243
1399
  border-radius: 12px;
1244
1400
  }
1401
+ .rq-tabs--regular .rq-tabs__scroll-btn {
1402
+ width: 26px;
1403
+ height: 26px;
1404
+ }
1245
1405
  .rq-tabs--large {
1246
1406
  padding: 2px;
1247
1407
  border-radius: 12px;
@@ -1250,6 +1410,10 @@
1250
1410
  min-height: 32px;
1251
1411
  border-radius: 12px;
1252
1412
  }
1413
+ .rq-tabs--large .rq-tabs__scroll-btn {
1414
+ width: 28px;
1415
+ height: 28px;
1416
+ }
1253
1417
  .rq-tabs--small {
1254
1418
  padding: 2px;
1255
1419
  border-radius: 8px;
@@ -1258,11 +1422,16 @@
1258
1422
  min-height: 20px;
1259
1423
  border-radius: 8px;
1260
1424
  }
1425
+ .rq-tabs--small .rq-tabs__scroll-btn {
1426
+ width: 18px;
1427
+ height: 18px;
1428
+ }
1261
1429
  .rq-tabs__tab {
1262
1430
  display: inline-flex;
1263
1431
  align-items: center;
1264
1432
  justify-content: center;
1265
1433
  gap: 2px;
1434
+ flex-shrink: 0;
1266
1435
  padding: 2px 6px;
1267
1436
  background: transparent;
1268
1437
  border: none;
@@ -1297,6 +1466,13 @@
1297
1466
  cursor: not-allowed;
1298
1467
  pointer-events: none;
1299
1468
  }
1469
+ .rq-tabs__tab--skeleton {
1470
+ cursor: default;
1471
+ pointer-events: none;
1472
+ }
1473
+ .rq-tabs__tab--skeleton:hover {
1474
+ background: transparent;
1475
+ }
1300
1476
  .rq-tabs__tab-icon {
1301
1477
  flex-shrink: 0;
1302
1478
  color: currentColor;
@@ -1464,11 +1640,33 @@
1464
1640
  align-items: center;
1465
1641
  gap: 8px;
1466
1642
  }
1467
- .rq-search-input .rq-field {
1643
+ .rq-search-input__field {
1644
+ position: relative;
1468
1645
  flex: 1;
1469
1646
  min-width: 220px;
1470
1647
  max-width: 234px;
1471
1648
  }
1649
+ .rq-search-input .rq-field {
1650
+ width: 100%;
1651
+ }
1652
+ .rq-search-input__clear {
1653
+ position: absolute;
1654
+ top: 50%;
1655
+ right: 12px;
1656
+ transform: translateY(-50%);
1657
+ display: flex;
1658
+ align-items: center;
1659
+ justify-content: center;
1660
+ padding: 0;
1661
+ background: none;
1662
+ border: none;
1663
+ cursor: pointer;
1664
+ color: #71717a;
1665
+ transition: color 100ms ease;
1666
+ }
1667
+ .rq-search-input__clear:hover {
1668
+ color: #3f3f46;
1669
+ }
1472
1670
  .rq-search-input__visually-hidden {
1473
1671
  position: absolute;
1474
1672
  width: 1px;
@@ -1514,9 +1712,10 @@
1514
1712
  display: flex;
1515
1713
  align-items: center;
1516
1714
  justify-content: space-between;
1715
+ min-height: 60px;
1517
1716
  padding: 12px 16px;
1518
1717
  background: #e6f0fc;
1519
- border-radius: 8px;
1718
+ border-radius: 0px;
1520
1719
  }
1521
1720
  .rq-selection-bar__info {
1522
1721
  display: flex;
@@ -1530,7 +1729,7 @@
1530
1729
  width: 6px;
1531
1730
  height: 6px;
1532
1731
  border-radius: 999px;
1533
- background: #0064e0;
1732
+ background: #00479f;
1534
1733
  }
1535
1734
  .rq-selection-bar__clear {
1536
1735
  background: none;
@@ -1538,98 +1737,484 @@
1538
1737
  padding: 0;
1539
1738
  font-family: "Inter", sans-serif;
1540
1739
  font-size: 14px;
1541
- color: #0064e0;
1740
+ color: #040045;
1542
1741
  cursor: pointer;
1543
- text-decoration: underline;
1742
+ text-decoration: none;
1544
1743
  }
1545
- .rq-table {
1546
- position: relative;
1744
+ .rq-toast {
1547
1745
  display: flex;
1548
- flex-direction: column;
1746
+ align-items: flex-start;
1747
+ gap: 12px;
1748
+ width: 100%;
1749
+ padding: 16px;
1549
1750
  font-family: "Inter", sans-serif;
1751
+ font-weight: 400;
1550
1752
  font-size: 14px;
1551
- color: #040045;
1552
- background: #ffffff;
1553
- border-radius: 0px;
1554
- overflow: clip;
1753
+ line-height: 22px;
1754
+ border: 1px solid transparent;
1755
+ border-radius: 12px;
1555
1756
  }
1556
- .rq-table__scroll {
1557
- overflow: auto;
1558
- flex: 1;
1757
+ .rq-toast__icon {
1758
+ flex-shrink: 0;
1559
1759
  }
1560
- .rq-table__scroll::-webkit-scrollbar {
1561
- width: 6px;
1562
- height: 6px;
1760
+ .rq-toast__content {
1761
+ flex: 1;
1762
+ min-width: 0;
1563
1763
  }
1564
- .rq-table__scroll::-webkit-scrollbar-track {
1764
+ .rq-toast__close {
1765
+ flex-shrink: 0;
1766
+ display: inline-flex;
1767
+ align-items: center;
1768
+ justify-content: center;
1769
+ padding: 2px;
1565
1770
  background: transparent;
1771
+ border: none;
1772
+ border-radius: 4px;
1773
+ color: currentColor;
1774
+ cursor: pointer;
1775
+ transition: background 200ms ease;
1566
1776
  }
1567
- .rq-table__scroll::-webkit-scrollbar-thumb {
1568
- background: #e4e4e7;
1569
- border-radius: 999px;
1570
- }
1571
- .rq-table__scroll::-webkit-scrollbar-corner {
1572
- background: transparent;
1777
+ .rq-toast__close:hover {
1778
+ background: rgba(0, 0, 0, 0.05);
1573
1779
  }
1574
- .rq-table__table {
1575
- width: 100%;
1576
- border-collapse: separate;
1577
- border-spacing: 0;
1578
- table-layout: fixed;
1780
+ .rq-toast__close:focus-visible {
1781
+ outline: 2px solid #5497ea;
1782
+ outline-offset: 2px;
1579
1783
  }
1580
- .rq-table__thead {
1581
- position: sticky;
1582
- top: 0;
1583
- z-index: 4;
1584
- background: #040045;
1784
+ .rq-toast--floating {
1785
+ box-shadow: 0px 4px 12px 0px rgba(15, 15, 21, 0.1);
1585
1786
  }
1586
- .rq-table__tr--body {
1587
- cursor: pointer;
1787
+ .rq-toast--default {
1588
1788
  background: #ffffff;
1589
- transition: background 100ms ease;
1789
+ border-color: #e4e4e7;
1790
+ color: #18181b;
1590
1791
  }
1591
- .rq-table__tr--body:hover {
1592
- background: #e6f0fc;
1792
+ .rq-toast--info {
1793
+ background: #ecf8fe;
1794
+ border-color: #009de5;
1795
+ color: #005e8a;
1593
1796
  }
1594
- .rq-table__tr--body:active {
1595
- background: #f4f4f5;
1797
+ .rq-toast--error {
1798
+ background: #fff1f0;
1799
+ border-color: #ff2414;
1800
+ color: #d71709;
1596
1801
  }
1597
- .rq-table__tr--empty {
1598
- cursor: default;
1802
+ .rq-toast--success {
1803
+ background: #edfdf7;
1804
+ border-color: #0eb97a;
1805
+ color: #07734c;
1599
1806
  }
1600
- .rq-table__th {
1601
- height: 48px;
1602
- padding: 4px 16px;
1603
- font-family: "Inter", sans-serif;
1604
- font-size: 12px;
1605
- font-weight: 500;
1606
- color: #ffffff;
1607
- text-align: left;
1608
- white-space: nowrap;
1609
- overflow: hidden;
1610
- background: #040045;
1611
- cursor: grab;
1612
- user-select: none;
1807
+
1808
+ .rq-toast-container {
1809
+ position: fixed;
1810
+ z-index: 1100;
1811
+ display: flex;
1812
+ flex-direction: column;
1813
+ gap: 12px;
1814
+ pointer-events: none;
1613
1815
  }
1614
- .rq-table__th--pinned {
1615
- background: #040045;
1616
- box-shadow: 2px 0 6px -1px rgba(4, 0, 69, 0.35);
1816
+ .rq-toast-container .rq-toast {
1817
+ width: auto;
1818
+ max-width: 480px;
1819
+ pointer-events: auto;
1617
1820
  }
1618
- .rq-table__th--select {
1619
- width: 40px;
1620
- min-width: 40px;
1621
- cursor: default;
1622
- background: #040045;
1623
- text-align: center;
1624
- text-overflow: clip;
1821
+ .rq-toast-container--top-right {
1822
+ top: 16px;
1823
+ right: 16px;
1824
+ align-items: flex-end;
1625
1825
  }
1626
- .rq-table__th--select .rq-checkbox {
1627
- border-color: rgba(255, 255, 255, 0.7);
1826
+ .rq-toast-container--top-left {
1827
+ top: 16px;
1828
+ left: 16px;
1829
+ align-items: flex-start;
1628
1830
  }
1629
- .rq-table__th--select .rq-checkbox--checked, .rq-table__th--select .rq-checkbox--indeterminate {
1630
- border-color: #ffffff;
1831
+ .rq-toast-container--top-center {
1832
+ top: 16px;
1833
+ left: 50%;
1834
+ transform: translateX(-50%);
1835
+ align-items: center;
1631
1836
  }
1632
- .rq-table__th--select .rq-checkbox .rq-checkbox__icon {
1837
+ .rq-toast-container--bottom-right {
1838
+ bottom: 16px;
1839
+ right: 16px;
1840
+ align-items: flex-end;
1841
+ }
1842
+ .rq-toast-container--bottom-left {
1843
+ bottom: 16px;
1844
+ left: 16px;
1845
+ align-items: flex-start;
1846
+ }
1847
+ .rq-toast-container--bottom-center {
1848
+ bottom: 16px;
1849
+ left: 50%;
1850
+ transform: translateX(-50%);
1851
+ align-items: center;
1852
+ }
1853
+
1854
+ .rq-toast-anim-enter-active {
1855
+ transition: opacity 300ms ease-out, transform 300ms ease-out;
1856
+ }
1857
+
1858
+ .rq-toast-anim-leave-active {
1859
+ transition: opacity 300ms ease-in, transform 300ms ease-in;
1860
+ }
1861
+
1862
+ .rq-toast-anim-enter,
1863
+ .rq-toast-anim-leave-to {
1864
+ opacity: 0;
1865
+ transform: translateY(-8px);
1866
+ }
1867
+
1868
+ .rq-toast-anim-move {
1869
+ transition: transform 300ms ease-in-out;
1870
+ }
1871
+ .rq-badge.rq-risk-badges--low {
1872
+ background: #edfdf7;
1873
+ color: #07734c;
1874
+ }
1875
+ .rq-badge.rq-risk-badges--medium {
1876
+ background: #fff9e6;
1877
+ color: #d1a002;
1878
+ }
1879
+ .rq-badge.rq-risk-badges--high {
1880
+ background: #fff1f0;
1881
+ color: #a5180d;
1882
+ }
1883
+ .rq-breadcrumb {
1884
+ display: inline-flex;
1885
+ align-items: center;
1886
+ flex-wrap: wrap;
1887
+ gap: 4px;
1888
+ font-family: "Inter", sans-serif;
1889
+ }
1890
+ .rq-breadcrumb__item {
1891
+ display: inline-flex;
1892
+ align-items: center;
1893
+ gap: 4px;
1894
+ }
1895
+ .rq-breadcrumb__label {
1896
+ font-weight: 400;
1897
+ font-size: 14px;
1898
+ line-height: 22px;
1899
+ color: #52525b;
1900
+ cursor: pointer;
1901
+ display: inline-flex;
1902
+ align-items: center;
1903
+ gap: 4px;
1904
+ }
1905
+ .rq-breadcrumb__label:hover {
1906
+ color: #18181b;
1907
+ }
1908
+ .rq-breadcrumb__caret {
1909
+ display: inline-flex;
1910
+ align-items: center;
1911
+ justify-content: center;
1912
+ color: #71717a;
1913
+ cursor: pointer;
1914
+ border: none;
1915
+ background: transparent;
1916
+ padding: 0;
1917
+ }
1918
+ .rq-breadcrumb__caret:hover {
1919
+ color: #18181b;
1920
+ }
1921
+ .rq-breadcrumb__item--active .rq-breadcrumb__label {
1922
+ font-weight: 600;
1923
+ color: #18181b;
1924
+ cursor: default;
1925
+ }
1926
+ .rq-breadcrumb__separator {
1927
+ display: inline-flex;
1928
+ align-items: center;
1929
+ color: #a1a1aa;
1930
+ }
1931
+ .rq-breadcrumb__ellipsis {
1932
+ display: inline-flex;
1933
+ align-items: center;
1934
+ justify-content: center;
1935
+ color: #52525b;
1936
+ cursor: pointer;
1937
+ border: none;
1938
+ background: transparent;
1939
+ padding: 0;
1940
+ font-size: 14px;
1941
+ }
1942
+ .rq-breadcrumb__ellipsis:hover {
1943
+ color: #18181b;
1944
+ }
1945
+ .rq-info-alert {
1946
+ display: flex;
1947
+ align-items: flex-start;
1948
+ gap: 12px;
1949
+ width: 100%;
1950
+ padding: 16px;
1951
+ font-family: "Inter", sans-serif;
1952
+ font-weight: 400;
1953
+ font-size: 14px;
1954
+ line-height: 22px;
1955
+ border: 1px solid transparent;
1956
+ border-radius: 12px;
1957
+ }
1958
+ .rq-info-alert__icon {
1959
+ flex-shrink: 0;
1960
+ }
1961
+ .rq-info-alert__content {
1962
+ flex: 1;
1963
+ min-width: 0;
1964
+ }
1965
+ .rq-info-alert--default {
1966
+ background: #ffffff;
1967
+ border-color: #e4e4e7;
1968
+ color: #18181b;
1969
+ }
1970
+ .rq-info-alert--info {
1971
+ background: #ecf8fe;
1972
+ border-color: #009de5;
1973
+ color: #005e8a;
1974
+ }
1975
+ .rq-info-alert--error {
1976
+ background: #fff1f0;
1977
+ border-color: #ff2414;
1978
+ color: #d71709;
1979
+ }
1980
+ .rq-info-alert--success {
1981
+ background: #edfdf7;
1982
+ border-color: #0eb97a;
1983
+ color: #07734c;
1984
+ }
1985
+ .rq-icon-button__icon {
1986
+ color: inherit;
1987
+ flex-shrink: 0;
1988
+ }
1989
+ td[data-v-6ca52014],th[data-v-6ca52014]{padding:2px;background-color:#fff}td.today[data-v-6ca52014]{font-weight:700}td.disabled[data-v-6ca52014]{pointer-events:none;background-color:#eee;border-radius:0;opacity:.6}.fa[data-v-6ca52014]{display:inline-block;width:100%;height:100%;background:transparent no-repeat 50%;background-size:100% 100%;fill:#ccc}.next[data-v-6ca52014]:hover,.prev[data-v-6ca52014]:hover{background-color:transparent!important}.next .fa[data-v-6ca52014]:hover,.prev .fa[data-v-6ca52014]:hover{opacity:.6}.chevron-left[data-v-6ca52014]{width:16px;height:16px;display:block;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 10 10'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")}.chevron-right[data-v-6ca52014]{width:16px;height:16px;display:block;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 10 10'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")}.yearselect[data-v-6ca52014]{padding-right:1px;border:none;-webkit-appearance:menulist;-moz-appearance:menulist;appearance:menulist}.monthselect[data-v-6ca52014]{border:none}.daterangepicker.hide-calendars.show-ranges .ranges,.daterangepicker.hide-calendars.show-ranges .ranges ul{width:100%}.daterangepicker .calendars-container{display:-webkit-box;display:-ms-flexbox;display:flex}.daterangepicker{position:absolute;color:inherit;background-color:#fff;border-radius:4px;border:1px solid #ddd;width:278px;max-width:none;padding:0;margin-top:7px;top:100px;left:20px;z-index:3001;display:none;font-size:15px;line-height:1em}.daterangepicker:after,.daterangepicker:before{position:absolute;display:inline-block;border-bottom-color:rgba(0,0,0,.2);content:""}.daterangepicker:before{top:-7px;border-right:7px solid transparent;border-left:7px solid transparent;border-bottom:7px solid #ccc}.daterangepicker:after{top:-6px;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent}.daterangepicker.opensleft:before{right:9px}.daterangepicker.opensleft:after{right:10px}.daterangepicker.openscenter:after,.daterangepicker.openscenter:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.daterangepicker.opensright:before{left:9px}.daterangepicker.opensright:after{left:10px}.daterangepicker.drop-up{margin-top:-7px}.daterangepicker.drop-up:before{top:auto;bottom:-7px;border-bottom:initial;border-top:7px solid #ccc}.daterangepicker.drop-up:after{top:auto;bottom:-6px;border-bottom:initial;border-top:6px solid #fff}.daterangepicker.single .drp-selected{display:none}.daterangepicker.show-calendar .drp-buttons,.daterangepicker.show-calendar .drp-calendar{display:block}.daterangepicker.auto-apply .drp-buttons{display:none}.daterangepicker .drp-calendar{display:none;max-width:270px;width:270px}.daterangepicker .drp-calendar.left{padding:8px 0 8px 8px}.daterangepicker .drp-calendar.right{padding:8px}.daterangepicker .drp-calendar.single .calendar-table{border:none}.daterangepicker .calendar-table .next span,.daterangepicker .calendar-table .prev span{color:#fff;border:solid #000;border-width:0 2px 2px 0;border-radius:0;display:inline-block;padding:3px}.daterangepicker .calendar-table .next span{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.daterangepicker .calendar-table .prev span{transform:rotate(135deg);-webkit-transform:rotate(135deg)}.daterangepicker .calendar-table td,.daterangepicker .calendar-table th{white-space:nowrap;text-align:center;vertical-align:middle;min-width:32px;width:32px;height:24px;line-height:24px;font-size:12px;border-radius:4px;border:1px solid transparent;cursor:pointer}.daterangepicker .calendar-table{border:1px solid #fff;border-radius:4px;background-color:#fff}.daterangepicker .calendar-table table{width:100%;margin:0;border-spacing:0;border-collapse:collapse;display:table}.daterangepicker td.available:hover,.daterangepicker th.available:hover{background-color:#eee;border-color:transparent;color:inherit}.daterangepicker td.week,.daterangepicker th.week{font-size:80%;color:#ccc}.daterangepicker td.off,.daterangepicker td.off.end-date,.daterangepicker td.off.in-range,.daterangepicker td.off.start-date{background-color:#fff;border-color:transparent;color:#999}.daterangepicker td.in-range{background-color:#ebf4f8;border-color:transparent;color:#000;border-radius:0}.daterangepicker td.start-date{border-radius:4px 0 0 4px}.daterangepicker td.end-date{border-radius:0 4px 4px 0}.daterangepicker td.start-date.end-date{border-radius:4px}.daterangepicker td.active,.daterangepicker td.active:hover{background-color:#357ebd;border-color:transparent;color:#fff}.daterangepicker th.month{width:auto}.daterangepicker option.disabled,.daterangepicker td.disabled{color:#999;cursor:not-allowed;text-decoration:line-through}.daterangepicker select.monthselect,.daterangepicker select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.daterangepicker select.monthselect{margin-right:2%;width:56%}.daterangepicker select.yearselect{width:40%}.daterangepicker select.ampmselect,.daterangepicker select.hourselect,.daterangepicker select.minuteselect,.daterangepicker select.secondselect{width:50px;margin:0 auto;background:#eee;border:1px solid #eee;padding:2px;outline:0;font-size:12px}.daterangepicker .calendar-time{text-align:center;margin:4px auto 0 auto;line-height:30px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.daterangepicker .calendar-time select.disabled{color:#ccc;cursor:not-allowed}.daterangepicker .drp-buttons{clear:both;text-align:right;padding:8px;border-top:1px solid #ddd;display:none;line-height:12px;vertical-align:middle}.daterangepicker .drp-selected{display:inline-block;font-size:12px;padding-right:8px}.daterangepicker .drp-buttons .btn{margin-left:8px;font-size:12px;font-weight:700;padding:4px 8px}.daterangepicker.show-ranges .drp-calendar.left{border-left:1px solid #ddd}.daterangepicker .ranges{text-align:left;margin:0}.daterangepicker.show-calendar .ranges{margin-top:8px}.daterangepicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.daterangepicker .ranges li{font-size:12px;padding:8px 12px;cursor:pointer}.daterangepicker .ranges li:hover{background-color:#eee}.daterangepicker .ranges li.active{background-color:#08c;color:#fff}@media (min-width:564px){.daterangepicker{width:auto}.daterangepicker .ranges ul{width:140px}.daterangepicker.single .ranges ul{width:100%}.daterangepicker.single .drp-calendar.left{clear:none}.daterangepicker.ltr{direction:ltr;text-align:left}.daterangepicker.ltr .drp-calendar.left{clear:left;margin-right:0}.daterangepicker.ltr .drp-calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.daterangepicker.ltr .drp-calendar.right{margin-left:0}.daterangepicker.ltr .drp-calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.daterangepicker.ltr .drp-calendar.left .calendar-table{padding-right:8px}.daterangepicker.rtl{direction:rtl;text-align:right}.daterangepicker.rtl .drp-calendar.left{clear:right;margin-left:0}.daterangepicker.rtl .drp-calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.daterangepicker.rtl .drp-calendar.right{margin-right:0}.daterangepicker.rtl .drp-calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.daterangepicker.rtl .drp-calendar.left .calendar-table{padding-left:12px}.daterangepicker.rtl .drp-calendar,.daterangepicker.rtl .ranges{text-align:right}}@media (min-width:730px){.daterangepicker .ranges{width:auto}.daterangepicker .drp-calendar.left{clear:none!important}}.reportrange-text[data-v-0fe7292a]{background:#fff;cursor:pointer;padding:5px 10px;border:1px solid #ccc;width:100%}.daterangepicker[data-v-0fe7292a]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}@media screen and (max-width:768px){.daterangepicker.show-ranges .drp-calendar.left[data-v-0fe7292a]{border-left:0}.daterangepicker.show-ranges .ranges[data-v-0fe7292a]{border-bottom:1px solid #ddd}.daterangepicker.show-ranges .ranges[data-v-0fe7292a] ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:auto}}@media screen and (min-width:540px){.daterangepicker.show-weeknumbers[data-v-0fe7292a],.daterangepicker[data-v-0fe7292a]{min-width:486px}}@media screen and (min-width:768px){.daterangepicker.show-ranges.show-weeknumbers[data-v-0fe7292a],.daterangepicker.show-ranges[data-v-0fe7292a]{min-width:682px}}@media screen and (max-width:340px){.daterangepicker.single.show-weeknumbers[data-v-0fe7292a],.daterangepicker.single[data-v-0fe7292a]{min-width:250px}}@media screen and (min-width:339px){.daterangepicker.single[data-v-0fe7292a]{min-width:auto}.daterangepicker.single.show-ranges.show-weeknumbers[data-v-0fe7292a],.daterangepicker.single.show-ranges[data-v-0fe7292a]{min-width:356px}.daterangepicker.single.show-ranges .drp-calendar.left[data-v-0fe7292a]{border-left:1px solid #ddd}.daterangepicker.single.show-ranges .ranges[data-v-0fe7292a]{width:auto;max-width:none;-ms-flex-preferred-size:auto;flex-basis:auto;border-bottom:0}.daterangepicker.single.show-ranges .ranges[data-v-0fe7292a] ul{display:block;width:100%}}.daterangepicker.show-calendar[data-v-0fe7292a]{display:block}.daterangepicker.opensleft[data-v-0fe7292a]{top:35px;right:10px;left:auto}.daterangepicker.openscenter[data-v-0fe7292a]{top:35px;right:auto;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}.daterangepicker.opensright[data-v-0fe7292a]{top:35px;left:10px;right:auto}.slide-fade-enter-active[data-v-0fe7292a]{-webkit-transition:all .2s ease;transition:all .2s ease}.slide-fade-leave-active[data-v-0fe7292a]{-webkit-transition:all .1s cubic-bezier(1,.5,.8,1);transition:all .1s cubic-bezier(1,.5,.8,1)}.slide-fade-enter[data-v-0fe7292a],.slide-fade-leave-to[data-v-0fe7292a]{-webkit-transform:translateX(10px);transform:translateX(10px);opacity:0}.vue-daterange-picker[data-v-0fe7292a]{position:relative;display:inline-block;min-width:60px}.vue-daterange-picker .dropdown-menu[data-v-0fe7292a]{padding:0}.vue-daterange-picker .show-ranges.hide-calendars[data-v-0fe7292a]{width:150px;min-width:150px}
1990
+ .rq-calendar .vue-daterange-picker,
1991
+ .rq-datepicker .vue-daterange-picker {
1992
+ display: block;
1993
+ width: 100%;
1994
+ }
1995
+ .rq-calendar .daterangepicker,
1996
+ .rq-datepicker .daterangepicker {
1997
+ position: static;
1998
+ display: block;
1999
+ float: none;
2000
+ margin: 0;
2001
+ box-shadow: none;
2002
+ border: none;
2003
+ background: transparent;
2004
+ font-family: "Inter", sans-serif;
2005
+ }
2006
+ .rq-calendar .drp-buttons,
2007
+ .rq-datepicker .drp-buttons {
2008
+ display: none;
2009
+ }
2010
+ .rq-calendar .table-condensed,
2011
+ .rq-datepicker .table-condensed {
2012
+ width: 100%;
2013
+ border-collapse: collapse;
2014
+ }
2015
+ .rq-calendar .table-condensed th, .rq-calendar .table-condensed td,
2016
+ .rq-datepicker .table-condensed th,
2017
+ .rq-datepicker .table-condensed td {
2018
+ text-align: center;
2019
+ font-family: "Inter", sans-serif;
2020
+ font-size: 14px;
2021
+ line-height: 22px;
2022
+ padding: 8px;
2023
+ }
2024
+ .rq-calendar .table-condensed tbody tr:first-child th,
2025
+ .rq-datepicker .table-condensed tbody tr:first-child th {
2026
+ color: #71717a;
2027
+ font-weight: 500;
2028
+ font-size: 12px;
2029
+ }
2030
+ .rq-calendar td.off,
2031
+ .rq-datepicker td.off {
2032
+ color: #d4d4d8;
2033
+ }
2034
+ .rq-calendar td.rq-calendar-day--disabled,
2035
+ .rq-datepicker td.rq-calendar-day--disabled {
2036
+ color: #d4d4d8;
2037
+ cursor: not-allowed;
2038
+ pointer-events: none;
2039
+ text-decoration: none;
2040
+ background: transparent;
2041
+ opacity: 1;
2042
+ }
2043
+ .rq-calendar td.rq-calendar-day--selected,
2044
+ .rq-datepicker td.rq-calendar-day--selected {
2045
+ background: #b0cff5;
2046
+ color: #040045;
2047
+ }
2048
+ .rq-calendar .daterangepicker td.rq-calendar-day--selected:hover,
2049
+ .rq-datepicker .daterangepicker td.rq-calendar-day--selected:hover {
2050
+ background: #b0cff5;
2051
+ color: #040045;
2052
+ }
2053
+ .rq-calendar td.rq-calendar-day--active,
2054
+ .rq-datepicker td.rq-calendar-day--active {
2055
+ background: #040045;
2056
+ color: #ffffff;
2057
+ border-radius: 999px;
2058
+ }
2059
+ .rq-calendar .daterangepicker td.rq-calendar-day--active:hover,
2060
+ .rq-datepicker .daterangepicker td.rq-calendar-day--active:hover {
2061
+ background: #040045;
2062
+ color: #ffffff;
2063
+ }
2064
+ .rq-calendar tr td.rq-calendar-day--selected:first-child,
2065
+ .rq-datepicker tr td.rq-calendar-day--selected:first-child {
2066
+ border-top-left-radius: 999px;
2067
+ border-bottom-left-radius: 999px;
2068
+ }
2069
+ .rq-calendar tr td.rq-calendar-day--selected:last-child,
2070
+ .rq-datepicker tr td.rq-calendar-day--selected:last-child {
2071
+ border-top-right-radius: 999px;
2072
+ border-bottom-right-radius: 999px;
2073
+ }
2074
+ .rq-calendar select.monthselect,
2075
+ .rq-calendar input.yearselect,
2076
+ .rq-datepicker select.monthselect,
2077
+ .rq-datepicker input.yearselect {
2078
+ font-family: "Inter", sans-serif;
2079
+ font-size: 14px;
2080
+ border: 1px solid #e4e4e7;
2081
+ border-radius: 4px;
2082
+ padding: 4px 8px;
2083
+ color: #18181b;
2084
+ }
2085
+ .rq-calendar th.prev, .rq-calendar th.next,
2086
+ .rq-datepicker th.prev,
2087
+ .rq-datepicker th.next {
2088
+ cursor: pointer;
2089
+ width: 32px;
2090
+ }
2091
+ .rq-calendar th.prev span, .rq-calendar th.next span,
2092
+ .rq-datepicker th.prev span,
2093
+ .rq-datepicker th.next span {
2094
+ display: inline-block;
2095
+ width: 8px;
2096
+ height: 8px;
2097
+ border: solid #52525b;
2098
+ border-width: 0 2px 2px 0;
2099
+ }
2100
+ .rq-calendar th.prev span,
2101
+ .rq-datepicker th.prev span {
2102
+ transform: rotate(135deg);
2103
+ }
2104
+ .rq-calendar th.next span,
2105
+ .rq-datepicker th.next span {
2106
+ transform: rotate(-45deg);
2107
+ }
2108
+ .rq-calendar .daterangepicker th.prev span,
2109
+ .rq-calendar .daterangepicker th.next span,
2110
+ .rq-datepicker .daterangepicker th.prev span,
2111
+ .rq-datepicker .daterangepicker th.next span {
2112
+ border: solid #52525b;
2113
+ border-width: 0 2px 2px 0;
2114
+ }
2115
+ .rq-calendar[data-header-type=double] .drp-calendar.left th.next,
2116
+ .rq-calendar[data-header-type=double] .drp-calendar.right th.prev,
2117
+ .rq-datepicker[data-header-type=double] .drp-calendar.left th.next,
2118
+ .rq-datepicker[data-header-type=double] .drp-calendar.right th.prev {
2119
+ visibility: hidden;
2120
+ pointer-events: none;
2121
+ }
2122
+
2123
+ .rq-calendar {
2124
+ display: block;
2125
+ width: fit-content;
2126
+ }
2127
+ .rq-table__expanded-content::-webkit-scrollbar, .rq-table__scroll::-webkit-scrollbar {
2128
+ width: 6px;
2129
+ height: 6px;
2130
+ }
2131
+ .rq-table__expanded-content::-webkit-scrollbar-track, .rq-table__scroll::-webkit-scrollbar-track {
2132
+ background: transparent;
2133
+ }
2134
+ .rq-table__expanded-content::-webkit-scrollbar-thumb, .rq-table__scroll::-webkit-scrollbar-thumb {
2135
+ background: #e4e4e7;
2136
+ border-radius: 999px;
2137
+ }
2138
+ .rq-table__expanded-content::-webkit-scrollbar-corner, .rq-table__scroll::-webkit-scrollbar-corner {
2139
+ background: transparent;
2140
+ }
2141
+
2142
+ .rq-table {
2143
+ position: relative;
2144
+ display: flex;
2145
+ flex-direction: column;
2146
+ font-family: "Inter", sans-serif;
2147
+ font-size: 14px;
2148
+ color: #040045;
2149
+ background: #ffffff;
2150
+ border-radius: 0px;
2151
+ overflow: clip;
2152
+ }
2153
+ .rq-table__scroll {
2154
+ overflow: auto;
2155
+ flex: 1;
2156
+ }
2157
+ .rq-table__table {
2158
+ width: 100%;
2159
+ border-collapse: separate;
2160
+ border-spacing: 0;
2161
+ table-layout: fixed;
2162
+ }
2163
+ .rq-table__thead {
2164
+ position: sticky;
2165
+ top: 0;
2166
+ z-index: 4;
2167
+ background: #040045;
2168
+ }
2169
+ .rq-table__tr--body {
2170
+ height: 38px;
2171
+ cursor: pointer;
2172
+ background: #ffffff;
2173
+ transition: background 100ms ease;
2174
+ }
2175
+ .rq-table__tr--body:hover {
2176
+ background: #e6f0fc;
2177
+ }
2178
+ .rq-table__tr--body:active {
2179
+ background: #f4f4f5;
2180
+ }
2181
+ .rq-table__tr--skeleton {
2182
+ cursor: default;
2183
+ }
2184
+ .rq-table__tr--skeleton:hover, .rq-table__tr--skeleton:active {
2185
+ background: #ffffff;
2186
+ }
2187
+ .rq-table__th {
2188
+ height: 48px;
2189
+ padding: 4px 16px;
2190
+ font-family: "Inter", sans-serif;
2191
+ font-size: 12px;
2192
+ font-weight: 500;
2193
+ color: #ffffff;
2194
+ text-align: left;
2195
+ background: #040045;
2196
+ cursor: grab;
2197
+ user-select: none;
2198
+ }
2199
+ .rq-table__th--pinned {
2200
+ background: #040045;
2201
+ box-shadow: 2px 0 6px -1px rgba(4, 0, 69, 0.35);
2202
+ }
2203
+ .rq-table__th--select {
2204
+ width: 40px;
2205
+ min-width: 40px;
2206
+ cursor: default;
2207
+ background: #040045;
2208
+ text-align: center;
2209
+ text-overflow: clip;
2210
+ }
2211
+ .rq-table__th--select .rq-checkbox {
2212
+ border-color: rgba(255, 255, 255, 0.7);
2213
+ }
2214
+ .rq-table__th--select .rq-checkbox--checked, .rq-table__th--select .rq-checkbox--indeterminate {
2215
+ border-color: #ffffff;
2216
+ }
2217
+ .rq-table__th--select .rq-checkbox .rq-checkbox__icon {
1633
2218
  color: #ffffff;
1634
2219
  }
1635
2220
  .rq-table__th--select .rq-checkbox:focus-within {
@@ -1642,6 +2227,12 @@
1642
2227
  .rq-table__th--drag-over {
1643
2228
  border-left: 2px solid #5497ea;
1644
2229
  }
2230
+ .rq-table__th--expand {
2231
+ width: 40px;
2232
+ min-width: 40px;
2233
+ cursor: default;
2234
+ background: #040045;
2235
+ }
1645
2236
  .rq-table__th-content {
1646
2237
  display: flex;
1647
2238
  align-items: center;
@@ -1650,8 +2241,8 @@
1650
2241
  }
1651
2242
  .rq-table__th-label {
1652
2243
  flex: 1;
1653
- overflow: hidden;
1654
- text-overflow: ellipsis;
2244
+ white-space: normal;
2245
+ word-break: break-word;
1655
2246
  }
1656
2247
  .rq-table__chevron-btn {
1657
2248
  display: flex;
@@ -1675,98 +2266,354 @@
1675
2266
  color: #ffffff;
1676
2267
  transform: rotate(180deg);
1677
2268
  }
2269
+ .rq-table__expand-cell {
2270
+ display: flex;
2271
+ align-items: center;
2272
+ gap: 6px;
2273
+ }
2274
+ .rq-table__expand-btn {
2275
+ display: flex;
2276
+ align-items: center;
2277
+ justify-content: center;
2278
+ flex-shrink: 0;
2279
+ width: 20px;
2280
+ height: 20px;
2281
+ border: none;
2282
+ background: transparent;
2283
+ cursor: pointer;
2284
+ border-radius: 2px;
2285
+ color: #71717a;
2286
+ padding: 0;
2287
+ transition: color 200ms ease, background 200ms ease, transform 100ms ease;
2288
+ }
2289
+ .rq-table__expand-btn:hover {
2290
+ color: #18181b;
2291
+ background: #f4f4f5;
2292
+ }
2293
+ .rq-table__expand-btn--active {
2294
+ color: #18181b;
2295
+ transform: rotate(90deg);
2296
+ }
1678
2297
  .rq-table__chevron-popover {
1679
- position: absolute;
2298
+ position: fixed;
1680
2299
  transform: translateX(-50%);
1681
- z-index: 10;
2300
+ z-index: 1000;
1682
2301
  background: #ffffff;
1683
2302
  border: 1px solid #e4e4e7;
1684
2303
  border-radius: 8px;
1685
2304
  box-shadow: 0px 4px 12px 0px rgba(15, 15, 21, 0.1);
1686
2305
  min-width: 200px;
1687
2306
  }
1688
- .rq-table__td {
1689
- padding: 8px 16px;
1690
- white-space: nowrap;
2307
+ .rq-table__td {
2308
+ padding: 8px 16px;
2309
+ white-space: nowrap;
2310
+ overflow: visible;
2311
+ background: inherit;
2312
+ font-size: 14px;
2313
+ color: #18181b;
2314
+ vertical-align: middle;
2315
+ border-bottom: 1px solid #f4f4f5;
2316
+ }
2317
+ .rq-table__td--pinned {
2318
+ box-shadow: 2px 0 6px -1px rgba(4, 0, 69, 0.08);
2319
+ }
2320
+ .rq-table__td--select {
2321
+ width: 40px;
2322
+ min-width: 40px;
2323
+ text-align: center;
2324
+ text-overflow: clip;
2325
+ }
2326
+ .rq-table__td--expand {
2327
+ width: 40px;
2328
+ min-width: 40px;
2329
+ text-overflow: clip;
2330
+ cursor: pointer;
2331
+ }
2332
+ .rq-table__td--expand:focus-visible {
2333
+ outline: 2px solid #5497ea;
2334
+ outline-offset: -2px;
2335
+ }
2336
+ .rq-table__td--expand-disabled {
2337
+ cursor: default;
2338
+ }
2339
+ .rq-table__td--expand-disabled .rq-table__expand-btn {
2340
+ color: #d4d4d8;
2341
+ }
2342
+ .rq-table__td--expanded {
2343
+ padding: 0;
2344
+ cursor: default;
2345
+ border-bottom: 1px solid #f4f4f5;
2346
+ }
2347
+ .rq-table__tr--expanded {
2348
+ background: #e6e6ec;
2349
+ cursor: default;
2350
+ }
2351
+ .rq-table__tr--expanded .rq-table__td:first-child {
2352
+ border-left: 2px solid #040045;
2353
+ }
2354
+ .rq-table__expanded-content {
2355
+ display: flex;
2356
+ justify-content: center;
2357
+ overflow-y: auto;
2358
+ padding: 16px;
2359
+ }
2360
+ .rq-table__empty-state-wrapper {
2361
+ position: sticky;
2362
+ left: 0;
2363
+ width: 100%;
2364
+ display: flex;
2365
+ justify-content: center;
2366
+ padding: 48px 16px;
2367
+ }
2368
+ .rq-table__empty-state {
2369
+ display: flex;
2370
+ flex-direction: column;
2371
+ align-items: center;
2372
+ gap: 8px;
2373
+ }
2374
+ .rq-table__empty-title {
2375
+ font-family: "Inter", sans-serif;
2376
+ font-weight: 600;
2377
+ font-size: 16px;
2378
+ color: #18181b;
2379
+ margin: 0;
2380
+ }
2381
+ .rq-table__empty-subtitle {
2382
+ font-family: "Inter", sans-serif;
2383
+ font-weight: 400;
2384
+ font-size: 14px;
2385
+ line-height: 22px;
2386
+ color: #71717a;
2387
+ max-width: 480px;
2388
+ margin: 0;
2389
+ text-align: center;
2390
+ }
2391
+ .rq-table__cell-tooltip {
2392
+ display: block;
2393
+ width: 100%;
2394
+ }
2395
+ .rq-table__cell-text {
2396
+ display: block;
2397
+ width: 100%;
2398
+ overflow: hidden;
2399
+ text-overflow: ellipsis;
2400
+ }
2401
+ .rq-table__context-menu {
2402
+ position: absolute;
2403
+ z-index: 200;
2404
+ background: #ffffff;
2405
+ border: 1px solid #e4e4e7;
2406
+ border-radius: 8px;
2407
+ box-shadow: 0px 4px 12px 0px rgba(15, 15, 21, 0.1);
2408
+ padding: 4px 0;
2409
+ min-width: 160px;
2410
+ }
2411
+ .rq-table__context-menu-item {
2412
+ display: flex;
2413
+ align-items: center;
2414
+ gap: 8px;
2415
+ padding: 8px 16px;
2416
+ width: 100%;
2417
+ font-family: "Inter", sans-serif;
2418
+ font-size: 12px;
2419
+ line-height: 20px;
2420
+ color: #18181b;
2421
+ background: transparent;
2422
+ border: none;
2423
+ text-align: left;
2424
+ cursor: pointer;
2425
+ transition: background 100ms ease;
2426
+ }
2427
+ .rq-table__context-menu-item:hover {
2428
+ background: #e6f0fc;
2429
+ }
2430
+ .rq-data-table {
2431
+ display: flex;
2432
+ flex-direction: column;
2433
+ gap: 12px;
2434
+ font-family: "Inter", sans-serif;
2435
+ background: #ffffff;
2436
+ border-radius: 12px;
2437
+ padding: 16px;
2438
+ }
2439
+ .rq-data-table__search-row {
2440
+ display: flex;
2441
+ align-items: center;
2442
+ gap: 12px;
2443
+ }
2444
+ .rq-data-table__search-bar {
2445
+ display: flex;
2446
+ }
2447
+ .rq-data-table__actions {
2448
+ display: flex;
2449
+ align-items: center;
2450
+ gap: 8px;
2451
+ margin-left: auto;
2452
+ }
2453
+ .rq-data-table__selection-slot {
2454
+ min-height: 60px;
2455
+ }
2456
+ .rq-data-table__pagination {
2457
+ display: flex;
2458
+ align-items: center;
2459
+ justify-content: space-between;
2460
+ padding: 24px 16px;
2461
+ background: #ffffff;
2462
+ }
2463
+ .rq-data-table__pagination-info {
2464
+ font-family: "Inter", sans-serif;
2465
+ font-weight: 400;
2466
+ font-size: 12px;
2467
+ line-height: 16px;
2468
+ color: #71717a;
2469
+ }
2470
+ .rq-data-table__pagination-controls {
2471
+ display: flex;
2472
+ align-items: center;
2473
+ gap: 16px;
2474
+ }
2475
+ .rq-dialog-overlay {
2476
+ position: fixed;
2477
+ inset: 0;
2478
+ display: flex;
2479
+ align-items: center;
2480
+ justify-content: center;
2481
+ z-index: 1050;
2482
+ opacity: 0;
2483
+ visibility: hidden;
2484
+ pointer-events: none;
2485
+ transition: opacity 300ms ease, visibility 300ms ease;
2486
+ }
2487
+ .rq-dialog-overlay--open {
2488
+ opacity: 1;
2489
+ visibility: visible;
2490
+ pointer-events: auto;
2491
+ }
2492
+ .rq-dialog-overlay__backdrop {
2493
+ position: absolute;
2494
+ inset: 0;
2495
+ background: rgba(15, 15, 21, 0.5);
2496
+ }
2497
+ .rq-dialog-overlay .rq-dialog {
2498
+ position: relative;
2499
+ z-index: 1;
2500
+ }
2501
+
2502
+ .rq-dialog {
2503
+ background: #ffffff;
2504
+ border: 1px solid #e4e4e7;
2505
+ border-radius: 8px;
2506
+ box-shadow: 0px 8px 24px 0px rgba(15, 15, 21, 0.1);
2507
+ display: flex;
2508
+ flex-direction: column;
2509
+ gap: 16px;
2510
+ padding: 32px;
2511
+ width: 480px;
2512
+ }
2513
+ .rq-dialog__title {
2514
+ font-family: "Inter", sans-serif;
2515
+ font-weight: 600;
2516
+ font-size: 20px;
2517
+ line-height: 24px;
2518
+ letter-spacing: 1px;
2519
+ color: #18181b;
2520
+ margin: 0;
2521
+ width: 100%;
2522
+ }
2523
+ .rq-dialog__description {
2524
+ font-family: "Inter", sans-serif;
2525
+ font-weight: 400;
2526
+ font-size: 16px;
2527
+ line-height: 24px;
2528
+ letter-spacing: 1px;
2529
+ color: #52525b;
2530
+ margin: 0;
2531
+ width: 100%;
2532
+ }
2533
+ .rq-dialog__content {
2534
+ width: 100%;
2535
+ }
2536
+ .rq-dialog__actions {
2537
+ display: flex;
2538
+ justify-content: flex-end;
2539
+ gap: 8px;
2540
+ width: 100%;
2541
+ }
2542
+ .rq-drawer-wrapper {
2543
+ position: fixed;
2544
+ inset: 0;
2545
+ z-index: 1050;
1691
2546
  overflow: hidden;
1692
- text-overflow: ellipsis;
1693
- background: #ffffff;
1694
- font-size: 14px;
1695
- color: #18181b;
1696
- vertical-align: middle;
2547
+ pointer-events: none;
1697
2548
  }
1698
- .rq-table__td--pinned {
1699
- background: inherit;
1700
- box-shadow: 2px 0 6px -1px rgba(4, 0, 69, 0.08);
2549
+ .rq-drawer-wrapper--open {
2550
+ pointer-events: auto;
1701
2551
  }
1702
- .rq-table__td--select {
1703
- width: 40px;
1704
- min-width: 40px;
1705
- text-align: center;
1706
- text-overflow: clip;
2552
+
2553
+ .rq-drawer-backdrop {
2554
+ position: absolute;
2555
+ inset: 0;
2556
+ background: rgba(255, 255, 255, 0.6);
2557
+ opacity: 0;
2558
+ transition: opacity 300ms ease;
2559
+ z-index: 100;
1707
2560
  }
1708
- .rq-table__td--empty {
1709
- padding: 48px 16px;
1710
- text-align: center;
1711
- color: #a1a1aa;
2561
+ .rq-drawer-wrapper--open .rq-drawer-backdrop {
2562
+ opacity: 1;
1712
2563
  }
1713
- .rq-table__context-menu {
2564
+
2565
+ .rq-drawer {
1714
2566
  position: absolute;
1715
- z-index: 200;
2567
+ top: 0;
2568
+ right: 0;
2569
+ height: 100%;
1716
2570
  background: #ffffff;
1717
- border: 1px solid #e4e4e7;
1718
- border-radius: 8px;
1719
- box-shadow: 0px 4px 12px 0px rgba(15, 15, 21, 0.1);
1720
- padding: 4px 0;
1721
- min-width: 160px;
1722
- }
1723
- .rq-table__context-menu-item {
2571
+ box-shadow: 0px 8px 24px 0px rgba(15, 15, 21, 0.1);
2572
+ z-index: 101;
1724
2573
  display: flex;
1725
- align-items: center;
1726
- gap: 8px;
1727
- padding: 8px 16px;
1728
- width: 100%;
1729
- font-family: "Inter", sans-serif;
1730
- font-size: 14px;
1731
- color: #18181b;
1732
- background: transparent;
1733
- border: none;
1734
- text-align: left;
1735
- cursor: pointer;
1736
- transition: background 100ms ease;
2574
+ flex-direction: column;
2575
+ gap: 24px;
2576
+ padding: 24px 32px;
2577
+ transform: translateX(100%);
2578
+ transition: transform 300ms ease-in;
1737
2579
  }
1738
- .rq-table__context-menu-item:hover {
1739
- background: #e6f0fc;
2580
+ .rq-drawer-wrapper--open .rq-drawer {
2581
+ transform: translateX(0);
2582
+ transition-timing-function: ease-out;
1740
2583
  }
1741
- .rq-data-table {
2584
+ .rq-drawer__header {
1742
2585
  display: flex;
1743
2586
  flex-direction: column;
1744
- gap: 12px;
1745
- font-family: "Inter", sans-serif;
1746
- background: #ffffff;
1747
- border-radius: 12px;
1748
- padding: 16px;
1749
- }
1750
- .rq-data-table__search-bar {
1751
- display: flex;
2587
+ gap: 4px;
2588
+ flex-shrink: 0;
1752
2589
  }
1753
- .rq-data-table__pagination {
1754
- display: flex;
1755
- align-items: center;
1756
- justify-content: space-between;
1757
- padding: 24px 16px;
1758
- background: #ffffff;
2590
+ .rq-drawer__title {
2591
+ font-family: "Inter", sans-serif;
2592
+ font-weight: 600;
2593
+ font-size: 24px;
2594
+ line-height: 32px;
2595
+ letter-spacing: 1px;
2596
+ color: #18181b;
2597
+ margin: 0;
1759
2598
  }
1760
- .rq-data-table__pagination-info {
2599
+ .rq-drawer__subtitle {
1761
2600
  font-family: "Inter", sans-serif;
1762
2601
  font-weight: 400;
1763
2602
  font-size: 12px;
1764
2603
  line-height: 16px;
2604
+ letter-spacing: 0;
1765
2605
  color: #71717a;
2606
+ margin: 0;
1766
2607
  }
1767
- .rq-data-table__pagination-controls {
2608
+ .rq-drawer__body {
2609
+ flex: 1 1 0;
2610
+ overflow-y: auto;
2611
+ min-height: 0;
2612
+ }
2613
+ .rq-drawer__footer {
2614
+ flex-shrink: 0;
1768
2615
  display: flex;
1769
- align-items: center;
2616
+ justify-content: flex-end;
1770
2617
  gap: 16px;
1771
2618
  }
1772
2619
  .rq-sidebar {
@@ -1906,144 +2753,4 @@
1906
2753
  }
1907
2754
  .rq-sidebar__badge--visible {
1908
2755
  background: transparent;
1909
- }
1910
- .rq-dialog-overlay {
1911
- position: fixed;
1912
- inset: 0;
1913
- display: flex;
1914
- align-items: center;
1915
- justify-content: center;
1916
- z-index: 1050;
1917
- opacity: 0;
1918
- visibility: hidden;
1919
- pointer-events: none;
1920
- transition: opacity 300ms ease, visibility 300ms ease;
1921
- }
1922
- .rq-dialog-overlay--open {
1923
- opacity: 1;
1924
- visibility: visible;
1925
- pointer-events: auto;
1926
- }
1927
- .rq-dialog-overlay__backdrop {
1928
- position: absolute;
1929
- inset: 0;
1930
- background: rgba(15, 15, 21, 0.5);
1931
- }
1932
- .rq-dialog-overlay .rq-dialog {
1933
- position: relative;
1934
- z-index: 1;
1935
- }
1936
-
1937
- .rq-dialog {
1938
- background: #ffffff;
1939
- border: 1px solid #e4e4e7;
1940
- border-radius: 8px;
1941
- box-shadow: 0px 8px 24px 0px rgba(15, 15, 21, 0.1);
1942
- display: flex;
1943
- flex-direction: column;
1944
- gap: 16px;
1945
- padding: 32px;
1946
- width: 480px;
1947
- }
1948
- .rq-dialog__title {
1949
- font-family: "Inter", sans-serif;
1950
- font-weight: 600;
1951
- font-size: 20px;
1952
- line-height: 24px;
1953
- letter-spacing: 1px;
1954
- color: #18181b;
1955
- margin: 0;
1956
- width: 100%;
1957
- }
1958
- .rq-dialog__description {
1959
- font-family: "Inter", sans-serif;
1960
- font-weight: 400;
1961
- font-size: 16px;
1962
- line-height: 24px;
1963
- letter-spacing: 1px;
1964
- color: #52525b;
1965
- margin: 0;
1966
- width: 100%;
1967
- }
1968
- .rq-dialog__actions {
1969
- display: flex;
1970
- justify-content: flex-end;
1971
- gap: 8px;
1972
- width: 100%;
1973
- }
1974
- .rq-drawer-wrapper {
1975
- position: absolute;
1976
- inset: 0;
1977
- overflow: hidden;
1978
- pointer-events: none;
1979
- }
1980
- .rq-drawer-wrapper--open {
1981
- pointer-events: auto;
1982
- }
1983
-
1984
- .rq-drawer-backdrop {
1985
- position: absolute;
1986
- inset: 0;
1987
- background: rgba(255, 255, 255, 0.6);
1988
- opacity: 0;
1989
- transition: opacity 300ms ease;
1990
- z-index: 100;
1991
- }
1992
- .rq-drawer-wrapper--open .rq-drawer-backdrop {
1993
- opacity: 1;
1994
- }
1995
-
1996
- .rq-drawer {
1997
- position: absolute;
1998
- top: 0;
1999
- right: 0;
2000
- height: 100%;
2001
- background: #ffffff;
2002
- box-shadow: 0px 8px 24px 0px rgba(15, 15, 21, 0.1);
2003
- z-index: 101;
2004
- display: flex;
2005
- flex-direction: column;
2006
- gap: 24px;
2007
- padding: 24px 32px;
2008
- transform: translateX(100%);
2009
- transition: transform 300ms ease-in;
2010
- }
2011
- .rq-drawer-wrapper--open .rq-drawer {
2012
- transform: translateX(0);
2013
- transition-timing-function: ease-out;
2014
- }
2015
- .rq-drawer__header {
2016
- display: flex;
2017
- flex-direction: column;
2018
- gap: 4px;
2019
- flex-shrink: 0;
2020
- }
2021
- .rq-drawer__title {
2022
- font-family: "Inter", sans-serif;
2023
- font-weight: 600;
2024
- font-size: 24px;
2025
- line-height: 32px;
2026
- letter-spacing: 1px;
2027
- color: #18181b;
2028
- margin: 0;
2029
- }
2030
- .rq-drawer__subtitle {
2031
- font-family: "Inter", sans-serif;
2032
- font-weight: 400;
2033
- font-size: 12px;
2034
- line-height: 16px;
2035
- letter-spacing: 0;
2036
- color: #71717a;
2037
- margin: 0;
2038
- }
2039
- .rq-drawer__body {
2040
- flex: 1 1 0;
2041
- overflow-y: auto;
2042
- min-height: 0;
2043
- }
2044
- .rq-drawer__footer {
2045
- flex-shrink: 0;
2046
- display: flex;
2047
- justify-content: flex-end;
2048
- gap: 16px;
2049
2756
  }