@sc-360-v2/storefront-cms-library 0.5.60 → 0.5.62
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 +2155 -1671
- 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/bulk-variant-picker.scss +2027 -1128
- package/dist/bundle.scss +1489 -841
- package/dist/bundleCategories.scss +301 -0
- package/dist/bundleDetails.scss +5072 -3774
- package/dist/button.scss +113 -78
- package/dist/buy-for-tab-container.scss +106 -77
- package/dist/buyForHeaders.scss +2976 -1722
- package/dist/cart-details.scss +1025 -485
- package/dist/cart-summary.scss +1234 -569
- package/dist/cart-wrapper.scss +79 -37
- package/dist/cart.scss +225 -117
- package/dist/cartAttributes.scss +647 -367
- package/dist/cartDropdownOverlay.scss +10 -1
- 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 +685 -590
- 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 -256
- package/dist/coupon.scss +16 -19
- 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 +1682 -831
- package/dist/gallery-slider-temp.scss +811 -445
- package/dist/global-styles.scss +7 -23
- package/dist/grid.scss +33 -25
- package/dist/hotspot.scss +115 -68
- package/dist/image-temp.scss +38 -24
- 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 +106 -76
- package/dist/layouter-pro-item.scss +95 -89
- package/dist/layouter-pro.scss +92 -87
- package/dist/layouter.scss +264 -79
- package/dist/light-box-v2.scss +104 -89
- package/dist/login.scss +600 -311
- package/dist/map.scss +391 -228
- 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/order-status.scss +1117 -643
- 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 +1778 -1228
- package/dist/product-basic-elements.scss +169 -108
- package/dist/product-highlights.scss +176 -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 +659 -316
- package/dist/product-price.scss +2562 -1284
- 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 +451 -207
- package/dist/quantity-selector.scss +550 -313
- package/dist/quick-inventory-check.scss +174 -95
- package/dist/quick-links.scss +137 -56
- package/dist/quick-order-pad.scss +271 -218
- package/dist/quota-details.scss +282 -152
- package/dist/quotes.scss +121 -82
- package/dist/repeater-embla-controls.scss +26 -37
- package/dist/repeater-grid-toggle.scss +166 -156
- package/dist/repeater-item.scss +64 -41
- package/dist/repeater.scss +817 -554
- 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 +198 -90
- package/dist/search.scss +326 -179
- package/dist/section.scss +51 -27
- package/dist/shipping-payments.scss +58 -198
- package/dist/simple-list.scss +198 -61
- package/dist/social.scss +145 -80
- 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 +511 -269
- package/dist/text-temp.scss +7 -8
- package/dist/theme-classes.scss +13 -17
- package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1051 -2
- package/dist/types/builder/tools/element-edit/layouter.d.ts +33 -1
- package/dist/types/builder/tools/element-edit/productOptions.d.ts +3 -1
- package/dist/types/builder/tools/element-edit/repeater.d.ts +45 -1
- package/dist/types/builder/tools/element-edit/scroll.d.ts +6 -0
- package/dist/types/builder/tools/element-edit/userElements.d.ts +38 -37
- package/dist/uom-selector.scss +949 -489
- package/dist/user-elements.scss +892 -574
- package/dist/variant-picker.scss +2555 -1281
- package/dist/volume-pricing.scss +1037 -541
- package/dist/widget.scss +1 -0
- package/package.json +1 -1
|
@@ -2,77 +2,161 @@
|
|
|
2
2
|
@use "sass:list";
|
|
3
3
|
@use "./functions.scss" as *;
|
|
4
4
|
|
|
5
|
+
// The value text inside a swatch moved out of design.optionValueStyle into its own
|
|
6
|
+
// schema, design.optionValueTextStyle, so the box and the text are edited from separate
|
|
7
|
+
// accordions. Pages saved before the split still carry the typography keys under the old
|
|
8
|
+
// section, so every value-text property resolves the new variable first and falls back to
|
|
9
|
+
// the old one — both across breakpoints.
|
|
10
|
+
@function optionValueTextVar($newVar, $legacyVar) {
|
|
11
|
+
@return prepareMediaVariable($newVar, prepareMediaVariable($legacyVar));
|
|
12
|
+
}
|
|
13
|
+
|
|
5
14
|
[data-div-type="element"] {
|
|
6
15
|
&[data-element-type="productOptions"] {
|
|
7
|
-
width: var(
|
|
8
|
-
|
|
9
|
-
|
|
16
|
+
width: var(
|
|
17
|
+
--_sf-el-wh-st-mx,
|
|
18
|
+
calc(
|
|
19
|
+
1% *
|
|
20
|
+
var(
|
|
21
|
+
--_ctm-mob-ele-nw-wh-vl,
|
|
22
|
+
var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
|
|
23
|
+
)
|
|
24
|
+
)
|
|
25
|
+
);
|
|
10
26
|
margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
|
|
11
27
|
|
|
12
|
-
--_aspect-ratio: calc(
|
|
28
|
+
--_aspect-ratio: calc(
|
|
29
|
+
1 *
|
|
30
|
+
(
|
|
31
|
+
var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
|
|
32
|
+
var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
|
|
33
|
+
)
|
|
34
|
+
);
|
|
13
35
|
|
|
14
|
-
|
|
36
|
+
& > .wrapper {
|
|
15
37
|
// width: 100%;
|
|
16
38
|
// height: 100%;
|
|
17
39
|
}
|
|
18
|
-
|
|
19
40
|
.product__option__element {
|
|
20
41
|
display: flex;
|
|
21
42
|
flex-direction: column;
|
|
22
43
|
min-height: 30px;
|
|
23
|
-
gap: var(
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
44
|
+
gap: var(
|
|
45
|
+
--_ctm-mob-lt-on-te-ve-sg,
|
|
46
|
+
var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
background-color: var(
|
|
50
|
+
--_ctm-mob-dn-wt-se-bd-cr,
|
|
51
|
+
var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
|
|
52
|
+
);
|
|
28
53
|
padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
|
|
29
54
|
|
|
30
55
|
width: 100%;
|
|
31
56
|
// height: 100%;
|
|
32
|
-
border-color: var(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
border-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
57
|
+
border-color: var(
|
|
58
|
+
--_ctm-mob-dn-wt-se-br-cr,
|
|
59
|
+
var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
|
|
60
|
+
);
|
|
61
|
+
border-style: var(
|
|
62
|
+
--_ctm-mob-dn-wt-se-br-se,
|
|
63
|
+
var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
|
|
64
|
+
);
|
|
65
|
+
border-width: var(
|
|
66
|
+
--_ctm-mob-dn-wt-se-br-wh,
|
|
67
|
+
var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
|
|
68
|
+
);
|
|
69
|
+
border-radius: var(
|
|
70
|
+
--_ctm-mob-dn-wt-se-br-rs,
|
|
71
|
+
var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
|
|
72
|
+
);
|
|
73
|
+
box-shadow: var(
|
|
74
|
+
--_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)))
|
|
76
|
+
var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
|
|
77
|
+
var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
|
|
78
|
+
var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
|
|
79
|
+
);
|
|
42
80
|
|
|
43
81
|
.title {
|
|
44
82
|
margin-bottom: 4px;
|
|
45
83
|
color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
|
|
46
|
-
font-family: var(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
84
|
+
font-family: var(
|
|
85
|
+
--_ctm-mob-dn-on-te-ft-fy,
|
|
86
|
+
var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
|
|
87
|
+
);
|
|
88
|
+
text-transform: var(
|
|
89
|
+
--_ctm-mob-dn-on-te-tt-tm,
|
|
90
|
+
var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm))
|
|
91
|
+
);
|
|
92
|
+
word-wrap: var(
|
|
93
|
+
--_ctm-mob-dn-on-te-wd-wp,
|
|
94
|
+
var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp))
|
|
95
|
+
);
|
|
96
|
+
word-break: var(
|
|
97
|
+
--_ctm-mob-dn-on-te-wd-bk,
|
|
98
|
+
var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk))
|
|
99
|
+
);
|
|
100
|
+
font-size: var(
|
|
101
|
+
--_ctm-mob-dn-on-te-ft-se,
|
|
102
|
+
var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
|
|
103
|
+
);
|
|
104
|
+
font-weight: var(
|
|
105
|
+
--_ctm-mob-dn-on-te-ft-wt,
|
|
106
|
+
var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
|
|
107
|
+
);
|
|
108
|
+
font-style: var(
|
|
109
|
+
--_ctm-mob-dn-on-te-ft-se-ic,
|
|
110
|
+
var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
|
|
111
|
+
);
|
|
112
|
+
text-align: var(
|
|
113
|
+
--_ctm-mob-dn-on-te-tt-an,
|
|
114
|
+
var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
|
|
115
|
+
);
|
|
116
|
+
letter-spacing: var(
|
|
117
|
+
--_ctm-mob-dn-on-te-lr-sg,
|
|
118
|
+
var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
|
|
119
|
+
);
|
|
120
|
+
line-height: var(
|
|
121
|
+
--_ctm-mob-dn-on-te-le-ht,
|
|
122
|
+
var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
|
|
123
|
+
);
|
|
124
|
+
text-decoration: var(
|
|
125
|
+
--_ctm-mob-dn-on-te-ue,
|
|
126
|
+
var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
|
|
127
|
+
);
|
|
128
|
+
|
|
129
|
+
// design.optionTitle container styling. The title is its own design schema, so it
|
|
130
|
+
// carries the same Fill / Border / Border Radius / Shadow set as the value box.
|
|
131
|
+
background-color: prepareMediaVariable(--_ctm-dn-on-te-bd-cr, transparent);
|
|
132
|
+
border-color: prepareMediaVariable(--_ctm-dn-on-te-br-cr);
|
|
133
|
+
border-style: prepareMediaVariable(--_ctm-dn-on-te-br-se);
|
|
134
|
+
border-width: prepareMediaVariable(--_ctm-dn-on-te-br-wh, 0px);
|
|
135
|
+
border-radius: prepareMediaVariable(--_ctm-dn-on-te-br-rs, 0px);
|
|
136
|
+
// Same --_show-shadow gate the widget container uses in this file.
|
|
137
|
+
box-shadow: var(
|
|
138
|
+
--_show-shadow,
|
|
139
|
+
prepareMediaVariable(--_ctm-dn-on-te-sw-ae) prepareMediaVariable(--_ctm-dn-on-te-sw-br)
|
|
140
|
+
prepareMediaVariable(--_ctm-dn-on-te-sw-sd) prepareMediaVariable(--_ctm-dn-on-te-sw-cr)
|
|
141
|
+
);
|
|
142
|
+
|
|
143
|
+
// Text Overflow is a `controls` property, not a CSS one, so it cannot travel as a
|
|
144
|
+
// variable — the renderer adds `.flex__overflow` and publishes the line count as
|
|
145
|
+
// `--_sf-line-clamp`.
|
|
146
|
+
&.flex__overflow {
|
|
147
|
+
white-space: normal;
|
|
148
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
149
|
+
}
|
|
68
150
|
}
|
|
69
151
|
|
|
70
152
|
.product__option__element__swatch {
|
|
71
153
|
display: flex;
|
|
72
154
|
align-items: flex-start;
|
|
73
155
|
gap: 10px;
|
|
74
|
-
gap: var(
|
|
75
|
-
|
|
156
|
+
gap: var(
|
|
157
|
+
--_ctm-mob-lt-on-te-ve-sg,
|
|
158
|
+
var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
|
|
159
|
+
);
|
|
76
160
|
|
|
77
161
|
// margin-top: 20px;
|
|
78
162
|
|
|
@@ -92,10 +176,13 @@
|
|
|
92
176
|
flex-wrap: wrap;
|
|
93
177
|
}
|
|
94
178
|
}
|
|
95
|
-
|
|
96
179
|
&[data-overflow-items="Scroll"] {
|
|
97
180
|
.swatch__list {
|
|
98
181
|
overflow-x: auto;
|
|
182
|
+
// Gap (layout.swatchScrollGap): clearance between the swatches and the
|
|
183
|
+
// scrollbar this mode adds underneath. Padding inside the scrolling box, so
|
|
184
|
+
// it holds the items off the scrollbar rather than widening the element.
|
|
185
|
+
padding-bottom: prepareMediaVariable(--_ctm-lt-sh-sl-gp, 0px);
|
|
99
186
|
// overflow-y: hidden;
|
|
100
187
|
flex-wrap: nowrap;
|
|
101
188
|
}
|
|
@@ -103,101 +190,183 @@
|
|
|
103
190
|
}
|
|
104
191
|
|
|
105
192
|
.swatch__item:hover {
|
|
106
|
-
--_sf-hr-bd-cr: var(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
--_sf-hr-br-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
--_sf-hr-br-
|
|
115
|
-
|
|
193
|
+
--_sf-hr-bd-cr: var(
|
|
194
|
+
--_ctm-mob-dn-on-ve-se-hr-se-bd-cr,
|
|
195
|
+
var(--_ctm-tab-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-on-ve-se-hr-se-bd-cr))
|
|
196
|
+
);
|
|
197
|
+
--_sf-hr-br-cr: var(
|
|
198
|
+
--_ctm-mob-dn-on-ve-se-hr-se-br-cr,
|
|
199
|
+
var(--_ctm-tab-dn-on-ve-se-hr-se-br-cr, var(--_ctm-dn-on-ve-se-hr-se-br-cr))
|
|
200
|
+
);
|
|
201
|
+
--_sf-hr-br-se: var(
|
|
202
|
+
--_ctm-mob-dn-on-ve-se-hr-se-br-se,
|
|
203
|
+
var(--_ctm-tab-dn-on-ve-se-hr-se-br-se, var(--_ctm-dn-on-ve-se-hr-se-br-se))
|
|
204
|
+
);
|
|
205
|
+
--_sf-hr-br-wh: var(
|
|
206
|
+
--_ctm-mob-dn-on-ve-se-hr-se-br-wh,
|
|
207
|
+
var(--_ctm-tab-dn-on-ve-se-hr-se-br-wh, var(--_ctm-dn-on-ve-se-hr-se-br-wh))
|
|
208
|
+
);
|
|
209
|
+
--_sf-hr-br-rs: var(
|
|
210
|
+
--_ctm-mob-dn-on-ve-se-hr-se-br-rs,
|
|
211
|
+
var(--_ctm-tab-dn-on-ve-se-hr-se-br-rs, var(--_ctm-dn-on-ve-se-hr-se-br-rs))
|
|
212
|
+
);
|
|
116
213
|
|
|
117
214
|
// for shadow
|
|
118
|
-
--_sf-hr-sw-ae: var(
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
--_sf-hr-sw-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
--_sf-hr-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
--_sf-hr-ft-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
--_sf-hr-tt-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
--_sf-hr-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
215
|
+
--_sf-hr-sw-ae: var(
|
|
216
|
+
--_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
|
|
217
|
+
var(--_ctm-tab-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-on-ve-se-hr-se-sw-ae))
|
|
218
|
+
);
|
|
219
|
+
--_sf-hr-sw-br: var(
|
|
220
|
+
--_ctm-mob-dn-on-ve-se-hr-se-sw-br,
|
|
221
|
+
var(--_ctm-tab-dn-on-ve-se-hr-se-sw-br, var(--_ctm-dn-on-ve-se-hr-se-sw-br))
|
|
222
|
+
);
|
|
223
|
+
--_sf-hr-sw-hr: var(
|
|
224
|
+
--_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
|
|
225
|
+
var(--_ctm-tab-dn-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-on-ve-se-hr-se-sw-hr))
|
|
226
|
+
);
|
|
227
|
+
--_sf-hr-sw-cr: var(
|
|
228
|
+
--_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
|
|
229
|
+
var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr))
|
|
230
|
+
);
|
|
231
|
+
|
|
232
|
+
// for font — from optionValueTextStyle.hoverState, falling back to the pre-split
|
|
233
|
+
// optionValueStyle.hoverState keys.
|
|
234
|
+
--_sf-hr-cr: #{optionValueTextVar(
|
|
235
|
+
--_ctm-dn-on-ve-tt-se-hr-se-cr,
|
|
236
|
+
--_ctm-dn-on-ve-se-hr-se-cr
|
|
237
|
+
)};
|
|
238
|
+
--_sf-hr-ft-fy: #{optionValueTextVar(
|
|
239
|
+
--_ctm-dn-on-ve-tt-se-hr-se-ft-fy,
|
|
240
|
+
--_ctm-dn-on-ve-se-hr-se-ft-fy
|
|
241
|
+
)};
|
|
242
|
+
--_sf-hr-tt-tm: #{optionValueTextVar(
|
|
243
|
+
--_ctm-dn-on-ve-tt-se-hr-se-tt-tm,
|
|
244
|
+
--_ctm-dn-on-ve-se-hr-se-tt-tm
|
|
245
|
+
)};
|
|
246
|
+
--_sf-hr-wd-wp: #{optionValueTextVar(
|
|
247
|
+
--_ctm-dn-on-ve-tt-se-hr-se-wd-wp,
|
|
248
|
+
--_ctm-dn-on-ve-se-hr-se-wd-wp
|
|
249
|
+
)};
|
|
250
|
+
--_sf-hr-wd-bk: #{optionValueTextVar(
|
|
251
|
+
--_ctm-dn-on-ve-tt-se-hr-se-wd-bk,
|
|
252
|
+
--_ctm-dn-on-ve-se-hr-se-wd-bk
|
|
253
|
+
)};
|
|
254
|
+
--_sf-hr-ft-se: #{optionValueTextVar(
|
|
255
|
+
--_ctm-dn-on-ve-tt-se-hr-se-ft-se,
|
|
256
|
+
--_ctm-dn-on-ve-se-hr-se-ft-se
|
|
257
|
+
)};
|
|
258
|
+
--_sf-hr-ft-wt: #{optionValueTextVar(
|
|
259
|
+
--_ctm-dn-on-ve-tt-se-hr-se-ft-wt,
|
|
260
|
+
--_ctm-dn-on-ve-se-hr-se-ft-wt
|
|
261
|
+
)};
|
|
262
|
+
--_sf-hr-ft-se-ic: #{optionValueTextVar(
|
|
263
|
+
--_ctm-dn-on-ve-tt-se-hr-se-ft-se-ic,
|
|
264
|
+
--_ctm-dn-on-ve-se-hr-se-ft-se-ic
|
|
265
|
+
)};
|
|
266
|
+
--_sf-hr-tt-an: #{optionValueTextVar(
|
|
267
|
+
--_ctm-dn-on-ve-tt-se-hr-se-tt-an,
|
|
268
|
+
--_ctm-dn-on-ve-se-hr-se-tt-an
|
|
269
|
+
)};
|
|
270
|
+
--_sf-hr-lr-sg: #{optionValueTextVar(
|
|
271
|
+
--_ctm-dn-on-ve-tt-se-hr-se-lr-sg,
|
|
272
|
+
--_ctm-dn-on-ve-se-hr-se-lr-sg
|
|
273
|
+
)};
|
|
274
|
+
--_sf-hr-le-ht: #{optionValueTextVar(
|
|
275
|
+
--_ctm-dn-on-ve-tt-se-hr-se-le-ht,
|
|
276
|
+
--_ctm-dn-on-ve-se-hr-se-le-ht
|
|
277
|
+
)};
|
|
278
|
+
|
|
279
|
+
--_sf-hr-ue: #{optionValueTextVar(
|
|
280
|
+
--_ctm-dn-on-ve-tt-se-hr-se-ue,
|
|
281
|
+
--_ctm-dn-on-ve-se-hr-se-ue
|
|
282
|
+
)};
|
|
154
283
|
}
|
|
155
|
-
|
|
156
284
|
.swatch__item[data-selected="true"] {
|
|
157
|
-
--_sf-sd-bd-cr: var(
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
--_sf-sd-br-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
285
|
+
--_sf-sd-bd-cr: var(
|
|
286
|
+
--_ctm-mob-dn-on-ve-se-sd-se-bd-cr,
|
|
287
|
+
var(--_ctm-tab-dn-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-on-ve-se-sd-se-bd-cr))
|
|
288
|
+
);
|
|
289
|
+
--_sf-sd-br-cr: var(
|
|
290
|
+
--_ctm-mob-dn-on-ve-se-sd-se-br-cr,
|
|
291
|
+
var(--_ctm-tab-dn-on-ve-se-sd-se-br-cr, var(--_ctm-dn-on-ve-se-sd-se-br-cr))
|
|
292
|
+
);
|
|
293
|
+
--_sf-sd-br-se: var(
|
|
294
|
+
--_ctm-mob-dn-on-ve-se-sd-se-br-se,
|
|
295
|
+
var(--_ctm-tab-dn-on-ve-se-sd-se-br-se, var(--_ctm-dn-on-ve-se-sd-se-br-se))
|
|
296
|
+
);
|
|
297
|
+
--_sf-sd-br-wh: var(
|
|
298
|
+
--_ctm-mob-dn-on-ve-se-sd-se-br-wh,
|
|
299
|
+
var(--_ctm-tab-dn-on-ve-se-sd-se-br-wh, var(--_ctm-dn-on-ve-se-sd-se-br-wh))
|
|
300
|
+
);
|
|
165
301
|
// new
|
|
166
|
-
--_sf-sd-sw-ae: var(
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
--_sf-sd-sw-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
--_sf-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
302
|
+
--_sf-sd-sw-ae: var(
|
|
303
|
+
--_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
|
|
304
|
+
var(--_ctm-tab-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-on-ve-se-sd-se-sw-ae))
|
|
305
|
+
);
|
|
306
|
+
--_sf-sd-sw-br: var(
|
|
307
|
+
--_ctm-mob-dn-on-ve-se-sd-se-sw-br,
|
|
308
|
+
var(--_ctm-tab-dn-on-ve-se-sd-se-sw-br, var(--_ctm-dn-on-ve-se-sd-se-sw-br))
|
|
309
|
+
);
|
|
310
|
+
--_sf-sd-sw-sd: var(
|
|
311
|
+
--_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
|
|
312
|
+
var(--_ctm-tab-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-on-ve-se-sd-se-sw-sd))
|
|
313
|
+
);
|
|
314
|
+
--_sf-sd-sw-cr: var(
|
|
315
|
+
--_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
|
|
316
|
+
var(--_ctm-tab-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-on-ve-se-sd-se-sw-cr))
|
|
317
|
+
);
|
|
318
|
+
|
|
319
|
+
// for font — from optionValueTextStyle.selectedState, falling back to the
|
|
320
|
+
// pre-split optionValueStyle.selectedState keys.
|
|
321
|
+
--_sf-hr-cr: #{optionValueTextVar(
|
|
322
|
+
--_ctm-dn-on-ve-tt-se-sd-se-cr,
|
|
323
|
+
--_ctm-dn-on-ve-se-sd-se-cr
|
|
324
|
+
)};
|
|
325
|
+
--_sf-hr-ft-fy: #{optionValueTextVar(
|
|
326
|
+
--_ctm-dn-on-ve-tt-se-sd-se-ft-fy,
|
|
327
|
+
--_ctm-dn-on-ve-se-sd-se-ft-fy
|
|
328
|
+
)};
|
|
329
|
+
--_sf-hr-tt-tm: #{optionValueTextVar(
|
|
330
|
+
--_ctm-dn-on-ve-tt-se-sd-se-tt-tm,
|
|
331
|
+
--_ctm-dn-on-ve-se-sd-se-tt-tm
|
|
332
|
+
)};
|
|
333
|
+
--_sf-hr-wd-wp: #{optionValueTextVar(
|
|
334
|
+
--_ctm-dn-on-ve-tt-se-sd-se-wd-wp,
|
|
335
|
+
--_ctm-dn-on-ve-se-sd-se-wd-wp
|
|
336
|
+
)};
|
|
337
|
+
--_sf-hr-wd-bk: #{optionValueTextVar(
|
|
338
|
+
--_ctm-dn-on-ve-tt-se-sd-se-wd-bk,
|
|
339
|
+
--_ctm-dn-on-ve-se-sd-se-wd-bk
|
|
340
|
+
)};
|
|
341
|
+
--_sf-hr-ft-se: #{optionValueTextVar(
|
|
342
|
+
--_ctm-dn-on-ve-tt-se-sd-se-ft-se,
|
|
343
|
+
--_ctm-dn-on-ve-se-sd-se-ft-se
|
|
344
|
+
)};
|
|
345
|
+
--_sf-hr-ft-wt: #{optionValueTextVar(
|
|
346
|
+
--_ctm-dn-on-ve-tt-se-sd-se-ft-wt,
|
|
347
|
+
--_ctm-dn-on-ve-se-sd-se-ft-wt
|
|
348
|
+
)};
|
|
349
|
+
--_sf-hr-ft-se-ic: #{optionValueTextVar(
|
|
350
|
+
--_ctm-dn-on-ve-tt-se-sd-se-ft-se-ic,
|
|
351
|
+
--_ctm-dn-on-ve-se-sd-se-ft-se-ic
|
|
352
|
+
)};
|
|
353
|
+
--_sf-hr-tt-an: #{optionValueTextVar(
|
|
354
|
+
--_ctm-dn-on-ve-tt-se-sd-se-tt-an,
|
|
355
|
+
--_ctm-dn-on-ve-se-sd-se-tt-an
|
|
356
|
+
)};
|
|
357
|
+
--_sf-hr-lr-sg: #{optionValueTextVar(
|
|
358
|
+
--_ctm-dn-on-ve-tt-se-sd-se-lr-sg,
|
|
359
|
+
--_ctm-dn-on-ve-se-sd-se-lr-sg
|
|
360
|
+
)};
|
|
361
|
+
--_sf-hr-le-ht: #{optionValueTextVar(
|
|
362
|
+
--_ctm-dn-on-ve-tt-se-sd-se-le-ht,
|
|
363
|
+
--_ctm-dn-on-ve-se-sd-se-le-ht
|
|
364
|
+
)};
|
|
365
|
+
|
|
366
|
+
--_sf-hr-ue: #{optionValueTextVar(
|
|
367
|
+
--_ctm-dn-on-ve-tt-se-sd-se-ue,
|
|
368
|
+
--_ctm-dn-on-ve-se-sd-se-ue
|
|
369
|
+
)};
|
|
201
370
|
}
|
|
202
371
|
|
|
203
372
|
.swatch__item {
|
|
@@ -212,6 +381,18 @@
|
|
|
212
381
|
width: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
|
|
213
382
|
height: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
|
|
214
383
|
|
|
384
|
+
// A Single Select value is text, not a swatch image. `white-space: nowrap` on
|
|
385
|
+
// .option__value__text keeps it on one line, but this box is fixed-size with
|
|
386
|
+
// overflow:hidden, so a value wider than Swatch Item Size was clipped instead.
|
|
387
|
+
// Grow to the content and keep Swatch Item Size as the floor, so short values look
|
|
388
|
+
// exactly as before and only the ones that would have been cut off get wider.
|
|
389
|
+
&[data-display-style="Single Select"] {
|
|
390
|
+
width: auto;
|
|
391
|
+
height: auto;
|
|
392
|
+
min-width: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
|
|
393
|
+
min-height: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
|
|
394
|
+
}
|
|
395
|
+
|
|
215
396
|
// &[data-display-style="Swatch"] {
|
|
216
397
|
// height: prepareMediaVariable(--_ctm-lt-sh-im-se);
|
|
217
398
|
// width: prepareMediaVariable(--_ctm-lt-sh-im-se);
|
|
@@ -233,8 +414,10 @@
|
|
|
233
414
|
border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
|
|
234
415
|
border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
|
|
235
416
|
|
|
236
|
-
box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
|
|
237
|
-
|
|
417
|
+
box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
|
|
418
|
+
var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
|
|
419
|
+
var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
|
|
420
|
+
var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
|
|
238
421
|
& div,
|
|
239
422
|
.product-select-image {
|
|
240
423
|
height: 100%;
|
|
@@ -245,11 +428,9 @@
|
|
|
245
428
|
&[data-background-shape="circle"] {
|
|
246
429
|
border-radius: 50%;
|
|
247
430
|
}
|
|
248
|
-
|
|
249
431
|
&[data-background-shape="square"] {
|
|
250
432
|
border-radius: 5px;
|
|
251
433
|
}
|
|
252
|
-
|
|
253
434
|
&[data-background-shape="capsule"] {
|
|
254
435
|
&:not([data-display-style="Single Select"]) {
|
|
255
436
|
--toggle-height: var(--_ctm-lt-sh-im-se);
|
|
@@ -259,23 +440,17 @@
|
|
|
259
440
|
height: var(--toggle-height);
|
|
260
441
|
}
|
|
261
442
|
|
|
262
|
-
border-radius: var(--toggle-height);
|
|
263
|
-
/* Full pill shape */
|
|
443
|
+
border-radius: var(--toggle-height); /* Full pill shape */
|
|
264
444
|
box-sizing: border-box;
|
|
265
445
|
}
|
|
266
|
-
|
|
267
446
|
&[data-swatch-shape="circle"] {
|
|
268
|
-
|
|
269
447
|
& div,
|
|
270
448
|
.product-select-image {
|
|
271
449
|
border-radius: 50%;
|
|
272
450
|
}
|
|
273
|
-
|
|
274
451
|
// border-radius: 50%;
|
|
275
452
|
}
|
|
276
|
-
|
|
277
453
|
&[data-swatch-shape="capsule"] {
|
|
278
|
-
|
|
279
454
|
& div,
|
|
280
455
|
.product-select-image {
|
|
281
456
|
// border-radius: 50%;
|
|
@@ -283,7 +458,6 @@
|
|
|
283
458
|
height: 100%;
|
|
284
459
|
border-radius: inherit;
|
|
285
460
|
}
|
|
286
|
-
|
|
287
461
|
// border-radius: 50%;
|
|
288
462
|
}
|
|
289
463
|
|
|
@@ -291,11 +465,9 @@
|
|
|
291
465
|
&[data-background-shape-hover="circle"] {
|
|
292
466
|
border-radius: 50%;
|
|
293
467
|
}
|
|
294
|
-
|
|
295
468
|
&[data-background-shape-hover="square"] {
|
|
296
469
|
border-radius: 5px;
|
|
297
470
|
}
|
|
298
|
-
|
|
299
471
|
&[data-background-shape-hover="capsule"] {
|
|
300
472
|
--toggle-height: var(--_ctm-lt-sh-im-se);
|
|
301
473
|
--toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
|
|
@@ -303,23 +475,18 @@
|
|
|
303
475
|
width: var(--toggle-width);
|
|
304
476
|
height: var(--toggle-height);
|
|
305
477
|
|
|
306
|
-
border-radius: var(--toggle-height);
|
|
307
|
-
/* Full pill shape */
|
|
478
|
+
border-radius: var(--toggle-height); /* Full pill shape */
|
|
308
479
|
box-sizing: border-box;
|
|
309
480
|
}
|
|
310
481
|
|
|
311
482
|
&[data-swatch-shape-hover="circle"] {
|
|
312
|
-
|
|
313
483
|
& div,
|
|
314
484
|
.product-select-image {
|
|
315
485
|
border-radius: 50%;
|
|
316
486
|
}
|
|
317
|
-
|
|
318
487
|
// border-radius: 50%;
|
|
319
488
|
}
|
|
320
|
-
|
|
321
489
|
&[data-swatch-shape-hover="capsule"] {
|
|
322
|
-
|
|
323
490
|
& div,
|
|
324
491
|
.product-select-image {
|
|
325
492
|
// border-radius: 50%;
|
|
@@ -328,33 +495,33 @@
|
|
|
328
495
|
border-radius: inherit;
|
|
329
496
|
}
|
|
330
497
|
}
|
|
331
|
-
|
|
332
498
|
&[data-swatch-shape-hover="square"] {
|
|
333
|
-
|
|
334
499
|
& div,
|
|
335
500
|
.product-select-image {
|
|
336
501
|
border-radius: 5px;
|
|
337
502
|
}
|
|
338
503
|
}
|
|
339
504
|
}
|
|
340
|
-
|
|
341
505
|
&[data-selected="true"] {
|
|
342
506
|
border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));
|
|
343
507
|
|
|
344
|
-
background-color: var(
|
|
345
|
-
|
|
508
|
+
background-color: var(
|
|
509
|
+
--_sf-sd-bd-cr,
|
|
510
|
+
prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr)
|
|
511
|
+
);
|
|
346
512
|
border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
|
|
347
513
|
border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
|
|
348
|
-
box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
|
|
514
|
+
box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
|
|
515
|
+
var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
|
|
516
|
+
var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
|
|
517
|
+
var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
|
|
349
518
|
|
|
350
519
|
&[data-background-shape-selected="circle"] {
|
|
351
520
|
border-radius: 50%;
|
|
352
521
|
}
|
|
353
|
-
|
|
354
522
|
&[data-background-shape-selected="square"] {
|
|
355
523
|
border-radius: 5px;
|
|
356
524
|
}
|
|
357
|
-
|
|
358
525
|
&[data-background-shape-selected="capsule"] {
|
|
359
526
|
--toggle-height: #{prepareMediaVariable(--_ctm-lt-sh-im-se)};
|
|
360
527
|
--toggle-width: calc(#{prepareMediaVariable(--_ctm-lt-sh-im-se)} * 1.5);
|
|
@@ -362,21 +529,16 @@
|
|
|
362
529
|
width: var(--toggle-width);
|
|
363
530
|
// height: var(--toggle-height);
|
|
364
531
|
|
|
365
|
-
border-radius: var(--toggle-height);
|
|
366
|
-
/* Full pill shape */
|
|
532
|
+
border-radius: var(--toggle-height); /* Full pill shape */
|
|
367
533
|
box-sizing: border-box;
|
|
368
534
|
}
|
|
369
|
-
|
|
370
535
|
&[data-swatch-shape-selected="circle"] {
|
|
371
|
-
|
|
372
536
|
& div,
|
|
373
537
|
.product-select-image {
|
|
374
538
|
border-radius: 50%;
|
|
375
539
|
}
|
|
376
540
|
}
|
|
377
|
-
|
|
378
541
|
&[data-swatch-shape-selected="capsule"] {
|
|
379
|
-
|
|
380
542
|
& div,
|
|
381
543
|
.product-select-image {
|
|
382
544
|
// border-radius: 50%;
|
|
@@ -385,9 +547,7 @@
|
|
|
385
547
|
border-radius: inherit;
|
|
386
548
|
}
|
|
387
549
|
}
|
|
388
|
-
|
|
389
550
|
&[data-swatch-shape-selected="square"] {
|
|
390
|
-
|
|
391
551
|
& div,
|
|
392
552
|
.product-select-image {
|
|
393
553
|
border-radius: 5px;
|
|
@@ -396,21 +556,69 @@
|
|
|
396
556
|
}
|
|
397
557
|
|
|
398
558
|
.option__value__text {
|
|
399
|
-
color: var(
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
559
|
+
color: var(
|
|
560
|
+
--_sf-hr-cr,
|
|
561
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-cr, --_ctm-dn-on-ve-se-dt-se-cr)}
|
|
562
|
+
);
|
|
563
|
+
font-family: var(
|
|
564
|
+
--_sf-hr-ft-fy,
|
|
565
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-fy, --_ctm-dn-on-ve-se-dt-se-ft-fy)}
|
|
566
|
+
);
|
|
567
|
+
text-transform: var(
|
|
568
|
+
--_sf-hr-tt-tm,
|
|
569
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-tm, --_ctm-dn-on-ve-se-dt-se-tt-tm)}
|
|
570
|
+
);
|
|
571
|
+
word-wrap: var(
|
|
572
|
+
--_sf-hr-wd-wp,
|
|
573
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-wp, --_ctm-dn-on-ve-se-dt-se-wd-wp)}
|
|
574
|
+
);
|
|
575
|
+
word-break: var(
|
|
576
|
+
--_sf-hr-wd-bk,
|
|
577
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-bk, --_ctm-dn-on-ve-se-dt-se-wd-bk)}
|
|
578
|
+
);
|
|
579
|
+
font-size: var(
|
|
580
|
+
--_sf-hr-ft-se,
|
|
581
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-se, --_ctm-dn-on-ve-se-dt-se-ft-se)}
|
|
582
|
+
);
|
|
583
|
+
font-weight: var(
|
|
584
|
+
--_sf-hr-ft-wt,
|
|
585
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-wt, --_ctm-dn-on-ve-se-dt-se-ft-wt)}
|
|
586
|
+
);
|
|
587
|
+
font-style: var(
|
|
588
|
+
--_sf-hr-ft-se-ic,
|
|
589
|
+
#{optionValueTextVar(
|
|
590
|
+
--_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
|
|
591
|
+
--_ctm-dn-on-ve-se-dt-se-ft-se-ic
|
|
592
|
+
)}
|
|
593
|
+
);
|
|
594
|
+
text-align: var(
|
|
595
|
+
--_sf-hr-tt-an,
|
|
596
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-an, --_ctm-dn-on-ve-se-dt-se-tt-an)}
|
|
597
|
+
);
|
|
598
|
+
letter-spacing: var(
|
|
599
|
+
--_sf-hr-lr-sg,
|
|
600
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-lr-sg, --_ctm-dn-on-ve-se-dt-se-lr-sg)}
|
|
601
|
+
);
|
|
602
|
+
// The pre-split key is `le-ht-dc`; the new section is read under both spellings
|
|
603
|
+
// so whichever one the converter writes resolves.
|
|
604
|
+
line-height: var(
|
|
605
|
+
--_sf-hr-le-ht,
|
|
606
|
+
prepareMediaVariable(
|
|
607
|
+
--_ctm-dn-on-ve-tt-se-dt-se-le-ht,
|
|
608
|
+
#{optionValueTextVar(
|
|
609
|
+
--_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
|
|
610
|
+
--_ctm-dn-on-ve-se-dt-se-le-ht-dc
|
|
611
|
+
)}
|
|
612
|
+
)
|
|
613
|
+
);
|
|
614
|
+
text-decoration: var(
|
|
615
|
+
--_sf-hr-ue,
|
|
616
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ue, --_ctm-dn-on-ve-se-dt-se-ue)}
|
|
617
|
+
);
|
|
618
|
+
// The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
|
|
619
|
+
// broke onto a second line inside it. Keep it on one line.
|
|
620
|
+
white-space: nowrap;
|
|
412
621
|
}
|
|
413
|
-
|
|
414
622
|
&.disabled {
|
|
415
623
|
color: #aaa;
|
|
416
624
|
background-color: #f9f9f9;
|
|
@@ -467,18 +675,68 @@
|
|
|
467
675
|
// }
|
|
468
676
|
|
|
469
677
|
.option__value__text {
|
|
470
|
-
color: var(
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
text-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
678
|
+
color: var(
|
|
679
|
+
--_sf-hr-cr,
|
|
680
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-cr, --_ctm-dn-on-ve-se-dt-se-cr)}
|
|
681
|
+
);
|
|
682
|
+
font-family: var(
|
|
683
|
+
--_sf-hr-ft-fy,
|
|
684
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-fy, --_ctm-dn-on-ve-se-dt-se-ft-fy)}
|
|
685
|
+
);
|
|
686
|
+
text-transform: var(
|
|
687
|
+
--_sf-hr-tt-tm,
|
|
688
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-tm, --_ctm-dn-on-ve-se-dt-se-tt-tm)}
|
|
689
|
+
);
|
|
690
|
+
word-wrap: var(
|
|
691
|
+
--_sf-hr-wd-wp,
|
|
692
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-wp, --_ctm-dn-on-ve-se-dt-se-wd-wp)}
|
|
693
|
+
);
|
|
694
|
+
word-break: var(
|
|
695
|
+
--_sf-hr-wd-bk,
|
|
696
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-bk, --_ctm-dn-on-ve-se-dt-se-wd-bk)}
|
|
697
|
+
);
|
|
698
|
+
font-size: var(
|
|
699
|
+
--_sf-hr-ft-se,
|
|
700
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-se, --_ctm-dn-on-ve-se-dt-se-ft-se)}
|
|
701
|
+
);
|
|
702
|
+
font-weight: var(
|
|
703
|
+
--_sf-hr-ft-wt,
|
|
704
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-wt, --_ctm-dn-on-ve-se-dt-se-ft-wt)}
|
|
705
|
+
);
|
|
706
|
+
font-style: var(
|
|
707
|
+
--_sf-hr-ft-se-ic,
|
|
708
|
+
#{optionValueTextVar(
|
|
709
|
+
--_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
|
|
710
|
+
--_ctm-dn-on-ve-se-dt-se-ft-se-ic
|
|
711
|
+
)}
|
|
712
|
+
);
|
|
713
|
+
text-align: var(
|
|
714
|
+
--_sf-hr-tt-an,
|
|
715
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-an, --_ctm-dn-on-ve-se-dt-se-tt-an)}
|
|
716
|
+
);
|
|
717
|
+
letter-spacing: var(
|
|
718
|
+
--_sf-hr-lr-sg,
|
|
719
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-lr-sg, --_ctm-dn-on-ve-se-dt-se-lr-sg)}
|
|
720
|
+
);
|
|
721
|
+
// The pre-split key is `le-ht-dc`; the new section is read under both spellings
|
|
722
|
+
// so whichever one the converter writes resolves.
|
|
723
|
+
line-height: var(
|
|
724
|
+
--_sf-hr-le-ht,
|
|
725
|
+
prepareMediaVariable(
|
|
726
|
+
--_ctm-dn-on-ve-tt-se-dt-se-le-ht,
|
|
727
|
+
#{optionValueTextVar(
|
|
728
|
+
--_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
|
|
729
|
+
--_ctm-dn-on-ve-se-dt-se-le-ht-dc
|
|
730
|
+
)}
|
|
731
|
+
)
|
|
732
|
+
);
|
|
733
|
+
text-decoration: var(
|
|
734
|
+
--_sf-hr-ue,
|
|
735
|
+
#{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ue, --_ctm-dn-on-ve-se-dt-se-ue)}
|
|
736
|
+
);
|
|
737
|
+
// The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
|
|
738
|
+
// broke onto a second line inside it. Keep it on one line.
|
|
739
|
+
white-space: nowrap;
|
|
482
740
|
}
|
|
483
741
|
|
|
484
742
|
.product-select-image {
|
|
@@ -486,49 +744,74 @@
|
|
|
486
744
|
width: 100%;
|
|
487
745
|
object-fit: cover;
|
|
488
746
|
}
|
|
489
|
-
|
|
490
747
|
//Dropdown
|
|
491
748
|
.est__dropdown__main {
|
|
492
749
|
position: relative;
|
|
493
750
|
width: 100%;
|
|
494
751
|
display: flex;
|
|
495
752
|
flex-direction: column;
|
|
496
|
-
gap: var(
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
var(--_ctm-
|
|
753
|
+
gap: var(
|
|
754
|
+
--_ctm-mob-lt-on-te-ve-sg,
|
|
755
|
+
var(
|
|
756
|
+
--_ctm-tab-lt-on-te-ve-sg,
|
|
757
|
+
var(--_ctm-lt-on-te-ve-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
|
|
758
|
+
)
|
|
759
|
+
);
|
|
760
|
+
padding: var(
|
|
761
|
+
--_ctm-mob-lt-dn-dy-se-dn-os-pg,
|
|
762
|
+
var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-lt-dn-dy-se-dn-os-pg))
|
|
763
|
+
);
|
|
501
764
|
margin-top: 10px;
|
|
502
765
|
|
|
503
766
|
label {
|
|
504
|
-
font-size: var(
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
767
|
+
font-size: var(
|
|
768
|
+
--_ctm-mob-dn-on-te-ft-se,
|
|
769
|
+
var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
|
|
770
|
+
);
|
|
771
|
+
font-family: var(
|
|
772
|
+
--_ctm-mob-dn-on-te-ft-fy,
|
|
773
|
+
var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
|
|
774
|
+
);
|
|
775
|
+
text-transform: var(
|
|
776
|
+
--_ctm-mob-dn-on-te-tt-tm,
|
|
777
|
+
var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm))
|
|
778
|
+
);
|
|
779
|
+
word-wrap: var(
|
|
780
|
+
--_ctm-mob-dn-on-te-wd-wp,
|
|
781
|
+
var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp))
|
|
782
|
+
);
|
|
783
|
+
word-break: var(
|
|
784
|
+
--_ctm-mob-dn-on-te-wd-bk,
|
|
785
|
+
var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk))
|
|
786
|
+
);
|
|
515
787
|
&.flex__overflow {
|
|
516
788
|
white-space: normal;
|
|
517
789
|
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
518
790
|
}
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr)))
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
var(--_ctm-tab-dn-on-te-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
var(--_ctm-tab-dn-on-te-
|
|
530
|
-
|
|
531
|
-
|
|
791
|
+
color: var(
|
|
792
|
+
--_ctm-mob-dn-on-te-cr,
|
|
793
|
+
var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr)))
|
|
794
|
+
);
|
|
795
|
+
font-weight: var(
|
|
796
|
+
--_ctm-mob-dn-on-te-ft-wt,
|
|
797
|
+
var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
|
|
798
|
+
);
|
|
799
|
+
text-decoration: var(
|
|
800
|
+
--_ctm-mob-dn-on-te-ue,
|
|
801
|
+
var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
|
|
802
|
+
);
|
|
803
|
+
letter-spacing: var(
|
|
804
|
+
--_ctm-mob-dn-on-te-lr-sg,
|
|
805
|
+
var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
|
|
806
|
+
);
|
|
807
|
+
text-align: var(
|
|
808
|
+
--_ctm-mob-dn-on-te-tt-an,
|
|
809
|
+
var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
|
|
810
|
+
);
|
|
811
|
+
line-height: var(
|
|
812
|
+
--_ctm-mob-dn-on-te-le-ht,
|
|
813
|
+
var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
|
|
814
|
+
);
|
|
532
815
|
display: block;
|
|
533
816
|
}
|
|
534
817
|
|
|
@@ -543,45 +826,79 @@
|
|
|
543
826
|
justify-content: space-between;
|
|
544
827
|
align-items: center;
|
|
545
828
|
width: 100%;
|
|
546
|
-
|
|
547
829
|
.value__selected {
|
|
548
830
|
width: 100%;
|
|
549
831
|
}
|
|
550
832
|
|
|
551
833
|
&.open .list {
|
|
552
834
|
display: none;
|
|
553
|
-
margin-top: var(
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
835
|
+
margin-top: var(
|
|
836
|
+
--_ctm-mob-lt-dn-dy-se-on-ad-lt-sg,
|
|
837
|
+
var(--_ctm-tab-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
|
|
838
|
+
);
|
|
839
|
+
gap: var(
|
|
840
|
+
--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
|
|
841
|
+
var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
|
|
842
|
+
);
|
|
843
|
+
background-color: var(
|
|
844
|
+
--_ctm-mob-dn-dn-se-bd-cr,
|
|
845
|
+
var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
|
|
846
|
+
);
|
|
559
847
|
}
|
|
560
848
|
|
|
561
849
|
.list {
|
|
562
850
|
display: flex !important;
|
|
563
851
|
flex-direction: column;
|
|
564
|
-
gap: var(
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
var(--_ctm-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
852
|
+
gap: var(
|
|
853
|
+
--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
|
|
854
|
+
var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
|
|
855
|
+
);
|
|
856
|
+
border: var(
|
|
857
|
+
--_ctm-mob-dn-dn-se-br-wh,
|
|
858
|
+
var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
|
|
859
|
+
)
|
|
860
|
+
var(
|
|
861
|
+
--_ctm-mob-dn-dn-se-br-se,
|
|
862
|
+
var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
|
|
863
|
+
)
|
|
864
|
+
var(
|
|
865
|
+
--_gray-200,
|
|
866
|
+
var(
|
|
867
|
+
--_ctm-mob-dn-dn-se-br-cr,
|
|
868
|
+
var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
|
|
869
|
+
)
|
|
870
|
+
);
|
|
871
|
+
border-radius: var(
|
|
872
|
+
--_ctm-mob-dn-dn-se-br-rs,
|
|
873
|
+
var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
|
|
874
|
+
);
|
|
875
|
+
box-shadow: var(
|
|
876
|
+
--_show-shadow-dn-se,
|
|
877
|
+
var(
|
|
878
|
+
--_ctm-mob-dn-dn-se-sw-ae,
|
|
879
|
+
var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae, var(--_tst-dn-sw-ae)))
|
|
880
|
+
)
|
|
881
|
+
var(
|
|
882
|
+
--_ctm-mob-dn-dn-se-sw-br,
|
|
883
|
+
var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br, var(--_tst-dn-sw-br)))
|
|
884
|
+
)
|
|
885
|
+
var(
|
|
886
|
+
--_ctm-mob-dn-dn-se-sw-sd,
|
|
887
|
+
var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd, var(--_tst-dn-sw-sd)))
|
|
888
|
+
)
|
|
889
|
+
var(
|
|
890
|
+
--_ctm-mob-dn-dn-se-sw-cr,
|
|
891
|
+
var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr, var(--_tst-dn-sw-cr)))
|
|
892
|
+
)
|
|
893
|
+
);
|
|
579
894
|
position: absolute;
|
|
580
895
|
top: 100%;
|
|
581
896
|
left: 0;
|
|
582
897
|
width: 100%;
|
|
583
|
-
background-color: var(
|
|
584
|
-
|
|
898
|
+
background-color: var(
|
|
899
|
+
--_ctm-mob-dn-dn-se-bd-cr,
|
|
900
|
+
var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
|
|
901
|
+
);
|
|
585
902
|
border-radius: 4px;
|
|
586
903
|
z-index: var(--_higher-zIndex);
|
|
587
904
|
max-height: 200px;
|
|
@@ -593,8 +910,10 @@
|
|
|
593
910
|
}
|
|
594
911
|
|
|
595
912
|
.list__option {
|
|
596
|
-
padding: var(
|
|
597
|
-
|
|
913
|
+
padding: var(
|
|
914
|
+
--_ctm-mob-lt-dn-dy-se-dn-lt-im-pg,
|
|
915
|
+
var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg))
|
|
916
|
+
);
|
|
598
917
|
cursor: pointer;
|
|
599
918
|
|
|
600
919
|
&:hover {
|
|
@@ -615,20 +934,21 @@
|
|
|
615
934
|
.var__drop__selection {
|
|
616
935
|
display: flex;
|
|
617
936
|
width: 100%;
|
|
618
|
-
gap: var(
|
|
619
|
-
|
|
620
|
-
|
|
937
|
+
gap: var(
|
|
938
|
+
--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
|
|
939
|
+
var(
|
|
940
|
+
--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
|
|
941
|
+
var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))
|
|
942
|
+
)
|
|
943
|
+
);
|
|
621
944
|
|
|
622
945
|
flex-direction: row;
|
|
623
|
-
|
|
624
946
|
&[data-dropdown-style="Vertical List"] {
|
|
625
947
|
flex-direction: column;
|
|
626
948
|
gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
|
|
627
949
|
}
|
|
628
|
-
|
|
629
950
|
.dropdown_wrapper {
|
|
630
951
|
position: relative;
|
|
631
|
-
|
|
632
952
|
&[data-show-divider="true"] {
|
|
633
953
|
&:not(:last-child)::after {
|
|
634
954
|
content: "";
|
|
@@ -637,7 +957,12 @@
|
|
|
637
957
|
height: 1px;
|
|
638
958
|
width: 100%;
|
|
639
959
|
display: flex;
|
|
640
|
-
top: calc(
|
|
960
|
+
top: calc(
|
|
961
|
+
calc(
|
|
962
|
+
var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 8px
|
|
963
|
+
) /
|
|
964
|
+
2
|
|
965
|
+
);
|
|
641
966
|
}
|
|
642
967
|
}
|
|
643
968
|
|
|
@@ -653,9 +978,16 @@
|
|
|
653
978
|
height: 1px;
|
|
654
979
|
width: 100%;
|
|
655
980
|
display: flex;
|
|
656
|
-
top: calc(
|
|
657
|
-
|
|
658
|
-
|
|
981
|
+
top: calc(
|
|
982
|
+
var(
|
|
983
|
+
--_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
|
|
984
|
+
var(
|
|
985
|
+
--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
|
|
986
|
+
var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
|
|
987
|
+
)
|
|
988
|
+
) /
|
|
989
|
+
2
|
|
990
|
+
);
|
|
659
991
|
}
|
|
660
992
|
}
|
|
661
993
|
}
|
|
@@ -663,12 +995,10 @@
|
|
|
663
995
|
}
|
|
664
996
|
}
|
|
665
997
|
}
|
|
666
|
-
|
|
667
|
-
&>div {
|
|
998
|
+
& > div {
|
|
668
999
|
width: 100%;
|
|
669
1000
|
}
|
|
670
1001
|
}
|
|
671
|
-
|
|
672
1002
|
.embla {
|
|
673
1003
|
width: 100%;
|
|
674
1004
|
height: 100%;
|
|
@@ -701,18 +1031,37 @@
|
|
|
701
1031
|
gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));
|
|
702
1032
|
|
|
703
1033
|
&[data-control-type="Bottom"][data-slider-control="Arrows"] {
|
|
704
|
-
height: calc(
|
|
705
|
-
|
|
1034
|
+
height: calc(
|
|
1035
|
+
100% - calc(
|
|
1036
|
+
var(
|
|
1037
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
1038
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
1039
|
+
) +
|
|
1040
|
+
8px
|
|
1041
|
+
)
|
|
1042
|
+
);
|
|
706
1043
|
}
|
|
707
|
-
|
|
708
1044
|
&[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
|
|
709
|
-
height: calc(
|
|
710
|
-
|
|
1045
|
+
height: calc(
|
|
1046
|
+
100% - calc(
|
|
1047
|
+
var(
|
|
1048
|
+
--_ctm-mob-dn-pn-le-le-ht,
|
|
1049
|
+
var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
|
|
1050
|
+
) +
|
|
1051
|
+
20px
|
|
1052
|
+
)
|
|
1053
|
+
);
|
|
711
1054
|
}
|
|
712
|
-
|
|
713
1055
|
&[data-control-type="Bottom"][data-slider-control="Dots"] {
|
|
714
|
-
height: calc(
|
|
715
|
-
|
|
1056
|
+
height: calc(
|
|
1057
|
+
100% - calc(
|
|
1058
|
+
var(
|
|
1059
|
+
--_ctm-mob-dn-pn-ds-dt-se,
|
|
1060
|
+
var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
|
|
1061
|
+
) +
|
|
1062
|
+
20px
|
|
1063
|
+
)
|
|
1064
|
+
);
|
|
716
1065
|
}
|
|
717
1066
|
|
|
718
1067
|
.embla__slide {
|
|
@@ -730,25 +1079,20 @@
|
|
|
730
1079
|
width: 100%;
|
|
731
1080
|
justify-content: space-between;
|
|
732
1081
|
transform: translate(-50%, -50%);
|
|
733
|
-
|
|
734
1082
|
// padding-left: 20px;
|
|
735
1083
|
&[data-control-type="Side"] {
|
|
736
|
-
|
|
737
1084
|
.left-button,
|
|
738
1085
|
.right-button {
|
|
739
1086
|
background-color: transparent;
|
|
740
1087
|
}
|
|
741
1088
|
}
|
|
742
|
-
|
|
743
1089
|
&[data-background-shape="Round"] {
|
|
744
|
-
|
|
745
1090
|
.left-button,
|
|
746
1091
|
.right-button {
|
|
747
1092
|
background-color: #f2f5f5;
|
|
748
1093
|
box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
749
1094
|
}
|
|
750
1095
|
}
|
|
751
|
-
|
|
752
1096
|
&[data-control-type="Bottom-Overflow"] {
|
|
753
1097
|
transform: translateX(-50%);
|
|
754
1098
|
width: 100%;
|
|
@@ -757,7 +1101,6 @@
|
|
|
757
1101
|
top: unset;
|
|
758
1102
|
bottom: 6px;
|
|
759
1103
|
}
|
|
760
|
-
|
|
761
1104
|
&[data-control-type="Bottom"] {
|
|
762
1105
|
transform: unset;
|
|
763
1106
|
position: static;
|
|
@@ -766,15 +1109,18 @@
|
|
|
766
1109
|
gap: 12px;
|
|
767
1110
|
margin-top: 10px;
|
|
768
1111
|
}
|
|
769
|
-
|
|
770
1112
|
.left-button {
|
|
771
1113
|
padding: 10px;
|
|
772
1114
|
border-radius: 50%;
|
|
773
1115
|
border: none;
|
|
774
|
-
width: var(
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
1116
|
+
width: var(
|
|
1117
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
1118
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
1119
|
+
);
|
|
1120
|
+
height: var(
|
|
1121
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
1122
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
1123
|
+
);
|
|
778
1124
|
|
|
779
1125
|
display: flex;
|
|
780
1126
|
align-items: center;
|
|
@@ -782,7 +1128,6 @@
|
|
|
782
1128
|
cursor: pointer;
|
|
783
1129
|
outline: none;
|
|
784
1130
|
margin-left: 12px;
|
|
785
|
-
|
|
786
1131
|
&:disabled {
|
|
787
1132
|
& svg {
|
|
788
1133
|
path {
|
|
@@ -791,14 +1136,17 @@
|
|
|
791
1136
|
}
|
|
792
1137
|
}
|
|
793
1138
|
}
|
|
794
|
-
|
|
795
1139
|
.right-button {
|
|
796
1140
|
border-radius: 50%;
|
|
797
1141
|
border: none;
|
|
798
|
-
width: var(
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
1142
|
+
width: var(
|
|
1143
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
1144
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
1145
|
+
);
|
|
1146
|
+
height: var(
|
|
1147
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
1148
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
1149
|
+
);
|
|
802
1150
|
|
|
803
1151
|
display: flex;
|
|
804
1152
|
align-items: center;
|
|
@@ -816,19 +1164,28 @@
|
|
|
816
1164
|
}
|
|
817
1165
|
}
|
|
818
1166
|
}
|
|
819
|
-
|
|
820
1167
|
.icon {
|
|
821
1168
|
display: flex;
|
|
822
|
-
|
|
823
1169
|
svg {
|
|
824
|
-
width: calc(
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
828
|
-
|
|
1170
|
+
width: calc(
|
|
1171
|
+
var(
|
|
1172
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
1173
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
1174
|
+
) *
|
|
1175
|
+
0.5
|
|
1176
|
+
);
|
|
1177
|
+
height: calc(
|
|
1178
|
+
var(
|
|
1179
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
1180
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
1181
|
+
) *
|
|
1182
|
+
0.5
|
|
1183
|
+
);
|
|
829
1184
|
path {
|
|
830
|
-
stroke: var(
|
|
831
|
-
|
|
1185
|
+
stroke: var(
|
|
1186
|
+
--_ctm-mob-dn-pn-as-aw-cr,
|
|
1187
|
+
var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
|
|
1188
|
+
);
|
|
832
1189
|
}
|
|
833
1190
|
}
|
|
834
1191
|
}
|
|
@@ -837,11 +1194,9 @@
|
|
|
837
1194
|
&[data-thumbnail-placement="top"] {
|
|
838
1195
|
flex-direction: column-reverse;
|
|
839
1196
|
}
|
|
840
|
-
|
|
841
1197
|
&[data-thumbnail-placement="bottom"] {
|
|
842
1198
|
flex-direction: column;
|
|
843
1199
|
}
|
|
844
|
-
|
|
845
1200
|
&[data-thumbnail-placement="left"] {
|
|
846
1201
|
flex-direction: row-reverse;
|
|
847
1202
|
|
|
@@ -856,10 +1211,8 @@
|
|
|
856
1211
|
}
|
|
857
1212
|
}
|
|
858
1213
|
}
|
|
859
|
-
|
|
860
1214
|
&[data-thumbnail-placement="right"] {
|
|
861
1215
|
flex-direction: row;
|
|
862
|
-
|
|
863
1216
|
.embla__thumbs {
|
|
864
1217
|
width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
|
|
865
1218
|
|
|
@@ -871,18 +1224,15 @@
|
|
|
871
1224
|
}
|
|
872
1225
|
}
|
|
873
1226
|
}
|
|
874
|
-
|
|
875
1227
|
&[data-control-type="Side"] {
|
|
876
1228
|
display: flex;
|
|
877
1229
|
align-self: center;
|
|
878
1230
|
flex-direction: row;
|
|
879
|
-
|
|
880
1231
|
.left-button:disabled,
|
|
881
1232
|
.right-button:disabled {
|
|
882
1233
|
display: none;
|
|
883
1234
|
}
|
|
884
1235
|
}
|
|
885
|
-
|
|
886
1236
|
.embla__dots {
|
|
887
1237
|
display: flex;
|
|
888
1238
|
flex-wrap: wrap;
|
|
@@ -899,7 +1249,6 @@
|
|
|
899
1249
|
transform: translateX(-50%);
|
|
900
1250
|
width: 75%;
|
|
901
1251
|
}
|
|
902
|
-
|
|
903
1252
|
.embla__dot {
|
|
904
1253
|
-webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
|
|
905
1254
|
-webkit-appearance: none;
|
|
@@ -921,7 +1270,6 @@
|
|
|
921
1270
|
justify-content: center;
|
|
922
1271
|
border-radius: 50%;
|
|
923
1272
|
}
|
|
924
|
-
|
|
925
1273
|
.embla__dot:after {
|
|
926
1274
|
// box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
|
|
927
1275
|
width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
|
|
@@ -931,12 +1279,10 @@
|
|
|
931
1279
|
align-items: center;
|
|
932
1280
|
content: "";
|
|
933
1281
|
}
|
|
934
|
-
|
|
935
1282
|
.embla__dot--selected:after {
|
|
936
1283
|
box-shadow: inset 0 0 0 1px var(--text-body);
|
|
937
1284
|
background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
|
|
938
1285
|
}
|
|
939
|
-
|
|
940
1286
|
&[data-slider-control="Pagination Line"] {
|
|
941
1287
|
.embla__dot {
|
|
942
1288
|
width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
|
|
@@ -945,7 +1291,6 @@
|
|
|
945
1291
|
|
|
946
1292
|
border-radius: 6px;
|
|
947
1293
|
}
|
|
948
|
-
|
|
949
1294
|
.embla__dot--selected:after {
|
|
950
1295
|
box-shadow: inset 0 0 0 1px var(--text-body);
|
|
951
1296
|
border-radius: 6px;
|
|
@@ -977,7 +1322,6 @@
|
|
|
977
1322
|
|
|
978
1323
|
overflow: hidden;
|
|
979
1324
|
}
|
|
980
|
-
|
|
981
1325
|
.embla__thumbs__container {
|
|
982
1326
|
display: flex;
|
|
983
1327
|
flex-direction: row;
|
|
@@ -991,7 +1335,6 @@
|
|
|
991
1335
|
min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
|
|
992
1336
|
max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
|
|
993
1337
|
height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
|
|
994
|
-
|
|
995
1338
|
& img {
|
|
996
1339
|
width: 100%;
|
|
997
1340
|
height: 100%;
|
|
@@ -1002,4 +1345,4 @@
|
|
|
1002
1345
|
}
|
|
1003
1346
|
}
|
|
1004
1347
|
}
|
|
1005
|
-
}
|
|
1348
|
+
}
|