@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.75

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 (141) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2143 -1661
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +103 -79
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1012 -481
  23. package/dist/cart-summary.scss +1149 -557
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +735 -416
  27. package/dist/category-groups-element.scss +108 -127
  28. package/dist/category-groups-product-grid.scss +147 -120
  29. package/dist/category-groups-product-image.scss +1457 -1162
  30. package/dist/category-groups-product-options.scss +680 -613
  31. package/dist/category-groups-product-price.scss +3244 -1966
  32. package/dist/category-groups-quota-details.scss +464 -210
  33. package/dist/category.scss +50 -26
  34. package/dist/checkout.scss +16 -24
  35. package/dist/confirm-modal.scss +2 -22
  36. package/dist/container.scss +54 -32
  37. package/dist/countdown.scss +443 -255
  38. package/dist/coupon.scss +710 -351
  39. package/dist/default-dropdown.scss +1 -12
  40. package/dist/embroider-template-1-v2.scss +172 -123
  41. package/dist/embroider-template-1.scss +104 -68
  42. package/dist/embroidery.scss +31 -30
  43. package/dist/employee-bulk-order.scss +142 -418
  44. package/dist/faq.scss +408 -228
  45. package/dist/filter-results.scss +265 -125
  46. package/dist/filters.scss +1797 -900
  47. package/dist/gallery-slider-temp.scss +750 -432
  48. package/dist/global-styles.scss +7 -23
  49. package/dist/grid.scss +33 -25
  50. package/dist/hotspot.scss +115 -68
  51. package/dist/icons-builder.js +1 -1
  52. package/dist/icons-website.js +1 -1
  53. package/dist/icons.js +1 -1
  54. package/dist/image-temp.scss +20 -21
  55. package/dist/index.js +1 -1
  56. package/dist/item-stock.scss +16 -9
  57. package/dist/kitDetails.scss +4301 -2721
  58. package/dist/kits.scss +19 -24
  59. package/dist/language-selector.scss +361 -211
  60. package/dist/last-x-orders.scss +174 -95
  61. package/dist/layouter-item.scss +103 -75
  62. package/dist/layouter-pro-item.scss +95 -89
  63. package/dist/layouter-pro.scss +92 -87
  64. package/dist/layouter.scss +445 -383
  65. package/dist/light-box-v2.scss +104 -89
  66. package/dist/login.scss +566 -287
  67. package/dist/map.scss +368 -221
  68. package/dist/marchandiserSets.scss +104 -95
  69. package/dist/mega-menu-container.scss +109 -96
  70. package/dist/mega-menu.scss +731 -624
  71. package/dist/menu-item.scss +2 -2
  72. package/dist/menu-v2.scss +619 -507
  73. package/dist/multi-select-dropdown.scss +3 -27
  74. package/dist/my-templates.scss +9 -38
  75. package/dist/option-bar.scss +375 -215
  76. package/dist/option-families.scss +252 -0
  77. package/dist/order-status.scss +1117 -646
  78. package/dist/overflow-module.scss +7 -6
  79. package/dist/past-orders.scss +149 -118
  80. package/dist/payment-methods.scss +30 -46
  81. package/dist/pickup-locations.scss +1118 -558
  82. package/dist/position-module.scss +17 -20
  83. package/dist/prefix-list.scss +10 -21
  84. package/dist/product-actions.scss +2425 -1625
  85. package/dist/product-basic-elements.scss +169 -108
  86. package/dist/product-highlights.scss +152 -107
  87. package/dist/product-image-bundles.scss +642 -337
  88. package/dist/product-inventory.scss +1357 -673
  89. package/dist/product-labels.scss +105 -84
  90. package/dist/product-options.scss +1274 -1117
  91. package/dist/product-price.scss +2561 -1283
  92. package/dist/product-promotions.scss +2830 -1388
  93. package/dist/product-sizechart.scss +905 -516
  94. package/dist/product.scss +61 -28
  95. package/dist/productDetails.scss +39 -19
  96. package/dist/profile.scss +447 -207
  97. package/dist/quantity-selector.scss +550 -313
  98. package/dist/quick-inventory-check.scss +174 -95
  99. package/dist/quick-links.scss +133 -55
  100. package/dist/quick-order-pad.scss +271 -218
  101. package/dist/quota-details.scss +282 -152
  102. package/dist/quotes.scss +122 -89
  103. package/dist/repeater-embla-controls.scss +15 -35
  104. package/dist/repeater-grid-toggle.scss +166 -156
  105. package/dist/repeater-item.scss +64 -41
  106. package/dist/repeater.scss +814 -671
  107. package/dist/request-for-quotes.scss +16 -66
  108. package/dist/responsive-behaviour.scss +1 -3
  109. package/dist/rfqs.scss +181 -118
  110. package/dist/scroll.scss +172 -93
  111. package/dist/search.scss +326 -179
  112. package/dist/section.scss +51 -27
  113. package/dist/shipping-payments.scss +58 -198
  114. package/dist/simple-list.scss +164 -74
  115. package/dist/social.scss +145 -80
  116. package/dist/sort.scss +19 -11
  117. package/dist/stack.scss +34 -23
  118. package/dist/static-global.scss +26 -44
  119. package/dist/stockStatus.scss +19 -11
  120. package/dist/store-locations.scss +1105 -577
  121. package/dist/tab-container.scss +108 -81
  122. package/dist/table-common.scss +408 -217
  123. package/dist/table.scss +502 -271
  124. package/dist/text-temp.scss +7 -8
  125. package/dist/theme-classes.scss +13 -17
  126. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  127. package/dist/types/builder/enums/index.d.ts +3 -1
  128. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  129. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  130. package/dist/types/builder/tools/element-edit/productActions.d.ts +3 -0
  131. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  132. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  133. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  134. package/dist/uom-selector.scss +949 -489
  135. package/dist/uploadMedia.js +1 -1
  136. package/dist/user-elements.scss +837 -529
  137. package/dist/variant-picker.scss +2555 -1281
  138. package/dist/volume-pricing.scss +1037 -541
  139. package/dist/website.js +1 -1
  140. package/dist/widget.scss +1 -0
  141. package/package.json +1 -1
@@ -10,8 +10,12 @@
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(--_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)))));
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
+ );
15
19
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
16
20
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
17
21
  // height: ;
@@ -20,32 +24,27 @@
20
24
  // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
21
25
  // );
22
26
 
23
- &>.wrapper {
27
+ & > .wrapper {
24
28
  width: 100%;
25
29
  // height: 100%;
26
30
  }
27
-
28
31
  &[data-show-shadow="false"] {
29
32
  --_show-shadow: none;
30
33
  }
31
-
32
34
  &[data-overflow-items="Scroll"] {
33
35
  .horizontal {
34
36
  width: 100%;
35
37
  overflow-x: auto;
36
-
37
38
  .item {
38
39
  width: 100%;
39
40
  flex-shrink: 0;
40
41
  }
41
42
  }
42
-
43
43
  .vertical {
44
44
  overflow-y: auto;
45
45
  max-height: 30%;
46
46
  }
47
47
  }
48
-
49
48
  .text-element {
50
49
  color: #333;
51
50
  font-size: 12px;
@@ -54,29 +53,42 @@
54
53
  line-height: 18px;
55
54
  margin-bottom: 6px;
56
55
  }
57
-
58
56
  .highlights__container {
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))));
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
+ );
76
89
 
77
90
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
78
91
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
79
-
80
92
  // Must stay lowercase to match `<div className="stack">` in the ProductHighlights
81
93
  // element. Class selectors are case-sensitive in standards mode, so the old `.stacK`
82
94
  // matched nothing on the storefront and took this whole block down with it.
@@ -93,7 +105,6 @@
93
105
  height: prepareMediaVariable(--_ctm-lt-im-ht);
94
106
 
95
107
  position: relative;
96
-
97
108
  img {
98
109
  object-fit: cover;
99
110
  display: block;
@@ -103,71 +114,94 @@
103
114
 
104
115
  padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
105
116
 
106
- background-color: var(--_ctm-mob-dn-im-se-bd-cr,
107
- var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr)));
108
-
109
- border-color: var(--_ctm-mob-dn-im-se-br-cr,
110
- var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr)));
111
-
112
- border-style: var(--_ctm-mob-dn-im-se-br-se,
113
- var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se)));
114
-
115
- border-width: var(--_ctm-mob-dn-im-se-br-wh,
116
- var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh)));
117
-
118
- border-radius: var(--_ctm-mob-dn-im-se-br-rs,
119
- var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs)));
120
-
121
- box-shadow: var(--_show-shadow,
122
- var(--_ctm-mob-dn-im-se-sw-ae,
123
- var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))) var(--_ctm-mob-dn-im-se-sw-br,
124
- var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))) var(--_ctm-mob-dn-im-se-sw-sd,
125
- var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))) var(--_ctm-mob-dn-im-se-sw-cr,
126
- var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))));
117
+ background-color: var(
118
+ --_ctm-mob-dn-im-se-bd-cr,
119
+ var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
120
+ );
121
+
122
+ border-color: var(
123
+ --_ctm-mob-dn-im-se-br-cr,
124
+ var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
125
+ );
126
+
127
+ border-style: var(
128
+ --_ctm-mob-dn-im-se-br-se,
129
+ var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
130
+ );
131
+
132
+ border-width: var(
133
+ --_ctm-mob-dn-im-se-br-wh,
134
+ var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
135
+ );
136
+
137
+ border-radius: var(
138
+ --_ctm-mob-dn-im-se-br-rs,
139
+ var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
140
+ );
141
+
142
+ box-shadow: var(
143
+ --_show-shadow,
144
+ var(
145
+ --_ctm-mob-dn-im-se-sw-ae,
146
+ var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))
147
+ )
148
+ var(
149
+ --_ctm-mob-dn-im-se-sw-br,
150
+ var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
151
+ )
152
+ var(
153
+ --_ctm-mob-dn-im-se-sw-sd,
154
+ var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
155
+ )
156
+ var(
157
+ --_ctm-mob-dn-im-se-sw-cr,
158
+ var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
159
+ )
160
+ );
127
161
  }
128
162
  }
129
-
130
163
  .items__container {
131
164
  &[data-show-divider="true"] {
132
165
  &[data-flex-direction="row"] {
133
-
134
166
  // The divider is a pseudo-element and takes no space of its own, so a thick
135
167
  // one grew back over the item beside it — see dividerGapReserve in functions.scss.
136
168
  .item:not(:last-child) {
137
169
  @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
138
170
  }
139
-
140
171
  .item:not(:last-child)::before {
141
172
  content: "";
142
173
  position: absolute;
143
174
  top: 0;
144
- bottom: 0;
145
- /* For full height divider */
175
+ bottom: 0; /* For full height divider */
146
176
  right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
147
- width: var(--_ctm-mob-dn-wt-se-dr-wt,
148
- var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt)));
149
- /* Divider thickness */
150
- background-color: var(--_ctm-mob-dn-wt-se-dr-cr,
151
- var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr)));
152
- /* Divider color */
177
+ width: var(
178
+ --_ctm-mob-dn-wt-se-dr-wt,
179
+ var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
180
+ ); /* Divider thickness */
181
+ background-color: var(
182
+ --_ctm-mob-dn-wt-se-dr-cr,
183
+ var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
184
+ ); /* Divider color */
153
185
  }
154
186
  }
155
-
156
187
  &[data-flex-direction="column"] {
157
188
  .item:not(:last-child) {
158
189
  @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
159
190
  }
160
-
161
191
  .item:not(:last-child)::before {
162
192
  content: "";
163
193
  position: absolute;
164
194
  left: 0;
165
195
  right: 0;
166
196
  bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
167
- height: var(--_ctm-mob-dn-wt-se-dr-wt,
168
- var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt)));
169
- background-color: var(--_ctm-mob-dn-wt-se-dr-cr,
170
- var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr)));
197
+ height: var(
198
+ --_ctm-mob-dn-wt-se-dr-wt,
199
+ var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
200
+ );
201
+ background-color: var(
202
+ --_ctm-mob-dn-wt-se-dr-cr,
203
+ var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
204
+ );
171
205
  }
172
206
  }
173
207
  }
@@ -175,33 +209,57 @@
175
209
 
176
210
  .title {
177
211
  color: var(--_ctm-mob-dn-wt-se-cr, var(--_ctm-tab-dn-wt-se-cr, var(--_ctm-dn-wt-se-cr)));
178
- font-family: var(--_ctm-mob-dn-wt-se-ft-fy,
179
- var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy)));
180
- text-transform: var(--_ctm-mob-dn-wt-se-tt-tm,
181
- var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm)));
182
- word-wrap: var(--_ctm-mob-dn-wt-se-wd-wp,
183
- var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp)));
184
- word-break: var(--_ctm-mob-dn-wt-se-wd-bk,
185
- var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk)));
186
- font-size: var(--_ctm-mob-dn-wt-se-ft-se,
187
- var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se)));
188
- font-weight: var(--_ctm-mob-dn-wt-se-ft-wt,
189
- var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt)));
190
- font-style: var(--_ctm-mob-dn-wt-se-ft-se-ic,
191
- var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic)));
192
- text-align: var(--_ctm-mob-dn-wt-se-tt-an,
193
- var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an)));
194
- letter-spacing: var(--_ctm-mob-dn-wt-se-lr-sg,
195
- var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg)));
212
+ font-family: var(
213
+ --_ctm-mob-dn-wt-se-ft-fy,
214
+ var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy))
215
+ );
216
+ text-transform: var(
217
+ --_ctm-mob-dn-wt-se-tt-tm,
218
+ var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm))
219
+ );
220
+ word-wrap: var(
221
+ --_ctm-mob-dn-wt-se-wd-wp,
222
+ var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp))
223
+ );
224
+ word-break: var(
225
+ --_ctm-mob-dn-wt-se-wd-bk,
226
+ var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk))
227
+ );
228
+ font-size: var(
229
+ --_ctm-mob-dn-wt-se-ft-se,
230
+ var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se))
231
+ );
232
+ font-weight: var(
233
+ --_ctm-mob-dn-wt-se-ft-wt,
234
+ var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt))
235
+ );
236
+ font-style: var(
237
+ --_ctm-mob-dn-wt-se-ft-se-ic,
238
+ var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic))
239
+ );
240
+ text-align: var(
241
+ --_ctm-mob-dn-wt-se-tt-an,
242
+ var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an))
243
+ );
244
+ letter-spacing: var(
245
+ --_ctm-mob-dn-wt-se-lr-sg,
246
+ var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg))
247
+ );
196
248
  // Line box guard. The line-height control stores a fixed length (its default is
197
249
  // 1rem), so it does not grow with the font size — at a large size the glyphs
198
250
  // end up taller than their own line box and look cut off. max(..., 1em) keeps
199
251
  // the box at least as tall as the text while still honouring a larger value.
200
- line-height: max(var(--_ctm-mob-dn-wt-se-le-ht,
201
- var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht, 1em))),
202
- 1em);
203
- text-decoration: var(--_ctm-mob-dn-wt-se-ue,
204
- var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue)));
252
+ line-height: max(
253
+ var(
254
+ --_ctm-mob-dn-wt-se-le-ht,
255
+ var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht, 1em))
256
+ ),
257
+ 1em
258
+ );
259
+ text-decoration: var(
260
+ --_ctm-mob-dn-wt-se-ue,
261
+ var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue))
262
+ );
205
263
  padding: prepareMediaVariable(--_ctm-dn-wt-se-pg);
206
264
 
207
265
  // Text Overflow is a `controls` property, not a CSS one, so it cannot travel as
@@ -212,11 +270,9 @@
212
270
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
213
271
  }
214
272
  }
215
-
216
273
  .horizontal {
217
274
  display: flex;
218
275
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
219
-
220
276
  .item {
221
277
  flex-shrink: 0;
222
278
  }
@@ -224,12 +280,10 @@
224
280
  &[data-overflow-items="Wrap"] {
225
281
  flex-wrap: wrap;
226
282
  }
227
-
228
283
  &[data-overflow-items="Scroll"] {
229
284
  width: 100%;
230
285
  overflow-x: auto;
231
286
  }
232
-
233
287
  &[data-overflow-items="Hidden"] {
234
288
  overflow-x: hidden;
235
289
  }
@@ -237,16 +291,13 @@
237
291
  &[items-content-alignement="right"] {
238
292
  justify-content: flex-end;
239
293
  }
240
-
241
294
  &[items-content-alignement="left"] {
242
295
  justify-content: flex-start;
243
296
  }
244
-
245
297
  &[items-content-alignement="center"] {
246
298
  justify-content: center;
247
299
  }
248
300
  }
249
-
250
301
  .vertical {
251
302
  display: flex;
252
303
  flex-direction: column;
@@ -257,7 +308,6 @@
257
308
  &[data-overflow-items="Scroll"] {
258
309
  overflow-y: auto;
259
310
  }
260
-
261
311
  &[data-overflow-items="Hidden"] {
262
312
  overflow-y: hidden;
263
313
  }
@@ -265,34 +315,29 @@
265
315
  &[items-content-alignement="right"] {
266
316
  align-items: flex-end;
267
317
  }
268
-
269
318
  &[items-content-alignement="left"] {
270
319
  align-items: flex-start;
271
320
  }
272
-
273
321
  &[items-content-alignement="center"] {
274
322
  align-items: center;
275
323
  }
276
324
  }
277
-
278
325
  .grid {
279
326
  display: grid;
280
327
  grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
281
- grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
282
- minmax(auto, 1fr));
328
+ grid-template-columns: repeat(
329
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
330
+ minmax(auto, 1fr)
331
+ );
283
332
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
284
333
  max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
285
-
286
334
  &[data-overflow-items="Scroll"] {
287
335
  overflow-y: auto;
288
336
  }
289
-
290
337
  &[data-overflow-items="Hidden"] {
291
338
  overflow-y: hidden;
292
339
  }
293
-
294
340
  margin: 0px;
295
-
296
341
  .item {
297
342
  width: auto;
298
343
  }
@@ -300,4 +345,4 @@
300
345
  }
301
346
  }
302
347
  }
303
- }
348
+ }