@sc-360-v2/storefront-cms-library 0.5.71 → 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 (128) 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/bundleCategories.scss +301 -301
  18. package/dist/bundleDetails.scss +3774 -5072
  19. package/dist/button.scss +79 -103
  20. package/dist/buy-for-tab-container.scss +77 -106
  21. package/dist/buyForHeaders.scss +1722 -2976
  22. package/dist/cart-details.scss +481 -1012
  23. package/dist/cart-summary.scss +2234 -2826
  24. package/dist/cart-wrapper.scss +37 -79
  25. package/dist/cart.scss +117 -225
  26. package/dist/cartAttributes.scss +1103 -1422
  27. package/dist/category-groups-element.scss +127 -108
  28. package/dist/category-groups-product-grid.scss +120 -147
  29. package/dist/category-groups-product-image.scss +1162 -1457
  30. package/dist/category-groups-product-options.scss +613 -680
  31. package/dist/category-groups-product-price.scss +1966 -3244
  32. package/dist/category-groups-quota-details.scss +210 -464
  33. package/dist/category.scss +26 -50
  34. package/dist/checkout.scss +24 -16
  35. package/dist/confirm-modal.scss +22 -2
  36. package/dist/container.scss +32 -54
  37. package/dist/countdown.scss +711 -899
  38. package/dist/coupon.scss +1160 -1519
  39. package/dist/default-dropdown.scss +12 -1
  40. package/dist/embroider-template-1-v2.scss +123 -172
  41. package/dist/embroider-template-1.scss +68 -104
  42. package/dist/embroidery.scss +30 -31
  43. package/dist/employee-bulk-order.scss +418 -142
  44. package/dist/faq.scss +228 -408
  45. package/dist/filter-results.scss +125 -265
  46. package/dist/filters.scss +2143 -3040
  47. package/dist/gallery-slider-temp.scss +1458 -1776
  48. package/dist/global-styles.scss +218 -198
  49. package/dist/grid.scss +25 -33
  50. package/dist/hotspot.scss +68 -115
  51. package/dist/image-temp.scss +21 -20
  52. package/dist/item-stock.scss +9 -16
  53. package/dist/kitDetails.scss +2719 -4299
  54. package/dist/kits.scss +24 -19
  55. package/dist/language-selector.scss +211 -361
  56. package/dist/last-x-orders.scss +95 -174
  57. package/dist/layouter-item.scss +75 -103
  58. package/dist/layouter-pro-item.scss +89 -95
  59. package/dist/layouter-pro.scss +87 -92
  60. package/dist/layouter.scss +383 -445
  61. package/dist/light-box-v2.scss +89 -104
  62. package/dist/login.scss +287 -566
  63. package/dist/map.scss +1212 -1359
  64. package/dist/marchandiserSets.scss +95 -104
  65. package/dist/mega-menu-container.scss +96 -109
  66. package/dist/mega-menu.scss +624 -731
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +507 -619
  69. package/dist/multi-select-dropdown.scss +27 -3
  70. package/dist/my-templates.scss +38 -9
  71. package/dist/option-bar.scss +215 -375
  72. package/dist/order-status.scss +1790 -2187
  73. package/dist/overflow-module.scss +6 -7
  74. package/dist/past-orders.scss +118 -149
  75. package/dist/payment-methods.scss +46 -30
  76. package/dist/pickup-locations.scss +558 -1118
  77. package/dist/position-module.scss +20 -17
  78. package/dist/prefix-list.scss +21 -10
  79. package/dist/product-actions.scss +1750 -2055
  80. package/dist/product-basic-elements.scss +108 -169
  81. package/dist/product-highlights.scss +303 -348
  82. package/dist/product-image-allocation.scss +1477 -1477
  83. package/dist/product-image-bundles.scss +337 -642
  84. package/dist/product-inventory.scss +673 -1357
  85. package/dist/product-labels.scss +84 -105
  86. package/dist/product-options.scss +1287 -1444
  87. package/dist/product-price.scss +1283 -2561
  88. package/dist/product-promotions.scss +1388 -2830
  89. package/dist/product-sizechart.scss +516 -905
  90. package/dist/product.scss +28 -61
  91. package/dist/productDetails.scss +19 -39
  92. package/dist/profile.scss +207 -447
  93. package/dist/quantity-selector.scss +837 -1074
  94. package/dist/quick-inventory-check.scss +95 -174
  95. package/dist/quick-links.scss +55 -133
  96. package/dist/quick-order-pad.scss +218 -271
  97. package/dist/quota-details.scss +152 -282
  98. package/dist/quotes.scss +814 -847
  99. package/dist/repeater-embla-controls.scss +35 -15
  100. package/dist/repeater-grid-toggle.scss +156 -166
  101. package/dist/repeater-item.scss +41 -64
  102. package/dist/repeater.scss +671 -814
  103. package/dist/request-for-quotes.scss +66 -16
  104. package/dist/responsive-behaviour.scss +3 -1
  105. package/dist/rfqs.scss +118 -181
  106. package/dist/scroll.scss +93 -172
  107. package/dist/search-results-heading.scss +309 -309
  108. package/dist/search.scss +179 -326
  109. package/dist/section.scss +27 -51
  110. package/dist/shipping-payments.scss +198 -58
  111. package/dist/simple-list.scss +74 -164
  112. package/dist/social.scss +80 -145
  113. package/dist/sort.scss +168 -176
  114. package/dist/stack.scss +23 -34
  115. package/dist/static-global.scss +44 -26
  116. package/dist/stockStatus.scss +11 -19
  117. package/dist/store-locations.scss +577 -1105
  118. package/dist/tab-container.scss +81 -108
  119. package/dist/table-common.scss +217 -408
  120. package/dist/table.scss +271 -502
  121. package/dist/text-temp.scss +8 -7
  122. package/dist/theme-classes.scss +17 -13
  123. package/dist/uom-selector.scss +489 -949
  124. package/dist/user-elements.scss +2588 -2896
  125. package/dist/variant-picker.scss +1281 -2555
  126. package/dist/volume-pricing.scss +541 -1037
  127. package/dist/widget.scss +153 -153
  128. 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
+ }