@sc-360-v2/storefront-cms-library 0.2.99 → 0.3.0

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 (24) hide show
  1. package/dist/amount-estimator.scss +226 -291
  2. package/dist/builder.js +1 -1
  3. package/dist/cartDropdownOverlay.scss +13 -0
  4. package/dist/faq.scss +24 -20
  5. package/dist/icon-list.scss +16 -15
  6. package/dist/map.scss +35 -35
  7. package/dist/pickup-locations.scss +19 -22
  8. package/dist/product-options.scss +76 -118
  9. package/dist/quick-links.scss +143 -186
  10. package/dist/quotes.scss +0 -1
  11. package/dist/repeater-item.scss +0 -1
  12. package/dist/section.scss +78 -29
  13. package/dist/stack.scss +61 -16
  14. package/dist/store-locations.scss +20 -21
  15. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +1 -94
  16. package/dist/uom-selector.scss +1428 -941
  17. package/dist/variant-picker.scss +68 -416
  18. package/dist/volume-pricing.scss +606 -1007
  19. package/dist/widget.scss +0 -2
  20. package/package.json +1 -1
  21. package/dist/menu-item.scss +0 -19
  22. package/dist/order-status.scss +0 -483
  23. package/dist/table-common.scss +0 -510
  24. package/dist/volume-pricing copy.scss +0 -1092
package/dist/volume-pricing copy.scss DELETED
@@ -1,1092 +0,0 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- [data-div-type="element"] {
5
- &[data-element-type="volumePricing"] {
6
- // width: var(--_lt-wh);
7
- // height: var(--_lt-ht);
8
- // margin: var(--_lt-mn);
9
- // padding: var(--_lt-pg);
10
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
13
-
14
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
- // height: ;
16
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
17
- // --_aspect-ratio: calc(
18
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
19
- // );
20
-
21
- & > .wrapper {
22
- width: 100%;
23
- // height: 100%;
24
- }
25
- &[data-show-shadow="false"] {
26
- --_show-shadow: none;
27
- }
28
- .text-element {
29
- color: #333;
30
- font-family: Lato;
31
- font-size: 12px;
32
- font-style: normal;
33
- font-weight: 400;
34
- line-height: 18px;
35
- margin-bottom: 6px;
36
- }
37
- .volume__container {
38
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
39
- border: 1px solid rgba(75, 69, 70, 1);
40
- border-radius: 20px;
41
-
42
- .stack {
43
- display: flex;
44
- gap: 10px;
45
- flex-direction: column;
46
- height: 100%;
47
- .static {
48
- color: var(
49
- --_ctm-mob-dn-um-te-se-cr,
50
- var(--_ctm-tab-dn-um-te-se-cr, var(--_ctm-dn-um-te-se-cr))
51
- );
52
- font-family: var(
53
- --_ctm-mob-dn-um-te-se-ft-fy,
54
- var(--_ctm-tab-dn-um-te-se-ft-fy, var(--_ctm-dn-um-te-se-ft-fy))
55
- ),
56
- sans-serif;
57
- font-size: var(
58
- --_ctm-mob-dn-um-te-se-ft-se,
59
- var(--_ctm-tab-dn-um-te-se-ft-se, var(--_ctm-dn-um-te-se-ft-se))
60
- );
61
- font-weight: var(
62
- --_ctm-mob-dn-um-te-se-ft-wt,
63
- var(--_ctm-tab-dn-um-te-se-ft-wt, var(--_ctm-dn-um-te-se-ft-wt))
64
- );
65
- font-style: var(
66
- --_ctm-mob-dn-um-te-se-ft-se-ic,
67
- var(--_ctm-tab-dn-um-te-se-ft-se-ic, var(--_ctm-dn-um-te-se-ft-se-ic))
68
- );
69
- text-align: var(
70
- --_ctm-mob-dn-um-te-se-tt-an,
71
- var(--_ctm-tab-dn-um-te-se-tt-an, var(--_ctm-dn-um-te-se-tt-an))
72
- );
73
- letter-spacing: var(
74
- --_ctm-mob-dn-um-te-se-lr-sg,
75
- var(--_ctm-tab-dn-um-te-se-lr-sg, var(--_ctm-dn-um-te-se-lr-sg))
76
- );
77
- line-height: var(
78
- --_ctm-mob-dn-um-te-se-le-ht,
79
- var(--_ctm-tab-dn-um-te-se-le-ht, var(--_ctm-dn-um-te-se-le-ht))
80
- );
81
- text-decoration: var(
82
- --_ctm-mob-dn-um-te-se-ue,
83
- var(--_ctm-tab-dn-um-te-se-ue, var(--_ctm-dn-um-te-se-ue))
84
- );
85
- }
86
-
87
- .horizontal {
88
- display: flex;
89
- flex-direction: row;
90
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
91
- overflow-y: auto;
92
-
93
- .item {
94
- display: flex;
95
- align-items: center;
96
- justify-content: center;
97
- flex-direction: column;
98
- gap: 4px;
99
- padding: var(
100
- --_ctm-mob-dn-im-se-dt-se-vl-pg,
101
- var(--_ctm-tab-dn-im-se-dt-se-vl-pg, var(--_ctm-dn-im-se-dt-se-vl-pg))
102
- )
103
- var(
104
- --_ctm-mob-dn-im-se-dt-se-hl-pg,
105
- var(--_ctm-tab-dn-im-se-dt-se-hl-pg, var(--_ctm-dn-im-se-dt-se-hl-pg))
106
- );
107
- cursor: pointer;
108
- background-color: var(
109
- --_ctm-mob-dn-im-se-dt-se-bd-cr,
110
- var(--_ctm-tab-dn-im-se-dt-se-bd-cr, var(--_ctm-dn-im-se-dt-se-bd-cr))
111
- );
112
-
113
- border-color: var(
114
- --_show-border-im-se,
115
- var(
116
- --_ctm-mob-dn-im-se-dt-se-br-cr,
117
- var(--_ctm-tab-dn-im-se-dt-se-br-cr, var(--_ctm-dn-im-se-dt-se-br-cr))
118
- )
119
- );
120
- border-style: var(
121
- --_show-border-im-se,
122
- var(
123
- --_ctm-mob-dn-im-se-dt-se-br-se,
124
- var(--_ctm-tab-dn-im-se-dt-se-br-se, var(--_ctm-dn-im-se-dt-se-br-se))
125
- )
126
- );
127
- border-width: var(
128
- --_show-border-im-se,
129
- var(
130
- --_ctm-mob-dn-im-se-dt-se-br-wh,
131
- var(--_ctm-tab-dn-im-se-dt-se-br-wh, var(--_ctm-dn-im-se-dt-se-br-wh))
132
- )
133
- );
134
- border-radius: var(
135
- --_ctm-mob-dn-im-se-dt-se-br-rs,
136
- var(--_ctm-tab-dn-im-se-dt-se-br-rs, var(--_ctm-dn-im-se-dt-se-br-rs))
137
- );
138
-
139
- box-shadow: var(
140
- --_show-shadow-im-se,
141
- var(
142
- --_ctm-mob-dn-im-se-dt-se-sw-ae,
143
- var(--_ctm-tab-dn-im-se-dt-se-sw-ae, var(--_ctm-dn-im-se-dt-se-sw-ae))
144
- )
145
- var(
146
- --_ctm-mob-dn-im-se-dt-se-sw-br,
147
- var(--_ctm-tab-dn-im-se-dt-se-sw-br, var(--_ctm-dn-im-se-dt-se-sw-br))
148
- )
149
- var(
150
- --_ctm-mob-dn-im-se-dt-se-sw-sd,
151
- var(--_ctm-tab-dn-im-se-dt-se-sw-sd, var(--_ctm-dn-im-se-dt-se-sw-sd))
152
- )
153
- var(
154
- --_ctm-mob-dn-im-se-dt-se-sw-cr,
155
- var(--_ctm-tab-dn-im-se-dt-se-sw-cr, var(--_ctm-dn-im-se-dt-se-sw-cr))
156
- )
157
- );
158
-
159
- .each {
160
- color: var(
161
- --_ctm-mob-dn-um-se-cr,
162
- var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
163
- );
164
- font-family: var(
165
- --_ctm-mob-dn-um-se-ft-fy,
166
- var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
167
- ),
168
- sans-serif;
169
- font-size: var(
170
- --_ctm-mob-dn-um-se-ft-se,
171
- var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
172
- );
173
- font-weight: var(
174
- --_ctm-mob-dn-um-se-ft-wt,
175
- var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
176
- );
177
- font-style: var(
178
- --_ctm-mob-dn-um-se-ft-se-ic,
179
- var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
180
- );
181
- text-align: var(
182
- --_ctm-mob-dn-um-se-tt-an,
183
- var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
184
- );
185
- letter-spacing: var(
186
- --_ctm-mob-dn-um-se-lr-sg,
187
- var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
188
- );
189
- line-height: var(
190
- --_ctm-mob-dn-um-se-le-ht,
191
- var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
192
- );
193
- text-decoration: var(
194
- --_ctm-mob-dn-um-se-ue,
195
- var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
196
- );
197
- }
198
-
199
- .price {
200
- color: var(
201
- --_ctm-mob-dn-pt-pe-cr,
202
- var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
203
- );
204
- font-family: var(
205
- --_ctm-mob-dn-pt-pe-ft-fy,
206
- var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
207
- ),
208
- sans-serif;
209
- font-size: var(
210
- --_ctm-mob-dn-pt-pe-ft-se,
211
- var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
212
- );
213
- font-weight: var(
214
- --_ctm-mob-dn-pt-pe-ft-wt,
215
- var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
216
- );
217
- font-style: var(
218
- --_ctm-mob-dn-pt-pe-ft-se-ic,
219
- var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
220
- );
221
- text-align: var(
222
- --_ctm-mob-dn-pt-pe-tt-an,
223
- var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
224
- );
225
- letter-spacing: var(
226
- --_ctm-mob-dn-pt-pe-lr-sg,
227
- var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
228
- );
229
- line-height: var(
230
- --_ctm-mob-dn-pt-pe-le-ht,
231
- var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
232
- );
233
- text-decoration: var(
234
- --_ctm-mob-dn-pt-pe-ue,
235
- var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
236
- );
237
- }
238
-
239
- .off__price {
240
- font-size: 12px;
241
- display: flex;
242
- justify-content: space-around;
243
- gap: 10px;
244
- align-items: center;
245
-
246
- .offer__price {
247
- color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
248
- font-family: var(
249
- --_ctm-mob-dn-ss-ft-fy,
250
- var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
251
- ),
252
- sans-serif;
253
- font-size: var(
254
- --_ctm-mob-dn-ss-ft-se,
255
- var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
256
- );
257
- font-weight: var(
258
- --_ctm-mob-dn-ss-ft-wt,
259
- var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
260
- );
261
- font-style: var(
262
- --_ctm-mob-dn-ss-ft-se-ic,
263
- var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
264
- );
265
- text-align: var(
266
- --_ctm-mob-dn-ss-tt-an,
267
- var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
268
- );
269
- letter-spacing: var(
270
- --_ctm-mob-dn-ss-lr-sg,
271
- var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
272
- );
273
- line-height: var(
274
- --_ctm-mob-dn-ss-le-ht,
275
- var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
276
- );
277
- text-decoration: var(
278
- --_ctm-mob-dn-ss-ue,
279
- var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
280
- );
281
- }
282
-
283
- .discount__price {
284
- color: var(
285
- --_ctm-mob-dn-al-pe-cr,
286
- var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
287
- );
288
- font-family: var(
289
- --_ctm-mob-dn-al-pe-ft-fy,
290
- var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
291
- ),
292
- sans-serif;
293
- font-size: var(
294
- --_ctm-mob-dn-al-pe-ft-se,
295
- var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
296
- );
297
- font-weight: var(
298
- --_ctm-mob-dn-al-pe-ft-wt,
299
- var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
300
- );
301
- font-style: var(
302
- --_ctm-mob-dn-al-pe-ft-se-ic,
303
- var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
304
- );
305
- text-align: var(
306
- --_ctm-mob-dn-al-pe-tt-an,
307
- var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
308
- );
309
- letter-spacing: var(
310
- --_ctm-mob-dn-al-pe-lr-sg,
311
- var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
312
- );
313
- line-height: var(
314
- --_ctm-mob-dn-al-pe-le-ht,
315
- var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
316
- );
317
- text-decoration: var(
318
- --_ctm-mob-dn-al-pe-ue,
319
- var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
320
- );
321
- }
322
- }
323
-
324
- .units {
325
- color: var(
326
- --_ctm-mob-dn-pe-pr-ut-cr,
327
- var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
328
- );
329
- font-family: var(
330
- --_ctm-mob-dn-pe-pr-ut-ft-fy,
331
- var(--_ctm-tab-dn-pe-pr-ut-ft-fy, var(--_ctm-dn-pe-pr-ut-ft-fy))
332
- ),
333
- sans-serif;
334
- font-size: var(
335
- --_ctm-mob-dn-pe-pr-ut-ft-se,
336
- var(--_ctm-tab-dn-pe-pr-ut-ft-se, var(--_ctm-dn-pe-pr-ut-ft-se))
337
- );
338
- font-weight: var(
339
- --_ctm-mob-dn-pe-pr-ut-ft-wt,
340
- var(--_ctm-tab-dn-pe-pr-ut-ft-wt, var(--_ctm-dn-pe-pr-ut-ft-wt))
341
- );
342
- font-style: var(
343
- --_ctm-mob-dn-pe-pr-ut-ft-se-ic,
344
- var(--_ctm-tab-dn-pe-pr-ut-ft-se-ic, var(--_ctm-dn-pe-pr-ut-ft-se-ic))
345
- );
346
- text-align: var(
347
- --_ctm-mob-dn-pe-pr-ut-tt-an,
348
- var(--_ctm-tab-dn-pe-pr-ut-tt-an, var(--_ctm-dn-pe-pr-ut-tt-an))
349
- );
350
- letter-spacing: var(
351
- --_ctm-mob-dn-pe-pr-ut-lr-sg,
352
- var(--_ctm-tab-dn-pe-pr-ut-lr-sg, var(--_ctm-dn-pe-pr-ut-lr-sg))
353
- );
354
- line-height: var(
355
- --_ctm-mob-dn-pe-pr-ut-le-ht,
356
- var(--_ctm-tab-dn-pe-pr-ut-le-ht, var(--_ctm-dn-pe-pr-ut-le-ht))
357
- );
358
- text-decoration: var(
359
- --_ctm-mob-dn-pe-pr-ut-ue,
360
- var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
361
- );
362
- }
363
- }
364
- }
365
-
366
- .vertical {
367
- display: flex;
368
- flex-direction: column;
369
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
370
-
371
- .item {
372
- display: flex;
373
- align-items: center;
374
- justify-content: space-between;
375
- padding: var(
376
- --_ctm-mob-dn-im-se-dt-se-vl-pg,
377
- var(--_ctm-tab-dn-im-se-dt-se-vl-pg, var(--_ctm-dn-im-se-dt-se-vl-pg))
378
- )
379
- var(
380
- --_ctm-mob-dn-im-se-dt-se-hl-pg,
381
- var(--_ctm-tab-dn-im-se-dt-se-hl-pg, var(--_ctm-dn-im-se-dt-se-hl-pg))
382
- );
383
- cursor: pointer;
384
- background-color: var(
385
- --_ctm-mob-dn-im-se-dt-se-bd-cr,
386
- var(--_ctm-tab-dn-im-se-dt-se-bd-cr, var(--_ctm-dn-im-se-dt-se-bd-cr))
387
- );
388
-
389
- border-color: var(
390
- --_show-border-im-se,
391
- var(
392
- --_ctm-mob-dn-im-se-dt-se-br-cr,
393
- var(--_ctm-tab-dn-im-se-dt-se-br-cr, var(--_ctm-dn-im-se-dt-se-br-cr))
394
- )
395
- );
396
- border-style: var(
397
- --_show-border-im-se,
398
- var(
399
- --_ctm-mob-dn-im-se-dt-se-br-se,
400
- var(--_ctm-tab-dn-im-se-dt-se-br-se, var(--_ctm-dn-im-se-dt-se-br-se))
401
- )
402
- );
403
- border-width: var(
404
- --_show-border-im-se,
405
- var(
406
- --_ctm-mob-dn-im-se-dt-se-br-wh,
407
- var(--_ctm-tab-dn-im-se-dt-se-br-wh, var(--_ctm-dn-im-se-dt-se-br-wh))
408
- )
409
- );
410
- border-radius: var(
411
- --_ctm-mob-dn-im-se-dt-se-br-rs,
412
- var(--_ctm-tab-dn-im-se-dt-se-br-rs, var(--_ctm-dn-im-se-dt-se-br-rs))
413
- );
414
-
415
- box-shadow: var(
416
- --_show-shadow-im-se,
417
- var(
418
- --_ctm-mob-dn-im-se-dt-se-sw-ae,
419
- var(--_ctm-tab-dn-im-se-dt-se-sw-ae, var(--_ctm-dn-im-se-dt-se-sw-ae))
420
- )
421
- var(
422
- --_ctm-mob-dn-im-se-dt-se-sw-br,
423
- var(--_ctm-tab-dn-im-se-dt-se-sw-br, var(--_ctm-dn-im-se-dt-se-sw-br))
424
- )
425
- var(
426
- --_ctm-mob-dn-im-se-dt-se-sw-sd,
427
- var(--_ctm-tab-dn-im-se-dt-se-sw-sd, var(--_ctm-dn-im-se-dt-se-sw-sd))
428
- )
429
- var(
430
- --_ctm-mob-dn-im-se-dt-se-sw-cr,
431
- var(--_ctm-tab-dn-im-se-dt-se-sw-cr, var(--_ctm-dn-im-se-dt-se-sw-cr))
432
- )
433
- );
434
-
435
- .text {
436
- color: var(
437
- --_ctm-mob-dn-um-se-cr,
438
- var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
439
- );
440
- font-family: var(
441
- --_ctm-mob-dn-um-se-ft-fy,
442
- var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
443
- ),
444
- sans-serif;
445
- font-size: var(
446
- --_ctm-mob-dn-um-se-ft-se,
447
- var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
448
- );
449
- font-weight: var(
450
- --_ctm-mob-dn-um-se-ft-wt,
451
- var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
452
- );
453
- font-style: var(
454
- --_ctm-mob-dn-um-se-ft-se-ic,
455
- var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
456
- );
457
- text-align: var(
458
- --_ctm-mob-dn-um-se-tt-an,
459
- var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
460
- );
461
- letter-spacing: var(
462
- --_ctm-mob-dn-um-se-lr-sg,
463
- var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
464
- );
465
- line-height: var(
466
- --_ctm-mob-dn-um-se-le-ht,
467
- var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
468
- );
469
- text-decoration: var(
470
- --_ctm-mob-dn-um-se-ue,
471
- var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
472
- );
473
- }
474
-
475
- .off__price {
476
- .hilight__price {
477
- color: var(
478
- --_ctm-mob-dn-pt-pe-cr,
479
- var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
480
- );
481
- font-family: var(
482
- --_ctm-mob-dn-pt-pe-ft-fy,
483
- var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
484
- ),
485
- sans-serif;
486
- font-size: var(
487
- --_ctm-mob-dn-pt-pe-ft-se,
488
- var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
489
- );
490
- font-weight: var(
491
- --_ctm-mob-dn-pt-pe-ft-wt,
492
- var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
493
- );
494
- font-style: var(
495
- --_ctm-mob-dn-pt-pe-ft-se-ic,
496
- var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
497
- );
498
- text-align: var(
499
- --_ctm-mob-dn-pt-pe-tt-an,
500
- var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
501
- );
502
- letter-spacing: var(
503
- --_ctm-mob-dn-pt-pe-lr-sg,
504
- var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
505
- );
506
- line-height: var(
507
- --_ctm-mob-dn-pt-pe-le-ht,
508
- var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
509
- );
510
- text-decoration: var(
511
- --_ctm-mob-dn-pt-pe-ue,
512
- var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
513
- );
514
- }
515
-
516
- .secondary__price {
517
- color: var(
518
- --_ctm-mob-dn-pe-pr-ut-cr,
519
- var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
520
- );
521
- font-family: var(
522
- --_ctm-mob-dn-pe-pr-ut-ft-fy,
523
- var(--_ctm-tab-dn-pe-pr-ut-ft-fy, var(--_ctm-dn-pe-pr-ut-ft-fy))
524
- ),
525
- sans-serif;
526
- font-size: var(
527
- --_ctm-mob-dn-pe-pr-ut-ft-se,
528
- var(--_ctm-tab-dn-pe-pr-ut-ft-se, var(--_ctm-dn-pe-pr-ut-ft-se))
529
- );
530
- font-weight: var(
531
- --_ctm-mob-dn-pe-pr-ut-ft-wt,
532
- var(--_ctm-tab-dn-pe-pr-ut-ft-wt, var(--_ctm-dn-pe-pr-ut-ft-wt))
533
- );
534
- font-style: var(
535
- --_ctm-mob-dn-pe-pr-ut-ft-se-ic,
536
- var(--_ctm-tab-dn-pe-pr-ut-ft-se-ic, var(--_ctm-dn-pe-pr-ut-ft-se-ic))
537
- );
538
- text-align: var(
539
- --_ctm-mob-dn-pe-pr-ut-tt-an,
540
- var(--_ctm-tab-dn-pe-pr-ut-tt-an, var(--_ctm-dn-pe-pr-ut-tt-an))
541
- );
542
- letter-spacing: var(
543
- --_ctm-mob-dn-pe-pr-ut-lr-sg,
544
- var(--_ctm-tab-dn-pe-pr-ut-lr-sg, var(--_ctm-dn-pe-pr-ut-lr-sg))
545
- );
546
- line-height: var(
547
- --_ctm-mob-dn-pe-pr-ut-le-ht,
548
- var(--_ctm-tab-dn-pe-pr-ut-le-ht, var(--_ctm-dn-pe-pr-ut-le-ht))
549
- );
550
- text-decoration: var(
551
- --_ctm-mob-dn-pe-pr-ut-ue,
552
- var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
553
- );
554
- }
555
- }
556
-
557
- .discount__price {
558
- display: flex;
559
- justify-content: space-around;
560
- gap: 10px;
561
-
562
- .price {
563
- color: var(
564
- --_ctm-mob-dn-al-pe-cr,
565
- var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
566
- );
567
- font-family: var(
568
- --_ctm-mob-dn-al-pe-ft-fy,
569
- var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
570
- ),
571
- sans-serif;
572
- font-size: var(
573
- --_ctm-mob-dn-al-pe-ft-se,
574
- var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
575
- );
576
- font-weight: var(
577
- --_ctm-mob-dn-al-pe-ft-wt,
578
- var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
579
- );
580
- font-style: var(
581
- --_ctm-mob-dn-al-pe-ft-se-ic,
582
- var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
583
- );
584
- text-align: var(
585
- --_ctm-mob-dn-al-pe-tt-an,
586
- var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
587
- );
588
- letter-spacing: var(
589
- --_ctm-mob-dn-al-pe-lr-sg,
590
- var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
591
- );
592
- line-height: var(
593
- --_ctm-mob-dn-al-pe-le-ht,
594
- var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
595
- );
596
- text-decoration: var(
597
- --_ctm-mob-dn-al-pe-ue,
598
- var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
599
- );
600
- }
601
-
602
- .save__price {
603
- color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
604
- font-family: var(
605
- --_ctm-mob-dn-ss-ft-fy,
606
- var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
607
- ),
608
- sans-serif;
609
- font-size: var(
610
- --_ctm-mob-dn-ss-ft-se,
611
- var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
612
- );
613
- font-weight: var(
614
- --_ctm-mob-dn-ss-ft-wt,
615
- var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
616
- );
617
- font-style: var(
618
- --_ctm-mob-dn-ss-ft-se-ic,
619
- var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
620
- );
621
- text-align: var(
622
- --_ctm-mob-dn-ss-tt-an,
623
- var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
624
- );
625
- letter-spacing: var(
626
- --_ctm-mob-dn-ss-lr-sg,
627
- var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
628
- );
629
- line-height: var(
630
- --_ctm-mob-dn-ss-le-ht,
631
- var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
632
- );
633
- text-decoration: var(
634
- --_ctm-mob-dn-ss-ue,
635
- var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
636
- );
637
- }
638
- }
639
- }
640
- }
641
- }
642
- .table-content {
643
- width: 100%;
644
- border-collapse: collapse;
645
- background-color: var(
646
- --_ctm-mob-dn-te-bd-cr,
647
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
648
- );
649
- border-color: var(
650
- --_show-border-im-se,
651
- var(--_ctm-mob-dn-te-br-cr, var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr)))
652
- );
653
- border-style: var(
654
- --_show-border-im-se,
655
- var(--_ctm-mob-dn-te-br-se, var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se)))
656
- );
657
- border-width: var(
658
- --_show-border-im-se,
659
- var(--_ctm-mob-dn-te-br-wh, var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh)))
660
- );
661
- border-radius: var(
662
- --_ctm-mob-dn-te-br-rs,
663
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
664
- );
665
- box-shadow: var(
666
- --_show-shadow-im-se,
667
- var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
668
- var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
669
- var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
670
- var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
671
- );
672
- &[data-header-divider="true"] {
673
- thead tr th {
674
- border-bottom: 1px solid
675
- var(
676
- --_ctm-mob-dn-rw-ds-hr-dr,
677
- var(--_ctm-tab-dn-rw-ds-hr-dr, var(--_ctm-dn-rw-ds-hr-dr))
678
- );
679
- }
680
- }
681
- &[data-row-divider="true"] {
682
- tbody tr td {
683
- border-bottom: 1px solid
684
- var(
685
- --_ctm-mob-dn-rw-ds-rw-dr,
686
- var(--_ctm-tab-dn-rw-ds-rw-dr, var(--_ctm-dn-rw-ds-rw-dr))
687
- );
688
- }
689
- }
690
- &[data-column-divider="true"] {
691
- tbody tr td,
692
- thead tr th {
693
- border-right: 1px solid
694
- var(
695
- --_ctm-mob-dn-rw-ds-cn-dr,
696
- var(--_ctm-tab-dn-rw-ds-cn-dr, var(--_ctm-dn-rw-ds-cn-dr))
697
- );
698
- }
699
-
700
- tbody tr td:last-child,
701
- thead tr th:last-child {
702
- border-right: none;
703
- }
704
- }
705
- &[data-alternative-row-colors="true"] {
706
- tbody tr:nth-child(odd) {
707
- background-color: var(--_gray-300, var(--_ctm-tab-gray-300, var(--_ctm-mob-gray-300)));
708
- width: 100%;
709
- }
710
- }
711
- thead {
712
- height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-dn-lt-hr-ht)));
713
- tr {
714
- th {
715
- padding: var(
716
- --_ctm-mob-lt-hr-cl-pg,
717
- var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-dn-lt-hr-cl-pg))
718
- );
719
- text-align: var(
720
- --_ctm-mob-lt-ct-at,
721
- var(--_ctm-tab-lt-ct-at, var(--_ctm-dn-lt-ct-at))
722
- );
723
- border: 0;
724
- background-color: var(
725
- --_ctm-mob-dn-te-hr-bd-cr,
726
- var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
727
- );
728
- color: var(
729
- --_ctm-mob-dn-hr-tt-cr,
730
- var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
731
- );
732
- font-family: var(
733
- --_ctm-mob-dn-hr-tt-ft-fy,
734
- var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy)),
735
- sans-serif
736
- );
737
- font-size: var(
738
- --_ctm-mob-dn-hr-tt-ft-se,
739
- var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
740
- );
741
- font-weight: var(
742
- --_ctm-mob-dn-hr-tt-ft-wt,
743
- var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
744
- );
745
- font-style: var(
746
- --_ctm-mob-dn-hr-tt-ft-se-ic,
747
- var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
748
- );
749
- text-align: var(
750
- --_ctm-mob-dn-hr-tt-tt-an,
751
- var(--_ctm-tab-dn-hr-tt-an, var(--_ctm-dn-hr-tt-an))
752
- );
753
- letter-spacing: var(
754
- --_ctm-mob-dn-hr-tt-lr-sg,
755
- var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
756
- );
757
- line-height: var(
758
- --_ctm-mob-dn-hr-tt-le-ht,
759
- var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
760
- );
761
- text-decoration: var(
762
- --_ctm-mob-dn-hr-tt-ue,
763
- var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
764
- );
765
- }
766
- }
767
- }
768
- tbody {
769
- tr {
770
- padding: var(
771
- --_ctm-mob-lt-rw-cl-pg,
772
- var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-dn-lt-rw-cl-pg))
773
- );
774
- height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-dn-lt-rw-ht)));
775
- background-color: var(
776
- --_ctm-mob-dn-te-rw-bd-cr,
777
- var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
778
- );
779
- text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-dn-lt-ct-at)));
780
- th,
781
- td {
782
- border: 0;
783
- padding: inherit;
784
- color: var(
785
- --_ctm-mob-dn-te-rw-cr,
786
- var(--_ctm-tab-dn-te-rw-cr, var(--_ctm-dn-te-rw-cr))
787
- );
788
- font-family: var(
789
- --_ctm-mob-dn-te-rw-ft-fy,
790
- var(--_ctm-tab-dn-te-rw-ft-fy, var(--_ctm-dn-te-rw-ft-fy))
791
- ),
792
- sans-serif;
793
- font-size: var(
794
- --_ctm-mob-dn-te-rw-ft-se,
795
- var(--_ctm-tab-dn-te-rw-ft-se, var(--_ctm-dn-te-rw-ft-se))
796
- );
797
- font-weight: var(
798
- --_ctm-mob-dn-te-rw-ft-wt,
799
- var(--_ctm-tab-dn-te-rw-ft-wt, var(--_ctm-dn-te-rw-ft-wt))
800
- );
801
- font-style: var(
802
- --_ctm-mob-dn-te-rw-ft-se-ic,
803
- var(--_ctm-tab-dn-te-rw-ft-se-ic, var(--_ctm-dn-te-rw-ft-se-ic))
804
- );
805
- text-align: var(
806
- --_ctm-mob-dn-te-rw-tt-an,
807
- var(--_ctm-tab-dn-te-rw-tt-an, var(--_ctm-dn-te-rw-tt-an))
808
- );
809
- letter-spacing: var(
810
- --_ctm-mob-dn-te-rw-lr-sg,
811
- var(--_ctm-tab-dn-te-rw-lr-sg, var(--_ctm-dn-te-rw-lr-sg))
812
- );
813
- line-height: var(
814
- --_ctm-mob-dn-te-rw-le-ht,
815
- var(--_ctm-tab-dn-te-rw-le-ht, var(--_ctm-dn-te-rw-le-ht))
816
- );
817
- text-decoration: var(
818
- --_ctm-mob-dn-te-rw-ue,
819
- var(--_ctm-tab-dn-te-rw-ue, var(--_ctm-dn-te-rw-ue))
820
- );
821
- }
822
- }
823
- }
824
- }
825
-
826
- .pagination_container {
827
- display: flex;
828
- justify-content: center;
829
- align-items: center;
830
- gap: 10px;
831
- button {
832
- font-size: 16px;
833
- // padding: 10px 20px;
834
- // background-color: #000;
835
- color: #fff;
836
- border: none;
837
- cursor: pointer;
838
- // border-radius: 10px;
839
- }
840
- span {
841
- cursor: pointer;
842
- color: var(
843
- --_ctm-mob-dn-pn-dt-se-cr,
844
- var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
845
- );
846
- font-family: var(
847
- --_ctm-mob-dn-pn-dt-se-ft-fy,
848
- var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
849
- ),
850
- sans-serif;
851
- font-size: var(
852
- --_ctm-mob-dn-pn-dt-se-ft-se,
853
- var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
854
- );
855
- font-weight: var(
856
- --_ctm-mob-dn-pn-dt-se-ft-wt,
857
- var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
858
- );
859
- font-style: var(
860
- --_ctm-mob-dn-pn-dt-se-ft-se-ic,
861
- var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
862
- );
863
- text-align: var(
864
- --_ctm-mob-dn-pn-dt-se-tt-an,
865
- var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
866
- );
867
- letter-spacing: var(
868
- --_ctm-mob-dn-pn-dt-se-lr-sg,
869
- var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
870
- );
871
- line-height: var(
872
- --_ctm-mob-dn-pn-dt-se-le-ht,
873
- var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
874
- );
875
- text-decoration: var(
876
- --_ctm-mob-dn-pn-dt-se-ue,
877
- var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
878
- );
879
- }
880
-
881
- .active {
882
- span {
883
- background-color: var(
884
- --_ctm-mob-dn-pn-dt-se-bd-cr,
885
- var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
886
- );
887
- padding: 2px;
888
- }
889
- }
890
- }
891
- .loadmore_conatiner {
892
- display: flex;
893
- justify-content: center;
894
- align-items: center;
895
- gap: 10px;
896
- margin-top: 10px;
897
-
898
- button {
899
- padding: 10px;
900
- cursor: pointer;
901
- color: var(
902
- --_ctm-mob-dn-sw-me-is-bn-cr,
903
- var(--_ctm-tab-dn-sw-me-is-bn-cr, var(--_ctm-dn-sw-me-is-bn-cr))
904
- );
905
- font-family: var(
906
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
907
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
908
- ),
909
- sans-serif;
910
- font-size: var(
911
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
912
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
913
- );
914
- font-weight: var(
915
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
916
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
917
- );
918
- font-style: var(
919
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
920
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
921
- );
922
- text-align: var(
923
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
924
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
925
- );
926
- letter-spacing: var(
927
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
928
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
929
- );
930
- line-height: var(
931
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
932
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
933
- );
934
- text-decoration: var(
935
- --_ctm-mob-dn-sw-me-is-bn-ue,
936
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
937
- );
938
- background-color: var(
939
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
940
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
941
- );
942
- border-color: var(
943
- --_show-border-im-se,
944
- var(
945
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
946
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
947
- )
948
- );
949
- border-style: var(
950
- --_show-border-im-se,
951
- var(
952
- --_ctm-mob-dn-sw-me-is-bn-br-se,
953
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
954
- )
955
- );
956
- border-width: var(
957
- --_show-border-im-se,
958
- var(
959
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
960
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
961
- )
962
- );
963
- border-radius: var(
964
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
965
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
966
- );
967
- box-shadow: var(
968
- --_show-shadow-im-se,
969
- var(
970
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
971
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
972
- )
973
- var(
974
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
975
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
976
- )
977
- var(
978
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
979
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
980
- )
981
- var(
982
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
983
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
984
- )
985
- );
986
- }
987
- }
988
-
989
- // horizontal tabs
990
- .tabs__main {
991
- &.tabs__vertical {
992
- .tabs {
993
- .tabs__container {
994
- flex-direction: column;
995
- width: 120px;
996
- }
997
- }
998
- }
999
- &.tabs__hr {
1000
- .tabs {
1001
- flex-direction: column;
1002
- .tabs__container {
1003
- width: 100%;
1004
- }
1005
- }
1006
- }
1007
- .tabs {
1008
- display: flex;
1009
- gap: 12px;
1010
-
1011
- .tabs__container {
1012
- display: flex;
1013
-
1014
- background-color: var(--_gray-100);
1015
- .tab {
1016
- text-align: left;
1017
- padding-left: 10px;
1018
- span {
1019
- padding: 8px;
1020
- &.active {
1021
- border-bottom: 2px solid var(--_primary-400);
1022
- }
1023
- }
1024
- }
1025
- // .tab__content {
1026
- // }
1027
- }
1028
- }
1029
- }
1030
- // tabs
1031
- .tabs__container {
1032
- display: flex;
1033
- position: relative;
1034
- .tab {
1035
- flex: 1;
1036
- padding-block: 20px;
1037
- font-weight: 600;
1038
- text-align: center;
1039
- cursor: pointer;
1040
- position: relative;
1041
- &.tab__active {
1042
- font-weight: bold;
1043
- }
1044
- }
1045
- .tab__active-indicator {
1046
- position: absolute;
1047
- bottom: 0;
1048
- left: 0;
1049
- height: 2px;
1050
- background-color: #000;
1051
- transition:
1052
- left 0.3s ease,
1053
- width 0.3s ease;
1054
- }
1055
- }
1056
-
1057
- // accordion tabs
1058
- .tab__accordion {
1059
- display: flex;
1060
- flex-direction: column;
1061
- .tab__container {
1062
- .tab {
1063
- display: flex;
1064
- padding-inline: 2px;
1065
- border-bottom: 1px solid var(--_gray-200);
1066
- position: relative;
1067
- cursor: pointer;
1068
- span {
1069
- padding-block: 12px;
1070
- display: inline-block;
1071
- }
1072
- .active {
1073
- border-bottom: 2px solid var(--_primary-400);
1074
- }
1075
- &.inactive {
1076
- height: 0px;
1077
- }
1078
- }
1079
- .tab__content {
1080
- padding-block: 20px;
1081
- &.d-none {
1082
- display: none;
1083
- }
1084
- &.d-block {
1085
- display: block;
1086
- }
1087
- }
1088
- }
1089
- }
1090
- }
1091
- }
1092
- }