@sc-360-v2/storefront-cms-library 0.5.72 → 0.5.73

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