@sc-360-v2/storefront-cms-library 0.1.94 → 0.1.96

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 (49) hide show
  1. package/dist/amount-estimator.scss +444 -4
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-variant-picker.scss +629 -19
  4. package/dist/container.scss +9 -0
  5. package/dist/editor-core.scss +97 -8
  6. package/dist/functions.js +1 -1
  7. package/dist/gallery-slider-temp.scss +463 -348
  8. package/dist/grid.scss +20 -2
  9. package/dist/image-temp.scss +1 -1
  10. package/dist/menu.scss +89 -0
  11. package/dist/payment-methods.scss +175 -11
  12. package/dist/pickup-locations.scss +443 -11
  13. package/dist/product-actions.scss +905 -77
  14. package/dist/product-basic-elements.scss +37 -6
  15. package/dist/product-highlights.scss +114 -4
  16. package/dist/product-image.scss +472 -339
  17. package/dist/product-inventory.scss +559 -14
  18. package/dist/product-options.scss +156 -0
  19. package/dist/product-price.scss +695 -289
  20. package/dist/product-promotions.scss +1118 -17
  21. package/dist/product.scss +32 -172
  22. package/dist/productDetails.scss +28 -0
  23. package/dist/quantity-selector.scss +58 -4
  24. package/dist/repeater-item.scss +22 -0
  25. package/dist/repeater.scss +113 -0
  26. package/dist/section.scss +16 -0
  27. package/dist/shipping-estimator.scss +13 -5
  28. package/dist/stack.scss +7 -1
  29. package/dist/store-locations.scss +442 -14
  30. package/dist/tooltip.scss +276 -0
  31. package/dist/types/builder/enums/index.d.ts +9 -2
  32. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +2 -1
  33. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  34. package/dist/types/builder/tools/element-edit/productActions.d.ts +1 -0
  35. package/dist/types/builder/tools/element-edit/productDetails.d.ts +6 -31
  36. package/dist/types/builder/tools/element-edit/productDetailsOLd.d.ts +42 -0
  37. package/dist/types/builder/tools/element-edit/productOptions.d.ts +59 -0
  38. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -1
  39. package/dist/types/helper/helper-functions.d.ts +1 -0
  40. package/dist/uom-selector.scss +501 -4
  41. package/dist/variable.scss +9 -1
  42. package/dist/variant-picker.scss +672 -19
  43. package/dist/volume-pricing.scss +473 -19
  44. package/dist/widget.scss +25 -3
  45. package/package.json +1 -1
  46. package/dist/App.scss +0 -31
  47. package/dist/mixin.scss +0 -9
  48. package/dist/modal.module.scss +0 -121
  49. package/dist/range-slider.module.scss +0 -85
@@ -12,10 +12,10 @@
12
12
  margin: var(--_ctm-lt-mn, --_tst-lt-mn);
13
13
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
14
14
  // height: ;
15
- aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
- --_aspect-ratio: calc(
17
- 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
- );
15
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
+ // --_aspect-ratio: calc(
17
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
+ // );
19
19
 
20
20
  & > .wrapper {
21
21
  width: 100%;
@@ -24,5 +24,502 @@
24
24
  &[data-show-shadow="false"] {
25
25
  --_show-shadow: none;
26
26
  }
27
+ &[data-overflow-items="Wrap"] {
28
+ .horizontal {
29
+ flex-wrap: wrap;
30
+ }
31
+ }
32
+ &[data-overflow-items="Scroll"] {
33
+ .horizontal {
34
+ width: 100%;
35
+ overflow-x: auto;
36
+ .item {
37
+ width: 100%;
38
+ flex-shrink: 0;
39
+ }
40
+ }
41
+ .vertical {
42
+ overflow-y: auto;
43
+ max-height: 30%;
44
+ }
45
+ }
46
+ .text-element {
47
+ background: #6d96e4;
48
+ padding: 10px;
49
+ font-weight: 600;
50
+ color: rgba(75, 69, 70, 1);
51
+ }
52
+ .uom__container {
53
+ padding: var(--_ctm-lt-pg);
54
+ .stack {
55
+ display: flex;
56
+ flex-direction: column;
57
+ .static {
58
+ margin-bottom: 10px;
59
+ color: var(--_ctm-dn-um-te-se-cr);
60
+ font-family: var(--_ctm-dn-um-te-se-ft-fy), sans-serif;
61
+ font-size: var(--_ctm-dn-um-te-se-ft-se);
62
+ font-weight: var(--_ctm-dn-um-te-se-ft-wt);
63
+ font-style: var(--_ctm-dn-um-te-se-ft-se-ic);
64
+ text-align: var(--_ctm-dn-um-te-se-tt-an);
65
+ letter-spacing: var(--_ctm-dn-um-te-se-lr-sg);
66
+ line-height: var(--_ctm-dn-um-te-se-le-ht);
67
+ text-decoration: var(--_ctm-dn-um-te-se-ue);
68
+ }
69
+ .horizontal {
70
+ display: flex;
71
+ flex-direction: row;
72
+ gap: var(--_ctm-lt-im-sg);
73
+ .item {
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ flex-direction: column;
78
+ gap: 4px;
79
+ padding: var(--_ctm-dn-im-se-dt-se-vl-pg) var(--_ctm-dn-im-se-dt-se-hl-pg);
80
+ cursor: pointer;
81
+ background-color: var(--_ctm-dn-im-se-dt-se-bd-cr);
82
+ border-color: var(
83
+ --_show-border-im-se,
84
+ var(--_ctm-dn-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
85
+ );
86
+ border-style: var(
87
+ --_show-border-im-se,
88
+ var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
89
+ );
90
+ border-width: var(
91
+ --_show-border-im-se,
92
+ var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
93
+ );
94
+ border-radius: var(--_ctm-dn-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
95
+ box-shadow: var(
96
+ --_show-shadow-im-se,
97
+ var(--_ctm-dn-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
98
+ var(--_ctm-dn-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
99
+ var(--_ctm-dn-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
100
+ var(--_ctm-dn-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
101
+ );
102
+ .each {
103
+ color: var(--_ctm-dn-um-se-cr);
104
+ font-family: var(--_ctm-dn-um-se-ft-fy), sans-serif;
105
+ font-size: var(--_ctm-dn-um-se-ft-se);
106
+ font-weight: var(--_ctm-dn-um-se-ft-wt);
107
+ font-style: var(--_ctm-dn-um-se-ft-se-ic);
108
+ text-align: var(--_ctm-dn-um-se-tt-an);
109
+ letter-spacing: var(--_ctm-dn-um-se-lr-sg);
110
+ line-height: var(--_ctm-dn-um-se-le-ht);
111
+ text-decoration: var(--_ctm-dn-um-se-ue);
112
+ }
113
+ .price {
114
+ color: var(--_ctm-dn-pt-pe-cr);
115
+ font-family: var(--_ctm-dn-pt-pe-ft-fy), sans-serif;
116
+ font-size: var(--_ctm-dn-pt-pe-ft-se);
117
+ font-weight: var(--_ctm-dn-pt-pe-ft-wt);
118
+ font-style: var(--_ctm-dn-pt-pe-ft-se-ic);
119
+ text-align: var(--_ctm-dn-pt-pe-tt-an);
120
+ letter-spacing: var(--_ctm-dn-pt-pe-lr-sg);
121
+ line-height: var(--_ctm-dn-pt-pe-le-ht);
122
+ text-decoration: var(--_ctm-dn-pt-pe-ue);
123
+ }
124
+ .off__price {
125
+ font-size: 12px;
126
+ display: flex;
127
+ justify-content: space-around;
128
+ gap: 10px;
129
+ align-items: center;
130
+ .offer__price {
131
+ color: var(--_ctm-dn-ss-cr);
132
+ font-family: var(--_ctm-dn-ss-ft-fy), sans-serif;
133
+ font-size: var(--_ctm-dn-ss-ft-se);
134
+ font-weight: var(--_ctm-dn-ss-ft-wt);
135
+ font-style: var(--_ctm-dn-ss-ft-se-ic);
136
+ text-align: var(--_ctm-dn-ss-tt-an);
137
+ letter-spacing: var(--_ctm-dn-ss-lr-sg);
138
+ line-height: var(--_ctm-dn-ss-le-ht);
139
+ text-decoration: var(--_ctm-dn-ss-ue);
140
+ }
141
+ .discount__price {
142
+ color: var(--_ctm-dn-al-pe-cr);
143
+ font-family: var(--_ctm-dn-al-pe-ft-fy), sans-serif;
144
+ font-size: var(--_ctm-dn-al-pe-ft-se);
145
+ font-weight: var(--_ctm-dn-al-pe-ft-wt);
146
+ font-style: var(--_ctm-dn-al-pe-ft-se-ic);
147
+ text-align: var(--_ctm-dn-al-pe-tt-an);
148
+ letter-spacing: var(--_ctm-dn-al-pe-lr-sg);
149
+ line-height: var(--_ctm-dn-al-pe-le-ht);
150
+ text-decoration: var(--_ctm-dn-al-pe-ue);
151
+ }
152
+ }
153
+ .units {
154
+ color: var(--_ctm-dn-pe-pr-ut-cr);
155
+ font-family: var(--_ctm-dn-pe-pr-ut-ft-fy), sans-serif;
156
+ font-size: var(--_ctm-dn-pe-pr-ut-ft-se);
157
+ font-weight: var(--_ctm-dn-pe-pr-ut-ft-wt);
158
+ font-style: var(--_ctm-dn-pe-pr-ut-ft-se-ic);
159
+ text-align: var(--_ctm-dn-pe-pr-ut-tt-an);
160
+ letter-spacing: var(--_ctm-dn-pe-pr-ut-lr-sg);
161
+ line-height: var(--_ctm-dn-pe-pr-ut-le-ht);
162
+ text-decoration: var(--_ctm-dn-pe-pr-ut-ue);
163
+ }
164
+ }
165
+ }
166
+ .vertical {
167
+ display: flex;
168
+ flex-direction: column;
169
+ gap: var(--_ctm-lt-im-sg);
170
+ .item {
171
+ display: flex;
172
+ align-items: center;
173
+ justify-content: space-between;
174
+ padding: var(--_ctm-dn-im-se-dt-se-vl-pg) var(--_ctm-dn-im-se-dt-se-hl-pg);
175
+ cursor: pointer;
176
+ background-color: var(--_ctm-dn-im-se-dt-se-bd-cr);
177
+ border-color: var(
178
+ --_show-border-im-se,
179
+ var(--_ctm-dn-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
180
+ );
181
+ border-style: var(
182
+ --_show-border-im-se,
183
+ var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
184
+ );
185
+ border-width: var(
186
+ --_show-border-im-se,
187
+ var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
188
+ );
189
+ border-radius: var(--_ctm-dn-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
190
+ box-shadow: var(
191
+ --_show-shadow-im-se,
192
+ var(--_ctm-dn-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
193
+ var(--_ctm-dn-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
194
+ var(--_ctm-dn-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
195
+ var(--_ctm-dn-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
196
+ );
197
+ .text {
198
+ color: var(--_ctm-dn-um-se-cr);
199
+ font-family: var(--_ctm-dn-um-se-ft-fy), sans-serif;
200
+ font-size: var(--_ctm-dn-um-se-ft-se);
201
+ font-weight: var(--_ctm-dn-um-se-ft-wt);
202
+ font-style: var(--_ctm-dn-um-se-ft-se-ic);
203
+ text-align: var(--_ctm-dn-um-se-tt-an);
204
+ letter-spacing: var(--_ctm-dn-um-se-lr-sg);
205
+ line-height: var(--_ctm-dn-um-se-le-ht);
206
+ text-decoration: var(--_ctm-dn-um-se-ue);
207
+ }
208
+ .off__price {
209
+ .hilight__price {
210
+ color: var(--_ctm-dn-pt-pe-cr);
211
+ font-family: var(--_ctm-dn-pt-pe-ft-fy), sans-serif;
212
+ font-size: var(--_ctm-dn-pt-pe-ft-se);
213
+ font-weight: var(--_ctm-dn-pt-pe-ft-wt);
214
+ font-style: var(--_ctm-dn-pt-pe-ft-se-ic);
215
+ text-align: var(--_ctm-dn-pt-pe-tt-an);
216
+ letter-spacing: var(--_ctm-dn-pt-pe-lr-sg);
217
+ line-height: var(--_ctm-dn-pt-pe-le-ht);
218
+ text-decoration: var(--_ctm-dn-pt-pe-ue);
219
+ }
220
+ .secondary__price {
221
+ color: var(--_ctm-dn-pe-pr-ut-cr);
222
+ font-family: var(--_ctm-dn-pe-pr-ut-ft-fy), sans-serif;
223
+ font-size: var(--_ctm-dn-pe-pr-ut-ft-se);
224
+ font-weight: var(--_ctm-dn-pe-pr-ut-ft-wt);
225
+ font-style: var(--_ctm-dn-pe-pr-ut-ft-se-ic);
226
+ text-align: var(--_ctm-dn-pe-pr-ut-tt-an);
227
+ letter-spacing: var(--_ctm-dn-pe-pr-ut-lr-sg);
228
+ line-height: var(--_ctm-dn-pe-pr-ut-le-ht);
229
+ text-decoration: var(--_ctm-dn-pe-pr-ut-ue);
230
+ }
231
+ }
232
+ .discount__price {
233
+ display: flex;
234
+ justify-content: space-around;
235
+ gap: 10px;
236
+ .price {
237
+ color: var(--_ctm-dn-al-pe-cr);
238
+ font-family: var(--_ctm-dn-al-pe-ft-fy), sans-serif;
239
+ font-size: var(--_ctm-dn-al-pe-ft-se);
240
+ font-weight: var(--_ctm-dn-al-pe-ft-wt);
241
+ font-style: var(--_ctm-dn-al-pe-ft-se-ic);
242
+ text-align: var(--_ctm-dn-al-pe-tt-an);
243
+ letter-spacing: var(--_ctm-dn-al-pe-lr-sg);
244
+ line-height: var(--_ctm-dn-al-pe-le-ht);
245
+ text-decoration: var(--_ctm-dn-al-pe-ue);
246
+ }
247
+ .save__price {
248
+ color: var(--_ctm-dn-ss-cr);
249
+ font-family: var(--_ctm-dn-ss-ft-fy), sans-serif;
250
+ font-size: var(--_ctm-dn-ss-ft-se);
251
+ font-weight: var(--_ctm-dn-ss-ft-wt);
252
+ font-style: var(--_ctm-dn-ss-ft-se-ic);
253
+ text-align: var(--_ctm-dn-ss-tt-an);
254
+ letter-spacing: var(--_ctm-dn-ss-lr-sg);
255
+ line-height: var(--_ctm-dn-ss-le-ht);
256
+ text-decoration: var(--_ctm-dn-ss-ue);
257
+ }
258
+ }
259
+ }
260
+ }
261
+ .grid {
262
+ display: grid;
263
+ grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
264
+ gap: var(--_ctm-lt-im-sg);
265
+ padding: var(--_ctm-lt-im-pg);
266
+ &[data-overflow-items="Scroll"] {
267
+ height: 200px;
268
+ overflow-y: auto;
269
+ }
270
+ .item {
271
+ display: flex;
272
+ align-items: center;
273
+ justify-content: center;
274
+ flex-direction: column;
275
+ gap: 4px;
276
+ padding: var(--_ctm-dn-im-se-dt-se-vl-pg) var(--_ctm-dn-im-se-dt-se-hl-pg);
277
+ cursor: pointer;
278
+ background-color: var(--_ctm-dn-im-se-dt-se-bd-cr);
279
+ border-color: var(
280
+ --_show-border-im-se,
281
+ var(--_ctm-dn-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
282
+ );
283
+ border-style: var(
284
+ --_show-border-im-se,
285
+ var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
286
+ );
287
+ border-width: var(
288
+ --_show-border-im-se,
289
+ var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
290
+ );
291
+ border-radius: var(--_ctm-dn-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
292
+ box-shadow: var(
293
+ --_show-shadow-im-se,
294
+ var(--_ctm-dn-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
295
+ var(--_ctm-dn-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
296
+ var(--_ctm-dn-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
297
+ var(--_ctm-dn-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
298
+ );
299
+ cursor: pointer;
300
+ .each {
301
+ color: var(--_ctm-dn-um-se-cr);
302
+ font-family: var(--_ctm-dn-um-se-ft-fy), sans-serif;
303
+ font-size: var(--_ctm-dn-um-se-ft-se);
304
+ font-weight: var(--_ctm-dn-um-se-ft-wt);
305
+ font-style: var(--_ctm-dn-um-se-ft-se-ic);
306
+ text-align: var(--_ctm-dn-um-se-tt-an);
307
+ letter-spacing: var(--_ctm-dn-um-se-lr-sg);
308
+ line-height: var(--_ctm-dn-um-se-le-ht);
309
+ text-decoration: var(--_ctm-dn-um-se-ue);
310
+ }
311
+ .price {
312
+ color: var(--_ctm-dn-pt-pe-cr);
313
+ font-family: var(--_ctm-dn-pt-pe-ft-fy), sans-serif;
314
+ font-size: var(--_ctm-dn-pt-pe-ft-se);
315
+ font-weight: var(--_ctm-dn-pt-pe-ft-wt);
316
+ font-style: var(--_ctm-dn-pt-pe-ft-se-ic);
317
+ text-align: var(--_ctm-dn-pt-pe-tt-an);
318
+ letter-spacing: var(--_ctm-dn-pt-pe-lr-sg);
319
+ line-height: var(--_ctm-dn-pt-pe-le-ht);
320
+ text-decoration: var(--_ctm-dn-pt-pe-ue);
321
+ }
322
+ .off__price {
323
+ font-size: 12px;
324
+ display: flex;
325
+ justify-content: space-around;
326
+ gap: 10px;
327
+ align-items: center;
328
+ .offer__price {
329
+ color: var(--_ctm-dn-ss-cr);
330
+ font-family: var(--_ctm-dn-ss-ft-fy), sans-serif;
331
+ font-size: var(--_ctm-dn-ss-ft-se);
332
+ font-weight: var(--_ctm-dn-ss-ft-wt);
333
+ font-style: var(--_ctm-dn-ss-ft-se-ic);
334
+ text-align: var(--_ctm-dn-ss-tt-an);
335
+ letter-spacing: var(--_ctm-dn-ss-lr-sg);
336
+ line-height: var(--_ctm-dn-ss-le-ht);
337
+ text-decoration: var(--_ctm-dn-ss-ue);
338
+ }
339
+ .discount__price {
340
+ color: var(--_ctm-dn-al-pe-cr);
341
+ font-family: var(--_ctm-dn-al-pe-ft-fy), sans-serif;
342
+ font-size: var(--_ctm-dn-al-pe-ft-se);
343
+ font-weight: var(--_ctm-dn-al-pe-ft-wt);
344
+ font-style: var(--_ctm-dn-al-pe-ft-se-ic);
345
+ text-align: var(--_ctm-dn-al-pe-tt-an);
346
+ letter-spacing: var(--_ctm-dn-al-pe-lr-sg);
347
+ line-height: var(--_ctm-dn-al-pe-le-ht);
348
+ text-decoration: var(--_ctm-dn-al-pe-ue);
349
+ }
350
+ }
351
+ .units {
352
+ color: var(--_ctm-dn-pe-pr-ut-cr);
353
+ font-family: var(--_ctm-dn-pe-pr-ut-ft-fy), sans-serif;
354
+ font-size: var(--_ctm-dn-pe-pr-ut-ft-se);
355
+ font-weight: var(--_ctm-dn-pe-pr-ut-ft-wt);
356
+ font-style: var(--_ctm-dn-pe-pr-ut-ft-se-ic);
357
+ text-align: var(--_ctm-dn-pe-pr-ut-tt-an);
358
+ letter-spacing: var(--_ctm-dn-pe-pr-ut-lr-sg);
359
+ line-height: var(--_ctm-dn-pe-pr-ut-le-ht);
360
+ text-decoration: var(--_ctm-dn-pe-pr-ut-ue);
361
+ }
362
+ }
363
+ }
364
+ }
365
+ .table-content {
366
+ border-collapse: collapse;
367
+ background-color: var(--_ctm-dn-te-bd-cr);
368
+ border-color: var(--_show-border-im-se, var(--_ctm-dn-te-br-cr, var(--_tst-dn-br-cr)));
369
+ border-style: var(--_show-border-im-se, var(--_ctm-dn-te-br-se, var(--_tst-dn-br-se)));
370
+ border-width: var(--_show-border-im-se, var(--_ctm-dn-te-br-wh, var(--_tst-dn-br-wh)));
371
+ border-radius: var(--_ctm-dn-te-br-rs, var(--_tst-dn-br-rs));
372
+ box-shadow: var(
373
+ --_show-shadow-im-se,
374
+ var(--_ctm-dn-te-sw-ae, var(--_tst-dn-sw-ae))
375
+ var(--_ctm-dn-te-sw-br, var(--_tst-dn-sw-br))
376
+ var(--_ctm-dn-te-sw-sd, var(--_tst-dn-sw-sd))
377
+ var(--_ctm-dn-te-sw-cr, var(--_tst-dn-sw-cr))
378
+ );
379
+ &[data-header-divider="true"] {
380
+ thead tr th {
381
+ border-bottom: 1px solid var(--_ctm-dn-rw-ds-hr-dr);
382
+ }
383
+ }
384
+ &[data-row-divider="true"] {
385
+ tbody tr td {
386
+ border-bottom: 1px solid var(--_ctm-dn-rw-ds-rw-dr);
387
+ }
388
+ }
389
+ &[data-column-divider="true"] {
390
+ tbody tr td,
391
+ thead tr th {
392
+ border-right: 1px solid var(--_ctm-dn-rw-ds-cn-dr);
393
+ }
394
+
395
+ tbody tr td:last-child,
396
+ thead tr th:last-child {
397
+ border-right: none;
398
+ }
399
+ }
400
+ &[data-alternative-row-colors="true"] {
401
+ tbody tr:nth-child(odd) {
402
+ background-color: var(--_gray-300);
403
+ width: 100%;
404
+ }
405
+ }
406
+ thead {
407
+ height: var(--_ctm-lt-hr-ht);
408
+ tr {
409
+ th {
410
+ padding: var(--_ctm-lt-hr-cl-pg);
411
+ text-align: var(--_ctm-lt-ct-at);
412
+ border: 0;
413
+ background-color: var(--_ctm-dn-te-hr-bd-cr);
414
+ color: var(--_ctm-dn-hr-tt-cr);
415
+ font-family: var(--_ctm-dn-hr-tt-ft-fy), sans-serif;
416
+ font-size: var(--_ctm-dn-hr-tt-ft-se);
417
+ font-weight: var(--_ctm-dn-hr-tt-ft-wt);
418
+ font-style: var(--_ctm-dn-hr-tt-ft-se-ic);
419
+ text-align: var(--_ctm-dn-hr-tt-tt-an);
420
+ letter-spacing: var(--_ctm-dn-hr-tt-lr-sg);
421
+ line-height: var(--_ctm-dn-hr-tt-le-ht);
422
+ text-decoration: var(--_ctm-dn-hr-tt-ue);
423
+ }
424
+ }
425
+ }
426
+ tbody {
427
+ tr {
428
+ padding: var(--_ctm-lt-rw-cl-pg);
429
+ height: var(--_ctm-lt-rw-ht);
430
+ background-color: var(--_ctm-dn-te-rw-bd-cr);
431
+ text-align: var(--_ctm-lt-ct-at);
432
+ th,
433
+ td {
434
+ border: 0;
435
+ padding: inherit;
436
+ color: var(--_ctm-dn-te-rw-cr);
437
+ font-family: var(--_ctm-dn-te-rw-ft-fy), sans-serif;
438
+ font-size: var(--_ctm-dn-te-rw-ft-se);
439
+ font-weight: var(--_ctm-dn-te-rw-ft-wt);
440
+ font-style: var(--_ctm-dn-te-rw-ft-se-ic);
441
+ text-align: var(--_ctm-dn-te-rw-tt-an);
442
+ letter-spacing: var(--_ctm-dn-te-rw-lr-sg);
443
+ line-height: var(--_ctm-dn-te-rw-le-ht);
444
+ text-decoration: var(--_ctm-dn-te-rw-ue);
445
+ }
446
+ }
447
+ }
448
+ }
449
+ .pagination_container {
450
+ display: flex;
451
+ justify-content: center;
452
+ align-items: center;
453
+ gap: 10px;
454
+ button {
455
+ font-size: 16px;
456
+ // padding: 10px 20px;
457
+ // background-color: #000;
458
+ color: #fff;
459
+ border: none;
460
+ cursor: pointer;
461
+ // border-radius: 10px;
462
+ }
463
+ span {
464
+ cursor: pointer;
465
+ color: var(--_ctm-dn-pn-dt-se-cr);
466
+ font-family: var(--_ctm-dn-pn-dt-se-ft-fy), sans-serif;
467
+ font-size: var(--_ctm-dn-pn-dt-se-ft-se);
468
+ font-weight: var(--_ctm-dn-pn-dt-se-ft-wt);
469
+ font-style: var(--_ctm-dn-pn-dt-se-ft-se-ic);
470
+ text-align: var(--_ctm-dn-pn-dt-se-tt-an);
471
+ letter-spacing: var(--_ctm-dn-pn-dt-se-lr-sg);
472
+ line-height: var(--_ctm-dn-pn-dt-se-le-ht);
473
+ text-decoration: var(--_ctm-dn-pn-dt-se-ue);
474
+ }
475
+ .active {
476
+ span {
477
+ background-color: var(--_ctm-dn-pn-dt-se-bd-cr);
478
+ padding: 2px;
479
+ }
480
+ }
481
+ }
482
+ .loadmore_conatiner {
483
+ display: flex;
484
+ justify-content: center;
485
+ align-items: center;
486
+ gap: 10px;
487
+ margin-top: 10px;
488
+ button {
489
+ padding: 10px;
490
+ cursor: pointer;
491
+ color: var(--_ctm-dn-sw-me-is-bn-cr);
492
+ font-family: var(--_ctm-dn-sw-me-is-bn-ft-fy), sans-serif;
493
+ font-size: var(--_ctm-dn-sw-me-is-bn-ft-se);
494
+ font-weight: var(--_ctm-dn-sw-me-is-bn-ft-wt);
495
+ font-style: var(--_ctm-dn-sw-me-is-bn-ft-se-ic);
496
+ text-align: var(--_ctm-dn-sw-me-is-bn-tt-an);
497
+ letter-spacing: var(--_ctm-dn-sw-me-is-bn-lr-sg);
498
+ line-height: var(--_ctm-dn-sw-me-is-bn-le-ht);
499
+ text-decoration: var(--_ctm-dn-sw-me-is-bn-ue);
500
+ background-color: var(--_ctm-dn-sw-me-is-bn-bd-cr);
501
+ border-color: var(
502
+ --_show-border-im-se,
503
+ var(--_ctm-dn-sw-me-is-bn-br-cr, var(--_tst-dn-br-cr))
504
+ );
505
+ border-style: var(
506
+ --_show-border-im-se,
507
+ var(--_ctm-dn-sw-me-is-bn-br-se, var(--_tst-dn-br-se))
508
+ );
509
+ border-width: var(
510
+ --_show-border-im-se,
511
+ var(--_ctm-dn-sw-me-is-bn-br-wh, var(--_tst-dn-br-wh))
512
+ );
513
+ border-radius: var(--_ctm-dn-sw-me-is-bn-br-rs, var(--_tst-dn-br-rs));
514
+ box-shadow: var(
515
+ --_show-shadow-im-se,
516
+ var(--_ctm-dn-sw-me-is-bn-sw-ae, var(--_tst-dn-sw-ae))
517
+ var(--_ctm-dn-sw-me-is-bn-sw-br, var(--_tst-dn-sw-br))
518
+ var(--_ctm-dn-sw-me-is-bn-sw-sd, var(--_tst-dn-sw-sd))
519
+ var(--_ctm-dn-sw-me-is-bn-sw-cr, var(--_tst-dn-sw-cr))
520
+ );
521
+ }
522
+ }
523
+ }
27
524
  }
28
525
  }
@@ -57,7 +57,7 @@ body {
57
57
  --_cs-cms-root-zIndex: 5;
58
58
  --_add-element-zIndex: 3;
59
59
  --_cs-et-zIndex: 2;
60
- --_it-gl-zIndex: 1;
60
+ --_it-gl-zIndex: 2;
61
61
  --_cms-et-pe-zIndex: 1;
62
62
 
63
63
  --_inline-toolbar-zIndex: 9999;
@@ -85,6 +85,10 @@ body {
85
85
  --_red-500: #f04438;
86
86
 
87
87
  --_accent-color-2-500: #583fff;
88
+ --_accent-Color-2-200: #c7bfff;
89
+ --_accent-Color-2-100: #d5cfff;
90
+ --_accent-Color-2-50: #e3dfff;
91
+
88
92
  --_success-800: #05603a;
89
93
 
90
94
  --_primary-25: #f5f6fd;
@@ -114,8 +118,12 @@ body {
114
118
  --_error-700: #b42318;
115
119
  --_error-500: #f04438;
116
120
  --_error-200: #fecdca;
121
+ --_error-100: #fee4e2;
117
122
  --_error-50: #fef3f2;
118
123
 
124
+ --_cms-ruler-color: #9b27d5b7;
125
+ --_cms-ruler-color-v2: #9b27d53a;
126
+
119
127
  --_transition-duration: 0.45s;
120
128
  --_transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
121
129