@sc-360-v2/storefront-cms-library 0.3.46 → 0.3.48

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 (30) hide show
  1. package/dist/add-products-tab copy.scss +1131 -0
  2. package/dist/allocationDetails.scss +2020 -479
  3. package/dist/allocations.scss +984 -166
  4. package/dist/builder.js +1 -1
  5. package/dist/button.scss +2 -8
  6. package/dist/buy-for-tab.scss +3 -1
  7. package/dist/cartAttributes.scss +705 -344
  8. package/dist/cartDropdownOverlay.scss +0 -1
  9. package/dist/checkout.scss +131 -6
  10. package/dist/confirmationModal.scss +1 -0
  11. package/dist/customization-tree.scss +42 -26
  12. package/dist/gallery-slider-temp.scss +85 -83
  13. package/dist/image-temp.scss +2 -1
  14. package/dist/language-selector.scss +3 -1
  15. package/dist/modal.scss +2 -1
  16. package/dist/prefix-list.scss +1 -1
  17. package/dist/product-image.scss +93 -84
  18. package/dist/profile.scss +84 -21
  19. package/dist/quota-details.scss +265 -0
  20. package/dist/shipping-payments.scss +1733 -0
  21. package/dist/theme-classes.scss +296 -0
  22. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +32 -1
  23. package/dist/types/builder/tools/element-edit/allocationDetails.d.ts +2 -1
  24. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +4 -0
  25. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +79 -0
  26. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +0 -8
  27. package/dist/types/builder/tools/element-edit/profile.d.ts +17 -1
  28. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +1012 -14
  29. package/dist/widget.scss +2 -2
  30. package/package.json +1 -1
package/dist/allocations.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
5
6
  $resizeActive: '[data-cms-element-resizer="true"]';
@@ -25,6 +26,279 @@ $resizeActive: '[data-cms-element-resizer="true"]';
25
26
  }
26
27
  }
27
28
 
29
+ .loading__container {
30
+ width: 100%;
31
+ height: 25vh;
32
+ display: flex;
33
+ align-items: center;
34
+ justify-content: center;
35
+ }
36
+
37
+ .allocations__element {
38
+ background-color: var(
39
+ --_ctm-mob-dn-wt-se-bd-cr,
40
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
41
+ );
42
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
43
+ display: flex;
44
+ flex-direction: column;
45
+ --_sf-gp: var(
46
+ --_ctm-mob-lt-im-sg,
47
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
48
+ );
49
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
50
+ row-gap: var(--_sf-gp);
51
+ width: 100%;
52
+ // height: 100%;
53
+ border-color: var(
54
+ --_ctm-mob-dn-wt-se-br-cr,
55
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
56
+ );
57
+ border-style: var(
58
+ --_ctm-mob-dn-wt-se-br-se,
59
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
60
+ );
61
+ border-width: var(
62
+ --_ctm-mob-dn-wt-se-br-wh,
63
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
64
+ );
65
+ border-radius: var(
66
+ --_ctm-mob-dn-wt-se-br-rs,
67
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
68
+ );
69
+ box-shadow: var(
70
+ --_show-shadow,
71
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
72
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
73
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
74
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
75
+ );
76
+
77
+ &[data-divider-show="true"] {
78
+ --_sf-dvdr: var(
79
+ --_ctm-mob-dn-dr-dr-wh,
80
+ var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
81
+ )
82
+ var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
83
+ var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
84
+ --_sf-dvdr-gap: var(--_sf-gp);
85
+ }
86
+ &[data-icon-position="Left"] {
87
+ --_sf-fd: row-reverse;
88
+ --_sf-jc: flex-end;
89
+ }
90
+ &[data-show-icon="false"] {
91
+ --_sf-show-icon-ff: none;
92
+ }
93
+ &[data-divider-show="true"] {
94
+ // .accordion-item:not(:last-child) {
95
+ // border-bottom: var(
96
+ // --_ctm-mob-dn-dr-dr-wh,
97
+ // var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
98
+ // )
99
+ // var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
100
+ // var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
101
+ // }
102
+ }
103
+
104
+ .btn__with__text {
105
+ &[data-show-shadow="false"] {
106
+ --_show-shadow: none;
107
+ }
108
+ &[data-icon-position="left"] {
109
+ --_sf-fd-bn: row;
110
+ }
111
+ &[data-icon-position="right"] {
112
+ --_sf-fd-bn: row-reverse;
113
+ }
114
+ &[data-icon-position="center"] {
115
+ --_sf-fd-bn: row;
116
+ }
117
+
118
+ &:hover {
119
+ --_sf-hr-bd-cr: var(
120
+ --_ctm-mob-dn-me-hr-se-bd-cr,
121
+ var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr))
122
+ );
123
+ --_sf-hr-br-cr: var(
124
+ --_ctm-mob-dn-rm-bn-hr-se-br-cr,
125
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr))
126
+ );
127
+ --_sf-hr-br-se: var(
128
+ --_ctm-mob-dn-rm-bn-hr-se-br-se,
129
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se))
130
+ );
131
+ --_sf-hr-br-wh: var(
132
+ --_ctm-mob-dn-rm-bn-hr-se-br-wh,
133
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh))
134
+ );
135
+ --_sf-hr-br-rs: var(
136
+ --_ctm-mob-dn-rm-bn-hr-se-br-rs,
137
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs))
138
+ );
139
+ --_sf-hr-at: var(
140
+ --_ctm-mob-dn-rm-bn-hr-se-at,
141
+ var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at))
142
+ );
143
+ --_sf-hr-in-ad-tt-sg: var(
144
+ --_ctm-mob-dn-rm-bn-hr-se-in-ad-tt-sg,
145
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-ad-tt-sg, var(--_ctm-dn-rm-bn-hr-se-in-ad-tt-sg))
146
+ );
147
+
148
+ // for shadow
149
+ --_sf-hr-sw-ae: var(
150
+ --_ctm-mob-dn-rm-bn-hr-se-sw-ae,
151
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae))
152
+ );
153
+ --_sf-hr-sw-br: var(
154
+ --_ctm-mob-dn-rm-bn-hr-se-sw-br,
155
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br))
156
+ );
157
+ --_sf-hr-sw-hr: var(
158
+ --_ctm-mob-dn-rm-bn-hr-se-sw-hr,
159
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr))
160
+ );
161
+ --_sf-hr-sw-cr: var(
162
+ --_ctm-mob-dn-rm-bn-hr-se-sw-cr,
163
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr))
164
+ );
165
+
166
+ // for font
167
+
168
+ --_sf-hr-cr: var(
169
+ --_ctm-mob-dn-rm-bn-hr-se-cr,
170
+ var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr))
171
+ );
172
+ --_sf-hr-ft-fy: var(
173
+ --_ctm-mob-dn-rm-bn-hr-se-ft-fy,
174
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy))
175
+ );
176
+ --_sf-hr-ft-se: var(
177
+ --_ctm-mob-dn-rm-bn-hr-se-ft-se,
178
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se))
179
+ );
180
+ --_sf-hr-ft-wt: var(
181
+ --_ctm-mob-dn-rm-bn-hr-se-ft-wt,
182
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt))
183
+ );
184
+ --_sf-hr-ft-se-ic: var(
185
+ --_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
186
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic))
187
+ );
188
+ --_sf-hr-tt-an: var(
189
+ --_ctm-mob-dn-rm-bn-hr-se-tt-an,
190
+ var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an))
191
+ );
192
+ --_sf-hr-lr-sg: var(
193
+ --_ctm-mob-dn-rm-bn-hr-se-lr-sg,
194
+ var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg))
195
+ );
196
+ --_sf-hr-le-ht: var(
197
+ --_ctm-mob-dn-rm-bn-hr-se-le-ht,
198
+ var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht))
199
+ );
200
+
201
+ --_sf-hr-in-se: var(
202
+ --_ctm-mob-dn-rm-bn-hr-se-in-se,
203
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
204
+ );
205
+ --_sf-hr-in-se: var(
206
+ --_ctm-mob-dn-rm-bn-hr-se-in-se,
207
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
208
+ );
209
+ --_sf-hr-in-c1: var(
210
+ --_ctm-mob-dn-rm-bn-hr-se-in-c1,
211
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1))
212
+ );
213
+ --_sf-hr-ue: var(
214
+ --_ctm-mob-dn-rm-bn-hr-ue,
215
+ var(--_ctm-tab-dn-rm-bn-hr-ue, var(--_ctm-dn-rm-bn-hr-ue))
216
+ );
217
+
218
+ // for pading and width
219
+ --_sf-hr-pg: var(
220
+ --_ctm-mob-dn-rm-bn-hr-pg,
221
+ var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg))
222
+ );
223
+ --_sf-hr-wh: var(
224
+ --_ctm-mob-dn-rm-bn-hr-wh,
225
+ var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh))
226
+ );
227
+
228
+ &[data-hover-show-shadow="false"] {
229
+ --_hover-show-shadow: none;
230
+ }
231
+ &[data-hover-show-icon="false"] {
232
+ --_hover-show-icon: none;
233
+ }
234
+ }
235
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-bd-cr));
236
+
237
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-pg));
238
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wh));
239
+ display: flex;
240
+ flex-direction: var(--_sf-fd-bn);
241
+ align-items: center;
242
+
243
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-at));
244
+ gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-ad-tt-sg));
245
+
246
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-rs));
247
+
248
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-ae))
249
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-br))
250
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-sd))
251
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-cr));
252
+
253
+ &[data-show-border="true"] {
254
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-cr));
255
+
256
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-se));
257
+
258
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-wh));
259
+ }
260
+
261
+ .txt {
262
+ display: flex;
263
+
264
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-cr));
265
+
266
+ font-family:
267
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-fy)), sans-serif;
268
+
269
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se));
270
+
271
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-wt));
272
+
273
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se-ic));
274
+
275
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-tt-an));
276
+
277
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-lr-sg));
278
+
279
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-le-ht));
280
+
281
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
282
+ }
283
+
284
+ .icon {
285
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
286
+ svg {
287
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
288
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
289
+
290
+ path {
291
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-c1));
292
+ }
293
+ }
294
+ }
295
+ [data-element-style="Text"] {
296
+ display: inline-block;
297
+ width: 100%;
298
+ }
299
+ }
300
+ }
301
+
28
302
  .allocations_table_wrapper {
29
303
  display: flex;
30
304
  flex-direction: column;
@@ -32,126 +306,665 @@ $resizeActive: '[data-cms-element-resizer="true"]';
32
306
  align-items: center;
33
307
  overflow-x: auto;
34
308
 
35
- .allocations_table {
309
+ .table__common_parent {
310
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
36
311
  width: 100%;
37
- border: 1px solid var(--_gray-200);
38
- border-collapse: collapse;
39
- .quota-name {
40
- display: -webkit-box;
41
- -webkit-line-clamp: 1;
42
- -webkit-box-orient: vertical;
43
- overflow: hidden;
44
- max-width: 220px;
45
- min-width: 110px;
312
+
313
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
314
+ // --_aspect-ratio: calc(
315
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
316
+ // );
317
+
318
+ .pagination:hover {
319
+ --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
46
320
  }
47
- caption {
48
- color: var(--_gray-600);
49
- font-size: 14px;
50
- font-weight: 600;
51
- line-height: 20px;
52
- padding: 16px 24px;
53
- text-align: left;
54
- background: var(--_gray-25);
55
- }
56
- .est__dropdown__main {
57
- position: relative;
58
- min-width: 200px;
59
321
 
60
- label {
61
- font-size: 14px;
62
- color: var(--_gray-700);
63
- margin-bottom: 8px;
64
- display: block;
322
+ .pagination .active:hover {
323
+ cursor: pointer;
324
+ --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
325
+ --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
326
+ --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
327
+ --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
328
+ --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
329
+ --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
330
+ --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
331
+ --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
332
+ --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
333
+ }
334
+ &[data-widget-shadow="false"] {
335
+ .table__wrapper {
336
+ --_show-shadow: none;
337
+ }
338
+ }
339
+ &[data-widget-border="true"] {
340
+ .table__wrapper {
341
+ border-color: var(
342
+ --_ctm-mob-dn-te-wt-br-cr,
343
+ var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
344
+ );
345
+ border-style: var(
346
+ --_ctm-mob-dn-te-wt-br-se,
347
+ var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
348
+ );
349
+ border-width: var(
350
+ --_ctm-mob-dn-te-wt-br-wh,
351
+ var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
352
+ );
353
+ }
354
+ }
355
+ &[data-table-shadow="false"] {
356
+ .table__container {
357
+ --_show-table-shadow: none;
358
+ }
359
+ }
360
+ &[data-table-border="true"] {
361
+ .table__container {
362
+ border-color: var(
363
+ --_ctm-mob-dn-te-br-cr,
364
+ var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
365
+ );
366
+ border-style: var(
367
+ --_ctm-mob-dn-te-br-se,
368
+ var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
369
+ );
370
+ border-width: var(
371
+ --_ctm-mob-dn-te-br-wh,
372
+ var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
373
+ );
374
+ }
375
+ }
376
+ &[data-loadmore-button-shadow="true"] {
377
+ .load__more {
378
+ box-shadow: var(
379
+ --_ctm-mob-dn-ld-me-bn-sw-ae,
380
+ var(--_ctm-tab-dn-ld-me-bn-sw-ae, var(--_ctm-dn-ld-me-bn-sw-ae))
381
+ )
382
+ var(
383
+ --_ctm-mob-dn-ld-me-bn-sw-br,
384
+ var(--_ctm-tab-dn-ld-me-bn-sw-br, var(--_ctm-dn-ld-me-bn-sw-br))
385
+ )
386
+ var(
387
+ --_ctm-mob-ld-me-bn-sw-sd,
388
+ var(--_ctm-tab-dn-ld-me-bn-sw-sd, var(--_ctm-dn-ld-me-bn-sw-sd))
389
+ )
390
+ var(
391
+ --_ctm-mob-dn-ld-me-bn-sw-cr,
392
+ var(--_ctm-tab-dn-ld-me-bn-sw-cr, var(--_ctm-dn-ld-me-bn-sw-cr))
393
+ );
394
+ }
395
+ }
396
+ &[data-loadmore-button-border="true"] {
397
+ .load__more {
398
+ border-color: var(
399
+ --_sf-hr-br-cr,
400
+ var(
401
+ --_ctm-mob-dn-ld-me-bn-br-cr,
402
+ var(--_ctm-tab-dn-ld-me-bn-br-cr, var(--_ctm-dn-ld-me-bn-br-cr))
403
+ )
404
+ );
405
+ border-style: var(
406
+ --_sf-hr-br-st,
407
+ var(
408
+ --_ctm-mob-dn-ld-me-bn-br-se,
409
+ var(--_ctm-tab-dn-ld-me-bn-br-se, var(--_ctm-dn-ld-me-bn-br-se))
410
+ )
411
+ );
412
+ border-width: var(
413
+ --_sf-hr-br-wh,
414
+ var(
415
+ --_ctm-mob-dn-ld-me-bn-br-wh,
416
+ var(--_ctm-tab-dn-ld-me-bn-br-wh, var(--_ctm-dn-ld-me-bn-br-wh))
417
+ )
418
+ );
419
+ }
420
+ }
421
+ &[data-header-divider="true"] {
422
+ thead tr th {
423
+ border-bottom: 1px solid
424
+ var(
425
+ --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
426
+ var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
427
+ );
428
+ }
429
+ }
430
+ &[data-row-divider="true"] {
431
+ tbody tr td {
432
+ border-bottom: 1px solid
433
+ var(
434
+ --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
435
+ var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
436
+ );
437
+ }
438
+ }
439
+ &[data-column-divider="true"] {
440
+ tbody tr td,
441
+ thead tr th {
442
+ border-right: 1px solid
443
+ var(
444
+ --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
445
+ var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
446
+ );
65
447
  }
66
448
 
67
- .est__dropdown {
68
- position: relative;
69
- .est__dropdown__button {
70
- display: flex;
71
- align-items: center;
72
- width: 100%;
73
- .value__selected {
74
- width: 100%;
75
- border: none;
76
- background-color: transparent;
77
- }
449
+ tbody tr td:last-child,
450
+ thead tr th:last-child {
451
+ border-right: none;
452
+ }
453
+ }
454
+ &[data-show-more-rows="onScroll"] {
455
+ .table__container {
456
+ overflow-y: auto;
457
+
458
+ &::-webkit-scrollbar {
459
+ width: var(
460
+ --_ctm-mob-dn-sl-br-sl-br-wh,
461
+ var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
462
+ );
78
463
  }
79
464
 
80
- &.open .list {
81
- display: flex;
82
- margin-left: 10px;
465
+ &::-webkit-scrollbar-track {
466
+ background-color: var(--_base-white);
83
467
  }
84
468
 
85
- .list {
86
- display: none;
87
- flex-direction: column;
88
- border: 1px solid var(--_gray-200);
89
- border-radius: 6px;
90
- position: absolute;
91
- top: 100%;
92
- left: 0;
93
- width: 100%;
94
- background-color: #fff;
95
- border-radius: 4px;
96
- z-index: var(--_higher-zIndex);
97
- max-height: 200px;
98
- overflow-y: auto;
99
-
100
- &.top {
101
- bottom: 100%;
102
- top: auto;
469
+ &::-webkit-scrollbar-thumb {
470
+ background-color: var(
471
+ --_ctm-mob-dn-sl-br-sl-br-cr,
472
+ var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
473
+ );
474
+ }
475
+
476
+ // // Scrollbar thumb when hovered
477
+ // &::-webkit-scrollbar-thumb:hover {
478
+ // background-color: #555; // Darker color when hovering over the thumb
479
+ // }
480
+
481
+ // // For Firefox, using scrollbar-width and scrollbar-color
482
+ // scrollbar-width: thin; // Thin scrollbar
483
+ // scrollbar-color: #888 #f1f1f1; // Thumb and track colors
484
+ }
485
+ }
486
+
487
+ &[data-alternative-row-colors="true"] {
488
+ tbody .tbody__row__divider:nth-child(odd) {
489
+ background-color: #f76b6b;
490
+ }
491
+ }
492
+
493
+ .table__wrapper {
494
+ padding: var(
495
+ --_ctm-mob-lt-pg,
496
+ var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
497
+ );
498
+
499
+ background-color: var(
500
+ --_ctm-mob-dn-te-wt-bd-cr,
501
+ var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
502
+ );
503
+
504
+ border-radius: var(
505
+ --_ctm-mob-dn-te-wt-br-rs,
506
+ var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
507
+ );
508
+
509
+ box-shadow: var(
510
+ --_show-shadow,
511
+ var(
512
+ --_ctm-mob-dn-te-wt-sw-ae,
513
+ var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
514
+ )
515
+ var(
516
+ --_ctm-mob-dn-te-wt-sw-br,
517
+ var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
518
+ )
519
+ var(
520
+ --_ctm-mob-dn-te-wt-sw-sd,
521
+ var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
522
+ )
523
+ var(
524
+ --_ctm-mob-dn-te-wt-sw-cr,
525
+ var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
526
+ )
527
+ );
528
+
529
+ width: 100%;
530
+
531
+ .table__container {
532
+ background-color: var(
533
+ --_ctm-mob-dn-te-bd-cr,
534
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
535
+ );
536
+
537
+ border-radius: var(
538
+ --_ctm-mob-dn-te-br-rs,
539
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
540
+ );
541
+
542
+ box-shadow: var(
543
+ --_show-table-shadow,
544
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
545
+ var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
546
+ var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
547
+ var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
548
+ );
549
+ }
550
+
551
+ h3 {
552
+ text-align: center;
553
+ width: 100%;
554
+ margin-bottom: 10px;
555
+ }
556
+ table {
557
+ border-collapse: collapse;
558
+ // border: none;
559
+ width: 100%;
560
+ // height: 100%;
561
+ text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
562
+
563
+ th,
564
+ td {
565
+ border: none;
566
+ }
567
+ thead {
568
+ background-color: var(
569
+ --_ctm-mob-dn-te-hr-bd-cr,
570
+ var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
571
+ );
572
+
573
+ .thead__row__divider {
574
+ height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
575
+
576
+ .th__col__divider {
577
+ padding: var(
578
+ --_ctm-mob-lt-hr-cl-pg,
579
+ var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
580
+ );
581
+
582
+ color: var(
583
+ --_ctm-mob-dn-hr-tt-cr,
584
+ var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
585
+ );
586
+
587
+ font-family:
588
+ var(
589
+ --_ctm-mob-dn-hr-tt-ft-fy,
590
+ var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
591
+ ),
592
+ sans-serif;
593
+
594
+ font-size: var(
595
+ --_ctm-mob-dn-hr-tt-ft-se,
596
+ var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
597
+ );
598
+
599
+ font-weight: var(
600
+ --_ctm-mob-dn-hr-tt-ft-wt,
601
+ var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
602
+ );
603
+
604
+ text-decoration: var(
605
+ --_ctm-mob-dn-hr-tt-ue,
606
+ var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
607
+ );
608
+
609
+ font-style: var(
610
+ --_ctm-mob-dn-hr-tt-ft-se-ic,
611
+ var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
612
+ );
613
+
614
+ text-align: var(
615
+ --_ctm-mob-dn-hr-tt-tt-an,
616
+ var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
617
+ );
618
+
619
+ letter-spacing: var(
620
+ --_ctm-mob-dn-hr-tt-lr-sg,
621
+ var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
622
+ );
623
+
624
+ line-height: var(
625
+ --_ctm-mob-dn-hr-tt-le-ht,
626
+ var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
627
+ );
628
+ }
629
+ }
630
+ }
631
+ tbody {
632
+ .tbody__row__divider {
633
+ background-color: var(
634
+ --_ctm-mob-dn-te-rw-bd-cr,
635
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
636
+ );
637
+
638
+ height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
639
+
640
+ .td__col__divider {
641
+ padding: var(
642
+ --_ctm-mob-lt-rw-cl-pg,
643
+ var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
644
+ );
645
+
646
+ color: var(
647
+ --_sf-hr-fc,
648
+ var(
649
+ --_ctm-mob-dn-rw-tt-cr,
650
+ var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
651
+ )
652
+ );
653
+
654
+ font-family:
655
+ var(
656
+ --_sf-hr-ff,
657
+ var(
658
+ --_ctm-mob-dn-rw-tt-ft-fy,
659
+ var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
660
+ )
661
+ ),
662
+ sans-serif;
663
+
664
+ font-size: var(
665
+ --_sf-hr-fs,
666
+ var(
667
+ --_ctm-mob-dn-rw-tt-ft-se,
668
+ var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
669
+ )
670
+ );
671
+
672
+ text-decoration: var(
673
+ --_ctm-mob-dn-rw-tt-ue,
674
+ var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
675
+ );
676
+
677
+ font-weight: var(
678
+ --_sf-hr-fw,
679
+ var(
680
+ --_ctm-mob-dn-rw-tt-ft-wt,
681
+ var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
682
+ )
683
+ );
684
+
685
+ font-style: var(
686
+ --_sf-hr-ft,
687
+ var(
688
+ --_ctm-mob-dn-rw-tt-ft-se-ic,
689
+ var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
690
+ )
691
+ );
692
+
693
+ text-align: var(
694
+ --_sf-hr-ta,
695
+ var(
696
+ --_ctm-mob-dn-rw-tt-tt-an,
697
+ var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
698
+ )
699
+ );
700
+
701
+ letter-spacing: var(
702
+ --_sf-hr-ls,
703
+ var(
704
+ --_ctm-mob-dn-rw-tt-lr-sg,
705
+ var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
706
+ )
707
+ );
708
+
709
+ line-height: var(
710
+ --_sf-hr-lh,
711
+ var(
712
+ --_ctm-mob-dn-rw-tt-le-ht,
713
+ var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
714
+ )
715
+ );
716
+ }
103
717
  }
718
+ }
719
+ }
720
+
721
+ .pagination {
722
+ display: var(--_d-flex);
723
+ align-items: var(--_align-center);
724
+ justify-content: var(
725
+ --_ctm-mob-lt-pn-at,
726
+ var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
727
+ );
728
+ margin-top: 10px;
729
+ background-color: var(
730
+ --_sf-bd-cr,
731
+ var(
732
+ --_ctm-mob-dn-pn-dt-se-bd-cr,
733
+ var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
734
+ )
735
+ );
736
+ &.pagination__center {
737
+ justify-content: var(justify-center);
738
+ }
104
739
 
105
- .list__option {
106
- padding: 12px;
107
- cursor: pointer;
108
- background-color: var(--_base-white);
109
- text-align: left;
110
- &.selected {
111
- background-color: var(--_primary-25);
112
- color: var(--_primary-400);
740
+ button {
741
+ svg {
742
+ width: var(--_width-18);
743
+ height: var(--_height-18);
744
+ path {
745
+ stroke: var(--_gray-500);
746
+ // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
113
747
  }
114
- &:hover {
115
- background-color: var(--_primary-25);
116
- color: var(--_primary-400);
748
+ }
749
+ }
750
+ span {
751
+ float: left;
752
+ padding: var(--_pd-8) var(--_pd-16);
753
+ text-decoration: none;
754
+ span {
755
+ // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
756
+ // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
757
+ // font-family: var(--_sf-hr-ff, var(--_ctm-dn-pn-ft-fy, var(--_tst-dn-pn-ft-fy))),
758
+ // sans-serif;
759
+ // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-pn-ft-wt, var(--_tst-dn-pn-ft-wt)));
760
+ // font-style: var(--_sf-hr-ft, var(--_ctm-dn-pn-ft-se-ic, var(--_tst-dn-pn-ft-se-ic)));
761
+ // text-align: var(--_sf-hr-ta, var(--_ctm-dn-pn-tt-an, var(--_tst-dn-pn-tt-an)));
762
+ // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
763
+ // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
764
+ }
765
+ &.active:hover {
766
+ &hover {
767
+ --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
768
+ --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
769
+ --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
770
+ --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
771
+ --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
772
+ --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
773
+ --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
774
+ --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
117
775
  }
118
776
  }
777
+ &.active {
778
+ color: var(
779
+ --_sf-hr-fc,
780
+ var(
781
+ --_ctm-mob-dn-pn-dt-se-cr,
782
+ var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
783
+ )
784
+ );
785
+
786
+ font-family:
787
+ var(
788
+ --_sf-hr-ff,
789
+ var(
790
+ --_ctm-mob-dn-pn-dt-se-ft-fy,
791
+ var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
792
+ )
793
+ ),
794
+ sans-serif;
795
+
796
+ font-size: var(
797
+ --_sf-hr-fs,
798
+ var(
799
+ --_ctm-mob-dn-pn-dt-se-ft-se,
800
+ var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
801
+ )
802
+ );
803
+
804
+ text-decoration: var(
805
+ --_sf-hr-td,
806
+ var(
807
+ --_ctm-mob-dn-pn-dt-se-ue,
808
+ var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
809
+ )
810
+ );
811
+
812
+ font-weight: var(
813
+ --_sf-hr-fw,
814
+ var(
815
+ --_ctm-mob-dn-pn-dt-se-ft-wt,
816
+ var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
817
+ )
818
+ );
819
+
820
+ font-style: var(
821
+ --_sf-hr-ft,
822
+ var(
823
+ --_ctm-mob-dn-pn-dt-se-ft-se-ic,
824
+ var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
825
+ )
826
+ );
827
+
828
+ text-align: var(
829
+ --_sf-hr-ta,
830
+ var(
831
+ --_ctm-mob-dn-pn-dt-se-tt-an,
832
+ var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
833
+ )
834
+ );
835
+
836
+ letter-spacing: var(
837
+ --_sf-hr-ls,
838
+ var(
839
+ --_ctm-mob-dn-pn-dt-se-lr-sg,
840
+ var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
841
+ )
842
+ );
843
+
844
+ line-height: var(
845
+ --_sf-hr-lh,
846
+ var(
847
+ --_ctm-mob-dn-pn-dt-se-le-ht,
848
+ var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
849
+ )
850
+ );
851
+ }
852
+ }
853
+ .pagination__arrows {
854
+ color: var(
855
+ --_sf-hr-fc,
856
+ var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
857
+ );
858
+
859
+ font-size: var(
860
+ --_sf-hr-fs,
861
+ var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
862
+ );
119
863
  }
120
864
  }
121
- }
122
- th {
123
- height: 44px;
124
- padding: 4px 24px;
125
- gap: 12px;
126
- border-right: 1px solid var(--_gray-200);
127
- border-bottom: 1px solid var(--_gray-200);
128
- background: var(--_gray-25);
129
- color: var(--_gray-600,);
130
- font-size: 11px;
131
- font-weight: 600;
132
- line-height: 18px;
133
- &:first-child {
134
- padding-left: 0px;
135
- padding-right: 8px;
136
- }
137
- }
138
-
139
- tbody {
140
- td {
141
- height: 67px;
142
- background-color: #fff;
143
- padding: var(--_ctm-lt-sg-bn-is, 16px 16px 16px 24px);
144
- border-bottom: 1px solid var(--_gray-200);
145
- color: var(--_gray-900);
146
- font-size: 14px;
147
- font-weight: 400;
148
- line-height: 20px;
149
- &:not(:first-child) {
150
- text-align: center;
865
+
866
+ .load__more {
867
+ margin: 10px;
868
+ background-color: var(
869
+ --_sf-hr-bd-cr,
870
+ var(
871
+ --_ctm-mob-dn-ld-me-bn-bd-cr,
872
+ var(--_ctm-tab-dn-ld-me-bn-bd-cr, var(--_ctm-dn-ld-me-bn-bd-cr))
873
+ )
874
+ );
875
+ border-radius: var(
876
+ --_sf-hr-br-br,
877
+ var(
878
+ --_ctm-mob-dn-ld-me-bn-br-rs,
879
+ var(--_ctm-tab-dn-ld-me-bn-br-rs, var(--_ctm-dn-ld-me-bn-br-rs))
880
+ )
881
+ );
882
+
883
+ h3 {
884
+ color: var(
885
+ --_sf-hr-fc,
886
+ var(
887
+ --_ctm-mob-dn-ld-me-bn-cr,
888
+ var(--_ctm-tab-dn-ld-me-bn-cr, var(--_ctm-dn-ld-me-bn-cr))
889
+ )
890
+ );
891
+ font-family:
892
+ var(
893
+ --_sf-hr-ff,
894
+ var(
895
+ --_ctm-mob-dn-ld-me-bn-ft-fy,
896
+ var(--_ctm-tab-dn-ld-me-bn-ft-fy, var(--_ctm-dn-ld-me-bn-ft-fy))
897
+ )
898
+ ),
899
+ sans-serif;
900
+ font-size: var(
901
+ --_sf-hr-fs,
902
+ var(
903
+ --_ctm-mob-dn-ld-me-bn-ft-se,
904
+ var(--_ctm-tab-dn-ld-me-bn-ft-se, var(--_ctm-dn-ld-me-bn-ft-se))
905
+ )
906
+ );
907
+
908
+ text-decoration: var(
909
+ --_ctm-mob-dn-ld-me-bn-ue,
910
+ var(--_ctm-tab-dn-ld-me-bn-ue, var(--_ctm-dn-ld-me-bn-ue))
911
+ );
912
+
913
+ font-weight: var(
914
+ --_sf-hr-fw,
915
+ var(
916
+ --_ctm-mob-dn-ld-me-bn-ft-wt,
917
+ var(--_ctm-tab-dn-ld-me-bn-ft-wt, var(--_ctm-dn-ld-me-bn-ft-wt))
918
+ )
919
+ );
920
+
921
+ font-style: var(
922
+ --_sf-hr-ft,
923
+ var(
924
+ --_ctm-mob-dn-ld-me-bn-ft-se-ic,
925
+ var(--_ctm-tab-dn-ld-me-bn-ft-se-ic, var(--_ctm-dn-ld-me-bn-ft-se-ic))
926
+ )
927
+ );
928
+
929
+ text-align: var(
930
+ --_sf-hr-ta,
931
+ var(
932
+ --_ctm-mob-dn-ld-me-bn-tt-an,
933
+ var(--_ctm-tab-dn-ld-me-bn-tt-an, var(--_ctm-dn-ld-me-bn-tt-an))
934
+ )
935
+ );
936
+
937
+ letter-spacing: var(
938
+ --_sf-hr-ls,
939
+ var(
940
+ --_ctm-mob-dn-ld-me-bn-lr-sg,
941
+ var(--_ctm-tab-dn-ld-me-bn-lr-sg, var(--_ctm-dn-ld-me-bn-lr-sg))
942
+ )
943
+ );
944
+
945
+ line-height: var(
946
+ --_sf-hr-lh,
947
+ var(
948
+ --_ctm-mob-dn-ld-me-bn-le-ht,
949
+ var(--_ctm-tab-dn-ld-me-bn-le-ht, var(--_ctm-dn-ld-me-bn-le-ht))
950
+ )
951
+ );
151
952
  }
953
+ // background-color: var(--_primary-400);
954
+ // border: 1px solid var(--_primary-400);
955
+ // border-radius: var(--_br-6);
956
+ // padding: var(--_pd-8) var(--_pd-12);
957
+ // color: var(---base-whiet);
958
+ // display: inline-block;
959
+ // color: var(--_base-white);
960
+ // margin: 0 auto;
961
+ // width: 150px;
962
+ // text-align: center;
963
+ // margin-top: 20px;
152
964
  }
153
965
  }
154
966
  }
967
+
155
968
  .no__data__found {
156
969
  color: var(--_gray-600);
157
970
  font-size: 14px;
@@ -159,7 +972,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
159
972
  line-height: 20px;
160
973
  padding: 16px 24px;
161
974
  text-align: center;
162
- background: var(--_gray-25);
163
975
  }
164
976
 
165
977
  .note_wrapper {
@@ -170,7 +982,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
170
982
  justify-content: center;
171
983
  align-items: center;
172
984
  gap: 8px;
173
- background: var(--_gray-50);
985
+
174
986
  min-height: 76px;
175
987
 
176
988
  .note {
@@ -195,6 +1007,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
195
1007
  font-weight: 600;
196
1008
  line-height: 20px;
197
1009
 
1010
+ &[data-has-link="true"] {
1011
+ cursor: pointer;
1012
+ }
1013
+
198
1014
  &:hover {
199
1015
  color: #53389e;
200
1016
  }
@@ -244,70 +1060,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
244
1060
  align-items: center;
245
1061
  display: flex;
246
1062
  }
247
- .est__dropdown__main {
248
- position: relative;
249
- min-width: 150px;
250
-
251
- label {
252
- font-size: 14px;
253
- color: var(--_gray-700);
254
- margin-bottom: 8px;
255
- display: block;
256
- }
257
-
258
- .est__dropdown {
259
- position: relative;
260
- .est__dropdown__button {
261
- display: flex;
262
- align-items: center;
263
- width: 100%;
264
- .value__selected {
265
- width: 100%;
266
- border: none;
267
- background-color: transparent;
268
- }
269
- }
270
-
271
- &.open .list {
272
- display: flex;
273
- }
274
-
275
- .list {
276
- display: none;
277
- flex-direction: column;
278
- border: 1px solid var(--_gray-200);
279
- border-radius: 6px;
280
- position: absolute;
281
- top: 100%;
282
- left: 0;
283
- width: 100%;
284
- background-color: #fff;
285
- border-radius: 4px;
286
- z-index: var(--_higher-zIndex);
287
- max-height: 200px;
288
- overflow-y: auto;
289
-
290
- &.top {
291
- bottom: 100%;
292
- top: auto;
293
- }
294
-
295
- .list__option {
296
- padding: 12px;
297
- cursor: pointer;
298
- text-align: left;
299
- &.selected {
300
- background-color: var(--_primary-25);
301
- color: var(--_primary-400);
302
- }
303
- &:hover {
304
- background-color: var(--_primary-25);
305
- color: var(--_primary-400);
306
- }
307
- }
308
- }
309
- }
310
- }
311
1063
  }
312
1064
  .redeem_now_wrapper {
313
1065
  .redeem_now_btn {
@@ -383,7 +1135,73 @@ $resizeActive: '[data-cms-element-resizer="true"]';
383
1135
  }
384
1136
  }
385
1137
  }
1138
+ .est__dropdown__main {
1139
+ position: relative;
1140
+ min-width: 150px;
386
1141
 
1142
+ label {
1143
+ font-size: 14px;
1144
+ color: var(--_gray-700);
1145
+ margin-bottom: 8px;
1146
+ display: block;
1147
+ }
1148
+
1149
+ .est__dropdown {
1150
+ position: relative;
1151
+ .est__dropdown__button {
1152
+ display: flex;
1153
+ align-items: center;
1154
+ width: 100%;
1155
+ border: 1px solid var(--_gray-200);
1156
+ border-radius: 6px;
1157
+
1158
+ .value__selected {
1159
+ width: 100%;
1160
+ border: none;
1161
+ background-color: transparent;
1162
+ }
1163
+ }
1164
+
1165
+ &.open .list {
1166
+ display: flex;
1167
+ }
1168
+
1169
+ .list {
1170
+ display: none;
1171
+ flex-direction: column;
1172
+ border: 1px solid var(--_gray-200);
1173
+ border-radius: 6px;
1174
+ position: absolute;
1175
+ top: 100%;
1176
+ left: 0;
1177
+ width: 100%;
1178
+ background-color: #fff;
1179
+ border-radius: 4px;
1180
+ z-index: var(--_higher-zIndex);
1181
+ max-height: 200px;
1182
+ overflow-y: auto;
1183
+
1184
+ &.top {
1185
+ bottom: 100%;
1186
+ top: auto;
1187
+ }
1188
+
1189
+ .list__option {
1190
+ padding: 12px;
1191
+ cursor: pointer;
1192
+ text-align: left;
1193
+ &.selected {
1194
+ background-color: var(--_primary-25);
1195
+ color: var(--_primary-400);
1196
+ }
1197
+ &:hover {
1198
+ background-color: var(--_primary-25);
1199
+ color: var(--_primary-400);
1200
+ }
1201
+ }
1202
+ }
1203
+ }
1204
+ }
387
1205
  .embla {
388
1206
  width: 100%;
389
1207
  height: 100%;