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

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 +291 -226
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +119 -64
  4. package/dist/bundleDetails.scss +808 -678
  5. package/dist/buyForHeaders.scss +94 -29
  6. package/dist/cart-details.scss +5 -3
  7. package/dist/cartDropdownOverlay.scss +0 -13
  8. package/dist/dropdownTemplate.scss +141 -0
  9. package/dist/faq.scss +20 -24
  10. package/dist/functions.scss +53 -18
  11. package/dist/item-stock.scss +38 -76
  12. package/dist/map.scss +35 -35
  13. package/dist/menu-item.scss +19 -0
  14. package/dist/modal.scss +328 -0
  15. package/dist/order-status.scss +483 -0
  16. package/dist/payment-methods.scss +71 -1
  17. package/dist/pickup-locations.scss +22 -19
  18. package/dist/product-basic-elements.scss +285 -132
  19. package/dist/product-options.scss +118 -76
  20. package/dist/quick-links.scss +186 -143
  21. package/dist/quick-order-pad.scss +26 -285
  22. package/dist/quotes.scss +9 -0
  23. package/dist/repeater-item.scss +1 -0
  24. package/dist/rfqs.scss +8 -0
  25. package/dist/section.scss +29 -78
  26. package/dist/stack.scss +16 -61
  27. package/dist/store-locations.scss +21 -20
  28. package/dist/table-common.scss +510 -0
  29. package/dist/text-temp-v2.scss +2 -0
  30. package/dist/types/builder/elements/bundle-details/index.d.ts +30 -0
  31. package/dist/types/builder/elements/layouter-pro/index.d.ts +43 -0
  32. package/dist/types/builder/elements/layouter-pro-item/index.d.ts +39 -0
  33. package/dist/types/builder/enums/index.d.ts +4 -0
  34. package/dist/types/builder/index.d.ts +4 -1
  35. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +627 -10
  36. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +287 -4
  37. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +1 -1
  38. package/dist/types/builder/tools/element-edit/filters.d.ts +39 -1
  39. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  40. package/dist/types/builder/tools/element-edit/itemStock.d.ts +11 -0
  41. package/dist/types/builder/tools/element-edit/layouter-pro-item.d.ts +9 -0
  42. package/dist/types/builder/tools/element-edit/layouterPro.d.ts +39 -0
  43. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +94 -1
  44. package/dist/uom-selector.scss +929 -1416
  45. package/dist/variant-picker.scss +613 -138
  46. package/dist/volume-pricing copy.scss +1092 -0
  47. package/dist/volume-pricing.scss +1007 -606
  48. package/dist/widget.scss +3 -0
  49. package/package.json +1 -1
package/dist/product-basic-elements.scss CHANGED
@@ -1,6 +1,9 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
3
 
4
+ @use "./functions.scss" as *;
5
+ $overflowSelector: ".flex__overflow";
6
+
4
7
  [data-div-type="element"] {
5
8
  word-break: break-all;
6
9
  &[data-element-type="productName"],
@@ -36,6 +39,28 @@
36
39
 
37
40
  & > .wrapper {
38
41
  width: 100%;
42
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
43
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
44
+ border-color: var(
45
+ --_show-border,
46
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
47
+ );
48
+ border-style: var(
49
+ --_show-border,
50
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
51
+ );
52
+ border-width: var(
53
+ --_show-border,
54
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
55
+ );
56
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
57
+ box-shadow: var(
58
+ --_show-shadow,
59
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
60
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
61
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
62
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
63
+ );
39
64
  // height: 100%;
40
65
  }
41
66
  &[data-show-shadow="false"] {
@@ -53,35 +78,39 @@
53
78
  .text-element {
54
79
  cursor: pointer;
55
80
  word-break: break-word;
56
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
57
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
81
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
82
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
58
83
  display: flex;
59
84
  flex-direction: column;
60
85
  --_sf-gp: 16px;
61
86
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
62
87
  row-gap: var(--_sf-gp);
63
88
  width: 100%;
89
+
90
+ &#{$overflowSelector} {
91
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
92
+ }
64
93
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
65
- border-color: var(
66
- --_show-border,
67
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
68
- );
69
- border-style: var(
70
- --_show-border,
71
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
72
- );
73
- border-width: var(
74
- --_show-border,
75
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
76
- );
77
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
78
- box-shadow: var(
79
- --_show-shadow,
80
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
81
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
82
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
83
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
84
- );
94
+ // border-color: var(
95
+ // --_show-border,
96
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
97
+ // );
98
+ // border-style: var(
99
+ // --_show-border,
100
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
101
+ // );
102
+ // border-width: var(
103
+ // --_show-border,
104
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
105
+ // );
106
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
107
+ // box-shadow: var(
108
+ // --_show-shadow,
109
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
110
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
111
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
112
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
113
+ // );
85
114
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
86
115
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
87
116
  sans-serif;
@@ -107,6 +136,7 @@
107
136
  transform: scaleY(-1);
108
137
  }
109
138
  }
139
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
110
140
  }
111
141
  &[data-element-type="productDescription"],
112
142
  &[data-element-type="categoryDescription"] {
@@ -138,30 +168,10 @@
138
168
 
139
169
  & > .wrapper {
140
170
  width: 100%;
141
- // height: 100%;
142
- }
143
- &[data-show-shadow="false"] {
144
- --_show-shadow: none;
145
- }
146
- &[data-show-border="false"] {
147
- --_show-border: none;
148
- }
149
- // .text-element {
150
- // background: #6d96e4;
151
- // // padding: 10px;
152
- // font-weight: 600;
153
- // color: rgba(75, 69, 70, 1);
154
- // }
155
- .text-element {
171
+
156
172
  background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
157
173
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
158
- display: flex;
159
- flex-direction: column;
160
- --_sf-gp: 16px;
161
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
162
- row-gap: var(--_sf-gp);
163
- width: 100%;
164
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
174
+
165
175
  border-color: var(
166
176
  --_show-border,
167
177
  var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
@@ -182,6 +192,54 @@
182
192
  var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
183
193
  var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
184
194
  );
195
+ // height: 100%;
196
+ }
197
+ &[data-show-shadow="false"] {
198
+ --_show-shadow: none;
199
+ }
200
+ &[data-show-border="false"] {
201
+ --_show-border: none;
202
+ }
203
+ // .text-element {
204
+ // background: #6d96e4;
205
+ // // padding: 10px;
206
+ // font-weight: 600;
207
+ // color: rgba(75, 69, 70, 1);
208
+ // }
209
+ .text-element {
210
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
211
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
212
+ display: flex;
213
+ flex-direction: column;
214
+ --_sf-gp: 16px;
215
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
216
+ row-gap: var(--_sf-gp);
217
+ width: 100%;
218
+
219
+ &#{$overflowSelector} {
220
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
221
+ }
222
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
223
+ // border-color: var(
224
+ // --_show-border,
225
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
226
+ // );
227
+ // border-style: var(
228
+ // --_show-border,
229
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
230
+ // );
231
+ // border-width: var(
232
+ // --_show-border,
233
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
234
+ // );
235
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
236
+ // box-shadow: var(
237
+ // --_show-shadow,
238
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
239
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
240
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
241
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
242
+ // );
185
243
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
186
244
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
187
245
  sans-serif;
@@ -206,6 +264,7 @@
206
264
  transform: scaleY(-1);
207
265
  }
208
266
  }
267
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
209
268
  }
210
269
  &[data-element-type="productBrand"] {
211
270
  // width: var(--_lt-wh);
@@ -235,30 +294,8 @@
235
294
 
236
295
  & > .wrapper {
237
296
  width: 100%;
238
- // height: 100%;
239
- }
240
- &[data-show-shadow="false"] {
241
- --_show-shadow: none;
242
- }
243
- &[data-show-border="false"] {
244
- --_show-border: none;
245
- }
246
- // .text-element {
247
- // background: #6d96e4;
248
- // // padding: 10px;
249
- // font-weight: 600;
250
- // color: rgba(75, 69, 70, 1);
251
- // }
252
- .text-element {
253
297
  background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
254
298
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
255
- display: flex;
256
- flex-direction: column;
257
- --_sf-gp: 16px;
258
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
259
- row-gap: var(--_sf-gp);
260
- width: 100%;
261
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
262
299
  border-color: var(
263
300
  --_show-border,
264
301
  var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
@@ -279,6 +316,50 @@
279
316
  var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
280
317
  var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
281
318
  );
319
+ // height: 100%;
320
+ }
321
+ &[data-show-shadow="false"] {
322
+ --_show-shadow: none;
323
+ }
324
+ &[data-show-border="false"] {
325
+ --_show-border: none;
326
+ }
327
+ // .text-element {
328
+ // background: #6d96e4;
329
+ // // padding: 10px;
330
+ // font-weight: 600;
331
+ // color: rgba(75, 69, 70, 1);
332
+ // }
333
+ .text-element {
334
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
335
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
336
+ display: flex;
337
+ flex-direction: column;
338
+ --_sf-gp: 16px;
339
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
340
+ row-gap: var(--_sf-gp);
341
+ width: 100%;
342
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
343
+ // border-color: var(
344
+ // --_show-border,
345
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
346
+ // );
347
+ // border-style: var(
348
+ // --_show-border,
349
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
350
+ // );
351
+ // border-width: var(
352
+ // --_show-border,
353
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
354
+ // );
355
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
356
+ // box-shadow: var(
357
+ // --_show-shadow,
358
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
359
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
360
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
361
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
362
+ // );
282
363
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
283
364
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
284
365
  sans-serif;
@@ -303,6 +384,7 @@
303
384
  transform: scaleY(-1);
304
385
  }
305
386
  }
387
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
306
388
  }
307
389
  &[data-element-type="productCode"],
308
390
  &[data-element-type="categoryCode"] {
@@ -332,30 +414,8 @@
332
414
 
333
415
  & > .wrapper {
334
416
  width: 100%;
335
- // height: 100%;
336
- }
337
- &[data-show-shadow="false"] {
338
- --_show-shadow: none;
339
- }
340
- &[data-show-border="false"] {
341
- --_show-border: none;
342
- }
343
- // .text-element {
344
- // background: #6d96e4;
345
- // // padding: 10px;
346
- // font-weight: 600;
347
- // color: rgba(75, 69, 70, 1);
348
- // }
349
- .text-element {
350
417
  background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
351
418
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
352
- display: flex;
353
- flex-direction: column;
354
- --_sf-gp: 16px;
355
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
356
- row-gap: var(--_sf-gp);
357
- width: 100%;
358
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
359
419
  border-color: var(
360
420
  --_show-border,
361
421
  var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
@@ -376,6 +436,50 @@
376
436
  var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
377
437
  var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
378
438
  );
439
+ // height: 100%;
440
+ }
441
+ &[data-show-shadow="false"] {
442
+ --_show-shadow: none;
443
+ }
444
+ &[data-show-border="false"] {
445
+ --_show-border: none;
446
+ }
447
+ // .text-element {
448
+ // background: #6d96e4;
449
+ // // padding: 10px;
450
+ // font-weight: 600;
451
+ // color: rgba(75, 69, 70, 1);
452
+ // }
453
+ .text-element {
454
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
455
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
456
+ display: flex;
457
+ flex-direction: column;
458
+ --_sf-gp: 16px;
459
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
460
+ row-gap: var(--_sf-gp);
461
+ width: 100%;
462
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
463
+ // border-color: var(
464
+ // --_show-border,
465
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
466
+ // );
467
+ // border-style: var(
468
+ // --_show-border,
469
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
470
+ // );
471
+ // border-width: var(
472
+ // --_show-border,
473
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
474
+ // );
475
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
476
+ // box-shadow: var(
477
+ // --_show-shadow,
478
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
479
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
480
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
481
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
482
+ // );
379
483
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
380
484
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
381
485
  sans-serif;
@@ -400,6 +504,7 @@
400
504
  transform: scaleY(-1);
401
505
  }
402
506
  }
507
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
403
508
  }
404
509
  &[data-element-type="productReview"] {
405
510
  // width: var(--_lt-wh);
@@ -429,30 +534,8 @@
429
534
 
430
535
  & > .wrapper {
431
536
  width: 100%;
432
- // height: 100%;
433
- }
434
- &[data-show-shadow="false"] {
435
- --_show-shadow: none;
436
- }
437
- &[data-show-border="false"] {
438
- --_show-border: none;
439
- }
440
- // .text-element {
441
- // background: #6d96e4;
442
- // // padding: 10px;
443
- // font-weight: 600;
444
- // color: rgba(75, 69, 70, 1);
445
- // }
446
- .text-element {
447
537
  background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
448
538
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
449
- display: flex;
450
- flex-direction: column;
451
- --_sf-gp: 16px;
452
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
453
- row-gap: var(--_sf-gp);
454
- width: 100%;
455
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
456
539
  border-color: var(
457
540
  --_show-border,
458
541
  var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
@@ -473,6 +556,50 @@
473
556
  var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
474
557
  var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
475
558
  );
559
+ // height: 100%;
560
+ }
561
+ &[data-show-shadow="false"] {
562
+ --_show-shadow: none;
563
+ }
564
+ &[data-show-border="false"] {
565
+ --_show-border: none;
566
+ }
567
+ // .text-element {
568
+ // background: #6d96e4;
569
+ // // padding: 10px;
570
+ // font-weight: 600;
571
+ // color: rgba(75, 69, 70, 1);
572
+ // }
573
+ .text-element {
574
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
575
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
576
+ display: flex;
577
+ flex-direction: column;
578
+ --_sf-gp: 16px;
579
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
580
+ row-gap: var(--_sf-gp);
581
+ width: 100%;
582
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
583
+ // border-color: var(
584
+ // --_show-border,
585
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
586
+ // );
587
+ // border-style: var(
588
+ // --_show-border,
589
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
590
+ // );
591
+ // border-width: var(
592
+ // --_show-border,
593
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
594
+ // );
595
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
596
+ // box-shadow: var(
597
+ // --_show-shadow,
598
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
599
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
600
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
601
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
602
+ // );
476
603
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
477
604
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
478
605
  sans-serif;
@@ -497,6 +624,7 @@
497
624
  transform: scaleY(-1);
498
625
  }
499
626
  }
627
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
500
628
  }
501
629
  &[data-element-type="productRating"] {
502
630
  // width: var(--_lt-wh);
@@ -527,6 +655,30 @@
527
655
  & > .wrapper {
528
656
  width: 100%;
529
657
  // height: 100%;
658
+
659
+ border-color: var(
660
+ --_show-border,
661
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
662
+ );
663
+ border-style: var(
664
+ --_show-border,
665
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
666
+ );
667
+ border-width: var(
668
+ --_show-border,
669
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
670
+ );
671
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
672
+ box-shadow: var(
673
+ --_show-shadow,
674
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
675
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
676
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
677
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
678
+ );
679
+
680
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
681
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
530
682
  }
531
683
  &[data-show-shadow="false"] {
532
684
  --_show-shadow: none;
@@ -541,8 +693,8 @@
541
693
  // color: rgba(75, 69, 70, 1);
542
694
  // }
543
695
  .text-element {
544
- background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
545
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
696
+ // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
697
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
546
698
  display: flex;
547
699
  flex-direction: column;
548
700
  --_sf-gp: 16px;
@@ -550,26 +702,26 @@
550
702
  row-gap: var(--_sf-gp);
551
703
  width: 100%;
552
704
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
553
- border-color: var(
554
- --_show-border,
555
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
556
- );
557
- border-style: var(
558
- --_show-border,
559
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
560
- );
561
- border-width: var(
562
- --_show-border,
563
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
564
- );
565
- border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
566
- box-shadow: var(
567
- --_show-shadow,
568
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
569
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
570
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
571
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
572
- );
705
+ // border-color: var(
706
+ // --_show-border,
707
+ // var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
708
+ // );
709
+ // border-style: var(
710
+ // --_show-border,
711
+ // var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
712
+ // );
713
+ // border-width: var(
714
+ // --_show-border,
715
+ // var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
716
+ // );
717
+ // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
718
+ // box-shadow: var(
719
+ // --_show-shadow,
720
+ // var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
721
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
722
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
723
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
724
+ // );
573
725
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
574
726
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy))),
575
727
  sans-serif;
@@ -593,6 +745,7 @@
593
745
  &[data-flip-y="true"] {
594
746
  transform: scaleY(-1);
595
747
  }
748
+ text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
596
749
  }
597
750
  }
598
751
  }