@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.74
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.
- package/dist/add-existing-form.scss +5 -13
- package/dist/add-order.scss +236 -126
- package/dist/add-products-tab-details.scss +2097 -1048
- package/dist/add-products-tab.scss +1204 -666
- package/dist/allocation-header-quota-details.scss +407 -189
- package/dist/allocationDetails.scss +2143 -1661
- package/dist/allocations-quota-details.scss +323 -159
- package/dist/allocations.scss +793 -475
- package/dist/amount-estimator.scss +743 -405
- package/dist/badge.scss +18 -43
- package/dist/brand-basic-elements.scss +124 -76
- package/dist/brand.scss +55 -28
- package/dist/breadcrumbs.scss +718 -356
- package/dist/builder.js +1 -1
- package/dist/builderLite.js +1 -1
- package/dist/bulk-variant-picker.scss +2027 -1128
- package/dist/bundle.scss +1477 -841
- package/dist/bundleDetails.scss +5072 -3774
- package/dist/button.scss +103 -79
- package/dist/buy-for-tab-container.scss +106 -77
- package/dist/buyForHeaders.scss +2976 -1722
- package/dist/cart-details.scss +1012 -481
- package/dist/cart-summary.scss +1149 -557
- package/dist/cart-wrapper.scss +79 -37
- package/dist/cart.scss +225 -117
- package/dist/cartAttributes.scss +735 -416
- package/dist/category-groups-element.scss +108 -127
- package/dist/category-groups-product-grid.scss +147 -120
- package/dist/category-groups-product-image.scss +1457 -1162
- package/dist/category-groups-product-options.scss +680 -613
- package/dist/category-groups-product-price.scss +3244 -1966
- package/dist/category-groups-quota-details.scss +464 -210
- package/dist/category.scss +50 -26
- package/dist/checkout.scss +16 -24
- package/dist/confirm-modal.scss +2 -22
- package/dist/container.scss +54 -32
- package/dist/countdown.scss +443 -255
- package/dist/coupon.scss +710 -351
- package/dist/default-dropdown.scss +1 -12
- package/dist/embroider-template-1-v2.scss +172 -123
- package/dist/embroider-template-1.scss +104 -68
- package/dist/embroidery.scss +31 -30
- package/dist/employee-bulk-order.scss +142 -418
- package/dist/faq.scss +408 -228
- package/dist/filter-results.scss +265 -125
- package/dist/filters.scss +1797 -900
- package/dist/gallery-slider-temp.scss +750 -432
- package/dist/global-styles.scss +7 -23
- package/dist/grid.scss +33 -25
- package/dist/hotspot.scss +115 -68
- package/dist/image-temp.scss +20 -21
- package/dist/item-stock.scss +16 -9
- package/dist/kitDetails.scss +4301 -2721
- package/dist/kits.scss +19 -24
- package/dist/language-selector.scss +361 -211
- package/dist/last-x-orders.scss +174 -95
- package/dist/layouter-item.scss +103 -75
- package/dist/layouter-pro-item.scss +95 -89
- package/dist/layouter-pro.scss +92 -87
- package/dist/layouter.scss +445 -383
- package/dist/light-box-v2.scss +104 -89
- package/dist/login.scss +566 -287
- package/dist/map.scss +368 -221
- package/dist/marchandiserSets.scss +104 -95
- package/dist/mega-menu-container.scss +109 -96
- package/dist/mega-menu.scss +731 -624
- package/dist/menu-item.scss +2 -2
- package/dist/menu-v2.scss +619 -507
- package/dist/multi-select-dropdown.scss +3 -27
- package/dist/my-templates.scss +9 -38
- package/dist/option-bar.scss +375 -215
- package/dist/option-families.scss +252 -0
- package/dist/order-status.scss +1117 -646
- package/dist/overflow-module.scss +7 -6
- package/dist/past-orders.scss +149 -118
- package/dist/payment-methods.scss +30 -46
- package/dist/pickup-locations.scss +1118 -558
- package/dist/position-module.scss +17 -20
- package/dist/prefix-list.scss +10 -21
- package/dist/product-actions.scss +2316 -1610
- package/dist/product-basic-elements.scss +169 -108
- package/dist/product-highlights.scss +152 -107
- package/dist/product-image-bundles.scss +642 -337
- package/dist/product-inventory.scss +1357 -673
- package/dist/product-labels.scss +105 -84
- package/dist/product-options.scss +1274 -1117
- package/dist/product-price.scss +2561 -1283
- package/dist/product-promotions.scss +2830 -1388
- package/dist/product-sizechart.scss +905 -516
- package/dist/product.scss +61 -28
- package/dist/productDetails.scss +39 -19
- package/dist/profile.scss +447 -207
- package/dist/quantity-selector.scss +550 -313
- package/dist/quick-inventory-check.scss +174 -95
- package/dist/quick-links.scss +133 -55
- package/dist/quick-order-pad.scss +271 -218
- package/dist/quota-details.scss +282 -152
- package/dist/quotes.scss +122 -89
- package/dist/repeater-embla-controls.scss +15 -35
- package/dist/repeater-grid-toggle.scss +166 -156
- package/dist/repeater-item.scss +64 -41
- package/dist/repeater.scss +814 -671
- package/dist/request-for-quotes.scss +16 -66
- package/dist/responsive-behaviour.scss +1 -3
- package/dist/rfqs.scss +181 -118
- package/dist/scroll.scss +172 -93
- package/dist/search.scss +326 -179
- package/dist/section.scss +51 -27
- package/dist/shipping-payments.scss +58 -198
- package/dist/simple-list.scss +164 -74
- package/dist/social.scss +145 -80
- package/dist/sort.scss +19 -11
- package/dist/stack.scss +34 -23
- package/dist/static-global.scss +26 -44
- package/dist/stockStatus.scss +19 -11
- package/dist/store-locations.scss +1105 -577
- package/dist/tab-container.scss +108 -81
- package/dist/table-common.scss +408 -217
- package/dist/table.scss +502 -271
- package/dist/text-temp.scss +7 -8
- package/dist/theme-classes.scss +13 -17
- package/dist/types/builder/enums/data-connectors.d.ts +3 -1
- package/dist/types/builder/enums/index.d.ts +3 -1
- package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
- package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
- package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
- package/dist/types/website/constants/data-connectors.d.ts +12 -1
- package/dist/types/website/helper/ssr-functions.d.ts +8 -0
- package/dist/uom-selector.scss +949 -489
- package/dist/user-elements.scss +837 -529
- package/dist/variant-picker.scss +2555 -1281
- package/dist/volume-pricing.scss +1037 -541
- package/dist/website.js +1 -1
- package/dist/widget.scss +1 -0
- package/package.json +1 -1
|
@@ -6,7 +6,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
6
6
|
|
|
7
7
|
[data-div-type="element"] {
|
|
8
8
|
word-break: break-all;
|
|
9
|
-
|
|
10
9
|
&[data-element-type="productName"],
|
|
11
10
|
&[data-element-type="brandName"],
|
|
12
11
|
&[data-element-type="categoryName"] {
|
|
@@ -16,9 +15,16 @@ $overflowSelector: ".flex__overflow";
|
|
|
16
15
|
// padding: var(--_lt-pg);
|
|
17
16
|
// width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
|
|
18
17
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
19
|
-
width: var(
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
width: var(
|
|
19
|
+
--_sf-el-wh-st-mx,
|
|
20
|
+
calc(
|
|
21
|
+
1% *
|
|
22
|
+
var(
|
|
23
|
+
--_ctm-mob-ele-nw-wh-vl,
|
|
24
|
+
var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
|
|
25
|
+
)
|
|
26
|
+
)
|
|
27
|
+
);
|
|
22
28
|
margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
|
|
23
29
|
word-break: break-all;
|
|
24
30
|
min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
@@ -31,33 +37,41 @@ $overflowSelector: ".flex__overflow";
|
|
|
31
37
|
// );
|
|
32
38
|
// height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
33
39
|
|
|
34
|
-
|
|
40
|
+
& > .wrapper {
|
|
35
41
|
width: 100%;
|
|
36
42
|
// Follow the elements own height so the styled box (background, border, shadow)
|
|
37
43
|
// matches the Height set in layout instead of only hugging the text.
|
|
38
44
|
min-height: inherit;
|
|
39
45
|
background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
|
|
40
46
|
padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
|
|
41
|
-
border-color: var(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
border-
|
|
46
|
-
|
|
47
|
+
border-color: var(
|
|
48
|
+
--_show-border,
|
|
49
|
+
var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
|
|
50
|
+
);
|
|
51
|
+
border-style: var(
|
|
52
|
+
--_show-border,
|
|
53
|
+
var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
|
|
54
|
+
);
|
|
55
|
+
border-width: var(
|
|
56
|
+
--_show-border,
|
|
57
|
+
var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
|
|
58
|
+
);
|
|
47
59
|
border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
|
|
48
|
-
box-shadow: var(
|
|
49
|
-
|
|
60
|
+
box-shadow: var(
|
|
61
|
+
--_show-shadow,
|
|
62
|
+
var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
|
|
63
|
+
var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
|
|
64
|
+
var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
|
|
65
|
+
var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
|
|
66
|
+
);
|
|
50
67
|
// height: 100%;
|
|
51
68
|
}
|
|
52
|
-
|
|
53
69
|
&[data-show-shadow="false"] {
|
|
54
70
|
--_show-shadow: none;
|
|
55
71
|
}
|
|
56
|
-
|
|
57
72
|
&[data-show-border="false"] {
|
|
58
73
|
--_show-border: none;
|
|
59
74
|
}
|
|
60
|
-
|
|
61
75
|
// .text-element {
|
|
62
76
|
// background: #6d96e4;
|
|
63
77
|
// // padding: 10px;
|
|
@@ -68,7 +82,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
68
82
|
.text-element[data-has-link="true"] {
|
|
69
83
|
cursor: pointer;
|
|
70
84
|
}
|
|
71
|
-
|
|
72
85
|
.text-element {
|
|
73
86
|
word-break: break-word;
|
|
74
87
|
|
|
@@ -82,7 +95,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
82
95
|
--_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
|
|
83
96
|
row-gap: var(--_sf-gp);
|
|
84
97
|
width: 100%;
|
|
85
|
-
|
|
86
98
|
&:has(.skeleton__element) {
|
|
87
99
|
display: flex;
|
|
88
100
|
align-items: start;
|
|
@@ -91,7 +103,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
91
103
|
&#{$overflowSelector} {
|
|
92
104
|
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
93
105
|
}
|
|
94
|
-
|
|
95
106
|
// height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
96
107
|
// border-color: var(
|
|
97
108
|
// --_show-border,
|
|
@@ -125,27 +136,30 @@ $overflowSelector: ".flex__overflow";
|
|
|
125
136
|
// up taller than their own line box and spill out of it, which is what makes the
|
|
126
137
|
// text look cut off. max(..., 1em) keeps the box at least as tall as the text
|
|
127
138
|
// while still honouring any larger value the user sets.
|
|
128
|
-
line-height: max(
|
|
129
|
-
1em)
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
139
|
+
line-height: max(
|
|
140
|
+
var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
|
|
141
|
+
1em
|
|
142
|
+
);
|
|
143
|
+
text-decoration: var(
|
|
144
|
+
--_sf-hr-tt-dn,
|
|
145
|
+
var(
|
|
146
|
+
--_ctm-mob-dn-dt-se-ue,
|
|
147
|
+
var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
|
|
148
|
+
)
|
|
149
|
+
);
|
|
133
150
|
scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
|
|
134
151
|
|
|
135
152
|
&[data-flip-x="true"] {
|
|
136
153
|
transform: scaleX(-1);
|
|
137
154
|
}
|
|
138
|
-
|
|
139
155
|
&[data-flip-y="true"] {
|
|
140
156
|
transform: scaleY(-1);
|
|
141
157
|
}
|
|
142
|
-
|
|
143
158
|
text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
|
|
144
159
|
word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
|
|
145
160
|
word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
|
|
146
161
|
}
|
|
147
162
|
}
|
|
148
|
-
|
|
149
163
|
&[data-element-type="productDescription"],
|
|
150
164
|
&[data-element-type="categoryDescription"] {
|
|
151
165
|
// width: var(--_lt-wh);
|
|
@@ -154,9 +168,16 @@ $overflowSelector: ".flex__overflow";
|
|
|
154
168
|
// padding: var(--_lt-pg);
|
|
155
169
|
// width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
|
|
156
170
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
157
|
-
width: var(
|
|
158
|
-
|
|
159
|
-
|
|
171
|
+
width: var(
|
|
172
|
+
--_sf-el-wh-st-mx,
|
|
173
|
+
calc(
|
|
174
|
+
1% *
|
|
175
|
+
var(
|
|
176
|
+
--_ctm-mob-ele-nw-wh-vl,
|
|
177
|
+
var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
|
|
178
|
+
)
|
|
179
|
+
)
|
|
180
|
+
);
|
|
160
181
|
margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
|
|
161
182
|
min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
162
183
|
|
|
@@ -167,7 +188,7 @@ $overflowSelector: ".flex__overflow";
|
|
|
167
188
|
// 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
|
|
168
189
|
// );
|
|
169
190
|
|
|
170
|
-
|
|
191
|
+
& > .wrapper {
|
|
171
192
|
width: 100%;
|
|
172
193
|
// Follow the elements own height so the styled box (background, border, shadow)
|
|
173
194
|
// matches the Height set in layout instead of only hugging the text.
|
|
@@ -176,26 +197,34 @@ $overflowSelector: ".flex__overflow";
|
|
|
176
197
|
background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
|
|
177
198
|
padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
|
|
178
199
|
|
|
179
|
-
border-color: var(
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
border-
|
|
184
|
-
|
|
200
|
+
border-color: var(
|
|
201
|
+
--_show-border,
|
|
202
|
+
var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
|
|
203
|
+
);
|
|
204
|
+
border-style: var(
|
|
205
|
+
--_show-border,
|
|
206
|
+
var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
|
|
207
|
+
);
|
|
208
|
+
border-width: var(
|
|
209
|
+
--_show-border,
|
|
210
|
+
var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
|
|
211
|
+
);
|
|
185
212
|
border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
|
|
186
|
-
box-shadow: var(
|
|
187
|
-
|
|
213
|
+
box-shadow: var(
|
|
214
|
+
--_show-shadow,
|
|
215
|
+
var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
|
|
216
|
+
var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
|
|
217
|
+
var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
|
|
218
|
+
var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
|
|
219
|
+
);
|
|
188
220
|
// height: 100%;
|
|
189
221
|
}
|
|
190
|
-
|
|
191
222
|
&[data-show-shadow="false"] {
|
|
192
223
|
--_show-shadow: none;
|
|
193
224
|
}
|
|
194
|
-
|
|
195
225
|
&[data-show-border="false"] {
|
|
196
226
|
--_show-border: none;
|
|
197
227
|
}
|
|
198
|
-
|
|
199
228
|
// .text-element {
|
|
200
229
|
// background: #6d96e4;
|
|
201
230
|
// // padding: 10px;
|
|
@@ -215,7 +244,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
215
244
|
&#{$overflowSelector} {
|
|
216
245
|
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
217
246
|
}
|
|
218
|
-
|
|
219
247
|
// height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
220
248
|
// border-color: var(
|
|
221
249
|
// --_show-border,
|
|
@@ -255,38 +283,42 @@ $overflowSelector: ".flex__overflow";
|
|
|
255
283
|
// );
|
|
256
284
|
text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
|
|
257
285
|
scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
|
|
258
|
-
|
|
259
286
|
&[data-flip-x="true"] {
|
|
260
287
|
transform: scaleX(-1);
|
|
261
288
|
}
|
|
262
|
-
|
|
263
289
|
&[data-flip-y="true"] {
|
|
264
290
|
transform: scaleY(-1);
|
|
265
291
|
}
|
|
266
|
-
|
|
267
292
|
&,
|
|
268
293
|
* {
|
|
269
294
|
color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
|
|
270
295
|
font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
|
|
271
296
|
font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
|
|
272
297
|
font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
|
|
273
|
-
font-style: var(
|
|
274
|
-
|
|
298
|
+
font-style: var(
|
|
299
|
+
--_ctm-mob-dn-ft-se-ic,
|
|
300
|
+
var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic))
|
|
301
|
+
);
|
|
275
302
|
text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
|
|
276
303
|
letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
|
|
277
304
|
// Line box guard — see the note on the other groups in this file.
|
|
278
|
-
line-height: max(
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
305
|
+
line-height: max(
|
|
306
|
+
var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
|
|
307
|
+
1em
|
|
308
|
+
);
|
|
309
|
+
text-decoration: var(
|
|
310
|
+
--_sf-hr-tt-dn,
|
|
311
|
+
var(
|
|
312
|
+
--_ctm-mob-dn-dt-se-ue,
|
|
313
|
+
var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
|
|
314
|
+
)
|
|
315
|
+
);
|
|
283
316
|
text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
|
|
284
317
|
word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
|
|
285
318
|
word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
|
|
286
319
|
}
|
|
287
320
|
}
|
|
288
321
|
}
|
|
289
|
-
|
|
290
322
|
&[data-element-type="productBrand"] {
|
|
291
323
|
// width: var(--_lt-wh);
|
|
292
324
|
// height: var(--_lt-ht);
|
|
@@ -294,9 +326,16 @@ $overflowSelector: ".flex__overflow";
|
|
|
294
326
|
// padding: var(--_lt-pg);
|
|
295
327
|
// width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
|
|
296
328
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
297
|
-
width: var(
|
|
298
|
-
|
|
299
|
-
|
|
329
|
+
width: var(
|
|
330
|
+
--_sf-el-wh-st-mx,
|
|
331
|
+
calc(
|
|
332
|
+
1% *
|
|
333
|
+
var(
|
|
334
|
+
--_ctm-mob-ele-nw-wh-vl,
|
|
335
|
+
var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
|
|
336
|
+
)
|
|
337
|
+
)
|
|
338
|
+
);
|
|
300
339
|
margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
|
|
301
340
|
min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
302
341
|
// height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
@@ -306,33 +345,41 @@ $overflowSelector: ".flex__overflow";
|
|
|
306
345
|
// 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
|
|
307
346
|
// );
|
|
308
347
|
|
|
309
|
-
|
|
348
|
+
& > .wrapper {
|
|
310
349
|
width: 100%;
|
|
311
350
|
// Follow the elements own height so the styled box (background, border, shadow)
|
|
312
351
|
// matches the Height set in layout instead of only hugging the text.
|
|
313
352
|
min-height: inherit;
|
|
314
353
|
background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
|
|
315
354
|
padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
|
|
316
|
-
border-color: var(
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
border-
|
|
321
|
-
|
|
355
|
+
border-color: var(
|
|
356
|
+
--_show-border,
|
|
357
|
+
var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
|
|
358
|
+
);
|
|
359
|
+
border-style: var(
|
|
360
|
+
--_show-border,
|
|
361
|
+
var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
|
|
362
|
+
);
|
|
363
|
+
border-width: var(
|
|
364
|
+
--_show-border,
|
|
365
|
+
var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
|
|
366
|
+
);
|
|
322
367
|
border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
|
|
323
|
-
box-shadow: var(
|
|
324
|
-
|
|
368
|
+
box-shadow: var(
|
|
369
|
+
--_show-shadow,
|
|
370
|
+
var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
|
|
371
|
+
var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
|
|
372
|
+
var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
|
|
373
|
+
var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
|
|
374
|
+
);
|
|
325
375
|
// height: 100%;
|
|
326
376
|
}
|
|
327
|
-
|
|
328
377
|
&[data-show-shadow="false"] {
|
|
329
378
|
--_show-shadow: none;
|
|
330
379
|
}
|
|
331
|
-
|
|
332
380
|
&[data-show-border="false"] {
|
|
333
381
|
--_show-border: none;
|
|
334
382
|
}
|
|
335
|
-
|
|
336
383
|
// .text-element {
|
|
337
384
|
// background: #6d96e4;
|
|
338
385
|
// // padding: 10px;
|
|
@@ -371,12 +418,10 @@ $overflowSelector: ".flex__overflow";
|
|
|
371
418
|
// );
|
|
372
419
|
color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
|
|
373
420
|
font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
|
|
374
|
-
|
|
375
421
|
&.flex__overflow {
|
|
376
422
|
white-space: normal;
|
|
377
423
|
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
378
424
|
}
|
|
379
|
-
|
|
380
425
|
font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
|
|
381
426
|
font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
|
|
382
427
|
font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
|
|
@@ -387,31 +432,32 @@ $overflowSelector: ".flex__overflow";
|
|
|
387
432
|
// up taller than their own line box and spill out of it, which is what makes the
|
|
388
433
|
// text look cut off. max(..., 1em) keeps the box at least as tall as the text
|
|
389
434
|
// while still honouring any larger value the user sets.
|
|
390
|
-
line-height: max(
|
|
391
|
-
1em)
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
435
|
+
line-height: max(
|
|
436
|
+
var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
|
|
437
|
+
1em
|
|
438
|
+
);
|
|
439
|
+
text-decoration: var(
|
|
440
|
+
--_sf-hr-tt-dn,
|
|
441
|
+
var(
|
|
442
|
+
--_ctm-mob-dn-dt-se-ue,
|
|
443
|
+
var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
|
|
444
|
+
)
|
|
445
|
+
);
|
|
395
446
|
word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
|
|
396
447
|
word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
|
|
397
448
|
scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
|
|
398
|
-
|
|
399
449
|
&[data-flip-x="true"] {
|
|
400
450
|
transform: scaleX(-1);
|
|
401
451
|
}
|
|
402
|
-
|
|
403
452
|
&[data-flip-y="true"] {
|
|
404
453
|
transform: scaleY(-1);
|
|
405
454
|
}
|
|
406
|
-
|
|
407
455
|
text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
|
|
408
|
-
|
|
409
456
|
&#{$overflowSelector} {
|
|
410
457
|
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
411
458
|
}
|
|
412
459
|
}
|
|
413
460
|
}
|
|
414
|
-
|
|
415
461
|
&[data-element-type="productCode"],
|
|
416
462
|
&[data-element-type="categoryCode"] {
|
|
417
463
|
// width: var(--_lt-wh);
|
|
@@ -420,9 +466,16 @@ $overflowSelector: ".flex__overflow";
|
|
|
420
466
|
// padding: var(--_lt-pg);
|
|
421
467
|
// width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
|
|
422
468
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
423
|
-
width: var(
|
|
424
|
-
|
|
425
|
-
|
|
469
|
+
width: var(
|
|
470
|
+
--_sf-el-wh-st-mx,
|
|
471
|
+
calc(
|
|
472
|
+
1% *
|
|
473
|
+
var(
|
|
474
|
+
--_ctm-mob-ele-nw-wh-vl,
|
|
475
|
+
var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
|
|
476
|
+
)
|
|
477
|
+
)
|
|
478
|
+
);
|
|
426
479
|
margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_tst-lt-mn))));
|
|
427
480
|
min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
428
481
|
// height: ;
|
|
@@ -431,33 +484,41 @@ $overflowSelector: ".flex__overflow";
|
|
|
431
484
|
// 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
|
|
432
485
|
// );
|
|
433
486
|
|
|
434
|
-
|
|
487
|
+
& > .wrapper {
|
|
435
488
|
width: 100%;
|
|
436
489
|
// Follow the elements own height so the styled box (background, border, shadow)
|
|
437
490
|
// matches the Height set in layout instead of only hugging the text.
|
|
438
491
|
min-height: inherit;
|
|
439
492
|
background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
|
|
440
493
|
padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
|
|
441
|
-
border-color: var(
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
border-
|
|
446
|
-
|
|
494
|
+
border-color: var(
|
|
495
|
+
--_show-border,
|
|
496
|
+
var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
|
|
497
|
+
);
|
|
498
|
+
border-style: var(
|
|
499
|
+
--_show-border,
|
|
500
|
+
var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)))
|
|
501
|
+
);
|
|
502
|
+
border-width: var(
|
|
503
|
+
--_show-border,
|
|
504
|
+
var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
|
|
505
|
+
);
|
|
447
506
|
border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
|
|
448
|
-
box-shadow: var(
|
|
449
|
-
|
|
507
|
+
box-shadow: var(
|
|
508
|
+
--_show-shadow,
|
|
509
|
+
var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
|
|
510
|
+
var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
|
|
511
|
+
var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
|
|
512
|
+
var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
|
|
513
|
+
);
|
|
450
514
|
// height: 100%;
|
|
451
515
|
}
|
|
452
|
-
|
|
453
516
|
&[data-show-shadow="false"] {
|
|
454
517
|
--_show-shadow: none;
|
|
455
518
|
}
|
|
456
|
-
|
|
457
519
|
&[data-show-border="false"] {
|
|
458
520
|
--_show-border: none;
|
|
459
521
|
}
|
|
460
|
-
|
|
461
522
|
// .text-element {
|
|
462
523
|
// background: #6d96e4;
|
|
463
524
|
// // padding: 10px;
|
|
@@ -496,12 +557,10 @@ $overflowSelector: ".flex__overflow";
|
|
|
496
557
|
// );
|
|
497
558
|
color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
|
|
498
559
|
font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
|
|
499
|
-
|
|
500
560
|
&.flex__overflow {
|
|
501
561
|
white-space: normal;
|
|
502
562
|
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
503
563
|
}
|
|
504
|
-
|
|
505
564
|
font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
|
|
506
565
|
font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
|
|
507
566
|
font-style: var(--_ctm-mob-dn-ft-se-ic, var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
|
|
@@ -512,28 +571,30 @@ $overflowSelector: ".flex__overflow";
|
|
|
512
571
|
// up taller than their own line box and spill out of it, which is what makes the
|
|
513
572
|
// text look cut off. max(..., 1em) keeps the box at least as tall as the text
|
|
514
573
|
// while still honouring any larger value the user sets.
|
|
515
|
-
line-height: max(
|
|
516
|
-
1em)
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
574
|
+
line-height: max(
|
|
575
|
+
var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
|
|
576
|
+
1em
|
|
577
|
+
);
|
|
578
|
+
text-decoration: var(
|
|
579
|
+
--_sf-hr-tt-dn,
|
|
580
|
+
var(
|
|
581
|
+
--_ctm-mob-dn-dt-se-ue,
|
|
582
|
+
var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
|
|
583
|
+
)
|
|
584
|
+
);
|
|
520
585
|
scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
|
|
521
|
-
|
|
522
586
|
&[data-flip-x="true"] {
|
|
523
587
|
transform: scaleX(-1);
|
|
524
588
|
}
|
|
525
|
-
|
|
526
589
|
&[data-flip-y="true"] {
|
|
527
590
|
transform: scaleY(-1);
|
|
528
591
|
}
|
|
529
|
-
|
|
530
592
|
text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
|
|
531
593
|
word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
|
|
532
594
|
word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
|
|
533
|
-
|
|
534
595
|
&#{$overflowSelector} {
|
|
535
596
|
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
536
597
|
}
|
|
537
598
|
}
|
|
538
599
|
}
|
|
539
|
-
}
|
|
600
|
+
}
|