@regcheq/ui-vue-2 1.5.0-beta.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 +1000 -315
  2. package/dist/index.esm.js +3336 -868
  3. package/dist/index.js +3367 -890
  4. package/package.json +3 -2
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;
@@ -1536,9 +1712,10 @@
1536
1712
  display: flex;
1537
1713
  align-items: center;
1538
1714
  justify-content: space-between;
1715
+ min-height: 60px;
1539
1716
  padding: 12px 16px;
1540
1717
  background: #e6f0fc;
1541
- border-radius: 8px;
1718
+ border-radius: 0px;
1542
1719
  }
1543
1720
  .rq-selection-bar__info {
1544
1721
  display: flex;
@@ -1552,7 +1729,7 @@
1552
1729
  width: 6px;
1553
1730
  height: 6px;
1554
1731
  border-radius: 999px;
1555
- background: #0064e0;
1732
+ background: #00479f;
1556
1733
  }
1557
1734
  .rq-selection-bar__clear {
1558
1735
  background: none;
@@ -1560,120 +1737,512 @@
1560
1737
  padding: 0;
1561
1738
  font-family: "Inter", sans-serif;
1562
1739
  font-size: 14px;
1563
- color: #0064e0;
1740
+ color: #040045;
1564
1741
  cursor: pointer;
1565
- text-decoration: underline;
1742
+ text-decoration: none;
1566
1743
  }
1567
- .rq-table {
1568
- position: relative;
1744
+ .rq-toast {
1569
1745
  display: flex;
1570
- flex-direction: column;
1746
+ align-items: flex-start;
1747
+ gap: 12px;
1748
+ width: 100%;
1749
+ padding: 16px;
1571
1750
  font-family: "Inter", sans-serif;
1751
+ font-weight: 400;
1572
1752
  font-size: 14px;
1573
- color: #040045;
1574
- background: #ffffff;
1575
- border-radius: 0px;
1576
- overflow: clip;
1753
+ line-height: 22px;
1754
+ border: 1px solid transparent;
1755
+ border-radius: 12px;
1577
1756
  }
1578
- .rq-table__scroll {
1579
- overflow: auto;
1580
- flex: 1;
1757
+ .rq-toast__icon {
1758
+ flex-shrink: 0;
1581
1759
  }
1582
- .rq-table__scroll::-webkit-scrollbar {
1583
- width: 6px;
1584
- height: 6px;
1760
+ .rq-toast__content {
1761
+ flex: 1;
1762
+ min-width: 0;
1585
1763
  }
1586
- .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;
1587
1770
  background: transparent;
1771
+ border: none;
1772
+ border-radius: 4px;
1773
+ color: currentColor;
1774
+ cursor: pointer;
1775
+ transition: background 200ms ease;
1588
1776
  }
1589
- .rq-table__scroll::-webkit-scrollbar-thumb {
1590
- background: #e4e4e7;
1591
- border-radius: 999px;
1592
- }
1593
- .rq-table__scroll::-webkit-scrollbar-corner {
1594
- background: transparent;
1777
+ .rq-toast__close:hover {
1778
+ background: rgba(0, 0, 0, 0.05);
1595
1779
  }
1596
- .rq-table__table {
1597
- width: 100%;
1598
- border-collapse: separate;
1599
- border-spacing: 0;
1600
- table-layout: fixed;
1780
+ .rq-toast__close:focus-visible {
1781
+ outline: 2px solid #5497ea;
1782
+ outline-offset: 2px;
1601
1783
  }
1602
- .rq-table__thead {
1603
- position: sticky;
1604
- top: 0;
1605
- z-index: 4;
1606
- background: #040045;
1784
+ .rq-toast--floating {
1785
+ box-shadow: 0px 4px 12px 0px rgba(15, 15, 21, 0.1);
1607
1786
  }
1608
- .rq-table__tr--body {
1609
- cursor: pointer;
1787
+ .rq-toast--default {
1610
1788
  background: #ffffff;
1611
- transition: background 100ms ease;
1789
+ border-color: #e4e4e7;
1790
+ color: #18181b;
1612
1791
  }
1613
- .rq-table__tr--body:hover {
1614
- background: #e6f0fc;
1792
+ .rq-toast--info {
1793
+ background: #ecf8fe;
1794
+ border-color: #009de5;
1795
+ color: #005e8a;
1615
1796
  }
1616
- .rq-table__tr--body:active {
1617
- background: #f4f4f5;
1797
+ .rq-toast--error {
1798
+ background: #fff1f0;
1799
+ border-color: #ff2414;
1800
+ color: #d71709;
1618
1801
  }
1619
- .rq-table__tr--empty {
1620
- cursor: default;
1802
+ .rq-toast--success {
1803
+ background: #edfdf7;
1804
+ border-color: #0eb97a;
1805
+ color: #07734c;
1621
1806
  }
1622
- .rq-table__th {
1623
- height: 48px;
1624
- padding: 4px 16px;
1625
- font-family: "Inter", sans-serif;
1626
- font-size: 12px;
1627
- font-weight: 500;
1628
- color: #ffffff;
1629
- text-align: left;
1630
- white-space: nowrap;
1631
- overflow: hidden;
1632
- background: #040045;
1633
- cursor: grab;
1634
- 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;
1635
1815
  }
1636
- .rq-table__th--pinned {
1637
- background: #040045;
1638
- 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;
1639
1820
  }
1640
- .rq-table__th--select {
1641
- width: 40px;
1642
- min-width: 40px;
1643
- cursor: default;
1644
- background: #040045;
1645
- text-align: center;
1646
- text-overflow: clip;
1821
+ .rq-toast-container--top-right {
1822
+ top: 16px;
1823
+ right: 16px;
1824
+ align-items: flex-end;
1647
1825
  }
1648
- .rq-table__th--select .rq-checkbox {
1649
- 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;
1650
1830
  }
1651
- .rq-table__th--select .rq-checkbox--checked, .rq-table__th--select .rq-checkbox--indeterminate {
1652
- border-color: #ffffff;
1831
+ .rq-toast-container--top-center {
1832
+ top: 16px;
1833
+ left: 50%;
1834
+ transform: translateX(-50%);
1835
+ align-items: center;
1653
1836
  }
1654
- .rq-table__th--select .rq-checkbox .rq-checkbox__icon {
1655
- color: #ffffff;
1837
+ .rq-toast-container--bottom-right {
1838
+ bottom: 16px;
1839
+ right: 16px;
1840
+ align-items: flex-end;
1656
1841
  }
1657
- .rq-table__th--select .rq-checkbox:focus-within {
1658
- box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
1842
+ .rq-toast-container--bottom-left {
1843
+ bottom: 16px;
1844
+ left: 16px;
1845
+ align-items: flex-start;
1659
1846
  }
1660
- .rq-table__th--dragging {
1661
- opacity: 0.5;
1662
- cursor: grabbing;
1847
+ .rq-toast-container--bottom-center {
1848
+ bottom: 16px;
1849
+ left: 50%;
1850
+ transform: translateX(-50%);
1851
+ align-items: center;
1663
1852
  }
1664
- .rq-table__th--drag-over {
1665
- border-left: 2px solid #5497ea;
1853
+
1854
+ .rq-toast-anim-enter-active {
1855
+ transition: opacity 300ms ease-out, transform 300ms ease-out;
1666
1856
  }
1667
- .rq-table__th-content {
1668
- display: flex;
1669
- align-items: center;
1670
- gap: 6px;
1671
- position: relative;
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 {
2218
+ color: #ffffff;
2219
+ }
2220
+ .rq-table__th--select .rq-checkbox:focus-within {
2221
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
2222
+ }
2223
+ .rq-table__th--dragging {
2224
+ opacity: 0.5;
2225
+ cursor: grabbing;
2226
+ }
2227
+ .rq-table__th--drag-over {
2228
+ border-left: 2px solid #5497ea;
2229
+ }
2230
+ .rq-table__th--expand {
2231
+ width: 40px;
2232
+ min-width: 40px;
2233
+ cursor: default;
2234
+ background: #040045;
2235
+ }
2236
+ .rq-table__th-content {
2237
+ display: flex;
2238
+ align-items: center;
2239
+ gap: 6px;
2240
+ position: relative;
1672
2241
  }
1673
2242
  .rq-table__th-label {
1674
2243
  flex: 1;
1675
- overflow: hidden;
1676
- text-overflow: ellipsis;
2244
+ white-space: normal;
2245
+ word-break: break-word;
1677
2246
  }
1678
2247
  .rq-table__chevron-btn {
1679
2248
  display: flex;
@@ -1697,98 +2266,354 @@
1697
2266
  color: #ffffff;
1698
2267
  transform: rotate(180deg);
1699
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
+ }
1700
2297
  .rq-table__chevron-popover {
1701
- position: absolute;
2298
+ position: fixed;
1702
2299
  transform: translateX(-50%);
1703
- z-index: 10;
2300
+ z-index: 1000;
1704
2301
  background: #ffffff;
1705
2302
  border: 1px solid #e4e4e7;
1706
2303
  border-radius: 8px;
1707
2304
  box-shadow: 0px 4px 12px 0px rgba(15, 15, 21, 0.1);
1708
2305
  min-width: 200px;
1709
2306
  }
1710
- .rq-table__td {
1711
- padding: 8px 16px;
1712
- 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;
1713
2546
  overflow: hidden;
1714
- text-overflow: ellipsis;
1715
- background: #ffffff;
1716
- font-size: 14px;
1717
- color: #18181b;
1718
- vertical-align: middle;
2547
+ pointer-events: none;
1719
2548
  }
1720
- .rq-table__td--pinned {
1721
- background: inherit;
1722
- box-shadow: 2px 0 6px -1px rgba(4, 0, 69, 0.08);
2549
+ .rq-drawer-wrapper--open {
2550
+ pointer-events: auto;
1723
2551
  }
1724
- .rq-table__td--select {
1725
- width: 40px;
1726
- min-width: 40px;
1727
- text-align: center;
1728
- 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;
1729
2560
  }
1730
- .rq-table__td--empty {
1731
- padding: 48px 16px;
1732
- text-align: center;
1733
- color: #a1a1aa;
2561
+ .rq-drawer-wrapper--open .rq-drawer-backdrop {
2562
+ opacity: 1;
1734
2563
  }
1735
- .rq-table__context-menu {
2564
+
2565
+ .rq-drawer {
1736
2566
  position: absolute;
1737
- z-index: 200;
2567
+ top: 0;
2568
+ right: 0;
2569
+ height: 100%;
1738
2570
  background: #ffffff;
1739
- border: 1px solid #e4e4e7;
1740
- border-radius: 8px;
1741
- box-shadow: 0px 4px 12px 0px rgba(15, 15, 21, 0.1);
1742
- padding: 4px 0;
1743
- min-width: 160px;
1744
- }
1745
- .rq-table__context-menu-item {
2571
+ box-shadow: 0px 8px 24px 0px rgba(15, 15, 21, 0.1);
2572
+ z-index: 101;
1746
2573
  display: flex;
1747
- align-items: center;
1748
- gap: 8px;
1749
- padding: 8px 16px;
1750
- width: 100%;
1751
- font-family: "Inter", sans-serif;
1752
- font-size: 14px;
1753
- color: #18181b;
1754
- background: transparent;
1755
- border: none;
1756
- text-align: left;
1757
- cursor: pointer;
1758
- 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;
1759
2579
  }
1760
- .rq-table__context-menu-item:hover {
1761
- background: #e6f0fc;
2580
+ .rq-drawer-wrapper--open .rq-drawer {
2581
+ transform: translateX(0);
2582
+ transition-timing-function: ease-out;
1762
2583
  }
1763
- .rq-data-table {
2584
+ .rq-drawer__header {
1764
2585
  display: flex;
1765
2586
  flex-direction: column;
1766
- gap: 12px;
1767
- font-family: "Inter", sans-serif;
1768
- background: #ffffff;
1769
- border-radius: 12px;
1770
- padding: 16px;
1771
- }
1772
- .rq-data-table__search-bar {
1773
- display: flex;
2587
+ gap: 4px;
2588
+ flex-shrink: 0;
1774
2589
  }
1775
- .rq-data-table__pagination {
1776
- display: flex;
1777
- align-items: center;
1778
- justify-content: space-between;
1779
- padding: 24px 16px;
1780
- 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;
1781
2598
  }
1782
- .rq-data-table__pagination-info {
2599
+ .rq-drawer__subtitle {
1783
2600
  font-family: "Inter", sans-serif;
1784
2601
  font-weight: 400;
1785
2602
  font-size: 12px;
1786
2603
  line-height: 16px;
2604
+ letter-spacing: 0;
1787
2605
  color: #71717a;
2606
+ margin: 0;
1788
2607
  }
1789
- .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;
1790
2615
  display: flex;
1791
- align-items: center;
2616
+ justify-content: flex-end;
1792
2617
  gap: 16px;
1793
2618
  }
1794
2619
  .rq-sidebar {
@@ -1928,144 +2753,4 @@
1928
2753
  }
1929
2754
  .rq-sidebar__badge--visible {
1930
2755
  background: transparent;
1931
- }
1932
- .rq-dialog-overlay {
1933
- position: fixed;
1934
- inset: 0;
1935
- display: flex;
1936
- align-items: center;
1937
- justify-content: center;
1938
- z-index: 1050;
1939
- opacity: 0;
1940
- visibility: hidden;
1941
- pointer-events: none;
1942
- transition: opacity 300ms ease, visibility 300ms ease;
1943
- }
1944
- .rq-dialog-overlay--open {
1945
- opacity: 1;
1946
- visibility: visible;
1947
- pointer-events: auto;
1948
- }
1949
- .rq-dialog-overlay__backdrop {
1950
- position: absolute;
1951
- inset: 0;
1952
- background: rgba(15, 15, 21, 0.5);
1953
- }
1954
- .rq-dialog-overlay .rq-dialog {
1955
- position: relative;
1956
- z-index: 1;
1957
- }
1958
-
1959
- .rq-dialog {
1960
- background: #ffffff;
1961
- border: 1px solid #e4e4e7;
1962
- border-radius: 8px;
1963
- box-shadow: 0px 8px 24px 0px rgba(15, 15, 21, 0.1);
1964
- display: flex;
1965
- flex-direction: column;
1966
- gap: 16px;
1967
- padding: 32px;
1968
- width: 480px;
1969
- }
1970
- .rq-dialog__title {
1971
- font-family: "Inter", sans-serif;
1972
- font-weight: 600;
1973
- font-size: 20px;
1974
- line-height: 24px;
1975
- letter-spacing: 1px;
1976
- color: #18181b;
1977
- margin: 0;
1978
- width: 100%;
1979
- }
1980
- .rq-dialog__description {
1981
- font-family: "Inter", sans-serif;
1982
- font-weight: 400;
1983
- font-size: 16px;
1984
- line-height: 24px;
1985
- letter-spacing: 1px;
1986
- color: #52525b;
1987
- margin: 0;
1988
- width: 100%;
1989
- }
1990
- .rq-dialog__actions {
1991
- display: flex;
1992
- justify-content: flex-end;
1993
- gap: 8px;
1994
- width: 100%;
1995
- }
1996
- .rq-drawer-wrapper {
1997
- position: absolute;
1998
- inset: 0;
1999
- overflow: hidden;
2000
- pointer-events: none;
2001
- }
2002
- .rq-drawer-wrapper--open {
2003
- pointer-events: auto;
2004
- }
2005
-
2006
- .rq-drawer-backdrop {
2007
- position: absolute;
2008
- inset: 0;
2009
- background: rgba(255, 255, 255, 0.6);
2010
- opacity: 0;
2011
- transition: opacity 300ms ease;
2012
- z-index: 100;
2013
- }
2014
- .rq-drawer-wrapper--open .rq-drawer-backdrop {
2015
- opacity: 1;
2016
- }
2017
-
2018
- .rq-drawer {
2019
- position: absolute;
2020
- top: 0;
2021
- right: 0;
2022
- height: 100%;
2023
- background: #ffffff;
2024
- box-shadow: 0px 8px 24px 0px rgba(15, 15, 21, 0.1);
2025
- z-index: 101;
2026
- display: flex;
2027
- flex-direction: column;
2028
- gap: 24px;
2029
- padding: 24px 32px;
2030
- transform: translateX(100%);
2031
- transition: transform 300ms ease-in;
2032
- }
2033
- .rq-drawer-wrapper--open .rq-drawer {
2034
- transform: translateX(0);
2035
- transition-timing-function: ease-out;
2036
- }
2037
- .rq-drawer__header {
2038
- display: flex;
2039
- flex-direction: column;
2040
- gap: 4px;
2041
- flex-shrink: 0;
2042
- }
2043
- .rq-drawer__title {
2044
- font-family: "Inter", sans-serif;
2045
- font-weight: 600;
2046
- font-size: 24px;
2047
- line-height: 32px;
2048
- letter-spacing: 1px;
2049
- color: #18181b;
2050
- margin: 0;
2051
- }
2052
- .rq-drawer__subtitle {
2053
- font-family: "Inter", sans-serif;
2054
- font-weight: 400;
2055
- font-size: 12px;
2056
- line-height: 16px;
2057
- letter-spacing: 0;
2058
- color: #71717a;
2059
- margin: 0;
2060
- }
2061
- .rq-drawer__body {
2062
- flex: 1 1 0;
2063
- overflow-y: auto;
2064
- min-height: 0;
2065
- }
2066
- .rq-drawer__footer {
2067
- flex-shrink: 0;
2068
- display: flex;
2069
- justify-content: flex-end;
2070
- gap: 16px;
2071
2756
  }