@sc-360-v2/storefront-cms-library 0.5.49 → 0.5.51

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