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

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 (211) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +141 -210
  3. package/dist/add-products-tab-details.scss +1121 -1920
  4. package/dist/add-products-tab-uom-details.scss +105 -0
  5. package/dist/add-products-tab.scss +682 -994
  6. package/dist/allocation-header-quota-details.scss +198 -327
  7. package/dist/allocationDetails.scss +1645 -2022
  8. package/dist/allocations-quota-details.scss +168 -261
  9. package/dist/allocations.scss +504 -715
  10. package/dist/amount-estimator.scss +414 -648
  11. package/dist/animation-control.scss +23 -23
  12. package/dist/badge.scss +55 -18
  13. package/dist/brand-basic-elements.scss +93 -124
  14. package/dist/brand.scss +28 -55
  15. package/dist/breadcrumbs.scss +372 -718
  16. package/dist/builder.js +1 -1
  17. package/dist/bulk-variant-picker.scss +1161 -1816
  18. package/dist/bundle copy.scss +235 -0
  19. package/dist/bundle.scss +2142 -2584
  20. package/dist/bundleDetails.scss +3808 -4802
  21. package/dist/button copy.scss +28 -0
  22. package/dist/button.scss +89 -102
  23. package/dist/buy-for-tab-container.scss +77 -106
  24. package/dist/buy-for-tab.scss +54 -0
  25. package/dist/buy-for-tabs-container-item.scss +80 -80
  26. package/dist/buyForHeaders.scss +1823 -2457
  27. package/dist/cart-details.scss +514 -718
  28. package/dist/cart-products-sidebar.scss +211 -211
  29. package/dist/cart-summary.scss +611 -1015
  30. package/dist/cart-wrapper.scss +85 -127
  31. package/dist/cart.scss +119 -211
  32. package/dist/cartAttributes.scss +377 -539
  33. package/dist/cartDropdownOverlay.scss +21 -0
  34. package/dist/cartGrouping.scss +89 -89
  35. package/dist/category-groups-element.scss +130 -96
  36. package/dist/category-groups-product-grid.scss +40 -79
  37. package/dist/category-groups-product-image.scss +457 -1306
  38. package/dist/category-groups-product-options.scss +224 -606
  39. package/dist/category-groups-product-price.scss +1366 -4199
  40. package/dist/category-groups-quota-details.scss +217 -382
  41. package/dist/category.scss +26 -50
  42. package/dist/categoryDetails.scss +61 -61
  43. package/dist/categoryWidget.scss +34 -34
  44. package/dist/checkbox-radio.scss +124 -124
  45. package/dist/checkout.scss +1915 -3309
  46. package/dist/common-element.scss +35 -35
  47. package/dist/confirm-modal.scss +22 -2
  48. package/dist/confirmationModal.scss +139 -139
  49. package/dist/container.scss +32 -54
  50. package/dist/countdown.scss +264 -371
  51. package/dist/coupon.scss +379 -600
  52. package/dist/custom-fonts.scss +100 -100
  53. package/dist/default-dropdown.scss +12 -1
  54. package/dist/embroider-preview-element.scss +94 -94
  55. package/dist/embroider-template-1-v2.scss +157 -172
  56. package/dist/embroider-template-1.scss +465 -482
  57. package/dist/embroidery.scss +37 -31
  58. package/dist/employee-bulk-order.scss +418 -142
  59. package/dist/emtpy-templates.scss +165 -165
  60. package/dist/faq.scss +239 -395
  61. package/dist/filter-results.scss +221 -323
  62. package/dist/filters.scss +843 -1406
  63. package/dist/flex-text-editor.scss +271 -271
  64. package/dist/functions.scss +36 -0
  65. package/dist/gallery-slider-temp.scss +428 -727
  66. package/dist/global-styles.scss +45 -6
  67. package/dist/grid.scss +25 -33
  68. package/dist/hotspot.scss +75 -115
  69. package/dist/icon-list.scss +33 -59
  70. package/dist/image-for-product.scss +21 -21
  71. package/dist/image-temp.scss +21 -20
  72. package/dist/item-stock.scss +15 -16
  73. package/dist/kitDetails.scss +2786 -4008
  74. package/dist/kits.scss +28 -19
  75. package/dist/language-selector.scss +241 -375
  76. package/dist/last-x-orders.scss +101 -163
  77. package/dist/layouter-item.scss +75 -103
  78. package/dist/layouter-pro-item.scss +89 -95
  79. package/dist/layouter-pro.scss +87 -92
  80. package/dist/layouter.scss +67 -117
  81. package/dist/light-box-v2.scss +89 -104
  82. package/dist/lightbox.scss +78 -78
  83. package/dist/line.scss +29 -70
  84. package/dist/loader.scss +37 -37
  85. package/dist/login.scss +316 -489
  86. package/dist/map.scss +233 -336
  87. package/dist/marchandiserSets.scss +95 -104
  88. package/dist/mega-menu-container.scss +96 -109
  89. package/dist/mega-menu.scss +627 -670
  90. package/dist/menu-item.scss +19 -19
  91. package/dist/menu-v2.scss +538 -528
  92. package/dist/menu.scss +12 -0
  93. package/dist/multi-select-dropdown.scss +27 -3
  94. package/dist/my-templates.scss +41 -9
  95. package/dist/myTemplates.scss +3 -0
  96. package/dist/option-bar.scss +229 -351
  97. package/dist/order-processing.scss +61 -61
  98. package/dist/order-status.scss +666 -1096
  99. package/dist/overflow-module.scss +62 -63
  100. package/dist/past-orders.scss +168 -149
  101. package/dist/payment-methods.scss +323 -289
  102. package/dist/pickup-locations.scss +568 -941
  103. package/dist/position-module.scss +98 -95
  104. package/dist/prefix-list.scss +97 -86
  105. package/dist/product-actions.scss +1262 -1620
  106. package/dist/product-basic-elements.scss +116 -169
  107. package/dist/product-customizations.scss +155 -149
  108. package/dist/product-highlights.scss +116 -145
  109. package/dist/product-image-allocation.scss +38 -0
  110. package/dist/product-image-bundles.scss +359 -638
  111. package/dist/product-image.scss +341 -676
  112. package/dist/product-inventory.scss +673 -1117
  113. package/dist/product-labels.scss +94 -101
  114. package/dist/product-options.scss +298 -438
  115. package/dist/product-price.scss +1325 -2182
  116. package/dist/product-promotions.scss +1388 -2374
  117. package/dist/product-sizechart.scss +523 -821
  118. package/dist/product.scss +28 -61
  119. package/dist/productDetails.scss +19 -38
  120. package/dist/profile.scss +242 -406
  121. package/dist/quantity-selector.scss +327 -502
  122. package/dist/quick-inventory-check.scss +101 -163
  123. package/dist/quick-links.scss +72 -133
  124. package/dist/quick-order-pad.scss +224 -206
  125. package/dist/quota-details.scss +163 -297
  126. package/dist/quotes.scss +727 -737
  127. package/dist/repeater copy.scss +24 -0
  128. package/dist/repeater-embla-controls.scss +34 -14
  129. package/dist/repeater-grid-toggle.scss +156 -166
  130. package/dist/repeater-item.scss +41 -64
  131. package/dist/repeater.scss +579 -669
  132. package/dist/request-for-quotes.scss +66 -16
  133. package/dist/responsive-behaviour.scss +31 -29
  134. package/dist/rfqs.scss +147 -181
  135. package/dist/scroll.scss +93 -167
  136. package/dist/search-results-heading.scss +36 -0
  137. package/dist/search.scss +186 -290
  138. package/dist/section.scss +27 -51
  139. package/dist/shareCartSideBar.scss +254 -254
  140. package/dist/shipping-estimator.scss +41 -41
  141. package/dist/shipping-payments.scss +246 -58
  142. package/dist/simple-list.scss +65 -123
  143. package/dist/social.scss +78 -131
  144. package/dist/sort.scss +89 -89
  145. package/dist/spotlight.scss +48 -0
  146. package/dist/stack.scss +23 -34
  147. package/dist/static-global.scss +44 -26
  148. package/dist/static-text.scss +52 -52
  149. package/dist/stockStatus.scss +14 -19
  150. package/dist/store-locations.scss +595 -933
  151. package/dist/sub-category.scss +74 -74
  152. package/dist/submit-quote.scss +275 -275
  153. package/dist/tab-container-item.scss +80 -80
  154. package/dist/tab-container.scss +81 -108
  155. package/dist/tab-v2.scss +277 -580
  156. package/dist/table-common.scss +218 -331
  157. package/dist/table.scss +273 -434
  158. package/dist/tabs.scss +440 -395
  159. package/dist/text-temp-v2.scss +12 -23
  160. package/dist/text-temp.scss +110 -109
  161. package/dist/theme-classes.scss +66 -13
  162. package/dist/toaster.scss +392 -350
  163. package/dist/toggle-button.scss +32 -32
  164. package/dist/transform-properties-module.scss +20 -20
  165. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +108 -0
  166. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +6 -0
  167. package/dist/types/builder/tools/element-edit/bundle.d.ts +22 -0
  168. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +64 -0
  169. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +10 -0
  170. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +84 -0
  171. package/dist/types/builder/tools/element-edit/cart.d.ts +6 -0
  172. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +60 -0
  173. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +16 -0
  174. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +202 -0
  175. package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +158 -0
  176. package/dist/types/builder/tools/element-edit/checkout.d.ts +172 -0
  177. package/dist/types/builder/tools/element-edit/common.d.ts +2 -0
  178. package/dist/types/builder/tools/element-edit/countdown.d.ts +44 -0
  179. package/dist/types/builder/tools/element-edit/coupon.d.ts +28 -0
  180. package/dist/types/builder/tools/element-edit/embroidery.d.ts +37 -0
  181. package/dist/types/builder/tools/element-edit/filterResults.d.ts +4 -0
  182. package/dist/types/builder/tools/element-edit/icon-list.d.ts +11 -0
  183. package/dist/types/builder/tools/element-edit/itemStock.d.ts +2 -0
  184. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +66 -0
  185. package/dist/types/builder/tools/element-edit/kits.d.ts +4 -0
  186. package/dist/types/builder/tools/element-edit/map.d.ts +5 -1
  187. package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts +2 -0
  188. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +17 -0
  189. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +6 -0
  190. package/dist/types/builder/tools/element-edit/productCustomizations.d.ts +14 -0
  191. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +26 -0
  192. package/dist/types/builder/tools/element-edit/scroll.d.ts +2 -11
  193. package/dist/types/builder/tools/element-edit/search.d.ts +1 -0
  194. package/dist/types/builder/tools/element-edit/searchResultsHeading.d.ts +6 -0
  195. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +72 -0
  196. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +4 -0
  197. package/dist/types/builder/tools/element-edit/social.d.ts +2 -0
  198. package/dist/types/builder/tools/element-edit/spotlight.d.ts +2 -0
  199. package/dist/types/builder/tools/element-edit/table.d.ts +10 -0
  200. package/dist/types/builder/tools/element-edit/tabs.d.ts +6 -0
  201. package/dist/types/builder/tools/element-edit/typographyInstance.d.ts +110 -0
  202. package/dist/types/builder/tools/element-edit/userElements.d.ts +50 -11
  203. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +4 -0
  204. package/dist/types/builder/tools/element-edit/video.d.ts +22 -0
  205. package/dist/uom-selector.scss +499 -841
  206. package/dist/user-elements.scss +653 -774
  207. package/dist/variant-picker.scss +1298 -2358
  208. package/dist/video.scss +147 -325
  209. package/dist/volume-pricing.scss +545 -849
  210. package/dist/wishlist-overlay.scss +48 -48
  211. package/package.json +131 -131
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,6 +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
+
375
+ &.flex__overflow {
376
+ white-space: normal;
377
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
378
+ }
379
+
421
380
  font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
422
381
  font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
423
382
  font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
@@ -428,32 +387,31 @@ $overflowSelector: ".flex__overflow";
428
387
  // up taller than their own line box and spill out of it, which is what makes the
429
388
  // text look cut off. max(..., 1em) keeps the box at least as tall as the text
430
389
  // while still honouring any larger value the user sets.
431
- line-height: max(
432
- var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
433
- 1em
434
- );
435
- text-decoration: var(
436
- --_sf-hr-tt-dn,
437
- var(
438
- --_ctm-mob-dn-dt-se-ue,
439
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
440
- )
441
- );
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)))));
442
395
  word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
443
396
  word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
444
397
  scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
398
+
445
399
  &[data-flip-x="true"] {
446
400
  transform: scaleX(-1);
447
401
  }
402
+
448
403
  &[data-flip-y="true"] {
449
404
  transform: scaleY(-1);
450
405
  }
406
+
451
407
  text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
408
+
452
409
  &#{$overflowSelector} {
453
410
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
454
411
  }
455
412
  }
456
413
  }
414
+
457
415
  &[data-element-type="productCode"],
458
416
  &[data-element-type="categoryCode"] {
459
417
  // width: var(--_lt-wh);
@@ -462,16 +420,9 @@ $overflowSelector: ".flex__overflow";
462
420
  // padding: var(--_lt-pg);
463
421
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
464
422
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
465
- width: var(
466
- --_sf-el-wh-st-mx,
467
- calc(
468
- 1% *
469
- var(
470
- --_ctm-mob-ele-nw-wh-vl,
471
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
472
- )
473
- )
474
- );
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))))));
475
426
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
476
427
  min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
477
428
  // height: ;
@@ -480,41 +431,33 @@ $overflowSelector: ".flex__overflow";
480
431
  // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
481
432
  // );
482
433
 
483
- & > .wrapper {
434
+ &>.wrapper {
484
435
  width: 100%;
485
436
  // Follow the elements own height so the styled box (background, border, shadow)
486
437
  // matches the Height set in layout instead of only hugging the text.
487
438
  min-height: inherit;
488
439
  background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
489
440
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
490
- border-color: var(
491
- --_show-border,
492
- var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
493
- );
494
- border-style: var(
495
- --_show-border,
496
- var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
497
- );
498
- border-width: var(
499
- --_show-border,
500
- var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
501
- );
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))));
502
447
  border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
503
- box-shadow: var(
504
- --_show-shadow,
505
- var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
506
- var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
507
- var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
508
- var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
509
- );
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))));
510
450
  // height: 100%;
511
451
  }
452
+
512
453
  &[data-show-shadow="false"] {
513
454
  --_show-shadow: none;
514
455
  }
456
+
515
457
  &[data-show-border="false"] {
516
458
  --_show-border: none;
517
459
  }
460
+
518
461
  // .text-element {
519
462
  // background: #6d96e4;
520
463
  // // padding: 10px;
@@ -553,6 +496,12 @@ $overflowSelector: ".flex__overflow";
553
496
  // );
554
497
  color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
555
498
  font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
499
+
500
+ &.flex__overflow {
501
+ white-space: normal;
502
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
503
+ }
504
+
556
505
  font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
557
506
  font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
558
507
  font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
@@ -563,30 +512,28 @@ $overflowSelector: ".flex__overflow";
563
512
  // up taller than their own line box and spill out of it, which is what makes the
564
513
  // text look cut off. max(..., 1em) keeps the box at least as tall as the text
565
514
  // while still honouring any larger value the user sets.
566
- line-height: max(
567
- var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
568
- 1em
569
- );
570
- text-decoration: var(
571
- --_sf-hr-tt-dn,
572
- var(
573
- --_ctm-mob-dn-dt-se-ue,
574
- var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
575
- )
576
- );
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)))));
577
520
  scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
521
+
578
522
  &[data-flip-x="true"] {
579
523
  transform: scaleX(-1);
580
524
  }
525
+
581
526
  &[data-flip-y="true"] {
582
527
  transform: scaleY(-1);
583
528
  }
529
+
584
530
  text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
585
531
  word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
586
532
  word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
533
+
587
534
  &#{$overflowSelector} {
588
535
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
589
536
  }
590
537
  }
591
538
  }
592
- }
539
+ }