@sc-360-v2/storefront-cms-library 0.2.73 → 0.2.76

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 (106) hide show
  1. package/dist/add-order.scss +69 -0
  2. package/dist/allocationDetails.scss +335 -0
  3. package/dist/allocations.scss +546 -2
  4. package/dist/amount-estimator.scss +733 -187
  5. package/dist/brand-basic-elements.scss +142 -61
  6. package/dist/brand.scss +66 -16
  7. package/dist/breadcrumbs.scss +379 -88
  8. package/dist/builder.js +1 -1
  9. package/dist/bulk-variant-picker.scss +525 -121
  10. package/dist/bundle-basic-elements.scss +283 -121
  11. package/dist/bundle.scss +74 -15
  12. package/dist/buyFor.scss +153 -0
  13. package/dist/cart-details.scss +387 -0
  14. package/dist/cart-summary.scss +175 -0
  15. package/dist/cart.scss +178 -44
  16. package/dist/cartDropdownOverlay.scss +118 -0
  17. package/dist/cartGrouping.scss +89 -0
  18. package/dist/category.scss +38 -7
  19. package/dist/categoryDetails.scss +24 -6
  20. package/dist/categoryWidget.scss +11 -6
  21. package/dist/code-temp.scss +6 -4
  22. package/dist/contact-us.scss +19 -147
  23. package/dist/container.scss +22 -1
  24. package/dist/countdown.scss +372 -112
  25. package/dist/editCartItem.scss +111 -0
  26. package/dist/embed-temp.scss +29 -14
  27. package/dist/faq.scss +3 -6
  28. package/dist/filters.scss +11 -2
  29. package/dist/form-preview.scss +128 -93
  30. package/dist/gallery-slider-temp.scss +548 -135
  31. package/dist/grid.scss +24 -0
  32. package/dist/hotspot.scss +27 -25
  33. package/dist/icon-library.scss +26 -15
  34. package/dist/icons.js +1 -1
  35. package/dist/image-temp.scss +45 -17
  36. package/dist/index.js +1 -1
  37. package/dist/item-stock.scss +125 -0
  38. package/dist/layouter-item.scss +26 -2
  39. package/dist/layouter.scss +26 -1
  40. package/dist/light-box-v2.scss +29 -3
  41. package/dist/lightbox.scss +18 -2
  42. package/dist/line.scss +165 -0
  43. package/dist/login.scss +15 -23
  44. package/dist/map.scss +495 -119
  45. package/dist/marchandiserSets.scss +35 -18
  46. package/dist/menu.scss +121 -33
  47. package/dist/modal.scss +4 -0
  48. package/dist/past-orders.scss +11 -2
  49. package/dist/payment-methods.scss +29 -13
  50. package/dist/pickup-locations.scss +884 -244
  51. package/dist/product-actions.scss +2223 -418
  52. package/dist/product-basic-elements.scss +273 -122
  53. package/dist/product-highlights.scss +22 -14
  54. package/dist/product-image.scss +535 -136
  55. package/dist/product-inventory.scss +1105 -283
  56. package/dist/product-options.scss +378 -94
  57. package/dist/product-price.scss +1386 -316
  58. package/dist/product-promotions.scss +2252 -601
  59. package/dist/product.scss +68 -14
  60. package/dist/productDetails.scss +29 -2
  61. package/dist/profile.scss +19 -4
  62. package/dist/quantity-selector.scss +5 -4
  63. package/dist/quick-links.scss +277 -0
  64. package/dist/quotes.scss +11 -2
  65. package/dist/repeater-item.scss +26 -2
  66. package/dist/repeater.scss +60 -7
  67. package/dist/rfqs.scss +11 -2
  68. package/dist/scroll.scss +112 -47
  69. package/dist/search-results-heading.scss +282 -0
  70. package/dist/search.scss +84 -23
  71. package/dist/section.scss +25 -1
  72. package/dist/shareCartSideBar.scss +230 -0
  73. package/dist/shipping-estimator.scss +7 -3
  74. package/dist/social.scss +148 -38
  75. package/dist/sort.scss +11 -2
  76. package/dist/stack.scss +23 -3
  77. package/dist/static-text.scss +0 -1
  78. package/dist/store-locations.scss +887 -244
  79. package/dist/sub-category.scss +50 -19
  80. package/dist/tab-container-item.scss +80 -0
  81. package/dist/tab-container.scss +89 -0
  82. package/dist/tab-v2.scss +579 -0
  83. package/dist/table.scss +370 -91
  84. package/dist/tabs.scss +334 -74
  85. package/dist/text-temp-v2.scss +21 -9
  86. package/dist/types/builder/elements/add-order/index.d.ts +27 -0
  87. package/dist/types/builder/elements/create-form/index.d.ts +27 -0
  88. package/dist/types/builder/elements/form-builder/index.d.ts +7 -0
  89. package/dist/types/builder/elements/image/index.d.ts +13 -0
  90. package/dist/types/builder/elements/quick-links/index.d.ts +36 -0
  91. package/dist/types/builder/enums/index.d.ts +9 -1
  92. package/dist/types/builder/index.d.ts +4 -1
  93. package/dist/types/builder/interfaces/global.d.ts +5 -0
  94. package/dist/types/builder/tools/element-edit/addOrder.d.ts +28 -0
  95. package/dist/types/builder/tools/element-edit/createForm.d.ts +15 -0
  96. package/dist/types/builder/tools/element-edit/index.d.ts +4 -1
  97. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +360 -0
  98. package/dist/uom-selector.scss +1569 -383
  99. package/dist/variant-picker.scss +1593 -481
  100. package/dist/video.scss +212 -53
  101. package/dist/volume-pricing.scss +775 -196
  102. package/dist/widget.scss +14 -0
  103. package/package.json +1 -1
  104. package/dist/editor-core.scss +0 -537
  105. package/dist/tab-panel.scss +0 -93
  106. package/dist/text-editor.scss +0 -331
package/dist/table.scss CHANGED
@@ -4,8 +4,19 @@
4
4
  [data-div-type="element"] {
5
5
  &[data-element-type="table"] {
6
6
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
7
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
8
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
7
+ width: var(
8
+ --_sf-el-wh-st-mx,
9
+ calc(
10
+ 1% *
11
+ var(
12
+ --_ctm-mob-ele-nw-wh-vl,
13
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
14
+ )
15
+ )
16
+ );
17
+
18
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
19
+
9
20
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
10
21
  // --_aspect-ratio: calc(
11
22
  // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
@@ -13,16 +24,18 @@
13
24
 
14
25
  & > .wrapper {
15
26
  width: 100%;
27
+
16
28
  .pagination:hover {
17
29
  --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
18
30
  }
31
+
19
32
  .pagination .active:hover {
20
33
  cursor: pointer;
21
34
  --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
22
35
  --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
23
36
  --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
24
- --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue)) --_sf-hr-fw:
25
- var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
37
+ --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
38
+ --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
26
39
  --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
27
40
  --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
28
41
  --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
@@ -36,9 +49,18 @@
36
49
  }
37
50
  &[data-widget-border="true"] {
38
51
  .table__wrapper {
39
- border-color: var(--_ctm-dn-te-wt-br-cr, var(--_tst-dn-te-wt-br-cr));
40
- border-style: var(--_ctm-dn-te-wt-br-se, var(--_tst-dn-te-wt-br-se));
41
- border-width: var(--_ctm-dn-te-wt-br-wh, var(--_tst-dn-te-wt-br-wh));
52
+ border-color: var(
53
+ --_ctm-mob-dn-te-wt-br-cr,
54
+ var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
55
+ );
56
+ border-style: var(
57
+ --_ctm-mob-dn-te-wt-br-se,
58
+ var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
59
+ );
60
+ border-width: var(
61
+ --_ctm-mob-dn-te-wt-br-wh,
62
+ var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
63
+ );
42
64
  }
43
65
  }
44
66
  &[data-table-shadow="false"] {
@@ -48,49 +70,91 @@
48
70
  }
49
71
  &[data-table-border="true"] {
50
72
  .table__container {
51
- border-color: var(--_ctm-dn-te-br-cr, var(--_tst-dn-te-br-cr));
52
- border-style: var(--_ctm-dn-te-br-se, var(--_tst-dn-te-br-se));
53
- border-width: var(--_ctm-dn-te-br-wh, var(--_tst-dn-te-br-wh));
73
+ border-color: var(
74
+ --_ctm-mob-dn-te-br-cr,
75
+ var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
76
+ );
77
+ border-style: var(
78
+ --_ctm-mob-dn-te-br-se,
79
+ var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
80
+ );
81
+ border-width: var(
82
+ --_ctm-mob-dn-te-br-wh,
83
+ var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
84
+ );
54
85
  }
55
86
  }
56
87
  &[data-loadmore-button-shadow="true"] {
57
88
  .load__more {
58
- box-shadow: var(--_ctm-dn-ld-me-bn-sw-ae, var(--_tst-dn-ld-me-bn-sw-ae))
59
- var(--_ctm-dn-ld-me-bn-sw-br, var(--_tst-dn-ld-me-bn-sw-br))
60
- var(--_ctm-dn-ld-me-bn-sw-sd, var(--_tst-dn-ld-me-bn-sw-sd))
61
- var(--_ctm-dn-ld-me-bn-sw-cr, var(--_tst-dn-ld-me-bn-sw-cr));
89
+ box-shadow: var(
90
+ --_ctm-mob-dn-ld-me-bn-sw-ae,
91
+ var(--_ctm-tab-dn-ld-me-bn-sw-ae, var(--_ctm-dn-ld-me-bn-sw-ae))
92
+ )
93
+ var(
94
+ --_ctm-mob-dn-ld-me-bn-sw-br,
95
+ var(--_ctm-tab-dn-ld-me-bn-sw-br, var(--_ctm-dn-ld-me-bn-sw-br))
96
+ )
97
+ var(
98
+ --_ctm-mob-ld-me-bn-sw-sd,
99
+ var(--_ctm-tab-dn-ld-me-bn-sw-sd, var(--_ctm-dn-ld-me-bn-sw-sd))
100
+ )
101
+ var(
102
+ --_ctm-mob-dn-ld-me-bn-sw-cr,
103
+ var(--_ctm-tab-dn-ld-me-bn-sw-cr, var(--_ctm-dn-ld-me-bn-sw-cr))
104
+ );
62
105
  }
63
106
  }
64
107
  &[data-loadmore-button-border="true"] {
65
108
  .load__more {
66
109
  border-color: var(
67
110
  --_sf-hr-br-cr,
68
- var(--_ctm-dn-ld-me-bn-br-cr, var(--_tst-dn-ld-me-bn-br-cr))
111
+ var(
112
+ --_ctm-mob-dn-ld-me-bn-br-cr,
113
+ var(--_ctm-tab-dn-ld-me-bn-br-cr, var(--_ctm-dn-ld-me-bn-br-cr))
114
+ )
69
115
  );
70
116
  border-style: var(
71
117
  --_sf-hr-br-st,
72
- var(--_ctm-dn-ld-me-bn-br-se, var(--_tst-dn-ld-me-bn-br-se))
118
+ var(
119
+ --_ctm-mob-dn-ld-me-bn-br-se,
120
+ var(--_ctm-tab-dn-ld-me-bn-br-se, var(--_ctm-dn-ld-me-bn-br-se))
121
+ )
73
122
  );
74
123
  border-width: var(
75
124
  --_sf-hr-br-wt,
76
- var(--_ctm-dn-ld-me-bn-br-wh, var(--_tst-dn-ld-me-bn-br-wh))
125
+ var(
126
+ --_ctm-mob-dn-ld-me-bn-br-wh,
127
+ var(--_ctm-tab-dn-ld-me-bn-br-wh, var(--_ctm-dn-ld-me-bn-br-wh))
128
+ )
77
129
  );
78
130
  }
79
131
  }
80
132
  &[data-header-divider="true"] {
81
133
  thead tr th {
82
- border-bottom: 1px solid var(--_ctm-dn-rw-ad-hr-ds-hr-dr);
134
+ border-bottom: 1px solid
135
+ var(
136
+ --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
137
+ var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
138
+ );
83
139
  }
84
140
  }
85
141
  &[data-row-divider="true"] {
86
142
  tbody tr td {
87
- border-bottom: 1px solid var(--_ctm-dn-rw-ad-hr-ds-rw-dr);
143
+ border-bottom: 1px solid
144
+ var(
145
+ --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
146
+ var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
147
+ );
88
148
  }
89
149
  }
90
150
  &[data-column-divider="true"] {
91
151
  tbody tr td,
92
152
  thead tr th {
93
- border-right: 1px solid var(--_ctm-dn-rw-ad-hr-ds-cn-dr);
153
+ border-right: 1px solid
154
+ var(
155
+ --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
156
+ var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
157
+ );
94
158
  }
95
159
 
96
160
  tbody tr td:last-child,
@@ -103,8 +167,10 @@
103
167
  overflow-y: auto;
104
168
 
105
169
  &::-webkit-scrollbar {
106
- // width: var(--_ctm-dn-sl-br-sl-br-w, var(--_tst-dn-sl-br-sl-br-w));
107
- width: var(--_ctm-dn-sl-br-sl-br-wh);
170
+ width: var(
171
+ --_ctm-mob-dn-sl-br-sl-br-wh,
172
+ var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
173
+ );
108
174
  }
109
175
 
110
176
  &::-webkit-scrollbar-track {
@@ -112,7 +178,10 @@
112
178
  }
113
179
 
114
180
  &::-webkit-scrollbar-thumb {
115
- background-color: var(--_ctm-dn-sl-br-sl-br-cr);
181
+ background-color: var(
182
+ --_ctm-mob-dn-sl-br-sl-br-cr,
183
+ var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
184
+ );
116
185
  }
117
186
 
118
187
  // // Scrollbar thumb when hovered
@@ -133,30 +202,45 @@
133
202
  }
134
203
 
135
204
  .table__wrapper {
136
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
137
- background-color: var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr));
138
- border-radius: var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs));
205
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg))));
206
+
207
+ background-color: var(
208
+ --_ctm-mob-dn-te-wt-bd-cr,
209
+ var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
210
+ );
211
+
212
+ border-radius: var(
213
+ --_ctm-mob-dn-te-wt-br-rs,
214
+ var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
215
+ );
216
+
139
217
  box-shadow: var(
140
218
  --_show-shadow,
141
- var(--_ctm-dn-te-wt-sw-ae, var(--_tst-dn-te-wt-sw-ae))
142
- var(--_ctm-dn-te-wt-sw-br, var(--_tst-dn-te-wt-sw-br))
143
- var(--_ctm-dn-te-wt-sw-sd, var(--_tst-dn-te-wt-sw-sd))
144
- var(--_ctm-dn-te-wt-sw-cr, var(--_tst-dn-te-wt-sw-cr))
219
+ var(--_ctm-mob-dn-te-wt-sw-ae, var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae)))
220
+ var(--_ctm-mob-dn-te-wt-sw-br, var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br)))
221
+ var(--_ctm-mob-dn-te-wt-sw-sd, var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd)))
222
+ var(--_ctm-mob-dn-te-wt-sw-cr, var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr)))
145
223
  );
146
224
 
147
225
  width: 100%;
226
+
148
227
  .table__container {
149
- // height: fit-content;
150
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
151
- background-color: var(--_ctm-dn-te-bd-cr, var(--_tst-dn-te-bd-cr));
152
- border-radius: var(--_ctm-dn-te-br-rs, var(--_tst-dn-te-br-rs));
228
+ background-color: var(
229
+ --_ctm-mob-dn-te-bd-cr,
230
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
231
+ );
232
+
233
+ border-radius: var(
234
+ --_ctm-mob-dn-te-br-rs,
235
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
236
+ );
153
237
 
154
238
  box-shadow: var(
155
239
  --_show-table-shadow,
156
- var(--_ctm-dn-te-sw-ae, var(--_tst-dn-te-wt-sw-ae))
157
- var(--_ctm-dn-te-sw-br, var(--_tst-dn-te-sw-br))
158
- var(--_ctm-dn-te-sw-sd, var(--_tst-dn-te-sw-sd))
159
- var(--_ctm-dn-te-sw-cr, var(--_tst-dn-te-sw-cr))
240
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
241
+ var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
242
+ var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
243
+ var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
160
244
  );
161
245
  }
162
246
 
@@ -170,57 +254,156 @@
170
254
  // border: none;
171
255
  width: 100%;
172
256
  // height: 100%;
173
- text-align: var(--_ctm-lt-ct-at, var(--_tst-lt-ct-at));
257
+ text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
174
258
 
175
259
  th,
176
260
  td {
177
261
  border: none;
178
262
  }
179
263
  thead {
180
- background-color: var(--_ctm-dn-te-hr-bd-cr, var(--_tst-dn-te-hr-bd-cr));
264
+ background-color: var(
265
+ --_ctm-mob-dn-te-hr-bd-cr,
266
+ var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
267
+ );
268
+
181
269
  .thead__row__divider {
182
- // border-bottom: 1px solid var(--_gray-500);
183
- // border-top: 1px solid var(--_gray-500);
184
- height: var(--_ctm-lt-hr-ht, var(--_tst-lt-hr-ht));
270
+ height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
185
271
 
186
272
  .th__col__divider {
187
- padding: var(--_ctm-lt-hr-cl-pg, var(--_tst-lt-hr-cl-pg));
188
- color: var(--_ctm-dn-hr-tt-cr, var(--_tst-dn-hr-tt-cr));
189
- font-family: var(--_ctm-dn-hr-tt-ft-fy, var(--_tst-dn-hr-tt-ft-fy)), sans-serif;
190
- font-size: var(--_ctm-dn-hr-tt-ft-se, var(--_tst-dn-hr-tt-ft-se));
191
- font-weight: var(--_ctm-dn-hr-tt-ft-wt, var(--_tst-dn-hr-tt-ft-wt));
192
- text-decoration: var(--_ctm-dn-hr-tt-ue, var(--_tst-dn-hr-tt-ue));
193
- font-style: var(--_ctm-dn-hr-tt-ft-se-ic, var(--_tst-dn-hr-tt-ft-se-ic));
194
- text-align: var(--_ctm-dn-hr-tt-tt-an, var(--_tst-dn-hr-tt-tt-an));
195
- letter-spacing: var(--_ctm-dn-hr-tt-lr-sg, var(--_tst-dn-hr-tt-lr-sg));
196
- line-height: var(--_ctm-dn-hr-tt-le-ht, var(--_tst-dn-hr-tt-le-ht));
273
+ padding: var(
274
+ --_ctm-mob-lt-hr-cl-pg,
275
+ var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
276
+ );
277
+
278
+ color: var(
279
+ --_ctm-mob-dn-hr-tt-cr,
280
+ var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
281
+ );
282
+
283
+ font-family: var(
284
+ --_ctm-mob-dn-hr-tt-ft-fy,
285
+ var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
286
+ ),
287
+ sans-serif;
288
+
289
+ font-size: var(
290
+ --_ctm-mob-dn-hr-tt-ft-se,
291
+ var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
292
+ );
293
+
294
+ font-weight: var(
295
+ --_ctm-mob-dn-hr-tt-ft-wt,
296
+ var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
297
+ );
298
+
299
+ text-decoration: var(
300
+ --_ctm-mob-dn-hr-tt-ue,
301
+ var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
302
+ );
303
+
304
+ font-style: var(
305
+ --_ctm-mob-dn-hr-tt-ft-se-ic,
306
+ var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
307
+ );
308
+
309
+ text-align: var(
310
+ --_ctm-mob-dn-hr-tt-tt-an,
311
+ var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
312
+ );
313
+
314
+ letter-spacing: var(
315
+ --_ctm-mob-dn-hr-tt-lr-sg,
316
+ var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
317
+ );
318
+
319
+ line-height: var(
320
+ --_ctm-mob-dn-hr-tt-le-ht,
321
+ var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
322
+ );
197
323
  }
198
324
  }
199
325
  }
200
-
201
326
  tbody {
202
327
  .tbody__row__divider {
203
- background-color: var(--_ctm-dn-te-rw-bd-cr, var(--_tst-dn-te-rw-bd-cr));
204
- height: var(--_ctm-lt-rw-ht, var(--_tst-lt-rw-ht));
205
- // border-bottom: 1px solid var(--_gray-500);
328
+ background-color: var(
329
+ --_ctm-mob-dn-te-rw-bd-cr,
330
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
331
+ );
332
+
333
+ height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
334
+
206
335
  .td__col__divider {
207
- padding: var(--_ctm-lt-rw-cl-pg, var(--_tst-rw-cl-pg));
208
- color: var(--_sf-hr-fc, var(--_ctm-dn-rw-tt-cr, var(--_tst-dn-rw-tt-cr)));
209
- font-family: var(--_sf-hr-ff, var(--_ctm-dn-rw-tt-ft-fy, var(--_tst-dn-rw-tt-ft-fy))),
336
+ padding: var(
337
+ --_ctm-mob-lt-rw-cl-pg,
338
+ var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
339
+ );
340
+
341
+ color: var(
342
+ --_sf-hr-fc,
343
+ var(--_ctm-mob-dn-rw-tt-cr, var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr)))
344
+ );
345
+
346
+ font-family: var(
347
+ --_sf-hr-ff,
348
+ var(
349
+ --_ctm-mob-dn-rw-tt-ft-fy,
350
+ var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
351
+ )
352
+ ),
210
353
  sans-serif;
211
- font-size: var(--_sf-hr-fs, var(--_ctm-dn-rw-tt-ft-se, var(--_tst-dn-rw-tt-ft-se)));
212
- text-decoration: var(--_ctm-dn-rw-tt-ue, var(--_tst-dn-hr-tt-ue));
213
- font-weight: var(--_sf-hr-fw, var(--_ctm-dn-rw-tt-ft-wt, var(--_tst-dn-rw-tt-ft-wt)));
354
+
355
+ font-size: var(
356
+ --_sf-hr-fs,
357
+ var(
358
+ --_ctm-mob-dn-rw-tt-ft-se,
359
+ var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
360
+ )
361
+ );
362
+
363
+ text-decoration: var(
364
+ --_ctm-mob-dn-rw-tt-ue,
365
+ var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
366
+ );
367
+
368
+ font-weight: var(
369
+ --_sf-hr-fw,
370
+ var(
371
+ --_ctm-mob-dn-rw-tt-ft-wt,
372
+ var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
373
+ )
374
+ );
375
+
214
376
  font-style: var(
215
377
  --_sf-hr-ft,
216
- var(--_ctm-dn-rw-tt-ft-se-ic, var(--_tst-dn-rw-tt-ft-se-ic))
378
+ var(
379
+ --_ctm-mob-dn-rw-tt-ft-se-ic,
380
+ var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
381
+ )
217
382
  );
218
- text-align: var(--_sf-hr-ta, var(--_ctm-dn-rw-tt-tt-an, var(--_tst-dn-rw-tt-tt-an)));
383
+
384
+ text-align: var(
385
+ --_sf-hr-ta,
386
+ var(
387
+ --_ctm-mob-dn-rw-tt-tt-an,
388
+ var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
389
+ )
390
+ );
391
+
219
392
  letter-spacing: var(
220
393
  --_sf-hr-ls,
221
- var(--_ctm-dn-rw-tt-lr-sg, var(--_tst-dn-rw-tt-lr-sg))
394
+ var(
395
+ --_ctm-mob-dn-rw-tt-lr-sg,
396
+ var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
397
+ )
398
+ );
399
+
400
+ line-height: var(
401
+ --_sf-hr-lh,
402
+ var(
403
+ --_ctm-mob-dn-rw-tt-le-ht,
404
+ var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
405
+ )
222
406
  );
223
- line-height: var(--_sf-hr-lh, var(--_ctm-dn-rw-tt-le-ht, var(--_tst-dn-rw-tt-le-ht)));
224
407
  }
225
408
  }
226
409
  }
@@ -229,11 +412,14 @@
229
412
  .pagination {
230
413
  display: var(--_d-flex);
231
414
  align-items: var(--_align-center);
232
- justify-content: var(--_ctm-lt-pn-at, var(--_tst-lt-pn-at));
415
+ justify-content: var(--_ctm-mob-lt-pn-at, var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at)));
233
416
  margin-top: 10px;
234
417
  background-color: var(
235
418
  --_sf-bd-cr,
236
- var(--_ctm-dn-pn-dt-se-bd-cr, var(--_tst-dn-pn-dt-se-bd-cr))
419
+ var(
420
+ --_ctm-mob-dn-pn-dt-se-bd-cr,
421
+ var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
422
+ )
237
423
  );
238
424
  &.pagination__center {
239
425
  justify-content: var(justify-center);
@@ -277,42 +463,90 @@
277
463
  }
278
464
  }
279
465
  &.active {
280
- color: var(--_sf-hr-fc, var(--_ctm-dn-pn-dt-se-cr, var(--_tst-dn-pn-dt-se-cr)));
466
+ color: var(
467
+ --_sf-hr-fc,
468
+ var(
469
+ --_ctm-mob-dn-pn-dt-se-cr,
470
+ var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
471
+ )
472
+ );
473
+
281
474
  font-family: var(
282
475
  --_sf-hr-ff,
283
- var(--_ctm-dn-pn-dt-se-ft-fy, var(--_tst-dn-pn-dt-se-ft-fy))
476
+ var(
477
+ --_ctm-mob-dn-pn-dt-se-ft-fy,
478
+ var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
479
+ )
284
480
  ),
285
481
  sans-serif;
482
+
286
483
  font-size: var(
287
484
  --_sf-hr-fs,
288
- var(--_ctm-dn-pn-dt-se-ft-se, var(--_tst-dn-pn-dt-se-ft-se))
485
+ var(
486
+ --_ctm-mob-dn-pn-dt-se-ft-se,
487
+ var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
488
+ )
489
+ );
490
+
491
+ text-decoration: var(
492
+ --_sf-hr-td,
493
+ var(
494
+ --_ctm-mob-dn-pn-dt-se-ue,
495
+ var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
496
+ )
289
497
  );
290
- text-decoration: var(--_sf-hr-td, var(--_ctm-dn-pn-dt-se-ue, var(--_tst-dn-hr-tt-ue)));
498
+
291
499
  font-weight: var(
292
500
  --_sf-hr-fw,
293
- var(--_ctm-dn-pn-dt-se-ft-wt, var(--_tst-dn-pn-dt-se-ft-wt))
501
+ var(
502
+ --_ctm-mob-dn-pn-dt-se-ft-wt,
503
+ var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
504
+ )
294
505
  );
506
+
295
507
  font-style: var(
296
508
  --_sf-hr-ft,
297
- var(--_ctm-dn-pn-dt-se-ft-se-ic, var(--_tst-dn-pn-dt-se-ft-se-ic))
509
+ var(
510
+ --_ctm-mob-dn-pn-dt-se-ft-se-ic,
511
+ var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
512
+ )
298
513
  );
514
+
299
515
  text-align: var(
300
516
  --_sf-hr-ta,
301
- var(--_ctm-dn-pn-dt-se-tt-an, var(--_tst-dn-pn-dt-se-tt-an))
517
+ var(
518
+ --_ctm-mob-dn-pn-dt-se-tt-an,
519
+ var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
520
+ )
302
521
  );
522
+
303
523
  letter-spacing: var(
304
524
  --_sf-hr-ls,
305
- var(--_ctm-dn-pn-dt-se-lr-sg, var(--_tst-dn-pn-dt-se-lr-sg))
525
+ var(
526
+ --_ctm-mob-dn-pn-dt-se-lr-sg,
527
+ var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
528
+ )
306
529
  );
530
+
307
531
  line-height: var(
308
532
  --_sf-hr-lh,
309
- var(--_ctm-dn-pn-dt-se-le-ht, var(--_tst-dn-pn-dt-se-le-ht))
533
+ var(
534
+ --_ctm-mob-dn-pn-dt-se-le-ht,
535
+ var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
536
+ )
310
537
  );
311
538
  }
312
539
  }
313
540
  .pagination__arrows {
314
- color: var(--_sf-hr-fc, var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1)));
315
- font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-in-se, var(--_tst-dn-pn-in-se)));
541
+ color: var(
542
+ --_sf-hr-fc,
543
+ var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
544
+ );
545
+
546
+ font-size: var(
547
+ --_sf-hr-fs,
548
+ var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
549
+ );
316
550
  }
317
551
  }
318
552
 
@@ -320,41 +554,86 @@
320
554
  margin: 10px;
321
555
  background-color: var(
322
556
  --_sf-hr-bd-cr,
323
- var(--_ctm-dn-ld-me-bn-bd-cr, var(--_tst-dn-ld-me-bn-bd-cr))
557
+ var(
558
+ --_ctm-mob-dn-ld-me-bn-bd-cr,
559
+ var(--_ctm-tab-dn-ld-me-bn-bd-cr, var(--_ctm-dn-ld-me-bn-bd-cr))
560
+ )
324
561
  );
325
562
  border-radius: var(
326
563
  --_sf-hr-br-br,
327
- var(--_ctm-dn-ld-me-bn-br-rs, var(--_tst-dn-ld-me-bn-br-rs))
564
+ var(
565
+ --_ctm-mob-dn-ld-me-bn-br-rs,
566
+ var(--_ctm-tab-dn-ld-me-bn-br-rs, var(--_ctm-dn-ld-me-bn-br-rs))
567
+ )
328
568
  );
329
569
 
330
570
  h3 {
331
- color: var(--_sf-hr-fc, var(--_ctm-dn-ld-me-bn-cr, var(--_tst-dn-ld-me-bn-cr)));
571
+ color: var(
572
+ --_sf-hr-fc,
573
+ var(
574
+ --_ctm-mob-dn-ld-me-bn-cr,
575
+ var(--_ctm-tab-dn-ld-me-bn-cr, var(--_ctm-dn-ld-me-bn-cr))
576
+ )
577
+ );
332
578
  font-family: var(
333
579
  --_sf-hr-ff,
334
- var(--_ctm-dn-ld-me-bn-ft-fy, var(--_tst-dn-ld-me-bn-ft-fy))
580
+ var(
581
+ --_ctm-mob-dn-ld-me-bn-ft-fy,
582
+ var(--_ctm-tab-dn-ld-me-bn-ft-fy, var(--_ctm-dn-ld-me-bn-ft-fy))
583
+ )
335
584
  ),
336
585
  sans-serif;
337
- font-size: var(--_sf-hr-fs, var(--_ctm-dn-ld-me-bn-ft-se, var(--_tst-dn-ld-me-bn-ft-se)));
338
- text-decoration: var(--_ctm-dn-ld-me-bn-ue);
586
+ font-size: var(
587
+ --_sf-hr-fs,
588
+ var(
589
+ --_ctm-mob-dn-ld-me-bn-ft-se,
590
+ var(--_ctm-tab-dn-ld-me-bn-ft-se, var(--_ctm-dn-ld-me-bn-ft-se))
591
+ )
592
+ );
593
+
594
+ text-decoration: var(
595
+ --_ctm-mob-dn-ld-me-bn-ue,
596
+ var(--_ctm-tab-dn-ld-me-bn-ue, var(--_ctm-dn-ld-me-bn-ue))
597
+ );
598
+
339
599
  font-weight: var(
340
600
  --_sf-hr-fw,
341
- var(--_ctm-dn-ld-me-bn-ft-wt, var(--_tst-dn-ld-me-bn-ft-wt))
601
+ var(
602
+ --_ctm-mob-dn-ld-me-bn-ft-wt,
603
+ var(--_ctm-tab-dn-ld-me-bn-ft-wt, var(--_ctm-dn-ld-me-bn-ft-wt))
604
+ )
342
605
  );
606
+
343
607
  font-style: var(
344
608
  --_sf-hr-ft,
345
- var(--_ctm-dn-ld-me-bn-ft-se-ic, var(--_tst-dn-ld-me-bn-ft-se-ic))
609
+ var(
610
+ --_ctm-mob-dn-ld-me-bn-ft-se-ic,
611
+ var(--_ctm-tab-dn-ld-me-bn-ft-se-ic, var(--_ctm-dn-ld-me-bn-ft-se-ic))
612
+ )
346
613
  );
614
+
347
615
  text-align: var(
348
616
  --_sf-hr-ta,
349
- var(--_ctm-dn-ld-me-bn-tt-an, var(--_tst-dn-ld-me-bn-tt-an))
617
+ var(
618
+ --_ctm-mob-dn-ld-me-bn-tt-an,
619
+ var(--_ctm-tab-dn-ld-me-bn-tt-an, var(--_ctm-dn-ld-me-bn-tt-an))
620
+ )
350
621
  );
622
+
351
623
  letter-spacing: var(
352
624
  --_sf-hr-ls,
353
- var(--_ctm-dn-ld-me-bn-lr-sg, var(--_tst-dn-ld-me-bn-lr-sg))
625
+ var(
626
+ --_ctm-mob-dn-ld-me-bn-lr-sg,
627
+ var(--_ctm-tab-dn-ld-me-bn-lr-sg, var(--_ctm-dn-ld-me-bn-lr-sg))
628
+ )
354
629
  );
630
+
355
631
  line-height: var(
356
632
  --_sf-hr-lh,
357
- var(--_ctm-dn-ld-me-bn-le-ht, var(--_tst-dn-ld-me-bn-le-ht))
633
+ var(
634
+ --_ctm-mob-dn-ld-me-bn-le-ht,
635
+ var(--_ctm-tab-dn-ld-me-bn-le-ht, var(--_ctm-dn-ld-me-bn-le-ht))
636
+ )
358
637
  );
359
638
  }
360
639
  // background-color: var(--_primary-400);