@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-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,55 +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
- text-transform: var(
206
- --_ctm-mob-dn-wt-se-tt-tm,
207
- var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm))
208
- );
209
- word-wrap: var(
210
- --_ctm-mob-dn-wt-se-wd-wp,
211
- var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp))
212
- );
213
- word-break: var(
214
- --_ctm-mob-dn-wt-se-wd-bk,
215
- var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk))
216
- );
217
- font-size: var(
218
- --_ctm-mob-dn-wt-se-ft-se,
219
- var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se))
220
- );
221
- font-weight: var(
222
- --_ctm-mob-dn-wt-se-ft-wt,
223
- var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt))
224
- );
225
- font-style: var(
226
- --_ctm-mob-dn-wt-se-ft-se-ic,
227
- var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic))
228
- );
229
- text-align: var(
230
- --_ctm-mob-dn-wt-se-tt-an,
231
- var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an))
232
- );
233
- letter-spacing: var(
234
- --_ctm-mob-dn-wt-se-lr-sg,
235
- var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg))
236
- );
237
- line-height: var(
238
- --_ctm-mob-dn-wt-se-le-ht,
239
- var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht))
240
- );
241
- text-decoration: var(
242
- --_ctm-mob-dn-wt-se-ue,
243
- var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue))
244
- );
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)));
245
191
  padding: prepareMediaVariable(--_ctm-dn-wt-se-pg);
246
192
  }
193
+
247
194
  .horizontal {
248
195
  display: flex;
249
196
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
197
+
250
198
  .item {
251
199
  flex-shrink: 0;
252
200
  }
@@ -254,10 +202,12 @@
254
202
  &[data-overflow-items="Wrap"] {
255
203
  flex-wrap: wrap;
256
204
  }
205
+
257
206
  &[data-overflow-items="Scroll"] {
258
207
  width: 100%;
259
208
  overflow-x: auto;
260
209
  }
210
+
261
211
  &[data-overflow-items="Hidden"] {
262
212
  overflow-x: hidden;
263
213
  }
@@ -265,13 +215,16 @@
265
215
  &[items-content-alignement="right"] {
266
216
  justify-content: flex-end;
267
217
  }
218
+
268
219
  &[items-content-alignement="left"] {
269
220
  justify-content: flex-start;
270
221
  }
222
+
271
223
  &[items-content-alignement="center"] {
272
224
  justify-content: center;
273
225
  }
274
226
  }
227
+
275
228
  .vertical {
276
229
  display: flex;
277
230
  flex-direction: column;
@@ -282,6 +235,7 @@
282
235
  &[data-overflow-items="Scroll"] {
283
236
  overflow-y: auto;
284
237
  }
238
+
285
239
  &[data-overflow-items="Hidden"] {
286
240
  overflow-y: hidden;
287
241
  }
@@ -289,29 +243,34 @@
289
243
  &[items-content-alignement="right"] {
290
244
  align-items: flex-end;
291
245
  }
246
+
292
247
  &[items-content-alignement="left"] {
293
248
  align-items: flex-start;
294
249
  }
250
+
295
251
  &[items-content-alignement="center"] {
296
252
  align-items: center;
297
253
  }
298
254
  }
255
+
299
256
  .grid {
300
257
  display: grid;
301
258
  grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
302
- grid-template-columns: repeat(
303
- var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
304
- minmax(auto, 1fr)
305
- );
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));
306
261
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
307
262
  max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
263
+
308
264
  &[data-overflow-items="Scroll"] {
309
265
  overflow-y: auto;
310
266
  }
267
+
311
268
  &[data-overflow-items="Hidden"] {
312
269
  overflow-y: hidden;
313
270
  }
271
+
314
272
  margin: 0px;
273
+
315
274
  .item {
316
275
  width: auto;
317
276
  }
@@ -319,4 +278,4 @@
319
278
  }
320
279
  }
321
280
  }
322
- }
281
+ }