@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.49

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 (16) hide show
  1. package/dist/add-products-tab.scss +847 -0
  2. package/dist/allocations.scss +217 -218
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-variant-picker.scss +511 -309
  5. package/dist/cart-details.scss +877 -56
  6. package/dist/cart-summary.scss +38 -38
  7. package/dist/cartAttributes.scss +37 -5
  8. package/dist/cartDropdownOverlay.scss +7 -0
  9. package/dist/dropdownTemplate.scss +41 -3
  10. package/dist/language-selector.scss +0 -30
  11. package/dist/profile.scss +2 -2
  12. package/dist/static-global.scss +31 -0
  13. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +215 -0
  14. package/dist/types/builder/tools/element-edit/bulkVariantPicker.d.ts +1 -1
  15. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +66 -0
  16. package/package.json +1 -1
package/dist/bulk-variant-picker.scss CHANGED
@@ -8,6 +8,16 @@ $minWidth: 70px;
8
8
  &[data-element-type="bulkVariantPicker"] {
9
9
  --_ctm-mob-var-lt-mn-cn-wh: 70px;
10
10
 
11
+ width: var(
12
+ --_sf-el-wh-st-mx,
13
+ calc(
14
+ 1% *
15
+ var(
16
+ --_ctm-mob-ele-nw-wh-vl,
17
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
18
+ )
19
+ )
20
+ );
11
21
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
12
22
 
13
23
  min-width: #{$minWidth} !important;
@@ -77,6 +87,39 @@ $minWidth: 70px;
77
87
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
78
88
  white-space: nowrap;
79
89
 
90
+ background-color: var(
91
+ --_ctm-mob-dn-wt-se-bd-cr,
92
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
93
+ );
94
+
95
+ border-color: var(
96
+ --_ctm-mob-dn-wt-se-br-cr,
97
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
98
+ );
99
+
100
+ border-style: var(
101
+ --_ctm-mob-dn-wt-se-br-se,
102
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
103
+ );
104
+
105
+ border-width: var(
106
+ --_ctm-mob-dn-wt-se-br-wh,
107
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
108
+ );
109
+
110
+ border-radius: var(
111
+ --_ctm-mob-dn-wt-se-br-rs,
112
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
113
+ );
114
+
115
+ box-shadow: var(
116
+ --_show-shadow,
117
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
118
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
119
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
120
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
121
+ );
122
+
80
123
  .standard_wrapper {
81
124
  // Select Colors
82
125
  .select__colors {
@@ -484,14 +527,15 @@ $minWidth: 70px;
484
527
  border-radius: 5px;
485
528
  }
486
529
  &[data-background-shape-selected="capsule"] {
487
- --toggle-height: var(--_ctm-lt-sh-im-se);
488
- --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
530
+ --toggle-height: var(--_ctm-lt-sh-te-dy-se-im-se);
531
+ --toggle-width: calc(var(--_ctm-lt-sh-te-dy-se-im-se) * 1.5);
489
532
 
490
533
  width: var(--toggle-width);
491
534
  height: var(--toggle-height);
492
535
 
493
536
  border-radius: var(--toggle-height); /* Full pill shape */
494
537
  box-sizing: border-box;
538
+ // border-radius: 80%;
495
539
  }
496
540
  &[data-swatch-shape-selected="circle"] {
497
541
  & div,
@@ -1697,130 +1741,130 @@ $minWidth: 70px;
1697
1741
 
1698
1742
  // table
1699
1743
 
1700
- .table_container,
1701
- .tab__content {
1702
- .table__class {
1703
- border: 1px solid var(--_gray-200);
1704
- border-radius: 8px;
1705
- .custom__table {
1706
- border: 1px solid var(--_gray-200);
1707
- width: 100%;
1708
- table-layout: fixed;
1709
- // height: 300px;
1710
-
1711
- border-collapse: collapse;
1712
- &[data-header-divider="true"] {
1713
- thead tr th {
1714
- border-bottom: 1px solid var(--_gray-200);
1715
- }
1716
- }
1717
- &[data-row-divider="true"] {
1718
- tbody tr td {
1719
- border-bottom: 1px solid var(--_gray-200);
1720
- }
1721
- }
1722
- &[data-column-divider="true"] {
1723
- tbody tr td,
1724
- thead tr th {
1725
- border-right: 1px solid var(--_gray-200);
1726
- }
1727
-
1728
- tbody tr td:last-child,
1729
- thead tr th:last-child {
1730
- border-right: none;
1731
- }
1732
- }
1733
- &[data-alternative-row-colors="true"] {
1734
- tbody tr:nth-child(odd) {
1735
- background-color: var(--_gray-300);
1736
- width: 100%;
1737
- }
1738
- }
1739
- thead {
1740
- height: var(
1741
- --_ctm-mob-lt-te-dy-se-hr-ht,
1742
- var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1743
- );
1744
- th {
1745
- height: var(
1746
- --_ctm-mob-lt-te-dy-se-hr-ht,
1747
- var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1748
- );
1749
- text-align: var(
1750
- --_ctm-mob-lt-te-dy-se-ct-at,
1751
- var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1752
- );
1753
- padding: var(
1754
- --_ctm-mob-lt-te-dy-se-hr-cl-pg,
1755
- var(--_ctm-tab-lt-te-dy-se-hr-cl-pg, var(--_ctm-lt-te-dy-se-hr-cl-pg))
1756
- );
1757
- background-color: var(--_gray-50);
1758
- font-weight: 600;
1759
- color: var(--_gray-600);
1760
- word-break: break-word;
1761
- }
1762
- }
1763
-
1764
- tbody {
1765
- tr {
1766
- border-bottom: 1px solid var(--_gray-200);
1767
- height: var(
1768
- --_ctm-mob-lt-te-dy-se-rw-ht,
1769
- var(--_ctm-tab-lt-te-dy-se-rw-ht, var(--_ctm-lt-te-dy-se-rw-ht))
1770
- );
1771
- td {
1772
- text-align: var(
1773
- --_ctm-mob-lt-te-dy-se-ct-at,
1774
- var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1775
- );
1776
- padding: var(
1777
- --_ctm-mob-lt-te-dy-se-rw-cl-pg,
1778
- var(--_ctm-tab-lt-te-dy-se-rw-cl-pg, var(--_ctm-lt-te-dy-se-rw-cl-pg))
1779
- );
1780
- .disocunted__price {
1781
- color: var(--_gray-900);
1782
- }
1783
- .actual__price {
1784
- color: var(--_gray-500);
1785
- }
1786
- .qty__input {
1787
- border: 1px solid var(--_gray-200);
1788
- padding-inline: 10px;
1789
- text-align: center;
1790
- border-radius: 6px;
1791
- height: 40px;
1792
- }
1793
- input[type="number"] {
1794
- &:focus-within {
1795
- border: 1px solid var(--_primary-200);
1796
- box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
1797
- }
1798
- &:disabled {
1799
- cursor: not-allowed;
1800
- opacity: 0.4;
1801
- }
1802
- }
1803
- }
1804
- }
1805
- }
1806
- }
1807
- }
1808
- &[data-show-divider="true"] {
1809
- & > div {
1810
- &:not(:last-child)::after {
1811
- content: "";
1812
- position: relative;
1813
- background-color: #000;
1814
- height: 1px;
1815
- width: 100%;
1816
- display: flex;
1817
- top: calc(
1818
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1819
- );
1820
- }
1821
- }
1822
- }
1823
- }
1744
+ // .table_container,
1745
+ // .tab__content {
1746
+ // .table__class {
1747
+ // border: 1px solid var(--_gray-200);
1748
+ // border-radius: 8px;
1749
+ // .custom__table {
1750
+ // border: 1px solid var(--_gray-200);
1751
+ // width: 100%;
1752
+ // table-layout: fixed;
1753
+ // // height: 300px;
1754
+
1755
+ // border-collapse: collapse;
1756
+ // &[data-header-divider="true"] {
1757
+ // thead tr th {
1758
+ // border-bottom: 1px solid var(--_gray-200);
1759
+ // }
1760
+ // }
1761
+ // &[data-row-divider="true"] {
1762
+ // tbody tr td {
1763
+ // border-bottom: 1px solid var(--_gray-200);
1764
+ // }
1765
+ // }
1766
+ // &[data-column-divider="true"] {
1767
+ // tbody tr td,
1768
+ // thead tr th {
1769
+ // border-right: 1px solid var(--_gray-200);
1770
+ // }
1771
+
1772
+ // tbody tr td:last-child,
1773
+ // thead tr th:last-child {
1774
+ // border-right: none;
1775
+ // }
1776
+ // }
1777
+ // &[data-alternative-row-colors="true"] {
1778
+ // tbody tr:nth-child(odd) {
1779
+ // background-color: var(--_gray-300);
1780
+ // width: 100%;
1781
+ // }
1782
+ // }
1783
+ // thead {
1784
+ // height: var(
1785
+ // --_ctm-mob-lt-te-dy-se-hr-ht,
1786
+ // var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1787
+ // );
1788
+ // th {
1789
+ // height: var(
1790
+ // --_ctm-mob-lt-te-dy-se-hr-ht,
1791
+ // var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1792
+ // );
1793
+ // text-align: var(
1794
+ // --_ctm-mob-lt-te-dy-se-ct-at,
1795
+ // var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1796
+ // );
1797
+ // padding: var(
1798
+ // --_ctm-mob-lt-te-dy-se-hr-cl-pg,
1799
+ // var(--_ctm-tab-lt-te-dy-se-hr-cl-pg, var(--_ctm-lt-te-dy-se-hr-cl-pg))
1800
+ // );
1801
+ // background-color: var(--_gray-50);
1802
+ // font-weight: 600;
1803
+ // color: var(--_gray-600);
1804
+ // word-break: break-word;
1805
+ // }
1806
+ // }
1807
+
1808
+ // tbody {
1809
+ // tr {
1810
+ // border-bottom: 1px solid var(--_gray-200);
1811
+ // height: var(
1812
+ // --_ctm-mob-lt-te-dy-se-rw-ht,
1813
+ // var(--_ctm-tab-lt-te-dy-se-rw-ht, var(--_ctm-lt-te-dy-se-rw-ht))
1814
+ // );
1815
+ // td {
1816
+ // text-align: var(
1817
+ // --_ctm-mob-lt-te-dy-se-ct-at,
1818
+ // var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1819
+ // );
1820
+ // padding: var(
1821
+ // --_ctm-mob-lt-te-dy-se-rw-cl-pg,
1822
+ // var(--_ctm-tab-lt-te-dy-se-rw-cl-pg, var(--_ctm-lt-te-dy-se-rw-cl-pg))
1823
+ // );
1824
+ // .disocunted__price {
1825
+ // color: var(--_gray-900);
1826
+ // }
1827
+ // .actual__price {
1828
+ // color: var(--_gray-500);
1829
+ // }
1830
+ // .qty__input {
1831
+ // border: 1px solid var(--_gray-200);
1832
+ // padding-inline: 10px;
1833
+ // text-align: center;
1834
+ // border-radius: 6px;
1835
+ // height: 40px;
1836
+ // }
1837
+ // input[type="number"] {
1838
+ // &:focus-within {
1839
+ // border: 1px solid var(--_primary-200);
1840
+ // box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
1841
+ // }
1842
+ // &:disabled {
1843
+ // cursor: not-allowed;
1844
+ // opacity: 0.4;
1845
+ // }
1846
+ // }
1847
+ // }
1848
+ // }
1849
+ // }
1850
+ // }
1851
+ // }
1852
+ // &[data-show-divider="true"] {
1853
+ // & > div {
1854
+ // &:not(:last-child)::after {
1855
+ // content: "";
1856
+ // position: relative;
1857
+ // background-color: #000;
1858
+ // height: 1px;
1859
+ // width: 100%;
1860
+ // display: flex;
1861
+ // top: calc(
1862
+ // var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1863
+ // );
1864
+ // }
1865
+ // }
1866
+ // }
1867
+ // }
1824
1868
 
1825
1869
  // horizontal tabs
1826
1870
  .tabs__main {
@@ -2382,7 +2426,44 @@ $minWidth: 70px;
2382
2426
  }
2383
2427
  }
2384
2428
 
2385
- .table__wrapper__parent {
2429
+ .table__common_parent {
2430
+ // width: var(--_sf-nw-wh, var(--_tst-lt-mx-dy-se-wh));
2431
+ width: 100%;
2432
+
2433
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
2434
+ // --_aspect-ratio: calc(
2435
+ // 1 * (var(--_ctm-lt-mx-dy-se-ht, var(--_tst-lt-mx-dy-se-ht)) / var(--_ctm-lt-mx-dy-se-wh, var(--_tst-lt-mx-dy-se-wh)))
2436
+ // );
2437
+
2438
+ .pagination:hover {
2439
+ --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
2440
+ }
2441
+ .load__more__button__container {
2442
+ display: flex;
2443
+ width: 100%;
2444
+ margin-top: 10px;
2445
+ &:hover {
2446
+ --_sf-hr-bn-at: var(
2447
+ --_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
2448
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at))
2449
+ );
2450
+ }
2451
+
2452
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at));
2453
+ }
2454
+
2455
+ .pagination .active:hover {
2456
+ cursor: pointer;
2457
+ --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
2458
+ --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
2459
+ --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
2460
+ --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
2461
+ --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
2462
+ --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
2463
+ --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
2464
+ --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
2465
+ --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
2466
+ }
2386
2467
  &[data-widget-shadow="false"] {
2387
2468
  .table__wrapper {
2388
2469
  --_show-shadow: none;
@@ -2390,18 +2471,18 @@ $minWidth: 70px;
2390
2471
  }
2391
2472
  &[data-widget-border="true"] {
2392
2473
  .table__wrapper {
2393
- // border-color: var(
2394
- // --_ctm-mob-dn-te-wt-br-cr,
2395
- // var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
2396
- // );
2397
- // border-style: var(
2398
- // --_ctm-mob-dn-te-wt-br-se,
2399
- // var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
2400
- // );
2401
- // border-width: var(
2402
- // --_ctm-mob-dn-te-wt-br-wh,
2403
- // var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
2404
- // );
2474
+ border-color: var(
2475
+ --_ctm-mob-dn-te-wt-br-cr,
2476
+ var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
2477
+ );
2478
+ border-style: var(
2479
+ --_ctm-mob-dn-te-wt-br-se,
2480
+ var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
2481
+ );
2482
+ border-width: var(
2483
+ --_ctm-mob-dn-te-wt-br-wh,
2484
+ var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
2485
+ );
2405
2486
  }
2406
2487
  }
2407
2488
  &[data-table-shadow="false"] {
@@ -2409,6 +2490,11 @@ $minWidth: 70px;
2409
2490
  --_show-table-shadow: none;
2410
2491
  }
2411
2492
  }
2493
+ &[data-alternative-row-colors="true"] {
2494
+ tbody .tbody__row__divider:nth-child(odd) {
2495
+ background-color: prepareMediaVariable(--_ctm-dn-rw-ae-cr-bd-cr);
2496
+ }
2497
+ }
2412
2498
  &[data-table-border="true"] {
2413
2499
  .table__container {
2414
2500
  border-color: var(
@@ -2425,51 +2511,7 @@ $minWidth: 70px;
2425
2511
  );
2426
2512
  }
2427
2513
  }
2428
- &[data-loadmore-button-shadow="true"] {
2429
- .load__more {
2430
- box-shadow: var(
2431
- --_ctm-mob-dn-ld-me-bn-sw-ae,
2432
- var(--_ctm-tab-dn-ld-me-bn-sw-ae, var(--_ctm-dn-ld-me-bn-sw-ae))
2433
- )
2434
- var(
2435
- --_ctm-mob-dn-ld-me-bn-sw-br,
2436
- var(--_ctm-tab-dn-ld-me-bn-sw-br, var(--_ctm-dn-ld-me-bn-sw-br))
2437
- )
2438
- var(
2439
- --_ctm-mob-ld-me-bn-sw-sd,
2440
- var(--_ctm-tab-dn-ld-me-bn-sw-sd, var(--_ctm-dn-ld-me-bn-sw-sd))
2441
- )
2442
- var(
2443
- --_ctm-mob-dn-ld-me-bn-sw-cr,
2444
- var(--_ctm-tab-dn-ld-me-bn-sw-cr, var(--_ctm-dn-ld-me-bn-sw-cr))
2445
- );
2446
- }
2447
- }
2448
- &[data-loadmore-button-border="true"] {
2449
- .load__more {
2450
- border-color: var(
2451
- --_sf-hr-br-cr,
2452
- var(
2453
- --_ctm-mob-dn-ld-me-bn-br-cr,
2454
- var(--_ctm-tab-dn-ld-me-bn-br-cr, var(--_ctm-dn-ld-me-bn-br-cr))
2455
- )
2456
- );
2457
- border-style: var(
2458
- --_sf-hr-br-st,
2459
- var(
2460
- --_ctm-mob-dn-ld-me-bn-br-se,
2461
- var(--_ctm-tab-dn-ld-me-bn-br-se, var(--_ctm-dn-ld-me-bn-br-se))
2462
- )
2463
- );
2464
- border-width: var(
2465
- --_sf-hr-br-wh,
2466
- var(
2467
- --_ctm-mob-dn-ld-me-bn-br-wh,
2468
- var(--_ctm-tab-dn-ld-me-bn-br-wh, var(--_ctm-dn-ld-me-bn-br-wh))
2469
- )
2470
- );
2471
- }
2472
- }
2514
+
2473
2515
  &[data-header-divider="true"] {
2474
2516
  thead tr th {
2475
2517
  border-bottom: 1px solid
@@ -2480,7 +2522,7 @@ $minWidth: 70px;
2480
2522
  }
2481
2523
  }
2482
2524
  &[data-row-divider="true"] {
2483
- tbody tr td {
2525
+ tbody tr {
2484
2526
  border-bottom: 1px solid
2485
2527
  var(
2486
2528
  --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
@@ -2505,7 +2547,11 @@ $minWidth: 70px;
2505
2547
  }
2506
2548
  &[data-show-more-rows="onScroll"] {
2507
2549
  .table__container {
2508
- overflow-y: auto;
2550
+ overflow-y: scroll;
2551
+ height: var(
2552
+ --_ctm-mob-lt-mx-dy-se-te-ht,
2553
+ var(--_ctm-tab-lt-mx-dy-se-te-ht, var(--_ctm-lt-mx-dy-se-te-ht))
2554
+ ) !important;
2509
2555
 
2510
2556
  &::-webkit-scrollbar {
2511
2557
  width: var(
@@ -2536,44 +2582,50 @@ $minWidth: 70px;
2536
2582
  }
2537
2583
  }
2538
2584
 
2539
- &[data-alternative-row-colors="true"] {
2585
+ &[data-alt-mx-dy-seernative-row-colors="true"] {
2540
2586
  tbody .tbody__row__divider:nth-child(odd) {
2541
2587
  background-color: #f76b6b;
2542
2588
  }
2543
2589
  }
2544
2590
 
2545
2591
  .table__wrapper {
2592
+ flex: 1 1 auto;
2593
+ min-width: 0;
2594
+ overflow-x: auto;
2546
2595
  padding: var(
2547
- --_ctm-mob-lt-pg,
2548
- var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
2596
+ --_ctm-mob-lt-mx-dy-se-pg,
2597
+ var(--_ctm-tab-lt-mx-dy-se-pg, var(--_ctm-lt-mx-dy-se-pg, var(--_tst-lt-mx-dy-se-pg)))
2549
2598
  );
2550
2599
 
2551
- // background-color: var(
2552
- // --_ctm-mob-dn-te-wt-bd-cr,
2553
- // var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
2554
- // );
2600
+ background-color: var(
2601
+ --_ctm-mob-dn-te-wt-bd-cr,
2602
+ var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
2603
+ );
2555
2604
 
2556
- // border-radius: var(
2557
- // --_ctm-mob-dn-te-wt-br-rs,
2558
- // var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
2559
- // );
2605
+ border-radius: var(
2606
+ --_ctm-mob-dn-te-wt-br-rs,
2607
+ var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
2608
+ );
2560
2609
 
2561
- // box-shadow: var(
2562
- // --_show-shadow,
2563
- // var(--_ctm-mob-dn-te-wt-sw-ae, var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae)))
2564
- // var(
2565
- // --_ctm-mob-dn-te-wt-sw-br,
2566
- // var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
2567
- // )
2568
- // var(
2569
- // --_ctm-mob-dn-te-wt-sw-sd,
2570
- // var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
2571
- // )
2572
- // var(
2573
- // --_ctm-mob-dn-te-wt-sw-cr,
2574
- // var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
2575
- // )
2576
- // );
2610
+ box-shadow: var(
2611
+ --_show-shadow,
2612
+ var(
2613
+ --_ctm-mob-dn-te-wt-sw-ae,
2614
+ var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
2615
+ )
2616
+ var(
2617
+ --_ctm-mob-dn-te-wt-sw-br,
2618
+ var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
2619
+ )
2620
+ var(
2621
+ --_ctm-mob-dn-te-wt-sw-sd,
2622
+ var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
2623
+ )
2624
+ var(
2625
+ --_ctm-mob-dn-te-wt-sw-cr,
2626
+ var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
2627
+ )
2628
+ );
2577
2629
 
2578
2630
  width: 100%;
2579
2631
 
@@ -2607,8 +2659,13 @@ $minWidth: 70px;
2607
2659
  // border: none;
2608
2660
  width: 100%;
2609
2661
  // height: 100%;
2610
- text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
2611
-
2662
+ text-align: var(
2663
+ --_ctm-mob-lt-mx-dy-se-ct-at,
2664
+ var(--_ctm-tab-lt-mx-dy-se-ct-at, var(--_ctm-lt-mx-dy-se-ct-at))
2665
+ );
2666
+ width: max-content;
2667
+ min-width: 100%;
2668
+ table-layout: auto;
2612
2669
  th,
2613
2670
  td {
2614
2671
  border: none;
@@ -2685,7 +2742,10 @@ $minWidth: 70px;
2685
2742
  var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
2686
2743
  );
2687
2744
 
2688
- height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
2745
+ height: var(
2746
+ --_ctm-mob-lt-mx-dy-se-rw-ht,
2747
+ var(--_ctm-tab-lt-mx-dy-se-rw-ht, var(--_ctm-lt-mx-dy-se-rw-ht))
2748
+ );
2689
2749
 
2690
2750
  .td__col__divider {
2691
2751
  padding: var(
@@ -2770,8 +2830,8 @@ $minWidth: 70px;
2770
2830
  display: var(--_d-flex);
2771
2831
  align-items: var(--_align-center);
2772
2832
  justify-content: var(
2773
- --_ctm-mob-lt-pn-at,
2774
- var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
2833
+ --_ctm-mob-lt-mx-dy-se-pn-at,
2834
+ var(--_ctm-tab-lt-mx-dy-se-pn-at, var(--_ctm-lt-mx-dy-se-pn-at))
2775
2835
  );
2776
2836
  margin-top: 10px;
2777
2837
  background-color: var(
@@ -2908,114 +2968,238 @@ $minWidth: 70px;
2908
2968
  );
2909
2969
  }
2910
2970
  }
2971
+ }
2972
+ .btn__with__text[data-btn-name="loadMore"] {
2973
+ &[data-show-shadow="false"] {
2974
+ --_show-shadow: none;
2975
+ }
2976
+ &[data-icon-position="left"] {
2977
+ --_sf-fd-bn: row;
2978
+ }
2979
+ &[data-icon-position="right"] {
2980
+ --_sf-fd-bn: row-reverse;
2981
+ }
2982
+ &[data-icon-position="center"] {
2983
+ --_sf-fd-bn: row;
2984
+ }
2911
2985
 
2912
- .load__more {
2913
- margin: 10px;
2914
- background-color: var(
2915
- --_sf-hr-bd-cr,
2916
- var(
2917
- --_ctm-mob-dn-ld-me-bn-bd-cr,
2918
- var(--_ctm-tab-dn-ld-me-bn-bd-cr, var(--_ctm-dn-ld-me-bn-bd-cr))
2919
- )
2986
+ &:hover {
2987
+ --_sf-hr-bd-cr: var(
2988
+ --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
2989
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
2920
2990
  );
2921
- border-radius: var(
2922
- --_sf-hr-br-br,
2923
- var(
2924
- --_ctm-mob-dn-ld-me-bn-br-rs,
2925
- var(--_ctm-tab-dn-ld-me-bn-br-rs, var(--_ctm-dn-ld-me-bn-br-rs))
2926
- )
2991
+ --_sf-hr-br-cr: var(
2992
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
2993
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
2994
+ );
2995
+ --_sf-hr-br-se: var(
2996
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
2997
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
2998
+ );
2999
+ --_sf-hr-br-wh: var(
3000
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
3001
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
3002
+ );
3003
+ --_sf-hr-br-rs: var(
3004
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
3005
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
3006
+ );
3007
+ --_sf-hr-at: var(
3008
+ --_ctm-mob-dn-ld-me-bn-hr-se-at,
3009
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
3010
+ );
3011
+ --_sf-hr-gp: var(
3012
+ --_ctm-mob-dn-ld-me-bn-hr-se-gp,
3013
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp))
2927
3014
  );
2928
3015
 
2929
- h3 {
2930
- color: var(
2931
- --_sf-hr-fc,
2932
- var(
2933
- --_ctm-mob-dn-ld-me-bn-cr,
2934
- var(--_ctm-tab-dn-ld-me-bn-cr, var(--_ctm-dn-ld-me-bn-cr))
2935
- )
2936
- );
2937
- font-family: var(
2938
- --_sf-hr-ff,
2939
- var(
2940
- --_ctm-mob-dn-ld-me-bn-ft-fy,
2941
- var(--_ctm-tab-dn-ld-me-bn-ft-fy, var(--_ctm-dn-ld-me-bn-ft-fy))
2942
- )
2943
- );
2944
- font-size: var(
2945
- --_sf-hr-fs,
2946
- var(
2947
- --_ctm-mob-dn-ld-me-bn-ft-se,
2948
- var(--_ctm-tab-dn-ld-me-bn-ft-se, var(--_ctm-dn-ld-me-bn-ft-se))
2949
- )
2950
- );
3016
+ // for shadow
3017
+ --_sf-hr-sw-ae: var(
3018
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
3019
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae))
3020
+ );
3021
+ --_sf-hr-sw-br: var(
3022
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
3023
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br))
3024
+ );
3025
+ --_sf-hr-sw-hr: var(
3026
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
3027
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr))
3028
+ );
3029
+ --_sf-hr-sw-cr: var(
3030
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
3031
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr))
3032
+ );
2951
3033
 
2952
- text-decoration: var(
2953
- --_ctm-mob-dn-ld-me-bn-ue,
2954
- var(--_ctm-tab-dn-ld-me-bn-ue, var(--_ctm-dn-ld-me-bn-ue))
2955
- );
3034
+ // for font
2956
3035
 
2957
- font-weight: var(
2958
- --_sf-hr-fw,
2959
- var(
2960
- --_ctm-mob-dn-ld-me-bn-ft-wt,
2961
- var(--_ctm-tab-dn-ld-me-bn-ft-wt, var(--_ctm-dn-ld-me-bn-ft-wt))
2962
- )
2963
- );
3036
+ --_sf-hr-cr: var(
3037
+ --_ctm-mob-dn-ld-me-bn-hr-se-cr,
3038
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr))
3039
+ );
3040
+ --_sf-hr-ft-fy: var(
3041
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
3042
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy))
3043
+ );
3044
+ --_sf-hr-ft-se: var(
3045
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
3046
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se))
3047
+ );
3048
+ --_sf-hr-ft-wt: var(
3049
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
3050
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt))
3051
+ );
3052
+ --_sf-hr-ft-se-ic: var(
3053
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
3054
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic))
3055
+ );
3056
+ --_sf-hr-tt-an: var(
3057
+ --_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
3058
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an))
3059
+ );
3060
+ --_sf-hr-lr-sg: var(
3061
+ --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
3062
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg))
3063
+ );
3064
+ --_sf-hr-le-ht: var(
3065
+ --_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
3066
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht))
3067
+ );
2964
3068
 
2965
- font-style: var(
2966
- --_sf-hr-ft,
2967
- var(
2968
- --_ctm-mob-dn-ld-me-bn-ft-se-ic,
2969
- var(--_ctm-tab-dn-ld-me-bn-ft-se-ic, var(--_ctm-dn-ld-me-bn-ft-se-ic))
2970
- )
2971
- );
3069
+ --_sf-hr-in-se: var(
3070
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
3071
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
3072
+ );
3073
+ --_sf-hr-in-se: var(
3074
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
3075
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
3076
+ );
3077
+ --_sf-hr-in-c1: var(
3078
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
3079
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1))
3080
+ );
3081
+ --_sf-hr-ue: var(
3082
+ --_ctm-mob-dn-ld-me-bn-hr-se-ue,
3083
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue))
3084
+ );
2972
3085
 
2973
- text-align: var(
2974
- --_sf-hr-ta,
2975
- var(
2976
- --_ctm-mob-dn-ld-me-bn-tt-an,
2977
- var(--_ctm-tab-dn-ld-me-bn-tt-an, var(--_ctm-dn-ld-me-bn-tt-an))
2978
- )
2979
- );
3086
+ // for pading and width
3087
+ --_sf-hr-pg: var(
3088
+ --_ctm-mob-dn-ld-me-bn-hr-pg,
3089
+ var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg))
3090
+ );
3091
+ --_sf-hr-wh: var(
3092
+ --_ctm-mob-dn-ld-me-bn-hr-wh,
3093
+ var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh))
3094
+ );
2980
3095
 
2981
- letter-spacing: var(
2982
- --_sf-hr-ls,
2983
- var(
2984
- --_ctm-mob-dn-ld-me-bn-lr-sg,
2985
- var(--_ctm-tab-dn-ld-me-bn-lr-sg, var(--_ctm-dn-ld-me-bn-lr-sg))
2986
- )
2987
- );
3096
+ &[data-hover-show-shadow="false"] {
3097
+ --_hover-show-shadow: none;
3098
+ }
3099
+ &[data-hover-show-icon="false"] {
3100
+ --_hover-show-icon: none;
3101
+ }
3102
+ }
3103
+ background-color: var(
3104
+ --_sf-hr-bd-cr,
3105
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr)
3106
+ );
2988
3107
 
2989
- line-height: var(
2990
- --_sf-hr-lh,
2991
- var(
2992
- --_ctm-mob-dn-ld-me-bn-le-ht,
2993
- var(--_ctm-tab-dn-ld-me-bn-le-ht, var(--_ctm-dn-ld-me-bn-le-ht))
2994
- )
2995
- );
3108
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg));
3109
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wh));
3110
+ display: flex;
3111
+ flex-direction: var(--_sf-fd-bn);
3112
+ align-items: center;
3113
+
3114
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-at));
3115
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-gp));
3116
+
3117
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs));
3118
+
3119
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae))
3120
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br))
3121
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd))
3122
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
3123
+
3124
+ &[data-show-border="true"] {
3125
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr));
3126
+
3127
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-se));
3128
+
3129
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-wh));
3130
+ }
3131
+
3132
+ .txt {
3133
+ display: flex;
3134
+
3135
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-cr));
3136
+
3137
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-fy));
3138
+
3139
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se));
3140
+
3141
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt));
3142
+
3143
+ font-style: var(
3144
+ --_sf-hr-ft-se-ic,
3145
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic)
3146
+ );
3147
+
3148
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an));
3149
+
3150
+ letter-spacing: var(
3151
+ --_sf-hr-lr-sg,
3152
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-lr-sg)
3153
+ );
3154
+
3155
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-le-ht));
3156
+
3157
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
3158
+ }
3159
+
3160
+ .icon {
3161
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
3162
+ svg {
3163
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
3164
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
3165
+
3166
+ path {
3167
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-c1));
3168
+ }
2996
3169
  }
2997
- // background-color: var(--_primary-400);
2998
- // border: 1px solid var(--_primary-400);
2999
- // border-radius: var(--_br-6);
3000
- // padding: var(--_pd-8) var(--_pd-12);
3001
- // color: var(---base-whiet);
3002
- // display: inline-block;
3003
- // color: var(--_base-white);
3004
- // margin: 0 auto;
3005
- // width: 150px;
3006
- // text-align: center;
3007
- // margin-top: 20px;
3170
+ }
3171
+ [data-element-style="Text"] {
3172
+ display: inline-block;
3173
+ width: 100%;
3174
+ }
3175
+
3176
+ .icon--hover {
3177
+ // position: absolute;
3178
+ // inset: 0;
3179
+ // opacity: 0;
3180
+ display: none;
3181
+ transition: opacity 0.2s ease;
3182
+ }
3183
+
3184
+ &:hover .icon--hover {
3185
+ // opacity: 1;
3186
+ display: flex;
3187
+ }
3188
+
3189
+ &:hover .icon--default {
3190
+ // opacity: 0;
3191
+ display: none;
3008
3192
  }
3009
3193
  }
3010
3194
  }
3011
3195
 
3012
3196
  .input {
3013
3197
  // width: 100%;
3014
- width: 80px;
3015
- height: 40px;
3198
+ width: var(--_ctm-mob-dn-it-wh, var(--_ctm-tab-dn-it-wh, var(--_ctm-dn-it-wh)));
3199
+ // height: 40px;
3016
3200
 
3017
3201
  background-color: var(
3018
- --_ctm-mob-dn-it-bd-cr,
3202
+ --_ctm-mob-dn-it-wh,
3019
3203
  var(--_ctm-tab-dn-it-bd-cr, var(--_ctm-dn-it-bd-cr))
3020
3204
  );
3021
3205
  box-shadow: var(
@@ -3082,9 +3266,27 @@ $minWidth: 70px;
3082
3266
  var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue))
3083
3267
  );
3084
3268
  }
3269
+ }
3270
+ .cross-line {
3271
+ position: absolute;
3272
+ inset: 0;
3273
+ background-color: #cccccc;
3274
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
3275
+ pointer-events: none;
3276
+ }
3085
3277
 
3086
- &:disabled {
3087
- border: 1px solid red;
3278
+ tbody {
3279
+ td {
3280
+ &:has(input:disabled) {
3281
+ position: relative;
3282
+
3283
+ color: #aaa;
3284
+ background-color: #f9f9f9;
3285
+ border-color: #ddd;
3286
+ cursor: not-allowed;
3287
+ opacity: 0.3;
3288
+ overflow: hidden;
3289
+ }
3088
3290
  }
3089
3291
  }
3090
3292
  }