@sc-360-v2/storefront-cms-library 0.5.59 → 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 (201) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +129 -245
  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 +198 -411
  6. package/dist/allocationDetails.scss +1645 -2126
  7. package/dist/allocations-quota-details.scss +168 -327
  8. package/dist/allocations.scss +476 -797
  9. package/dist/amount-estimator.scss +405 -743
  10. package/dist/animation-control.scss +23 -23
  11. package/dist/badge.scss +43 -18
  12. package/dist/brand-basic-elements.scss +76 -124
  13. package/dist/brand.scss +28 -55
  14. package/dist/breadcrumbs.scss +356 -718
  15. package/dist/builder.js +1 -1
  16. package/dist/bulk-variant-picker.scss +1133 -2034
  17. package/dist/bundle copy.scss +235 -0
  18. package/dist/bundle.scss +843 -1479
  19. package/dist/bundleDetails.scss +3774 -5063
  20. package/dist/button copy.scss +28 -0
  21. package/dist/button.scss +78 -103
  22. package/dist/buy-for-tab-container.scss +77 -106
  23. package/dist/buy-for-tabs-container-item.scss +80 -80
  24. package/dist/buyForHeaders.scss +1725 -2988
  25. package/dist/cart-details.scss +491 -1012
  26. package/dist/cart-products-sidebar.scss +211 -211
  27. package/dist/cart-summary.scss +559 -1152
  28. package/dist/cart-wrapper.scss +85 -127
  29. package/dist/cart.scss +115 -223
  30. package/dist/cartAttributes.scss +367 -647
  31. package/dist/cartGrouping.scss +89 -89
  32. package/dist/category-groups-element.scss +127 -108
  33. package/dist/category-groups-product-grid.scss +40 -79
  34. package/dist/category-groups-product-image.scss +457 -1390
  35. package/dist/category-groups-product-options.scss +224 -693
  36. package/dist/category-groups-product-price.scss +1326 -4859
  37. package/dist/category-groups-quota-details.scss +217 -466
  38. package/dist/category.scss +26 -50
  39. package/dist/categoryDetails.scss +61 -61
  40. package/dist/categoryWidget.scss +34 -34
  41. package/dist/checkbox-radio.scss +124 -124
  42. package/dist/checkout.scss +1858 -4170
  43. package/dist/common-element.scss +35 -35
  44. package/dist/confirm-modal.scss +22 -2
  45. package/dist/confirmationModal.scss +139 -139
  46. package/dist/container.scss +32 -54
  47. package/dist/countdown.scss +256 -443
  48. package/dist/coupon.scss +355 -714
  49. package/dist/custom-fonts.scss +100 -100
  50. package/dist/default-dropdown.scss +12 -1
  51. package/dist/embroider-preview-element.scss +94 -94
  52. package/dist/embroider-template-1-v2.scss +123 -172
  53. package/dist/embroider-template-1.scss +68 -104
  54. package/dist/embroidery.scss +30 -31
  55. package/dist/employee-bulk-order.scss +418 -142
  56. package/dist/emtpy-templates.scss +165 -165
  57. package/dist/faq.scss +235 -419
  58. package/dist/filter-results.scss +125 -265
  59. package/dist/filters.scss +831 -1682
  60. package/dist/flex-text-editor.scss +271 -271
  61. package/dist/functions.scss +36 -0
  62. package/dist/gallery-slider-temp.scss +435 -758
  63. package/dist/global-styles.scss +23 -7
  64. package/dist/grid.scss +25 -33
  65. package/dist/hotspot.scss +69 -119
  66. package/dist/icon-list.scss +30 -59
  67. package/dist/image-for-product.scss +21 -21
  68. package/dist/image-temp.scss +21 -20
  69. package/dist/item-stock.scss +9 -16
  70. package/dist/kitDetails.scss +2719 -4299
  71. package/dist/kits.scss +24 -19
  72. package/dist/language-selector.scss +233 -375
  73. package/dist/last-x-orders.scss +101 -187
  74. package/dist/layouter-item.scss +75 -103
  75. package/dist/layouter-pro-item.scss +89 -95
  76. package/dist/layouter-pro.scss +87 -92
  77. package/dist/layouter.scss +67 -117
  78. package/dist/light-box-v2.scss +89 -104
  79. package/dist/lightbox.scss +78 -78
  80. package/dist/line.scss +29 -70
  81. package/dist/loader.scss +37 -37
  82. package/dist/login.scss +291 -572
  83. package/dist/map.scss +220 -369
  84. package/dist/marchandiserSets.scss +95 -104
  85. package/dist/mega-menu-container.scss +96 -109
  86. package/dist/mega-menu.scss +624 -734
  87. package/dist/menu-item.scss +19 -19
  88. package/dist/menu-v2.scss +507 -619
  89. package/dist/multi-select-dropdown.scss +27 -3
  90. package/dist/my-templates.scss +38 -9
  91. package/dist/myTemplates.scss +3 -0
  92. package/dist/option-bar.scss +215 -375
  93. package/dist/order-processing.scss +61 -61
  94. package/dist/order-status.scss +643 -1117
  95. package/dist/overflow-module.scss +62 -63
  96. package/dist/past-orders.scss +118 -149
  97. package/dist/payment-methods.scss +46 -30
  98. package/dist/pickup-locations.scss +564 -1121
  99. package/dist/position-module.scss +98 -95
  100. package/dist/prefix-list.scss +97 -86
  101. package/dist/product-actions.scss +1230 -1783
  102. package/dist/product-basic-elements.scss +108 -169
  103. package/dist/product-highlights.scss +116 -157
  104. package/dist/product-image-bundles.scss +345 -671
  105. package/dist/product-image.scss +341 -724
  106. package/dist/product-inventory.scss +673 -1357
  107. package/dist/product-labels.scss +94 -113
  108. package/dist/product-options.scss +288 -486
  109. package/dist/product-price.scss +1284 -2556
  110. package/dist/product-promotions.scss +1388 -2830
  111. package/dist/product-sizechart.scss +516 -905
  112. package/dist/product.scss +28 -61
  113. package/dist/productDetails.scss +19 -38
  114. package/dist/profile.scss +231 -447
  115. package/dist/quantity-selector.scss +313 -550
  116. package/dist/quick-inventory-check.scss +101 -187
  117. package/dist/quick-links.scss +56 -133
  118. package/dist/quick-order-pad.scss +216 -269
  119. package/dist/quota-details.scss +163 -297
  120. package/dist/quotes.scss +82 -121
  121. package/dist/repeater copy.scss +24 -0
  122. package/dist/repeater-embla-controls.scss +34 -14
  123. package/dist/repeater-grid-toggle.scss +156 -166
  124. package/dist/repeater-item.scss +41 -64
  125. package/dist/repeater.scss +579 -688
  126. package/dist/request-for-quotes.scss +66 -16
  127. package/dist/responsive-behaviour.scss +31 -29
  128. package/dist/rfqs.scss +118 -181
  129. package/dist/scroll.scss +89 -167
  130. package/dist/search.scss +179 -326
  131. package/dist/section.scss +27 -51
  132. package/dist/shareCartSideBar.scss +254 -254
  133. package/dist/shipping-estimator.scss +41 -41
  134. package/dist/shipping-payments.scss +198 -58
  135. package/dist/simple-list.scss +65 -135
  136. package/dist/social.scss +78 -143
  137. package/dist/sort.scss +89 -89
  138. package/dist/stack.scss +23 -34
  139. package/dist/static-global.scss +44 -26
  140. package/dist/static-text.scss +52 -52
  141. package/dist/stockStatus.scss +11 -19
  142. package/dist/store-locations.scss +587 -1113
  143. package/dist/sub-category.scss +74 -74
  144. package/dist/submit-quote.scss +275 -275
  145. package/dist/tab-container-item.scss +80 -80
  146. package/dist/tab-container.scss +81 -108
  147. package/dist/tab-v2.scss +277 -604
  148. package/dist/table-common.scss +215 -406
  149. package/dist/table.scss +267 -509
  150. package/dist/text-temp-v2.scss +12 -23
  151. package/dist/text-temp.scss +110 -109
  152. package/dist/theme-classes.scss +17 -13
  153. package/dist/toggle-button.scss +32 -32
  154. package/dist/transform-properties-module.scss +20 -20
  155. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +108 -0
  156. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +6 -0
  157. package/dist/types/builder/tools/element-edit/bundle.d.ts +22 -0
  158. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +64 -0
  159. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +10 -0
  160. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +84 -0
  161. package/dist/types/builder/tools/element-edit/cart.d.ts +6 -0
  162. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +60 -0
  163. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +16 -0
  164. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +202 -0
  165. package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +158 -0
  166. package/dist/types/builder/tools/element-edit/checkout.d.ts +172 -0
  167. package/dist/types/builder/tools/element-edit/common.d.ts +2 -0
  168. package/dist/types/builder/tools/element-edit/countdown.d.ts +44 -0
  169. package/dist/types/builder/tools/element-edit/coupon.d.ts +28 -0
  170. package/dist/types/builder/tools/element-edit/embroidery.d.ts +37 -0
  171. package/dist/types/builder/tools/element-edit/filterResults.d.ts +4 -0
  172. package/dist/types/builder/tools/element-edit/icon-list.d.ts +11 -0
  173. package/dist/types/builder/tools/element-edit/itemStock.d.ts +2 -0
  174. package/dist/types/builder/tools/element-edit/kitDetails.d.ts +66 -0
  175. package/dist/types/builder/tools/element-edit/kits.d.ts +4 -0
  176. package/dist/types/builder/tools/element-edit/map.d.ts +5 -1
  177. package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts +2 -0
  178. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +17 -0
  179. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +6 -0
  180. package/dist/types/builder/tools/element-edit/productCustomizations.d.ts +14 -0
  181. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +26 -0
  182. package/dist/types/builder/tools/element-edit/scroll.d.ts +2 -11
  183. package/dist/types/builder/tools/element-edit/search.d.ts +1 -0
  184. package/dist/types/builder/tools/element-edit/searchResultsHeading.d.ts +6 -0
  185. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +72 -0
  186. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +4 -0
  187. package/dist/types/builder/tools/element-edit/social.d.ts +2 -0
  188. package/dist/types/builder/tools/element-edit/spotlight.d.ts +2 -0
  189. package/dist/types/builder/tools/element-edit/table.d.ts +10 -0
  190. package/dist/types/builder/tools/element-edit/tabs.d.ts +6 -0
  191. package/dist/types/builder/tools/element-edit/typographyInstance.d.ts +110 -0
  192. package/dist/types/builder/tools/element-edit/userElements.d.ts +50 -11
  193. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +4 -0
  194. package/dist/types/builder/tools/element-edit/video.d.ts +22 -0
  195. package/dist/uom-selector.scss +489 -943
  196. package/dist/user-elements.scss +537 -826
  197. package/dist/variant-picker.scss +1282 -2559
  198. package/dist/video.scss +147 -325
  199. package/dist/volume-pricing.scss +539 -1035
  200. package/dist/wishlist-overlay.scss +48 -48
  201. 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,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
+ }