@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-highlights.scss CHANGED
@@ -10,12 +10,8 @@
10
10
  // padding: var(--_lt-pg);
11
11
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
12
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
- width: var(
14
- --_sf-el-wh-st-mx,
15
- calc(
16
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
17
- )
18
- );
13
+ width: var(--_sf-el-wh-st-mx,
14
+ calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
19
15
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
16
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
21
17
  // height: ;
@@ -24,27 +20,32 @@
24
20
  // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
25
21
  // );
26
22
 
27
- & > .wrapper {
23
+ &>.wrapper {
28
24
  width: 100%;
29
25
  // height: 100%;
30
26
  }
27
+
31
28
  &[data-show-shadow="false"] {
32
29
  --_show-shadow: none;
33
30
  }
31
+
34
32
  &[data-overflow-items="Scroll"] {
35
33
  .horizontal {
36
34
  width: 100%;
37
35
  overflow-x: auto;
36
+
38
37
  .item {
39
38
  width: 100%;
40
39
  flex-shrink: 0;
41
40
  }
42
41
  }
42
+
43
43
  .vertical {
44
44
  overflow-y: auto;
45
45
  max-height: 30%;
46
46
  }
47
47
  }
48
+
48
49
  .text-element {
49
50
  color: #333;
50
51
  font-size: 12px;
@@ -53,42 +54,29 @@
53
54
  line-height: 18px;
54
55
  margin-bottom: 6px;
55
56
  }
57
+
56
58
  .highlights__container {
57
- background-color: var(
58
- --_ctm-mob-dn-wt-se-bd-cr,
59
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
60
- );
61
-
62
- border-color: var(
63
- --_ctm-mob-dn-wt-se-br-cr,
64
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
65
- );
66
-
67
- border-style: var(
68
- --_ctm-mob-dn-wt-se-br-se,
69
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
70
- );
71
-
72
- border-width: var(
73
- --_ctm-mob-dn-wt-se-br-wh,
74
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
75
- );
76
-
77
- border-radius: var(
78
- --_ctm-mob-dn-wt-se-br-rs,
79
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
80
- );
81
-
82
- box-shadow: var(
83
- --_show-shadow,
84
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
85
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
86
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
87
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
88
- );
59
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
60
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
61
+
62
+ border-color: var(--_ctm-mob-dn-wt-se-br-cr,
63
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
64
+
65
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
66
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
67
+
68
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
69
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
70
+
71
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
72
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
73
+
74
+ box-shadow: var(--_show-shadow,
75
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
89
76
 
90
77
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
91
78
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
79
+
92
80
  .stacK {
93
81
  display: flex;
94
82
  flex-direction: column;
@@ -99,98 +87,78 @@
99
87
  height: prepareMediaVariable(--_ctm-lt-im-ht);
100
88
  padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
101
89
 
102
- background-color: var(
103
- --_ctm-mob-dn-im-se-bd-cr,
104
- var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
105
- );
106
-
107
- border-color: var(
108
- --_ctm-mob-dn-im-se-br-cr,
109
- var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
110
- );
111
-
112
- border-style: var(
113
- --_ctm-mob-dn-im-se-br-se,
114
- var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
115
- );
116
-
117
- border-width: var(
118
- --_ctm-mob-dn-im-se-br-wh,
119
- var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
120
- );
121
-
122
- border-radius: var(
123
- --_ctm-mob-dn-im-se-br-rs,
124
- var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
125
- );
126
-
127
- box-shadow: var(
128
- --_show-shadow,
129
- var(
130
- --_ctm-mob-dn-im-se-sw-ae,
131
- var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))
132
- )
133
- var(
134
- --_ctm-mob-dn-im-se-sw-br,
135
- var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
136
- )
137
- var(
138
- --_ctm-mob-dn-im-se-sw-sd,
139
- var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
140
- )
141
- var(
142
- --_ctm-mob-dn-im-se-sw-cr,
143
- var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
144
- )
145
- );
90
+ background-color: var(--_ctm-mob-dn-im-se-bd-cr,
91
+ var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr)));
92
+
93
+ border-color: var(--_ctm-mob-dn-im-se-br-cr,
94
+ var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr)));
95
+
96
+ border-style: var(--_ctm-mob-dn-im-se-br-se,
97
+ var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se)));
98
+
99
+ border-width: var(--_ctm-mob-dn-im-se-br-wh,
100
+ var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh)));
101
+
102
+ border-radius: var(--_ctm-mob-dn-im-se-br-rs,
103
+ var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs)));
104
+
105
+ box-shadow: var(--_show-shadow,
106
+ var(--_ctm-mob-dn-im-se-sw-ae,
107
+ var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))) var(--_ctm-mob-dn-im-se-sw-br,
108
+ var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))) var(--_ctm-mob-dn-im-se-sw-sd,
109
+ var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))) var(--_ctm-mob-dn-im-se-sw-cr,
110
+ var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))));
146
111
 
147
112
  position: relative;
113
+
148
114
  img {
149
115
  object-fit: cover;
150
116
  height: 100%;
151
117
  width: 100%;
152
118
  }
153
119
  }
120
+
154
121
  .items__container {
155
122
  &[data-show-divider="true"] {
156
123
  &[data-flex-direction="row"] {
124
+
125
+ // The divider is a pseudo-element and takes no space of its own, so a thick
126
+ // one grew back over the item beside it — see dividerGapReserve in functions.scss.
127
+ .item:not(:last-child) {
128
+ @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
129
+ }
130
+
157
131
  .item:not(:last-child)::before {
158
132
  content: "";
159
133
  position: absolute;
160
134
  top: 0;
161
- bottom: 0; /* For full height divider */
162
- right: calc(
163
- -1 *
164
- (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
165
- ); /* Half of your gap + 1px offset */
166
- width: var(
167
- --_ctm-mob-dn-wt-se-dr-wt,
168
- var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
169
- ); /* Divider thickness */
170
- background-color: var(
171
- --_ctm-mob-dn-wt-se-dr-cr,
172
- var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
173
- ); /* Divider color */
135
+ bottom: 0;
136
+ /* For full height divider */
137
+ right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
138
+ width: var(--_ctm-mob-dn-wt-se-dr-wt,
139
+ var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt)));
140
+ /* Divider thickness */
141
+ background-color: var(--_ctm-mob-dn-wt-se-dr-cr,
142
+ var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr)));
143
+ /* Divider color */
174
144
  }
175
145
  }
146
+
176
147
  &[data-flex-direction="column"] {
148
+ .item:not(:last-child) {
149
+ @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
150
+ }
151
+
177
152
  .item:not(:last-child)::before {
178
153
  content: "";
179
154
  position: absolute;
180
155
  left: 0;
181
156
  right: 0;
182
- bottom: calc(
183
- -1 *
184
- (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
185
- );
186
- height: var(
187
- --_ctm-mob-dn-wt-se-dr-wt,
188
- var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
189
- );
190
- background-color: var(
191
- --_ctm-mob-dn-wt-se-dr-cr,
192
- var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
193
- );
157
+ bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
158
+ height: var(--_ctm-mob-dn-wt-se-dr-wt,
159
+ var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt)));
160
+ background-color: var(--_ctm-mob-dn-wt-se-dr-cr,
161
+ var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr)));
194
162
  }
195
163
  }
196
164
  }
@@ -198,43 +166,35 @@
198
166
 
199
167
  .title {
200
168
  color: var(--_ctm-mob-dn-wt-se-cr, var(--_ctm-tab-dn-wt-se-cr, var(--_ctm-dn-wt-se-cr)));
201
- font-family: var(
202
- --_ctm-mob-dn-wt-se-ft-fy,
203
- var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy))
204
- );
205
- font-size: var(
206
- --_ctm-mob-dn-wt-se-ft-se,
207
- var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se))
208
- );
209
- font-weight: var(
210
- --_ctm-mob-dn-wt-se-ft-wt,
211
- var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt))
212
- );
213
- font-style: var(
214
- --_ctm-mob-dn-wt-se-ft-se-ic,
215
- var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic))
216
- );
217
- text-align: var(
218
- --_ctm-mob-dn-wt-se-tt-an,
219
- var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an))
220
- );
221
- letter-spacing: var(
222
- --_ctm-mob-dn-wt-se-lr-sg,
223
- var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg))
224
- );
225
- line-height: var(
226
- --_ctm-mob-dn-wt-se-le-ht,
227
- var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht))
228
- );
229
- text-decoration: var(
230
- --_ctm-mob-dn-wt-se-ue,
231
- var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue))
232
- );
169
+ font-family: var(--_ctm-mob-dn-wt-se-ft-fy,
170
+ var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy)));
171
+ text-transform: var(--_ctm-mob-dn-wt-se-tt-tm,
172
+ var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm)));
173
+ word-wrap: var(--_ctm-mob-dn-wt-se-wd-wp,
174
+ var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp)));
175
+ word-break: var(--_ctm-mob-dn-wt-se-wd-bk,
176
+ var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk)));
177
+ font-size: var(--_ctm-mob-dn-wt-se-ft-se,
178
+ var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se)));
179
+ font-weight: var(--_ctm-mob-dn-wt-se-ft-wt,
180
+ var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt)));
181
+ font-style: var(--_ctm-mob-dn-wt-se-ft-se-ic,
182
+ var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic)));
183
+ text-align: var(--_ctm-mob-dn-wt-se-tt-an,
184
+ var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an)));
185
+ letter-spacing: var(--_ctm-mob-dn-wt-se-lr-sg,
186
+ var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg)));
187
+ line-height: var(--_ctm-mob-dn-wt-se-le-ht,
188
+ var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht)));
189
+ text-decoration: var(--_ctm-mob-dn-wt-se-ue,
190
+ var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue)));
233
191
  padding: prepareMediaVariable(--_ctm-dn-wt-se-pg);
234
192
  }
193
+
235
194
  .horizontal {
236
195
  display: flex;
237
196
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
197
+
238
198
  .item {
239
199
  flex-shrink: 0;
240
200
  }
@@ -242,10 +202,12 @@
242
202
  &[data-overflow-items="Wrap"] {
243
203
  flex-wrap: wrap;
244
204
  }
205
+
245
206
  &[data-overflow-items="Scroll"] {
246
207
  width: 100%;
247
208
  overflow-x: auto;
248
209
  }
210
+
249
211
  &[data-overflow-items="Hidden"] {
250
212
  overflow-x: hidden;
251
213
  }
@@ -253,13 +215,16 @@
253
215
  &[items-content-alignement="right"] {
254
216
  justify-content: flex-end;
255
217
  }
218
+
256
219
  &[items-content-alignement="left"] {
257
220
  justify-content: flex-start;
258
221
  }
222
+
259
223
  &[items-content-alignement="center"] {
260
224
  justify-content: center;
261
225
  }
262
226
  }
227
+
263
228
  .vertical {
264
229
  display: flex;
265
230
  flex-direction: column;
@@ -270,6 +235,7 @@
270
235
  &[data-overflow-items="Scroll"] {
271
236
  overflow-y: auto;
272
237
  }
238
+
273
239
  &[data-overflow-items="Hidden"] {
274
240
  overflow-y: hidden;
275
241
  }
@@ -277,29 +243,34 @@
277
243
  &[items-content-alignement="right"] {
278
244
  align-items: flex-end;
279
245
  }
246
+
280
247
  &[items-content-alignement="left"] {
281
248
  align-items: flex-start;
282
249
  }
250
+
283
251
  &[items-content-alignement="center"] {
284
252
  align-items: center;
285
253
  }
286
254
  }
255
+
287
256
  .grid {
288
257
  display: grid;
289
258
  grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
290
- grid-template-columns: repeat(
291
- var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
292
- minmax(auto, 1fr)
293
- );
259
+ grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
260
+ minmax(auto, 1fr));
294
261
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
295
262
  max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
263
+
296
264
  &[data-overflow-items="Scroll"] {
297
265
  overflow-y: auto;
298
266
  }
267
+
299
268
  &[data-overflow-items="Hidden"] {
300
269
  overflow-y: hidden;
301
270
  }
271
+
302
272
  margin: 0px;
273
+
303
274
  .item {
304
275
  width: auto;
305
276
  }
@@ -307,4 +278,4 @@
307
278
  }
308
279
  }
309
280
  }
310
- }
281
+ }
package/dist/product-image-allocation.scss CHANGED
@@ -1085,6 +1085,18 @@
1085
1085
  --_ctm-mob-dn-ie-im-se-ft-fy,
1086
1086
  var(--_ctm-tab-dn-ie-im-se-ft-fy, var(--_ctm-dn-ie-im-se-ft-fy))
1087
1087
  );
1088
+ text-transform: var(
1089
+ --_ctm-mob-dn-ie-im-se-tt-tm,
1090
+ var(--_ctm-tab-dn-ie-im-se-tt-tm, var(--_ctm-dn-ie-im-se-tt-tm))
1091
+ );
1092
+ word-wrap: var(
1093
+ --_ctm-mob-dn-ie-im-se-wd-wp,
1094
+ var(--_ctm-tab-dn-ie-im-se-wd-wp, var(--_ctm-dn-ie-im-se-wd-wp))
1095
+ );
1096
+ word-break: var(
1097
+ --_ctm-mob-dn-ie-im-se-wd-bk,
1098
+ var(--_ctm-tab-dn-ie-im-se-wd-bk, var(--_ctm-dn-ie-im-se-wd-bk))
1099
+ );
1088
1100
  font-size: var(
1089
1101
  --_ctm-mob-dn-ie-im-se-ft-se,
1090
1102
  var(--_ctm-tab-dn-ie-im-se-ft-se, var(--_ctm-dn-ie-im-se-ft-se))
@@ -1124,6 +1136,18 @@
1124
1136
  --_ctm-mob-dn-ie-im-se-ft-fy-dc,
1125
1137
  var(--_ctm-tab-dn-ie-im-se-ft-fy-dc, var(--_ctm-dn-ie-im-se-ft-fy-dc))
1126
1138
  );
1139
+ text-transform: var(
1140
+ --_ctm-mob-dn-ie-im-se-tt-tm-dc,
1141
+ var(--_ctm-tab-dn-ie-im-se-tt-tm-dc, var(--_ctm-dn-ie-im-se-tt-tm-dc))
1142
+ );
1143
+ word-wrap: var(
1144
+ --_ctm-mob-dn-ie-im-se-wd-wp-dc,
1145
+ var(--_ctm-tab-dn-ie-im-se-wd-wp-dc, var(--_ctm-dn-ie-im-se-wd-wp-dc))
1146
+ );
1147
+ word-break: var(
1148
+ --_ctm-mob-dn-ie-im-se-wd-bk-dc,
1149
+ var(--_ctm-tab-dn-ie-im-se-wd-bk-dc, var(--_ctm-dn-ie-im-se-wd-bk-dc))
1150
+ );
1127
1151
  font-size: var(
1128
1152
  --_ctm-mob-dn-ie-im-se-ft-se-dc,
1129
1153
  var(--_ctm-tab-dn-ie-im-se-ft-se-dc, var(--_ctm-dn-ie-im-se-ft-se-dc))
@@ -1331,6 +1355,13 @@
1331
1355
  align-items: flex-start;
1332
1356
  justify-content: flex-start;
1333
1357
  font-family: var(--_ctm-dn-be-ne-ft-fy);
1358
+ text-transform: var(--_ctm-dn-be-ne-tt-tm);
1359
+ word-wrap: var(--_ctm-dn-be-ne-wd-wp);
1360
+ word-break: var(--_ctm-dn-be-ne-wd-bk);
1361
+ &.flex__overflow {
1362
+ white-space: normal;
1363
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1364
+ }
1334
1365
  font-size: var(--_ctm-dn-be-ne-ft-se);
1335
1366
  color: var(--_ctm-dn-be-ne-cr);
1336
1367
  font-weight: var(--_ctm-dn-be-ne-ft-wt);
@@ -1352,6 +1383,13 @@
1352
1383
  align-items: flex-start;
1353
1384
  justify-content: flex-start;
1354
1385
  font-family: var(--_ctm-dn-cy-ne-ft-fy);
1386
+ text-transform: var(--_ctm-dn-cy-ne-tt-tm);
1387
+ word-wrap: var(--_ctm-dn-cy-ne-wd-wp);
1388
+ word-break: var(--_ctm-dn-cy-ne-wd-bk);
1389
+ &.flex__overflow {
1390
+ white-space: normal;
1391
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1392
+ }
1355
1393
  font-size: var(--_ctm-dn-cy-ne-ft-se);
1356
1394
  color: var(--_ctm-dn-cy-ne-cr);
1357
1395
  font-weight: var(--_ctm-dn-cy-ne-ft-wt);