@sc-360-v2/storefront-cms-library 0.5.60 → 0.5.61

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 (140) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2155 -1671
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleCategories.scss +301 -0
  19. package/dist/bundleDetails.scss +5072 -3774
  20. package/dist/button.scss +103 -78
  21. package/dist/buy-for-tab-container.scss +106 -77
  22. package/dist/buyForHeaders.scss +2976 -1722
  23. package/dist/cart-details.scss +1025 -485
  24. package/dist/cart-summary.scss +1234 -569
  25. package/dist/cart-wrapper.scss +79 -37
  26. package/dist/cart.scss +225 -117
  27. package/dist/cartAttributes.scss +647 -367
  28. package/dist/cartDropdownOverlay.scss +10 -1
  29. package/dist/category-groups-element.scss +108 -127
  30. package/dist/category-groups-product-grid.scss +147 -120
  31. package/dist/category-groups-product-image.scss +1457 -1162
  32. package/dist/category-groups-product-options.scss +685 -590
  33. package/dist/category-groups-product-price.scss +3244 -1966
  34. package/dist/category-groups-quota-details.scss +464 -210
  35. package/dist/category.scss +50 -26
  36. package/dist/checkout.scss +16 -24
  37. package/dist/confirm-modal.scss +2 -22
  38. package/dist/container.scss +54 -32
  39. package/dist/countdown.scss +443 -256
  40. package/dist/coupon.scss +16 -19
  41. package/dist/default-dropdown.scss +1 -12
  42. package/dist/embroider-template-1-v2.scss +172 -123
  43. package/dist/embroider-template-1.scss +104 -68
  44. package/dist/embroidery.scss +31 -30
  45. package/dist/employee-bulk-order.scss +142 -418
  46. package/dist/faq.scss +408 -228
  47. package/dist/filter-results.scss +265 -125
  48. package/dist/filters.scss +1682 -831
  49. package/dist/gallery-slider-temp.scss +805 -445
  50. package/dist/global-styles.scss +7 -23
  51. package/dist/grid.scss +33 -25
  52. package/dist/hotspot.scss +115 -68
  53. package/dist/image-temp.scss +38 -24
  54. package/dist/item-stock.scss +16 -9
  55. package/dist/kitDetails.scss +4301 -2721
  56. package/dist/kits.scss +19 -24
  57. package/dist/language-selector.scss +361 -211
  58. package/dist/last-x-orders.scss +174 -95
  59. package/dist/layouter-item.scss +106 -76
  60. package/dist/layouter-pro-item.scss +95 -89
  61. package/dist/layouter-pro.scss +92 -87
  62. package/dist/layouter.scss +264 -79
  63. package/dist/light-box-v2.scss +104 -89
  64. package/dist/login.scss +600 -311
  65. package/dist/map.scss +391 -228
  66. package/dist/marchandiserSets.scss +104 -95
  67. package/dist/mega-menu-container.scss +109 -96
  68. package/dist/mega-menu.scss +731 -624
  69. package/dist/menu-item.scss +2 -2
  70. package/dist/menu-v2.scss +619 -507
  71. package/dist/multi-select-dropdown.scss +3 -27
  72. package/dist/my-templates.scss +9 -38
  73. package/dist/option-bar.scss +375 -215
  74. package/dist/order-status.scss +1117 -643
  75. package/dist/overflow-module.scss +7 -6
  76. package/dist/past-orders.scss +149 -118
  77. package/dist/payment-methods.scss +30 -46
  78. package/dist/pickup-locations.scss +1118 -558
  79. package/dist/position-module.scss +17 -20
  80. package/dist/prefix-list.scss +10 -21
  81. package/dist/product-actions.scss +1778 -1228
  82. package/dist/product-basic-elements.scss +169 -108
  83. package/dist/product-highlights.scss +176 -107
  84. package/dist/product-image-bundles.scss +642 -337
  85. package/dist/product-inventory.scss +1357 -673
  86. package/dist/product-labels.scss +105 -84
  87. package/dist/product-options.scss +659 -316
  88. package/dist/product-price.scss +2562 -1284
  89. package/dist/product-promotions.scss +2830 -1388
  90. package/dist/product-sizechart.scss +905 -516
  91. package/dist/product.scss +61 -28
  92. package/dist/productDetails.scss +39 -19
  93. package/dist/profile.scss +451 -207
  94. package/dist/quantity-selector.scss +550 -313
  95. package/dist/quick-inventory-check.scss +174 -95
  96. package/dist/quick-links.scss +137 -56
  97. package/dist/quick-order-pad.scss +271 -218
  98. package/dist/quota-details.scss +282 -152
  99. package/dist/quotes.scss +121 -82
  100. package/dist/repeater-embla-controls.scss +26 -37
  101. package/dist/repeater-grid-toggle.scss +166 -156
  102. package/dist/repeater-item.scss +64 -41
  103. package/dist/repeater.scss +817 -554
  104. package/dist/request-for-quotes.scss +16 -66
  105. package/dist/responsive-behaviour.scss +1 -3
  106. package/dist/rfqs.scss +181 -118
  107. package/dist/scroll.scss +198 -90
  108. package/dist/search.scss +326 -179
  109. package/dist/section.scss +51 -27
  110. package/dist/shipping-payments.scss +58 -198
  111. package/dist/simple-list.scss +198 -61
  112. package/dist/social.scss +145 -80
  113. package/dist/stack.scss +34 -23
  114. package/dist/static-global.scss +26 -44
  115. package/dist/stockStatus.scss +19 -11
  116. package/dist/store-locations.scss +1105 -577
  117. package/dist/tab-container.scss +108 -81
  118. package/dist/table-common.scss +408 -217
  119. package/dist/table.scss +511 -269
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/elements/bundle-categories/index.d.ts +30 -0
  123. package/dist/types/builder/enums/index.d.ts +1 -0
  124. package/dist/types/builder/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/bundleCategories.d.ts +115 -0
  126. package/dist/types/builder/tools/element-edit/button.d.ts +1 -0
  127. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1051 -2
  128. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  129. package/dist/types/builder/tools/element-edit/layouter.d.ts +33 -1
  130. package/dist/types/builder/tools/element-edit/productOptions.d.ts +3 -1
  131. package/dist/types/builder/tools/element-edit/productPrice.d.ts +1 -0
  132. package/dist/types/builder/tools/element-edit/repeater.d.ts +45 -1
  133. package/dist/types/builder/tools/element-edit/scroll.d.ts +6 -0
  134. package/dist/types/builder/tools/element-edit/userElements.d.ts +38 -37
  135. package/dist/uom-selector.scss +949 -489
  136. package/dist/user-elements.scss +892 -574
  137. package/dist/variant-picker.scss +2555 -1281
  138. package/dist/volume-pricing.scss +1037 -541
  139. package/dist/website.js +1 -1
  140. package/package.json +1 -1
package/dist/product-basic-elements.scss CHANGED
@@ -6,7 +6,6 @@ $overflowSelector: ".flex__overflow";
6
6
 
7
7
  [data-div-type="element"] {
8
8
  word-break: break-all;
9
-
10
9
  &[data-element-type="productName"],
11
10
  &[data-element-type="brandName"],
12
11
  &[data-element-type="categoryName"] {
@@ -16,9 +15,16 @@ $overflowSelector: ".flex__overflow";
16
15
  // padding: var(--_lt-pg);
17
16
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
18
17
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
19
- width: var(--_sf-el-wh-st-mx,
20
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
21
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
18
+ width: var(
19
+ --_sf-el-wh-st-mx,
20
+ calc(
21
+ 1% *
22
+ var(
23
+ --_ctm-mob-ele-nw-wh-vl,
24
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
25
+ )
26
+ )
27
+ );
22
28
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
23
29
  word-break: break-all;
24
30
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
@@ -31,33 +37,41 @@ $overflowSelector: ".flex__overflow";
31
37
  // );
32
38
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
33
39
 
34
- &>.wrapper {
40
+ & > .wrapper {
35
41
  width: 100%;
36
42
  // Follow the elements own height so the styled box (background, border, shadow)
37
43
  // matches the Height set in layout instead of only hugging the text.
38
44
  min-height: inherit;
39
45
  background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
40
46
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
41
- border-color: var(--_show-border,
42
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))));
43
- border-style: var(--_show-border,
44
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))));
45
- border-width: var(--_show-border,
46
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
47
+ border-color: var(
48
+ --_show-border,
49
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
50
+ );
51
+ border-style: var(
52
+ --_show-border,
53
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
54
+ );
55
+ border-width: var(
56
+ --_show-border,
57
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
58
+ );
47
59
  border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
48
- box-shadow: var(--_show-shadow,
49
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))));
60
+ box-shadow: var(
61
+ --_show-shadow,
62
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
63
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
64
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
65
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
66
+ );
50
67
  // height: 100%;
51
68
  }
52
-
53
69
  &[data-show-shadow="false"] {
54
70
  --_show-shadow: none;
55
71
  }
56
-
57
72
  &[data-show-border="false"] {
58
73
  --_show-border: none;
59
74
  }
60
-
61
75
  // .text-element {
62
76
  // background: #6d96e4;
63
77
  // // padding: 10px;
@@ -68,7 +82,6 @@ $overflowSelector: ".flex__overflow";
68
82
  .text-element[data-has-link="true"] {
69
83
  cursor: pointer;
70
84
  }
71
-
72
85
  .text-element {
73
86
  word-break: break-word;
74
87
 
@@ -82,7 +95,6 @@ $overflowSelector: ".flex__overflow";
82
95
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
83
96
  row-gap: var(--_sf-gp);
84
97
  width: 100%;
85
-
86
98
  &:has(.skeleton__element) {
87
99
  display: flex;
88
100
  align-items: start;
@@ -91,7 +103,6 @@ $overflowSelector: ".flex__overflow";
91
103
  &#{$overflowSelector} {
92
104
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
93
105
  }
94
-
95
106
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
96
107
  // border-color: var(
97
108
  // --_show-border,
@@ -125,27 +136,30 @@ $overflowSelector: ".flex__overflow";
125
136
  // up taller than their own line box and spill out of it, which is what makes the
126
137
  // text look cut off. max(..., 1em) keeps the box at least as tall as the text
127
138
  // while still honouring any larger value the user sets.
128
- line-height: max(var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
129
- 1em);
130
- text-decoration: var(--_sf-hr-tt-dn,
131
- var(--_ctm-mob-dn-dt-se-ue,
132
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))));
139
+ line-height: max(
140
+ var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
141
+ 1em
142
+ );
143
+ text-decoration: var(
144
+ --_sf-hr-tt-dn,
145
+ var(
146
+ --_ctm-mob-dn-dt-se-ue,
147
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
148
+ )
149
+ );
133
150
  scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
134
151
 
135
152
  &[data-flip-x="true"] {
136
153
  transform: scaleX(-1);
137
154
  }
138
-
139
155
  &[data-flip-y="true"] {
140
156
  transform: scaleY(-1);
141
157
  }
142
-
143
158
  text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
144
159
  word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
145
160
  word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
146
161
  }
147
162
  }
148
-
149
163
  &[data-element-type="productDescription"],
150
164
  &[data-element-type="categoryDescription"] {
151
165
  // width: var(--_lt-wh);
@@ -154,9 +168,16 @@ $overflowSelector: ".flex__overflow";
154
168
  // padding: var(--_lt-pg);
155
169
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
156
170
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
157
- width: var(--_sf-el-wh-st-mx,
158
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
159
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
171
+ width: var(
172
+ --_sf-el-wh-st-mx,
173
+ calc(
174
+ 1% *
175
+ var(
176
+ --_ctm-mob-ele-nw-wh-vl,
177
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
178
+ )
179
+ )
180
+ );
160
181
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
161
182
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
162
183
 
@@ -167,7 +188,7 @@ $overflowSelector: ".flex__overflow";
167
188
  // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
168
189
  // );
169
190
 
170
- &>.wrapper {
191
+ & > .wrapper {
171
192
  width: 100%;
172
193
  // Follow the elements own height so the styled box (background, border, shadow)
173
194
  // matches the Height set in layout instead of only hugging the text.
@@ -176,26 +197,34 @@ $overflowSelector: ".flex__overflow";
176
197
  background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
177
198
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
178
199
 
179
- border-color: var(--_show-border,
180
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))));
181
- border-style: var(--_show-border,
182
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))));
183
- border-width: var(--_show-border,
184
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
200
+ border-color: var(
201
+ --_show-border,
202
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
203
+ );
204
+ border-style: var(
205
+ --_show-border,
206
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
207
+ );
208
+ border-width: var(
209
+ --_show-border,
210
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
211
+ );
185
212
  border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
186
- box-shadow: var(--_show-shadow,
187
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))));
213
+ box-shadow: var(
214
+ --_show-shadow,
215
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
216
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
217
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
218
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
219
+ );
188
220
  // height: 100%;
189
221
  }
190
-
191
222
  &[data-show-shadow="false"] {
192
223
  --_show-shadow: none;
193
224
  }
194
-
195
225
  &[data-show-border="false"] {
196
226
  --_show-border: none;
197
227
  }
198
-
199
228
  // .text-element {
200
229
  // background: #6d96e4;
201
230
  // // padding: 10px;
@@ -215,7 +244,6 @@ $overflowSelector: ".flex__overflow";
215
244
  &#{$overflowSelector} {
216
245
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
217
246
  }
218
-
219
247
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
220
248
  // border-color: var(
221
249
  // --_show-border,
@@ -255,38 +283,42 @@ $overflowSelector: ".flex__overflow";
255
283
  // );
256
284
  text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
257
285
  scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
258
-
259
286
  &[data-flip-x="true"] {
260
287
  transform: scaleX(-1);
261
288
  }
262
-
263
289
  &[data-flip-y="true"] {
264
290
  transform: scaleY(-1);
265
291
  }
266
-
267
292
  &,
268
293
  * {
269
294
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
270
295
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
271
296
  font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
272
297
  font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
273
- font-style: var(--_ctm-mob-dn-ft-se-ic,
274
- var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
298
+ font-style: var(
299
+ --_ctm-mob-dn-ft-se-ic,
300
+ var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic))
301
+ );
275
302
  text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
276
303
  letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
277
304
  // Line box guard — see the note on the other groups in this file.
278
- line-height: max(var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
279
- 1em);
280
- text-decoration: var(--_sf-hr-tt-dn,
281
- var(--_ctm-mob-dn-dt-se-ue,
282
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))));
305
+ line-height: max(
306
+ var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
307
+ 1em
308
+ );
309
+ text-decoration: var(
310
+ --_sf-hr-tt-dn,
311
+ var(
312
+ --_ctm-mob-dn-dt-se-ue,
313
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
314
+ )
315
+ );
283
316
  text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
284
317
  word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
285
318
  word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
286
319
  }
287
320
  }
288
321
  }
289
-
290
322
  &[data-element-type="productBrand"] {
291
323
  // width: var(--_lt-wh);
292
324
  // height: var(--_lt-ht);
@@ -294,9 +326,16 @@ $overflowSelector: ".flex__overflow";
294
326
  // padding: var(--_lt-pg);
295
327
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
296
328
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
297
- width: var(--_sf-el-wh-st-mx,
298
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
299
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
329
+ width: var(
330
+ --_sf-el-wh-st-mx,
331
+ calc(
332
+ 1% *
333
+ var(
334
+ --_ctm-mob-ele-nw-wh-vl,
335
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
336
+ )
337
+ )
338
+ );
300
339
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
301
340
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
302
341
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
@@ -306,33 +345,41 @@ $overflowSelector: ".flex__overflow";
306
345
  // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
307
346
  // );
308
347
 
309
- &>.wrapper {
348
+ & > .wrapper {
310
349
  width: 100%;
311
350
  // Follow the elements own height so the styled box (background, border, shadow)
312
351
  // matches the Height set in layout instead of only hugging the text.
313
352
  min-height: inherit;
314
353
  background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
315
354
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
316
- border-color: var(--_show-border,
317
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))));
318
- border-style: var(--_show-border,
319
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))));
320
- border-width: var(--_show-border,
321
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
355
+ border-color: var(
356
+ --_show-border,
357
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
358
+ );
359
+ border-style: var(
360
+ --_show-border,
361
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
362
+ );
363
+ border-width: var(
364
+ --_show-border,
365
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
366
+ );
322
367
  border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
323
- box-shadow: var(--_show-shadow,
324
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))));
368
+ box-shadow: var(
369
+ --_show-shadow,
370
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
371
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
372
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
373
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
374
+ );
325
375
  // height: 100%;
326
376
  }
327
-
328
377
  &[data-show-shadow="false"] {
329
378
  --_show-shadow: none;
330
379
  }
331
-
332
380
  &[data-show-border="false"] {
333
381
  --_show-border: none;
334
382
  }
335
-
336
383
  // .text-element {
337
384
  // background: #6d96e4;
338
385
  // // padding: 10px;
@@ -371,12 +418,10 @@ $overflowSelector: ".flex__overflow";
371
418
  // );
372
419
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
373
420
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
374
-
375
421
  &.flex__overflow {
376
422
  white-space: normal;
377
423
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
378
424
  }
379
-
380
425
  font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
381
426
  font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
382
427
  font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
@@ -387,31 +432,32 @@ $overflowSelector: ".flex__overflow";
387
432
  // up taller than their own line box and spill out of it, which is what makes the
388
433
  // text look cut off. max(..., 1em) keeps the box at least as tall as the text
389
434
  // while still honouring any larger value the user sets.
390
- line-height: max(var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
391
- 1em);
392
- text-decoration: var(--_sf-hr-tt-dn,
393
- var(--_ctm-mob-dn-dt-se-ue,
394
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))));
435
+ line-height: max(
436
+ var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
437
+ 1em
438
+ );
439
+ text-decoration: var(
440
+ --_sf-hr-tt-dn,
441
+ var(
442
+ --_ctm-mob-dn-dt-se-ue,
443
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
444
+ )
445
+ );
395
446
  word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
396
447
  word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
397
448
  scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
398
-
399
449
  &[data-flip-x="true"] {
400
450
  transform: scaleX(-1);
401
451
  }
402
-
403
452
  &[data-flip-y="true"] {
404
453
  transform: scaleY(-1);
405
454
  }
406
-
407
455
  text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
408
-
409
456
  &#{$overflowSelector} {
410
457
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
411
458
  }
412
459
  }
413
460
  }
414
-
415
461
  &[data-element-type="productCode"],
416
462
  &[data-element-type="categoryCode"] {
417
463
  // width: var(--_lt-wh);
@@ -420,9 +466,16 @@ $overflowSelector: ".flex__overflow";
420
466
  // padding: var(--_lt-pg);
421
467
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
422
468
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
423
- width: var(--_sf-el-wh-st-mx,
424
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
425
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
469
+ width: var(
470
+ --_sf-el-wh-st-mx,
471
+ calc(
472
+ 1% *
473
+ var(
474
+ --_ctm-mob-ele-nw-wh-vl,
475
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
476
+ )
477
+ )
478
+ );
426
479
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
427
480
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
428
481
  // height: ;
@@ -431,33 +484,41 @@ $overflowSelector: ".flex__overflow";
431
484
  // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
432
485
  // );
433
486
 
434
- &>.wrapper {
487
+ & > .wrapper {
435
488
  width: 100%;
436
489
  // Follow the elements own height so the styled box (background, border, shadow)
437
490
  // matches the Height set in layout instead of only hugging the text.
438
491
  min-height: inherit;
439
492
  background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
440
493
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
441
- border-color: var(--_show-border,
442
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr))));
443
- border-style: var(--_show-border,
444
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se))));
445
- border-width: var(--_show-border,
446
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
494
+ border-color: var(
495
+ --_show-border,
496
+ var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
497
+ );
498
+ border-style: var(
499
+ --_show-border,
500
+ var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
501
+ );
502
+ border-width: var(
503
+ --_show-border,
504
+ var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
505
+ );
447
506
  border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
448
- box-shadow: var(--_show-shadow,
449
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))));
507
+ box-shadow: var(
508
+ --_show-shadow,
509
+ var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
510
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
511
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
512
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
513
+ );
450
514
  // height: 100%;
451
515
  }
452
-
453
516
  &[data-show-shadow="false"] {
454
517
  --_show-shadow: none;
455
518
  }
456
-
457
519
  &[data-show-border="false"] {
458
520
  --_show-border: none;
459
521
  }
460
-
461
522
  // .text-element {
462
523
  // background: #6d96e4;
463
524
  // // padding: 10px;
@@ -496,12 +557,10 @@ $overflowSelector: ".flex__overflow";
496
557
  // );
497
558
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
498
559
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
499
-
500
560
  &.flex__overflow {
501
561
  white-space: normal;
502
562
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
503
563
  }
504
-
505
564
  font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
506
565
  font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
507
566
  font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
@@ -512,28 +571,30 @@ $overflowSelector: ".flex__overflow";
512
571
  // up taller than their own line box and spill out of it, which is what makes the
513
572
  // text look cut off. max(..., 1em) keeps the box at least as tall as the text
514
573
  // while still honouring any larger value the user sets.
515
- line-height: max(var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
516
- 1em);
517
- text-decoration: var(--_sf-hr-tt-dn,
518
- var(--_ctm-mob-dn-dt-se-ue,
519
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))));
574
+ line-height: max(
575
+ var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
576
+ 1em
577
+ );
578
+ text-decoration: var(
579
+ --_sf-hr-tt-dn,
580
+ var(
581
+ --_ctm-mob-dn-dt-se-ue,
582
+ var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
583
+ )
584
+ );
520
585
  scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
521
-
522
586
  &[data-flip-x="true"] {
523
587
  transform: scaleX(-1);
524
588
  }
525
-
526
589
  &[data-flip-y="true"] {
527
590
  transform: scaleY(-1);
528
591
  }
529
-
530
592
  text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
531
593
  word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
532
594
  word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
533
-
534
595
  &#{$overflowSelector} {
535
596
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
536
597
  }
537
598
  }
538
599
  }
539
- }
600
+ }