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

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