@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
|
@@ -7,28 +7,36 @@ $overflowSelector: ".flex__overflow";
|
|
|
7
7
|
[data-div-type="element"] {
|
|
8
8
|
&[data-element-type="gallerySlider"] {
|
|
9
9
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
10
|
-
width: var(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
width: var(
|
|
11
|
+
--_sf-el-wh-st-mx,
|
|
12
|
+
calc(
|
|
13
|
+
1% *
|
|
14
|
+
var(
|
|
15
|
+
--_ctm-mob-ele-nw-wh-vl,
|
|
16
|
+
var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
|
|
17
|
+
)
|
|
18
|
+
)
|
|
19
|
+
);
|
|
14
20
|
// height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
15
21
|
&:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
|
|
16
22
|
height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
17
23
|
}
|
|
18
|
-
|
|
19
24
|
margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
|
|
20
25
|
|
|
21
|
-
--_aspect-ratio: calc(
|
|
22
|
-
|
|
26
|
+
--_aspect-ratio: calc(
|
|
27
|
+
1 *
|
|
28
|
+
(
|
|
29
|
+
var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
|
|
30
|
+
var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
|
|
31
|
+
)
|
|
32
|
+
);
|
|
23
33
|
&[data-view-state="full"] {
|
|
24
|
-
|
|
25
34
|
// aspect-ratio: 1/0.01;
|
|
26
|
-
|
|
27
|
-
|
|
35
|
+
& > .wrapper {
|
|
36
|
+
& > div {
|
|
28
37
|
height: 100%;
|
|
29
38
|
}
|
|
30
39
|
}
|
|
31
|
-
|
|
32
40
|
img {
|
|
33
41
|
height: 100%;
|
|
34
42
|
object-fit: cover;
|
|
@@ -38,8 +46,7 @@ $overflowSelector: ".flex__overflow";
|
|
|
38
46
|
.arrow-navigation {
|
|
39
47
|
pointer-events: none;
|
|
40
48
|
}
|
|
41
|
-
|
|
42
|
-
.arrow-navigation>button {
|
|
49
|
+
.arrow-navigation > button {
|
|
43
50
|
pointer-events: all;
|
|
44
51
|
}
|
|
45
52
|
|
|
@@ -52,11 +59,10 @@ $overflowSelector: ".flex__overflow";
|
|
|
52
59
|
// cursor: auto;
|
|
53
60
|
// }
|
|
54
61
|
|
|
55
|
-
|
|
62
|
+
& > .wrapper {
|
|
56
63
|
width: 100%;
|
|
57
64
|
height: 100%;
|
|
58
65
|
}
|
|
59
|
-
|
|
60
66
|
&[data-show-shadow="false"] {
|
|
61
67
|
--_show-shadow: none;
|
|
62
68
|
}
|
|
@@ -67,8 +73,10 @@ $overflowSelector: ".flex__overflow";
|
|
|
67
73
|
--text-body: rgb(54, 49, 61);
|
|
68
74
|
|
|
69
75
|
position: relative;
|
|
70
|
-
background-color: var(
|
|
71
|
-
|
|
76
|
+
background-color: var(
|
|
77
|
+
--_ctm-mob-dn-gy-wt-se-bd-cr,
|
|
78
|
+
var(--_ctm-tab-dn-gy-wt-se-bd-cr, var(--_ctm-dn-gy-wt-se-bd-cr))
|
|
79
|
+
);
|
|
72
80
|
|
|
73
81
|
padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
|
|
74
82
|
|
|
@@ -77,30 +85,53 @@ $overflowSelector: ".flex__overflow";
|
|
|
77
85
|
|
|
78
86
|
--_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
|
|
79
87
|
|
|
80
|
-
gap: var(
|
|
81
|
-
|
|
88
|
+
gap: var(
|
|
89
|
+
--_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
|
|
90
|
+
var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg))
|
|
91
|
+
);
|
|
82
92
|
|
|
83
93
|
width: 100%;
|
|
84
94
|
height: 100%;
|
|
85
95
|
|
|
86
|
-
border-color: var(
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
96
|
+
border-color: var(
|
|
97
|
+
--_ctm-mob-dn-gy-wt-se-br-cr,
|
|
98
|
+
var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))
|
|
99
|
+
);
|
|
100
|
+
|
|
101
|
+
border-style: var(
|
|
102
|
+
--_ctm-mob-dn-gy-wt-se-br-se,
|
|
103
|
+
var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))
|
|
104
|
+
);
|
|
105
|
+
|
|
106
|
+
border-width: var(
|
|
107
|
+
--_ctm-mob-dn-gy-wt-se-br-wh,
|
|
108
|
+
var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))
|
|
109
|
+
);
|
|
110
|
+
|
|
111
|
+
border-radius: var(
|
|
112
|
+
--_ctm-mob-dn-gy-wt-se-br-rs,
|
|
113
|
+
var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs))
|
|
114
|
+
);
|
|
115
|
+
|
|
116
|
+
box-shadow: var(
|
|
117
|
+
--_show-shadow,
|
|
118
|
+
var(
|
|
119
|
+
--_ctm-mob-dn-gy-wt-se-sw-ae,
|
|
120
|
+
var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))
|
|
121
|
+
)
|
|
122
|
+
var(
|
|
123
|
+
--_ctm-mob-dn-gy-wt-se-sw-br,
|
|
124
|
+
var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))
|
|
125
|
+
)
|
|
126
|
+
var(
|
|
127
|
+
--_ctm-mob-dn-gy-wt-se-sw-sd,
|
|
128
|
+
var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))
|
|
129
|
+
)
|
|
130
|
+
var(
|
|
131
|
+
--_ctm-mob-dn-gy-wt-se-sw-cr,
|
|
132
|
+
var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-dn-gy-wt-se-sw-cr))
|
|
133
|
+
)
|
|
134
|
+
);
|
|
104
135
|
|
|
105
136
|
.gallery-header {
|
|
106
137
|
// text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
|
|
@@ -108,17 +139,25 @@ $overflowSelector: ".flex__overflow";
|
|
|
108
139
|
display: flex;
|
|
109
140
|
flex-direction: column;
|
|
110
141
|
|
|
111
|
-
gap: var(
|
|
112
|
-
|
|
142
|
+
gap: var(
|
|
143
|
+
--_ctm-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
|
|
144
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg))
|
|
145
|
+
);
|
|
113
146
|
|
|
114
|
-
padding-block: var(
|
|
115
|
-
|
|
147
|
+
padding-block: var(
|
|
148
|
+
--_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
|
|
149
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg))
|
|
150
|
+
);
|
|
116
151
|
|
|
117
|
-
padding-inline: var(
|
|
118
|
-
|
|
152
|
+
padding-inline: var(
|
|
153
|
+
--_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
|
|
154
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg))
|
|
155
|
+
);
|
|
119
156
|
|
|
120
|
-
background-color: var(
|
|
121
|
-
|
|
157
|
+
background-color: var(
|
|
158
|
+
--_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
|
|
159
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr))
|
|
160
|
+
);
|
|
122
161
|
|
|
123
162
|
// Text Container Width. 100% is the previous behaviour, so an unset width
|
|
124
163
|
// still spans the widget.
|
|
@@ -127,50 +166,95 @@ $overflowSelector: ".flex__overflow";
|
|
|
127
166
|
min-width: 0;
|
|
128
167
|
flex: 0 0 auto;
|
|
129
168
|
|
|
130
|
-
border-color: var(
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
169
|
+
border-color: var(
|
|
170
|
+
--_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
|
|
171
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr))
|
|
172
|
+
);
|
|
173
|
+
|
|
174
|
+
border-style: var(
|
|
175
|
+
--_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
|
|
176
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se))
|
|
177
|
+
);
|
|
178
|
+
|
|
179
|
+
border-width: var(
|
|
180
|
+
--_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
|
|
181
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh))
|
|
182
|
+
);
|
|
183
|
+
|
|
184
|
+
border-radius: var(
|
|
185
|
+
--_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
|
|
186
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs))
|
|
187
|
+
);
|
|
188
|
+
|
|
189
|
+
box-shadow: var(
|
|
190
|
+
--_show-shadow,
|
|
191
|
+
var(
|
|
192
|
+
--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
|
|
193
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))
|
|
194
|
+
)
|
|
195
|
+
var(
|
|
196
|
+
--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
|
|
197
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))
|
|
198
|
+
)
|
|
199
|
+
var(
|
|
200
|
+
--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
|
|
201
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))
|
|
202
|
+
)
|
|
203
|
+
var(
|
|
204
|
+
--_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
|
|
205
|
+
var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))
|
|
206
|
+
)
|
|
207
|
+
);
|
|
148
208
|
|
|
149
209
|
& h3 {
|
|
150
|
-
color: var(
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
font-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
font-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
210
|
+
color: var(
|
|
211
|
+
--_ctm-mob-dn-gy-wt-se-cr,
|
|
212
|
+
var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
|
|
213
|
+
);
|
|
214
|
+
font-family: var(
|
|
215
|
+
--_ctm-mob-dn-gy-wt-se-ft-fy,
|
|
216
|
+
var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
|
|
217
|
+
);
|
|
218
|
+
font-size: var(
|
|
219
|
+
--_ctm-mob-dn-gy-wt-se-ft-se,
|
|
220
|
+
var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se))
|
|
221
|
+
);
|
|
222
|
+
font-weight: var(
|
|
223
|
+
--_ctm-mob-dn-gy-wt-se-ft-wt,
|
|
224
|
+
var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt))
|
|
225
|
+
);
|
|
226
|
+
font-style: var(
|
|
227
|
+
--_ctm-mob-dn-gy-wt-se-ft-se-ic,
|
|
228
|
+
var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic))
|
|
229
|
+
);
|
|
230
|
+
text-align: var(
|
|
231
|
+
--_ctm-mob-dn-gy-wt-se-tt-an,
|
|
232
|
+
var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an))
|
|
233
|
+
);
|
|
234
|
+
letter-spacing: var(
|
|
235
|
+
--_ctm-mob-dn-gy-wt-se-lr-sg,
|
|
236
|
+
var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg))
|
|
237
|
+
);
|
|
238
|
+
line-height: var(
|
|
239
|
+
--_ctm-mob-dn-gy-wt-se-le-ht,
|
|
240
|
+
var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht))
|
|
241
|
+
);
|
|
242
|
+
text-decoration: var(
|
|
243
|
+
--_ctm-mob-dn-gy-wt-se-ue,
|
|
244
|
+
var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue))
|
|
245
|
+
);
|
|
246
|
+
text-transform: var(
|
|
247
|
+
--_ctm-mob-dn-gy-wt-se-tt-tm,
|
|
248
|
+
var(--_ctm-tab-dn-gy-wt-se-tt-tm, var(--_ctm-dn-gy-wt-se-tt-tm, none))
|
|
249
|
+
);
|
|
250
|
+
word-wrap: var(
|
|
251
|
+
--_ctm-mob-dn-gy-wt-se-wd-wp,
|
|
252
|
+
var(--_ctm-tab-dn-gy-wt-se-wd-wp, var(--_ctm-dn-gy-wt-se-wd-wp, normal))
|
|
253
|
+
);
|
|
254
|
+
word-break: var(
|
|
255
|
+
--_ctm-mob-dn-gy-wt-se-wd-bk,
|
|
256
|
+
var(--_ctm-tab-dn-gy-wt-se-wd-bk, var(--_ctm-dn-gy-wt-se-wd-bk, normal))
|
|
257
|
+
);
|
|
174
258
|
|
|
175
259
|
// Text Overflow toggle in the typography panel; the line count rides in on
|
|
176
260
|
// --_sf-line-clamp from the element.
|
|
@@ -180,30 +264,54 @@ $overflowSelector: ".flex__overflow";
|
|
|
180
264
|
}
|
|
181
265
|
|
|
182
266
|
& p {
|
|
183
|
-
color: var(
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
font-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
font-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
267
|
+
color: var(
|
|
268
|
+
--_ctm-mob-dn-gy-wt-se-cr-dc,
|
|
269
|
+
var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
|
|
270
|
+
);
|
|
271
|
+
font-family: var(
|
|
272
|
+
--_ctm-mob-dn-gy-wt-se-ft-fy-dc,
|
|
273
|
+
var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
|
|
274
|
+
);
|
|
275
|
+
font-size: var(
|
|
276
|
+
--_ctm-mob-dn-gy-wt-se-ft-se-dc,
|
|
277
|
+
var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc))
|
|
278
|
+
);
|
|
279
|
+
font-weight: var(
|
|
280
|
+
--_ctm-mob-dn-gy-wt-se-ft-wt-dc,
|
|
281
|
+
var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc))
|
|
282
|
+
);
|
|
283
|
+
font-style: var(
|
|
284
|
+
--_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
|
|
285
|
+
var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc))
|
|
286
|
+
);
|
|
287
|
+
text-align: var(
|
|
288
|
+
--_ctm-mob-dn-gy-wt-se-tt-an-dc,
|
|
289
|
+
var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc))
|
|
290
|
+
);
|
|
291
|
+
letter-spacing: var(
|
|
292
|
+
--_ctm-mob-dn-gy-wt-se-lr-sg-dc,
|
|
293
|
+
var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc))
|
|
294
|
+
);
|
|
295
|
+
line-height: var(
|
|
296
|
+
--_ctm-mob-dn-gy-wt-se-le-ht-dc,
|
|
297
|
+
var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc))
|
|
298
|
+
);
|
|
299
|
+
text-decoration: var(
|
|
300
|
+
--_ctm-mob-dn-gy-wt-se-ue-dc,
|
|
301
|
+
var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc))
|
|
302
|
+
);
|
|
303
|
+
text-transform: var(
|
|
304
|
+
--_ctm-mob-dn-gy-wt-se-tt-tm-dc,
|
|
305
|
+
var(--_ctm-tab-dn-gy-wt-se-tt-tm-dc, var(--_ctm-dn-gy-wt-se-tt-tm-dc, none))
|
|
306
|
+
);
|
|
307
|
+
word-wrap: var(
|
|
308
|
+
--_ctm-mob-dn-gy-wt-se-wd-wp-dc,
|
|
309
|
+
var(--_ctm-tab-dn-gy-wt-se-wd-wp-dc, var(--_ctm-dn-gy-wt-se-wd-wp-dc, normal))
|
|
310
|
+
);
|
|
311
|
+
word-break: var(
|
|
312
|
+
--_ctm-mob-dn-gy-wt-se-wd-bk-dc,
|
|
313
|
+
var(--_ctm-tab-dn-gy-wt-se-wd-bk-dc, var(--_ctm-dn-gy-wt-se-wd-bk-dc, normal))
|
|
314
|
+
);
|
|
207
315
|
|
|
208
316
|
&#{$overflowSelector} {
|
|
209
317
|
@include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
|
|
@@ -221,13 +329,11 @@ $overflowSelector: ".flex__overflow";
|
|
|
221
329
|
flex-direction: column;
|
|
222
330
|
}
|
|
223
331
|
}
|
|
224
|
-
|
|
225
332
|
&[data-text-position="bottom"] {
|
|
226
333
|
.gallery-slider-element {
|
|
227
334
|
flex-direction: column-reverse;
|
|
228
335
|
}
|
|
229
336
|
}
|
|
230
|
-
|
|
231
337
|
// Gallery Text and Item Alignment places the text container horizontally when
|
|
232
338
|
// it is stacked above/below the gallery — only visible once its width is under
|
|
233
339
|
// 100%. Left/right positions use [data-widget-alignment] for the cross axis.
|
|
@@ -235,11 +341,9 @@ $overflowSelector: ".flex__overflow";
|
|
|
235
341
|
&[data-text-alignment="left"] .gallery-header {
|
|
236
342
|
margin-right: auto;
|
|
237
343
|
}
|
|
238
|
-
|
|
239
344
|
&[data-text-alignment="center"] .gallery-header {
|
|
240
345
|
margin-inline: auto;
|
|
241
346
|
}
|
|
242
|
-
|
|
243
347
|
&[data-text-alignment="right"] .gallery-header {
|
|
244
348
|
margin-left: auto;
|
|
245
349
|
}
|
|
@@ -249,10 +353,9 @@ $overflowSelector: ".flex__overflow";
|
|
|
249
353
|
.gallery-slider-element {
|
|
250
354
|
flex-direction: row;
|
|
251
355
|
}
|
|
252
|
-
|
|
253
356
|
// Child combinator: as a plain descendant this also matched the per-item captions
|
|
254
357
|
// inside the slides, so the widget's text position resized those too.
|
|
255
|
-
.gallery-slider-element
|
|
358
|
+
.gallery-slider-element > .gallery-header {
|
|
256
359
|
// Beside the slider, Text Container Width is a ceiling rather than a fixed width
|
|
257
360
|
// (what the schema comment describes). It is always emitted as 100%, so used as
|
|
258
361
|
// `width` it made the header's flex basis the whole row: no free space for the
|
|
@@ -263,60 +366,49 @@ $overflowSelector: ".flex__overflow";
|
|
|
263
366
|
flex-shrink: 1;
|
|
264
367
|
height: 100%;
|
|
265
368
|
}
|
|
266
|
-
|
|
267
369
|
// The slider takes whatever the caption leaves.
|
|
268
|
-
.gallery-slider-element
|
|
370
|
+
.gallery-slider-element > .embla {
|
|
269
371
|
flex: 1 1 0;
|
|
270
372
|
min-width: 0;
|
|
271
373
|
}
|
|
272
|
-
|
|
273
374
|
&[data-widget-alignment="top"] {
|
|
274
375
|
.gallery-slider-element {
|
|
275
376
|
align-items: flex-start;
|
|
276
377
|
}
|
|
277
|
-
|
|
278
378
|
.gallery-header {
|
|
279
379
|
justify-content: flex-start;
|
|
280
380
|
}
|
|
281
381
|
}
|
|
282
|
-
|
|
283
382
|
&[data-widget-alignment="center"] {
|
|
284
383
|
.gallery-slider-element {
|
|
285
384
|
align-items: center;
|
|
286
385
|
}
|
|
287
|
-
|
|
288
386
|
.gallery-header {
|
|
289
387
|
justify-content: center;
|
|
290
388
|
}
|
|
291
389
|
}
|
|
292
|
-
|
|
293
390
|
&[data-widget-alignment="bottom"] {
|
|
294
391
|
.gallery-slider-element {
|
|
295
392
|
align-items: flex-end;
|
|
296
393
|
}
|
|
297
|
-
|
|
298
394
|
.gallery-header {
|
|
299
395
|
justify-content: flex-end;
|
|
300
396
|
}
|
|
301
397
|
}
|
|
302
398
|
}
|
|
303
|
-
|
|
304
399
|
&[data-text-position="right"] {
|
|
305
|
-
|
|
306
400
|
// Same pair as the "left" block above — see the comments there.
|
|
307
|
-
.gallery-slider-element
|
|
401
|
+
.gallery-slider-element > .gallery-header {
|
|
308
402
|
width: fit-content;
|
|
309
403
|
max-width: prepareMediaVariable(--_ctm-dn-gy-wt-lt-tt-cr-wh, 100%);
|
|
310
404
|
min-width: 0;
|
|
311
405
|
flex-shrink: 1;
|
|
312
406
|
height: 100%;
|
|
313
407
|
}
|
|
314
|
-
|
|
315
|
-
.gallery-slider-element>.embla {
|
|
408
|
+
.gallery-slider-element > .embla {
|
|
316
409
|
flex: 1 1 0;
|
|
317
410
|
min-width: 0;
|
|
318
411
|
}
|
|
319
|
-
|
|
320
412
|
.gallery-slider-element {
|
|
321
413
|
flex-direction: row-reverse;
|
|
322
414
|
}
|
|
@@ -325,33 +417,27 @@ $overflowSelector: ".flex__overflow";
|
|
|
325
417
|
.gallery-slider-element {
|
|
326
418
|
align-items: flex-start;
|
|
327
419
|
}
|
|
328
|
-
|
|
329
420
|
.gallery-header {
|
|
330
421
|
justify-content: flex-start;
|
|
331
422
|
}
|
|
332
423
|
}
|
|
333
|
-
|
|
334
424
|
&[data-widget-alignment="center"] {
|
|
335
425
|
.gallery-slider-element {
|
|
336
426
|
align-items: center;
|
|
337
427
|
}
|
|
338
|
-
|
|
339
428
|
.gallery-header {
|
|
340
429
|
justify-content: center;
|
|
341
430
|
}
|
|
342
431
|
}
|
|
343
|
-
|
|
344
432
|
&[data-widget-alignment="bottom"] {
|
|
345
433
|
.gallery-slider-element {
|
|
346
434
|
align-items: flex-end;
|
|
347
435
|
}
|
|
348
|
-
|
|
349
436
|
.gallery-header {
|
|
350
437
|
justify-content: flex-end;
|
|
351
438
|
}
|
|
352
439
|
}
|
|
353
440
|
}
|
|
354
|
-
|
|
355
441
|
.embla {
|
|
356
442
|
width: 100%;
|
|
357
443
|
height: 100%;
|
|
@@ -375,25 +461,51 @@ $overflowSelector: ".flex__overflow";
|
|
|
375
461
|
display: grid;
|
|
376
462
|
grid-template-rows: 100%;
|
|
377
463
|
|
|
378
|
-
grid-template-columns: repeat(
|
|
379
|
-
|
|
464
|
+
grid-template-columns: repeat(
|
|
465
|
+
var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
|
|
466
|
+
calc(
|
|
467
|
+
100% /
|
|
468
|
+
var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
|
|
469
|
+
)
|
|
470
|
+
);
|
|
380
471
|
|
|
381
472
|
grid-auto-flow: column;
|
|
382
473
|
gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
|
|
383
474
|
|
|
384
475
|
&[data-control-type="Bottom"][data-slider-control="Arrows"] {
|
|
385
|
-
height: calc(
|
|
386
|
-
|
|
476
|
+
height: calc(
|
|
477
|
+
100% - calc(
|
|
478
|
+
var(
|
|
479
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
480
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
481
|
+
) +
|
|
482
|
+
10px
|
|
483
|
+
)
|
|
484
|
+
);
|
|
387
485
|
}
|
|
388
486
|
|
|
389
487
|
&[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
|
|
390
|
-
height: calc(
|
|
391
|
-
|
|
488
|
+
height: calc(
|
|
489
|
+
100% - calc(
|
|
490
|
+
var(
|
|
491
|
+
--_ctm-mob-dn-pn-le-le-ht,
|
|
492
|
+
var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
|
|
493
|
+
) +
|
|
494
|
+
20px
|
|
495
|
+
)
|
|
496
|
+
);
|
|
392
497
|
}
|
|
393
498
|
|
|
394
499
|
&[data-control-type="Bottom"][data-slider-control="Dots"] {
|
|
395
|
-
height: calc(
|
|
396
|
-
|
|
500
|
+
height: calc(
|
|
501
|
+
100% - calc(
|
|
502
|
+
var(
|
|
503
|
+
--_ctm-mob-dn-pn-ds-dt-se,
|
|
504
|
+
var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
|
|
505
|
+
) +
|
|
506
|
+
20px
|
|
507
|
+
)
|
|
508
|
+
);
|
|
397
509
|
}
|
|
398
510
|
|
|
399
511
|
.embla__slide {
|
|
@@ -405,10 +517,11 @@ $overflowSelector: ".flex__overflow";
|
|
|
405
517
|
}
|
|
406
518
|
}
|
|
407
519
|
}
|
|
408
|
-
|
|
409
520
|
&:not([data-display-style="Column"]) {
|
|
410
521
|
.embla__container {
|
|
411
|
-
grid-auto-columns: calc(
|
|
522
|
+
grid-auto-columns: calc(
|
|
523
|
+
100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
|
|
524
|
+
);
|
|
412
525
|
}
|
|
413
526
|
}
|
|
414
527
|
|
|
@@ -419,7 +532,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
419
532
|
overflow: unset;
|
|
420
533
|
height: 80%;
|
|
421
534
|
flex-grow: 1;
|
|
422
|
-
|
|
423
535
|
&:not([data-is-builder-type="true"]) {
|
|
424
536
|
height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
|
|
425
537
|
}
|
|
@@ -444,8 +556,13 @@ $overflowSelector: ".flex__overflow";
|
|
|
444
556
|
&[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
|
|
445
557
|
.embla__viewport {
|
|
446
558
|
.embla__container {
|
|
447
|
-
grid-template-rows: repeat(
|
|
448
|
-
|
|
559
|
+
grid-template-rows: repeat(
|
|
560
|
+
var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
|
|
561
|
+
calc(
|
|
562
|
+
100% /
|
|
563
|
+
var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
|
|
564
|
+
)
|
|
565
|
+
);
|
|
449
566
|
}
|
|
450
567
|
}
|
|
451
568
|
}
|
|
@@ -470,7 +587,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
470
587
|
grid-template-columns: repeat(1, 1fr);
|
|
471
588
|
grid-template-rows: unset;
|
|
472
589
|
grid-auto-flow: row;
|
|
473
|
-
|
|
474
590
|
.embla__slide {
|
|
475
591
|
aspect-ratio: 7 / 2;
|
|
476
592
|
}
|
|
@@ -484,7 +600,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
484
600
|
.embla__viewport {
|
|
485
601
|
.embla__container {
|
|
486
602
|
display: flex;
|
|
487
|
-
|
|
488
603
|
.embla__slide {
|
|
489
604
|
width: unset;
|
|
490
605
|
height: 100%;
|
|
@@ -493,7 +608,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
493
608
|
}
|
|
494
609
|
}
|
|
495
610
|
}
|
|
496
|
-
|
|
497
611
|
&[data-display-style="Masonry"] {
|
|
498
612
|
// overflow: unset;
|
|
499
613
|
|
|
@@ -510,8 +624,10 @@ $overflowSelector: ".flex__overflow";
|
|
|
510
624
|
overflow: unset;
|
|
511
625
|
display: block;
|
|
512
626
|
|
|
513
|
-
column-count: var(
|
|
514
|
-
|
|
627
|
+
column-count: var(
|
|
628
|
+
--_ctm-mob-lt-is-pr-rw,
|
|
629
|
+
var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
|
|
630
|
+
);
|
|
515
631
|
gap: unset;
|
|
516
632
|
|
|
517
633
|
column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
|
|
@@ -519,8 +635,10 @@ $overflowSelector: ".flex__overflow";
|
|
|
519
635
|
height: auto;
|
|
520
636
|
|
|
521
637
|
.embla__slide {
|
|
522
|
-
margin-bottom: var(
|
|
523
|
-
|
|
638
|
+
margin-bottom: var(
|
|
639
|
+
--_ctm-mob-lt-im-gp,
|
|
640
|
+
var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
|
|
641
|
+
);
|
|
524
642
|
height: unset;
|
|
525
643
|
|
|
526
644
|
.gallery__slide {
|
|
@@ -549,7 +667,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
549
667
|
top: unset;
|
|
550
668
|
bottom: 6px;
|
|
551
669
|
}
|
|
552
|
-
|
|
553
670
|
&[data-control-type="Bottom"] {
|
|
554
671
|
transform: unset;
|
|
555
672
|
position: static;
|
|
@@ -559,7 +676,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
559
676
|
margin-top: 10px;
|
|
560
677
|
}
|
|
561
678
|
}
|
|
562
|
-
|
|
563
679
|
:is(.left-button, .right-button) {
|
|
564
680
|
// background: prepareMediaVariable(--_ctm-dn-pn-as-bd-cr);
|
|
565
681
|
@include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 10%);
|
|
@@ -568,15 +684,18 @@ $overflowSelector: ".flex__overflow";
|
|
|
568
684
|
@include BgColorLighter(var(--_ctm-dn-pn-as-bd-cr), 20%);
|
|
569
685
|
}
|
|
570
686
|
}
|
|
571
|
-
|
|
572
687
|
.left-button {
|
|
573
688
|
padding: 10px;
|
|
574
689
|
border-radius: 50%;
|
|
575
690
|
border: none;
|
|
576
|
-
width: var(
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
691
|
+
width: var(
|
|
692
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
693
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
694
|
+
);
|
|
695
|
+
height: var(
|
|
696
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
697
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
698
|
+
);
|
|
580
699
|
|
|
581
700
|
display: flex;
|
|
582
701
|
align-items: center;
|
|
@@ -584,7 +703,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
584
703
|
cursor: pointer;
|
|
585
704
|
outline: none;
|
|
586
705
|
margin-left: 12px;
|
|
587
|
-
|
|
588
706
|
&:disabled {
|
|
589
707
|
& svg {
|
|
590
708
|
path {
|
|
@@ -593,14 +711,17 @@ $overflowSelector: ".flex__overflow";
|
|
|
593
711
|
}
|
|
594
712
|
}
|
|
595
713
|
}
|
|
596
|
-
|
|
597
714
|
.right-button {
|
|
598
715
|
border-radius: 50%;
|
|
599
716
|
border: none;
|
|
600
|
-
width: var(
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
717
|
+
width: var(
|
|
718
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
719
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
720
|
+
);
|
|
721
|
+
height: var(
|
|
722
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
723
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
724
|
+
);
|
|
604
725
|
|
|
605
726
|
display: flex;
|
|
606
727
|
align-items: center;
|
|
@@ -618,50 +739,54 @@ $overflowSelector: ".flex__overflow";
|
|
|
618
739
|
}
|
|
619
740
|
}
|
|
620
741
|
}
|
|
621
|
-
|
|
622
742
|
.icon {
|
|
623
743
|
display: flex;
|
|
624
744
|
|
|
625
745
|
svg {
|
|
626
|
-
width: calc(
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
746
|
+
width: calc(
|
|
747
|
+
var(
|
|
748
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
749
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
750
|
+
) *
|
|
751
|
+
0.5
|
|
752
|
+
);
|
|
753
|
+
height: calc(
|
|
754
|
+
var(
|
|
755
|
+
--_ctm-mob-dn-pn-as-aw-se,
|
|
756
|
+
var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
|
|
757
|
+
) *
|
|
758
|
+
0.5
|
|
759
|
+
);
|
|
630
760
|
|
|
631
761
|
path {
|
|
632
|
-
stroke: var(
|
|
633
|
-
|
|
762
|
+
stroke: var(
|
|
763
|
+
--_ctm-mob-dn-pn-as-aw-cr,
|
|
764
|
+
var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
|
|
765
|
+
);
|
|
634
766
|
}
|
|
635
767
|
}
|
|
636
768
|
}
|
|
637
769
|
|
|
638
770
|
&[data-control-type="Side"] {
|
|
639
|
-
|
|
640
771
|
.left-button,
|
|
641
772
|
.right-button {
|
|
642
773
|
// background-color: transparent;
|
|
643
774
|
}
|
|
644
775
|
}
|
|
645
|
-
|
|
646
776
|
&[data-background-shape="Round"] {
|
|
647
|
-
|
|
648
777
|
.left-button,
|
|
649
778
|
.right-button {
|
|
650
779
|
// background-color: #f2f5f5;
|
|
651
780
|
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
652
781
|
}
|
|
653
782
|
}
|
|
654
|
-
|
|
655
783
|
&[data-background-shape="None"] {
|
|
656
|
-
|
|
657
784
|
.left-button,
|
|
658
785
|
.right-button {
|
|
659
786
|
border-radius: 0;
|
|
660
787
|
}
|
|
661
788
|
}
|
|
662
|
-
|
|
663
789
|
&[data-background-shape="Square"] {
|
|
664
|
-
|
|
665
790
|
.left-button,
|
|
666
791
|
.right-button {
|
|
667
792
|
border-radius: 4px;
|
|
@@ -673,14 +798,12 @@ $overflowSelector: ".flex__overflow";
|
|
|
673
798
|
width: calc(100% - 120px);
|
|
674
799
|
margin-inline: auto;
|
|
675
800
|
}
|
|
676
|
-
|
|
677
801
|
.left-button {
|
|
678
802
|
position: absolute;
|
|
679
803
|
left: 0;
|
|
680
804
|
top: 50%;
|
|
681
805
|
transform: translateY(-50%);
|
|
682
806
|
}
|
|
683
|
-
|
|
684
807
|
.right-button {
|
|
685
808
|
position: absolute;
|
|
686
809
|
|
|
@@ -701,11 +824,9 @@ $overflowSelector: ".flex__overflow";
|
|
|
701
824
|
&[data-thumbnail-placement="top"] {
|
|
702
825
|
flex-direction: column-reverse;
|
|
703
826
|
}
|
|
704
|
-
|
|
705
827
|
&[data-thumbnail-placement="bottom"] {
|
|
706
828
|
flex-direction: column;
|
|
707
829
|
}
|
|
708
|
-
|
|
709
830
|
&[data-thumbnail-placement="left"] {
|
|
710
831
|
flex-direction: row-reverse;
|
|
711
832
|
|
|
@@ -714,8 +835,10 @@ $overflowSelector: ".flex__overflow";
|
|
|
714
835
|
height: 100%;
|
|
715
836
|
flex-direction: column;
|
|
716
837
|
margin-top: 0;
|
|
717
|
-
margin-right: var(
|
|
718
|
-
|
|
838
|
+
margin-right: var(
|
|
839
|
+
--_ctm-mob-lt-sr-ad-tl-gp,
|
|
840
|
+
var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
|
|
841
|
+
);
|
|
719
842
|
|
|
720
843
|
& .embla__thumbs__container {
|
|
721
844
|
flex-direction: column;
|
|
@@ -735,17 +858,17 @@ $overflowSelector: ".flex__overflow";
|
|
|
735
858
|
}
|
|
736
859
|
}
|
|
737
860
|
}
|
|
738
|
-
|
|
739
861
|
&[data-thumbnail-placement="right"] {
|
|
740
862
|
flex-direction: row;
|
|
741
|
-
|
|
742
863
|
.embla__thumbs {
|
|
743
864
|
width: var(--_ctm-mob-lt-tl-wh, var(--_ctm-tab-lt-tl-wh, var(--_ctm-lt-tl-wh)));
|
|
744
865
|
height: 100%;
|
|
745
866
|
flex-direction: column;
|
|
746
867
|
margin-top: 0;
|
|
747
|
-
margin-left: var(
|
|
748
|
-
|
|
868
|
+
margin-left: var(
|
|
869
|
+
--_ctm-mob-lt-sr-ad-tl-gp,
|
|
870
|
+
var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
|
|
871
|
+
);
|
|
749
872
|
|
|
750
873
|
& .embla__thumbs__container {
|
|
751
874
|
flex-direction: column;
|
|
@@ -765,7 +888,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
765
888
|
}
|
|
766
889
|
}
|
|
767
890
|
}
|
|
768
|
-
|
|
769
891
|
.embla__dots {
|
|
770
892
|
display: flex;
|
|
771
893
|
flex-wrap: wrap;
|
|
@@ -782,7 +904,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
782
904
|
transform: translateX(-50%);
|
|
783
905
|
width: 75%;
|
|
784
906
|
}
|
|
785
|
-
|
|
786
907
|
// Pagination Dots (design > Pagination Dots). Border and shadow go on the
|
|
787
908
|
// ::after overlay — that pseudo-element is the visible dot, the button behind it
|
|
788
909
|
// is only the hit area. There is deliberately no radius control: dots stay
|
|
@@ -790,25 +911,37 @@ $overflowSelector: ".flex__overflow";
|
|
|
790
911
|
&[data-dots-show-border="false"] {
|
|
791
912
|
--_show-pn-ds-border: none;
|
|
792
913
|
}
|
|
793
|
-
|
|
794
914
|
// A transparent shadow rather than `none`, so the selected dot can list this
|
|
795
915
|
// next to its inset ring without the whole declaration going invalid.
|
|
796
916
|
&[data-dots-show-shadow="false"] {
|
|
797
917
|
--_show-pn-ds-shadow: 0 0 0 0 transparent;
|
|
798
918
|
}
|
|
799
919
|
|
|
800
|
-
$pnDsShadow: var(
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
920
|
+
$pnDsShadow: var(
|
|
921
|
+
--_show-pn-ds-shadow,
|
|
922
|
+
var(--_ctm-mob-dn-pn-ds-sw-ae, var(--_ctm-tab-dn-pn-ds-sw-ae, var(--_ctm-dn-pn-ds-sw-ae)))
|
|
923
|
+
var(
|
|
924
|
+
--_ctm-mob-dn-pn-ds-sw-br,
|
|
925
|
+
var(--_ctm-tab-dn-pn-ds-sw-br, var(--_ctm-dn-pn-ds-sw-br))
|
|
926
|
+
)
|
|
927
|
+
var(
|
|
928
|
+
--_ctm-mob-dn-pn-ds-sw-sd,
|
|
929
|
+
var(--_ctm-tab-dn-pn-ds-sw-sd, var(--_ctm-dn-pn-ds-sw-sd))
|
|
930
|
+
)
|
|
931
|
+
var(
|
|
932
|
+
--_ctm-mob-dn-pn-ds-sw-cr,
|
|
933
|
+
var(--_ctm-tab-dn-pn-ds-sw-cr, var(--_ctm-dn-pn-ds-sw-cr))
|
|
934
|
+
)
|
|
935
|
+
);
|
|
805
936
|
|
|
806
937
|
.embla__dot {
|
|
807
938
|
-webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
|
|
808
939
|
-webkit-appearance: none;
|
|
809
940
|
appearance: none;
|
|
810
|
-
background-color: var(
|
|
811
|
-
|
|
941
|
+
background-color: var(
|
|
942
|
+
--_ctm-mob-dn-pn-ds-or-dt-cr,
|
|
943
|
+
var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
|
|
944
|
+
);
|
|
812
945
|
|
|
813
946
|
touch-action: manipulation;
|
|
814
947
|
display: inline-flex;
|
|
@@ -819,36 +952,55 @@ $overflowSelector: ".flex__overflow";
|
|
|
819
952
|
margin: 0;
|
|
820
953
|
// width: 0.6rem;
|
|
821
954
|
// height: 0.6rem;
|
|
822
|
-
width: var(
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
955
|
+
width: var(
|
|
956
|
+
--_ctm-mob-dn-pn-ds-dt-se,
|
|
957
|
+
var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
|
|
958
|
+
);
|
|
959
|
+
height: var(
|
|
960
|
+
--_ctm-mob-dn-pn-ds-dt-se,
|
|
961
|
+
var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
|
|
962
|
+
);
|
|
826
963
|
|
|
827
964
|
display: flex;
|
|
828
965
|
align-items: center;
|
|
829
966
|
justify-content: center;
|
|
830
967
|
border-radius: 50%;
|
|
831
968
|
}
|
|
832
|
-
|
|
833
969
|
.embla__dot:after {
|
|
834
970
|
// box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
|
|
835
|
-
width: var(
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
971
|
+
width: var(
|
|
972
|
+
--_ctm-mob-dn-pn-ds-dt-se,
|
|
973
|
+
var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
|
|
974
|
+
);
|
|
975
|
+
height: var(
|
|
976
|
+
--_ctm-mob-dn-pn-ds-dt-se,
|
|
977
|
+
var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
|
|
978
|
+
);
|
|
839
979
|
|
|
840
980
|
// The overlay is sized to the button, so the border has to grow inwards or the
|
|
841
981
|
// dot would render larger than its configured Dot Size.
|
|
842
982
|
box-sizing: border-box;
|
|
843
|
-
border-color: var(
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
var(--_ctm-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
983
|
+
border-color: var(
|
|
984
|
+
--_show-pn-ds-border,
|
|
985
|
+
var(
|
|
986
|
+
--_ctm-mob-dn-pn-ds-br-cr,
|
|
987
|
+
var(--_ctm-tab-dn-pn-ds-br-cr, var(--_ctm-dn-pn-ds-br-cr))
|
|
988
|
+
)
|
|
989
|
+
);
|
|
990
|
+
border-style: var(
|
|
991
|
+
--_show-pn-ds-border,
|
|
992
|
+
var(
|
|
993
|
+
--_ctm-mob-dn-pn-ds-br-se,
|
|
994
|
+
var(--_ctm-tab-dn-pn-ds-br-se, var(--_ctm-dn-pn-ds-br-se))
|
|
995
|
+
)
|
|
996
|
+
);
|
|
997
|
+
border-width: var(
|
|
998
|
+
--_show-pn-ds-border,
|
|
999
|
+
var(
|
|
1000
|
+
--_ctm-mob-dn-pn-ds-br-wh,
|
|
1001
|
+
var(--_ctm-tab-dn-pn-ds-br-wh, var(--_ctm-dn-pn-ds-br-wh))
|
|
1002
|
+
)
|
|
1003
|
+
);
|
|
852
1004
|
box-shadow: $pnDsShadow;
|
|
853
1005
|
|
|
854
1006
|
border-radius: 50%;
|
|
@@ -856,15 +1008,15 @@ $overflowSelector: ".flex__overflow";
|
|
|
856
1008
|
align-items: center;
|
|
857
1009
|
content: "";
|
|
858
1010
|
}
|
|
859
|
-
|
|
860
1011
|
.embla__dot--selected:after {
|
|
861
1012
|
// Keeps the existing 1px ring on the active dot and still honours a configured
|
|
862
1013
|
// shadow — this rule would otherwise shadow the one above it entirely.
|
|
863
1014
|
box-shadow: $pnDsShadow;
|
|
864
|
-
background-color: var(
|
|
865
|
-
|
|
1015
|
+
background-color: var(
|
|
1016
|
+
--_ctm-mob-dn-pn-ds-ct-dt-cr,
|
|
1017
|
+
var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
|
|
1018
|
+
);
|
|
866
1019
|
}
|
|
867
|
-
|
|
868
1020
|
// Pagination Line (design > Pagination Line). Border, border radius and shadow
|
|
869
1021
|
// sit on the line itself. The two toggles arrive as data attributes from the
|
|
870
1022
|
// element; `none` short-circuits the whole var chain the way Item Style does.
|
|
@@ -874,40 +1026,72 @@ $overflowSelector: ".flex__overflow";
|
|
|
874
1026
|
&[data-line-show-border="false"] {
|
|
875
1027
|
--_show-pn-le-border: none;
|
|
876
1028
|
}
|
|
877
|
-
|
|
878
1029
|
&[data-line-show-shadow="false"] {
|
|
879
1030
|
--_show-pn-le-shadow: none;
|
|
880
1031
|
}
|
|
881
1032
|
|
|
882
1033
|
.embla__dot {
|
|
883
|
-
width: var(
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
1034
|
+
width: var(
|
|
1035
|
+
--_ctm-mob-dn-pn-le-le-wh,
|
|
1036
|
+
var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
|
|
1037
|
+
);
|
|
1038
|
+
height: var(
|
|
1039
|
+
--_ctm-mob-dn-pn-le-le-ht,
|
|
1040
|
+
var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
|
|
1041
|
+
);
|
|
887
1042
|
// Draw the border inside the configured Line Width / Height rather than
|
|
888
1043
|
// adding to it, so the track stays the size set in the panel.
|
|
889
1044
|
box-sizing: border-box;
|
|
890
|
-
background-color: var(
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
border-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
var(--_ctm-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
1045
|
+
background-color: var(
|
|
1046
|
+
--_ctm-mob-dn-pn-le-or-le-cr,
|
|
1047
|
+
var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
|
|
1048
|
+
);
|
|
1049
|
+
|
|
1050
|
+
border-color: var(
|
|
1051
|
+
--_show-pn-le-border,
|
|
1052
|
+
var(
|
|
1053
|
+
--_ctm-mob-dn-pn-le-br-cr,
|
|
1054
|
+
var(--_ctm-tab-dn-pn-le-br-cr, var(--_ctm-dn-pn-le-br-cr))
|
|
1055
|
+
)
|
|
1056
|
+
);
|
|
1057
|
+
border-style: var(
|
|
1058
|
+
--_show-pn-le-border,
|
|
1059
|
+
var(
|
|
1060
|
+
--_ctm-mob-dn-pn-le-br-se,
|
|
1061
|
+
var(--_ctm-tab-dn-pn-le-br-se, var(--_ctm-dn-pn-le-br-se))
|
|
1062
|
+
)
|
|
1063
|
+
);
|
|
1064
|
+
border-width: var(
|
|
1065
|
+
--_show-pn-le-border,
|
|
1066
|
+
var(
|
|
1067
|
+
--_ctm-mob-dn-pn-le-br-wh,
|
|
1068
|
+
var(--_ctm-tab-dn-pn-le-br-wh, var(--_ctm-dn-pn-le-br-wh))
|
|
1069
|
+
)
|
|
1070
|
+
);
|
|
1071
|
+
border-radius: var(
|
|
1072
|
+
--_ctm-mob-dn-pn-le-br-rs,
|
|
1073
|
+
var(--_ctm-tab-dn-pn-le-br-rs, var(--_ctm-dn-pn-le-br-rs, 6px))
|
|
1074
|
+
);
|
|
1075
|
+
|
|
1076
|
+
box-shadow: var(
|
|
1077
|
+
--_show-pn-le-shadow,
|
|
1078
|
+
var(
|
|
1079
|
+
--_ctm-mob-dn-pn-le-sw-ae,
|
|
1080
|
+
var(--_ctm-tab-dn-pn-le-sw-ae, var(--_ctm-dn-pn-le-sw-ae))
|
|
1081
|
+
)
|
|
1082
|
+
var(
|
|
1083
|
+
--_ctm-mob-dn-pn-le-sw-br,
|
|
1084
|
+
var(--_ctm-tab-dn-pn-le-sw-br, var(--_ctm-dn-pn-le-sw-br))
|
|
1085
|
+
)
|
|
1086
|
+
var(
|
|
1087
|
+
--_ctm-mob-dn-pn-le-sw-sd,
|
|
1088
|
+
var(--_ctm-tab-dn-pn-le-sw-sd, var(--_ctm-dn-pn-le-sw-sd))
|
|
1089
|
+
)
|
|
1090
|
+
var(
|
|
1091
|
+
--_ctm-mob-dn-pn-le-sw-cr,
|
|
1092
|
+
var(--_ctm-tab-dn-pn-le-sw-cr, var(--_ctm-dn-pn-le-sw-cr))
|
|
1093
|
+
)
|
|
1094
|
+
);
|
|
911
1095
|
}
|
|
912
1096
|
|
|
913
1097
|
// The Pagination Dots rules above style `.embla__dot:after` unscoped, so the
|
|
@@ -924,8 +1108,10 @@ $overflowSelector: ".flex__overflow";
|
|
|
924
1108
|
}
|
|
925
1109
|
|
|
926
1110
|
.embla__dot--selected:after {
|
|
927
|
-
background-color: var(
|
|
928
|
-
|
|
1111
|
+
background-color: var(
|
|
1112
|
+
--_ctm-mob-dn-pn-le-ct-le-cr,
|
|
1113
|
+
var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
|
|
1114
|
+
);
|
|
929
1115
|
}
|
|
930
1116
|
}
|
|
931
1117
|
}
|
|
@@ -933,8 +1119,10 @@ $overflowSelector: ".flex__overflow";
|
|
|
933
1119
|
.embla__thumbs {
|
|
934
1120
|
width: 100%;
|
|
935
1121
|
height: var(--_ctm-mob-lt-tl-ht, var(--_ctm-tab-lt-tl-ht, var(--_ctm-lt-tl-ht)));
|
|
936
|
-
margin-top: var(
|
|
937
|
-
|
|
1122
|
+
margin-top: var(
|
|
1123
|
+
--_ctm-mob-lt-sr-ad-tl-gp,
|
|
1124
|
+
var(--_ctm-tab-lt-sr-ad-tl-gp, var(--_ctm-lt-sr-ad-tl-gp))
|
|
1125
|
+
);
|
|
938
1126
|
|
|
939
1127
|
position: relative;
|
|
940
1128
|
display: flex;
|
|
@@ -957,23 +1145,37 @@ $overflowSelector: ".flex__overflow";
|
|
|
957
1145
|
background-color: transparent;
|
|
958
1146
|
z-index: 1;
|
|
959
1147
|
|
|
960
|
-
width: var(
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
1148
|
+
width: var(
|
|
1149
|
+
--_ctm-mob-dn-tl-as-aw-se,
|
|
1150
|
+
var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
|
|
1151
|
+
);
|
|
1152
|
+
height: var(
|
|
1153
|
+
--_ctm-mob-dn-tl-as-aw-se,
|
|
1154
|
+
var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
|
|
1155
|
+
);
|
|
964
1156
|
|
|
965
1157
|
span {
|
|
966
1158
|
display: flex;
|
|
967
|
-
|
|
968
1159
|
svg {
|
|
969
|
-
width: calc(
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
|
|
973
|
-
|
|
1160
|
+
width: calc(
|
|
1161
|
+
var(
|
|
1162
|
+
--_ctm-mob-dn-tl-as-aw-se,
|
|
1163
|
+
var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
|
|
1164
|
+
) *
|
|
1165
|
+
0.5
|
|
1166
|
+
);
|
|
1167
|
+
height: calc(
|
|
1168
|
+
var(
|
|
1169
|
+
--_ctm-mob-dn-tl-as-aw-se,
|
|
1170
|
+
var(--_ctm-tab-dn-tl-as-aw-se, var(--_ctm-dn-tl-as-aw-se, 30px))
|
|
1171
|
+
) *
|
|
1172
|
+
0.5
|
|
1173
|
+
);
|
|
974
1174
|
path {
|
|
975
|
-
stroke: var(
|
|
976
|
-
|
|
1175
|
+
stroke: var(
|
|
1176
|
+
--_ctm-mob-dn-tl-as-aw-cr,
|
|
1177
|
+
var(--_ctm-tab-dn-tl-as-aw-cr, var(--_ctm-dn-tl-as-aw-cr))
|
|
1178
|
+
);
|
|
977
1179
|
}
|
|
978
1180
|
}
|
|
979
1181
|
}
|
|
@@ -985,27 +1187,21 @@ $overflowSelector: ".flex__overflow";
|
|
|
985
1187
|
}
|
|
986
1188
|
|
|
987
1189
|
&[data-background-shape="Round"] {
|
|
988
|
-
|
|
989
1190
|
.thumb-prev-button,
|
|
990
1191
|
.thumb-next-button {
|
|
991
1192
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
992
|
-
|
|
993
1193
|
&:not(:disabled):hover {
|
|
994
1194
|
@include BgColorLighter(var(--_ctm-dn-tl-as-bd-cr), 5%);
|
|
995
1195
|
}
|
|
996
1196
|
}
|
|
997
1197
|
}
|
|
998
|
-
|
|
999
1198
|
&[data-background-shape="None"] {
|
|
1000
|
-
|
|
1001
1199
|
.thumb-prev-button,
|
|
1002
1200
|
.thumb-next-button {
|
|
1003
1201
|
border-radius: 0;
|
|
1004
1202
|
}
|
|
1005
1203
|
}
|
|
1006
|
-
|
|
1007
1204
|
&[data-background-shape="Square"] {
|
|
1008
|
-
|
|
1009
1205
|
.thumb-prev-button,
|
|
1010
1206
|
.thumb-next-button {
|
|
1011
1207
|
border-radius: 4px;
|
|
@@ -1023,7 +1219,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
1023
1219
|
|
|
1024
1220
|
overflow: hidden;
|
|
1025
1221
|
}
|
|
1026
|
-
|
|
1027
1222
|
.embla__thumbs__container {
|
|
1028
1223
|
display: flex;
|
|
1029
1224
|
flex-direction: row;
|
|
@@ -1043,63 +1238,109 @@ $overflowSelector: ".flex__overflow";
|
|
|
1043
1238
|
|
|
1044
1239
|
// thumbnailStyle - hoverState
|
|
1045
1240
|
&:hover {
|
|
1046
|
-
--_sf-hr-bd-cr: var(
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
--_sf-hr-br-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
--_sf-hr-br-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
--_sf-hr-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
--_sf-hr-
|
|
1063
|
-
|
|
1241
|
+
--_sf-hr-bd-cr: var(
|
|
1242
|
+
--_ctm-mob-dn-tl-se-hr-se-bd-cr,
|
|
1243
|
+
var(--_ctm-tab-dn-tl-se-hr-se-bd-cr, var(--_ctm-dn-tl-se-hr-se-bd-cr))
|
|
1244
|
+
);
|
|
1245
|
+
--_sf-hr-br-cr: var(
|
|
1246
|
+
--_ctm-mob-dn-tl-se-hr-se-br-cr,
|
|
1247
|
+
var(--_ctm-tab-dn-tl-se-hr-se-br-cr, var(--_ctm-dn-tl-se-hr-se-br-cr))
|
|
1248
|
+
);
|
|
1249
|
+
--_sf-hr-br-se: var(
|
|
1250
|
+
--_ctm-mob-dn-tl-se-hr-se-br-se,
|
|
1251
|
+
var(--_ctm-tab-dn-tl-se-hr-se-br-se, var(--_ctm-dn-tl-se-hr-se-br-se))
|
|
1252
|
+
);
|
|
1253
|
+
--_sf-hr-br-wh: var(
|
|
1254
|
+
--_ctm-mob-dn-tl-se-hr-se-br-wh,
|
|
1255
|
+
var(--_ctm-tab-dn-tl-se-hr-se-br-wh, var(--_ctm-dn-tl-se-hr-se-br-wh))
|
|
1256
|
+
);
|
|
1257
|
+
--_sf-hr-br-rs: var(
|
|
1258
|
+
--_ctm-mob-dn-tl-se-hr-se-br-rs,
|
|
1259
|
+
var(--_ctm-tab-dn-tl-se-hr-se-br-rs, var(--_ctm-dn-tl-se-hr-se-br-rs))
|
|
1260
|
+
);
|
|
1261
|
+
--_sf-hr-sw-ae: var(
|
|
1262
|
+
--_ctm-mob-dn-tl-se-hr-se-sw-ae,
|
|
1263
|
+
var(--_ctm-tab-dn-tl-se-hr-se-sw-ae, var(--_ctm-dn-tl-se-hr-se-sw-ae))
|
|
1264
|
+
);
|
|
1265
|
+
--_sf-hr-sw-br: var(
|
|
1266
|
+
--_ctm-mob-dn-tl-se-hr-se-sw-br,
|
|
1267
|
+
var(--_ctm-tab-dn-tl-se-hr-se-sw-br, var(--_ctm-dn-tl-se-hr-se-sw-br))
|
|
1268
|
+
);
|
|
1269
|
+
--_sf-hr-sw-sd: var(
|
|
1270
|
+
--_ctm-mob-dn-tl-se-hr-se-sw-sd,
|
|
1271
|
+
var(--_ctm-tab-dn-tl-se-hr-se-sw-sd, var(--_ctm-dn-tl-se-hr-se-sw-sd))
|
|
1272
|
+
);
|
|
1273
|
+
--_sf-hr-sw-cr: var(
|
|
1274
|
+
--_ctm-mob-dn-tl-se-hr-se-sw-cr,
|
|
1275
|
+
var(--_ctm-tab-dn-tl-se-hr-se-sw-cr, var(--_ctm-dn-tl-se-hr-se-sw-cr))
|
|
1276
|
+
);
|
|
1064
1277
|
}
|
|
1065
1278
|
|
|
1066
1279
|
// thumbnailStyle - defaultState
|
|
1067
|
-
background-color: var(
|
|
1068
|
-
|
|
1280
|
+
background-color: var(
|
|
1281
|
+
--_sf-hr-bd-cr,
|
|
1282
|
+
prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr)
|
|
1283
|
+
);
|
|
1069
1284
|
border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr));
|
|
1070
1285
|
border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se));
|
|
1071
1286
|
border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh));
|
|
1072
1287
|
border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs));
|
|
1073
|
-
box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae))
|
|
1288
|
+
box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae))
|
|
1289
|
+
var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br))
|
|
1290
|
+
var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd))
|
|
1291
|
+
var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
|
|
1074
1292
|
|
|
1075
1293
|
// thumbnailStyle - selectedState
|
|
1076
1294
|
&[data-selected="true"] {
|
|
1077
|
-
--_sf-sd-bd-cr: var(
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
--_sf-sd-br-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
--_sf-sd-br-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
--_sf-sd-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
--_sf-sd-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1295
|
+
--_sf-sd-bd-cr: var(
|
|
1296
|
+
--_ctm-mob-dn-tl-se-sd-se-bd-cr,
|
|
1297
|
+
var(--_ctm-tab-dn-tl-se-sd-se-bd-cr, var(--_ctm-dn-tl-se-sd-se-bd-cr))
|
|
1298
|
+
);
|
|
1299
|
+
--_sf-sd-br-cr: var(
|
|
1300
|
+
--_ctm-mob-dn-tl-se-sd-se-br-cr,
|
|
1301
|
+
var(--_ctm-tab-dn-tl-se-sd-se-br-cr, var(--_ctm-dn-tl-se-sd-se-br-cr))
|
|
1302
|
+
);
|
|
1303
|
+
--_sf-sd-br-se: var(
|
|
1304
|
+
--_ctm-mob-dn-tl-se-sd-se-br-se,
|
|
1305
|
+
var(--_ctm-tab-dn-tl-se-sd-se-br-se, var(--_ctm-dn-tl-se-sd-se-br-se))
|
|
1306
|
+
);
|
|
1307
|
+
--_sf-sd-br-wh: var(
|
|
1308
|
+
--_ctm-mob-dn-tl-se-sd-se-br-wh,
|
|
1309
|
+
var(--_ctm-tab-dn-tl-se-sd-se-br-wh, var(--_ctm-dn-tl-se-sd-se-br-wh))
|
|
1310
|
+
);
|
|
1311
|
+
--_sf-sd-br-rs: var(
|
|
1312
|
+
--_ctm-mob-dn-tl-se-sd-se-br-rs,
|
|
1313
|
+
var(--_ctm-tab-dn-tl-se-sd-se-br-rs, var(--_ctm-dn-tl-se-sd-se-br-rs))
|
|
1314
|
+
);
|
|
1315
|
+
--_sf-sd-sw-ae: var(
|
|
1316
|
+
--_ctm-mob-dn-tl-se-sd-se-sw-ae,
|
|
1317
|
+
var(--_ctm-tab-dn-tl-se-sd-se-sw-ae, var(--_ctm-dn-tl-se-sd-se-sw-ae))
|
|
1318
|
+
);
|
|
1319
|
+
--_sf-sd-sw-br: var(
|
|
1320
|
+
--_ctm-mob-dn-tl-se-sd-se-sw-br,
|
|
1321
|
+
var(--_ctm-tab-dn-tl-se-sd-se-sw-br, var(--_ctm-dn-tl-se-sd-se-sw-br))
|
|
1322
|
+
);
|
|
1323
|
+
--_sf-sd-sw-sd: var(
|
|
1324
|
+
--_ctm-mob-dn-tl-se-sd-se-sw-sd,
|
|
1325
|
+
var(--_ctm-tab-dn-tl-se-sd-se-sw-sd, var(--_ctm-dn-tl-se-sd-se-sw-sd))
|
|
1326
|
+
);
|
|
1327
|
+
--_sf-sd-sw-cr: var(
|
|
1328
|
+
--_ctm-mob-dn-tl-se-sd-se-sw-cr,
|
|
1329
|
+
var(--_ctm-tab-dn-tl-se-sd-se-sw-cr, var(--_ctm-dn-tl-se-sd-se-sw-cr))
|
|
1330
|
+
);
|
|
1331
|
+
|
|
1332
|
+
background-color: var(
|
|
1333
|
+
--_sf-sd-bd-cr,
|
|
1334
|
+
prepareMediaVariable(--_ctm-dn-tl-se-dt-se-bd-cr)
|
|
1335
|
+
);
|
|
1098
1336
|
border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-cr));
|
|
1099
1337
|
border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-se));
|
|
1100
1338
|
border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-wh));
|
|
1101
1339
|
border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-br-rs));
|
|
1102
|
-
box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae))
|
|
1340
|
+
box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-ae))
|
|
1341
|
+
var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-br))
|
|
1342
|
+
var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-sd))
|
|
1343
|
+
var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
|
|
1103
1344
|
}
|
|
1104
1345
|
|
|
1105
1346
|
& img {
|
|
@@ -1126,26 +1367,43 @@ $overflowSelector: ".flex__overflow";
|
|
|
1126
1367
|
min-width: 0;
|
|
1127
1368
|
// flex-direction: column;
|
|
1128
1369
|
|
|
1129
|
-
background-color: var(
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1370
|
+
background-color: var(
|
|
1371
|
+
--_ctm-mob-dn-im-se-bd-cr,
|
|
1372
|
+
var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
|
|
1373
|
+
);
|
|
1374
|
+
|
|
1375
|
+
border-color: var(
|
|
1376
|
+
--_ctm-mob-dn-im-se-br-cr,
|
|
1377
|
+
var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
|
|
1378
|
+
);
|
|
1379
|
+
|
|
1380
|
+
border-style: var(
|
|
1381
|
+
--_ctm-mob-dn-im-se-br-se,
|
|
1382
|
+
var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
|
|
1383
|
+
);
|
|
1384
|
+
|
|
1385
|
+
border-width: var(
|
|
1386
|
+
--_ctm-mob-dn-im-se-br-wh,
|
|
1387
|
+
var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
|
|
1388
|
+
);
|
|
1389
|
+
|
|
1390
|
+
border-radius: var(
|
|
1391
|
+
--_ctm-mob-dn-im-se-br-rs,
|
|
1392
|
+
var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
|
|
1393
|
+
);
|
|
1394
|
+
|
|
1395
|
+
box-shadow: var(
|
|
1396
|
+
--_show-shadow,
|
|
1397
|
+
var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
|
|
1398
|
+
var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br)))
|
|
1399
|
+
var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd)))
|
|
1400
|
+
var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr)))
|
|
1401
|
+
);
|
|
1402
|
+
|
|
1403
|
+
gap: var(
|
|
1404
|
+
--_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
|
|
1405
|
+
var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))
|
|
1406
|
+
);
|
|
1149
1407
|
|
|
1150
1408
|
// Clip the image to the item's border radius; without this the img's
|
|
1151
1409
|
// square corners paint over the rounded container.
|
|
@@ -1157,17 +1415,25 @@ $overflowSelector: ".flex__overflow";
|
|
|
1157
1415
|
display: flex;
|
|
1158
1416
|
flex-direction: column;
|
|
1159
1417
|
|
|
1160
|
-
gap: var(
|
|
1161
|
-
|
|
1418
|
+
gap: var(
|
|
1419
|
+
--_ctm-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
|
|
1420
|
+
var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg))
|
|
1421
|
+
);
|
|
1162
1422
|
|
|
1163
|
-
padding-block: var(
|
|
1164
|
-
|
|
1423
|
+
padding-block: var(
|
|
1424
|
+
--_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
|
|
1425
|
+
var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg))
|
|
1426
|
+
);
|
|
1165
1427
|
|
|
1166
|
-
padding-inline: var(
|
|
1167
|
-
|
|
1428
|
+
padding-inline: var(
|
|
1429
|
+
--_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
|
|
1430
|
+
var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg))
|
|
1431
|
+
);
|
|
1168
1432
|
|
|
1169
|
-
background-color: var(
|
|
1170
|
-
|
|
1433
|
+
background-color: var(
|
|
1434
|
+
--_ctm-mob-dn-im-tt-cr-dn-bd-cr,
|
|
1435
|
+
var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr))
|
|
1436
|
+
);
|
|
1171
1437
|
|
|
1172
1438
|
width: 100%;
|
|
1173
1439
|
// Shrink to the slide, and never below the height the wrapped caption needs —
|
|
@@ -1175,111 +1441,176 @@ $overflowSelector: ".flex__overflow";
|
|
|
1175
1441
|
min-width: 0;
|
|
1176
1442
|
flex: 0 0 auto;
|
|
1177
1443
|
|
|
1178
|
-
border-color: var(
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1444
|
+
border-color: var(
|
|
1445
|
+
--_ctm-mob-dn-im-tt-cr-dn-br-cr,
|
|
1446
|
+
var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr))
|
|
1447
|
+
);
|
|
1448
|
+
|
|
1449
|
+
border-style: var(
|
|
1450
|
+
--_ctm-mob-dn-im-tt-cr-dn-br-se,
|
|
1451
|
+
var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se))
|
|
1452
|
+
);
|
|
1453
|
+
|
|
1454
|
+
border-width: var(
|
|
1455
|
+
--_ctm-mob-dn-im-tt-cr-dn-br-wh,
|
|
1456
|
+
var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh))
|
|
1457
|
+
);
|
|
1458
|
+
|
|
1459
|
+
border-radius: var(
|
|
1460
|
+
--_ctm-mob-dn-im-tt-cr-dn-br-rs,
|
|
1461
|
+
var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs))
|
|
1462
|
+
);
|
|
1463
|
+
|
|
1464
|
+
box-shadow: var(
|
|
1465
|
+
--_show-shadow,
|
|
1466
|
+
var(
|
|
1467
|
+
--_ctm-mob-dn-im-tt-cr-dn-sw-ae,
|
|
1468
|
+
var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))
|
|
1469
|
+
)
|
|
1470
|
+
var(
|
|
1471
|
+
--_ctm-mob-dn-im-tt-cr-dn-sw-br,
|
|
1472
|
+
var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))
|
|
1473
|
+
)
|
|
1474
|
+
var(
|
|
1475
|
+
--_ctm-mob-dn-im-tt-cr-dn-sw-sd,
|
|
1476
|
+
var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))
|
|
1477
|
+
)
|
|
1478
|
+
var(
|
|
1479
|
+
--_ctm-mob-dn-im-tt-cr-dn-sw-cr,
|
|
1480
|
+
var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))
|
|
1481
|
+
)
|
|
1482
|
+
);
|
|
1196
1483
|
|
|
1197
1484
|
& h3 {
|
|
1198
1485
|
color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
|
|
1199
1486
|
|
|
1200
|
-
font-family: var(
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1487
|
+
font-family: var(
|
|
1488
|
+
--_ctm-mob-dn-im-se-ft-fy,
|
|
1489
|
+
var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
|
|
1490
|
+
);
|
|
1491
|
+
text-transform: var(
|
|
1492
|
+
--_ctm-mob-dn-im-se-tt-tm,
|
|
1493
|
+
var(--_ctm-tab-dn-im-se-tt-tm, var(--_ctm-dn-im-se-tt-tm))
|
|
1494
|
+
);
|
|
1495
|
+
word-wrap: var(
|
|
1496
|
+
--_ctm-mob-dn-im-se-wd-wp,
|
|
1497
|
+
var(--_ctm-tab-dn-im-se-wd-wp, var(--_ctm-dn-im-se-wd-wp))
|
|
1498
|
+
);
|
|
1499
|
+
word-break: var(
|
|
1500
|
+
--_ctm-mob-dn-im-se-wd-bk,
|
|
1501
|
+
var(--_ctm-tab-dn-im-se-wd-bk, var(--_ctm-dn-im-se-wd-bk))
|
|
1502
|
+
);
|
|
1208
1503
|
|
|
1209
1504
|
&#{$overflowSelector} {
|
|
1210
1505
|
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
1211
1506
|
}
|
|
1212
1507
|
|
|
1213
|
-
font-size: var(
|
|
1214
|
-
|
|
1508
|
+
font-size: var(
|
|
1509
|
+
--_ctm-mob-dn-im-se-ft-se,
|
|
1510
|
+
var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
|
|
1511
|
+
);
|
|
1215
1512
|
|
|
1216
|
-
font-weight: var(
|
|
1217
|
-
|
|
1513
|
+
font-weight: var(
|
|
1514
|
+
--_ctm-mob-dn-im-se-ft-wt,
|
|
1515
|
+
var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
|
|
1516
|
+
);
|
|
1218
1517
|
|
|
1219
|
-
font-style: var(
|
|
1220
|
-
|
|
1518
|
+
font-style: var(
|
|
1519
|
+
--_ctm-mob-dn-im-se-ft-se-ic,
|
|
1520
|
+
var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
|
|
1521
|
+
);
|
|
1221
1522
|
|
|
1222
|
-
text-align: var(
|
|
1223
|
-
|
|
1523
|
+
text-align: var(
|
|
1524
|
+
--_ctm-mob-dn-im-se-tt-an,
|
|
1525
|
+
var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
|
|
1526
|
+
);
|
|
1224
1527
|
|
|
1225
|
-
letter-spacing: var(
|
|
1226
|
-
|
|
1528
|
+
letter-spacing: var(
|
|
1529
|
+
--_ctm-mob-dn-im-se-lr-sg,
|
|
1530
|
+
var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
|
|
1531
|
+
);
|
|
1227
1532
|
|
|
1228
|
-
line-height: var(
|
|
1229
|
-
|
|
1533
|
+
line-height: var(
|
|
1534
|
+
--_ctm-mob-dn-im-se-le-ht,
|
|
1535
|
+
var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
|
|
1536
|
+
);
|
|
1230
1537
|
|
|
1231
|
-
text-decoration: var(
|
|
1232
|
-
|
|
1538
|
+
text-decoration: var(
|
|
1539
|
+
--_ctm-mob-dn-im-se-ue,
|
|
1540
|
+
var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue))
|
|
1541
|
+
);
|
|
1233
1542
|
}
|
|
1234
1543
|
|
|
1235
1544
|
& p {
|
|
1236
|
-
color: var(
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1545
|
+
color: var(
|
|
1546
|
+
--_ctm-mob-dn-im-se-cr-dc,
|
|
1547
|
+
var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
|
|
1548
|
+
);
|
|
1549
|
+
|
|
1550
|
+
font-family: var(
|
|
1551
|
+
--_ctm-mob-dn-im-se-ft-fy-dc,
|
|
1552
|
+
var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
|
|
1553
|
+
);
|
|
1554
|
+
text-transform: var(
|
|
1555
|
+
--_ctm-mob-dn-im-se-tt-tm-dc,
|
|
1556
|
+
var(--_ctm-tab-dn-im-se-tt-tm-dc, var(--_ctm-dn-im-se-tt-tm-dc))
|
|
1557
|
+
);
|
|
1558
|
+
word-wrap: var(
|
|
1559
|
+
--_ctm-mob-dn-im-se-wd-wp-dc,
|
|
1560
|
+
var(--_ctm-tab-dn-im-se-wd-wp-dc, var(--_ctm-dn-im-se-wd-wp-dc))
|
|
1561
|
+
);
|
|
1562
|
+
word-break: var(
|
|
1563
|
+
--_ctm-mob-dn-im-se-wd-bk-dc,
|
|
1564
|
+
var(--_ctm-tab-dn-im-se-wd-bk-dc, var(--_ctm-dn-im-se-wd-bk-dc))
|
|
1565
|
+
);
|
|
1247
1566
|
|
|
1248
1567
|
&#{$overflowSelector} {
|
|
1249
1568
|
@include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
|
|
1250
1569
|
}
|
|
1251
1570
|
|
|
1252
|
-
font-size: var(
|
|
1253
|
-
|
|
1571
|
+
font-size: var(
|
|
1572
|
+
--_ctm-mob-dn-im-se-ft-se-dc,
|
|
1573
|
+
var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc))
|
|
1574
|
+
);
|
|
1254
1575
|
|
|
1255
|
-
font-weight: var(
|
|
1256
|
-
|
|
1576
|
+
font-weight: var(
|
|
1577
|
+
--_ctm-mob-dn-im-se-ft-wt-dc,
|
|
1578
|
+
var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc))
|
|
1579
|
+
);
|
|
1257
1580
|
|
|
1258
|
-
font-style: var(
|
|
1259
|
-
|
|
1581
|
+
font-style: var(
|
|
1582
|
+
--_ctm-mob-dn-im-se-ft-se-ic-dc,
|
|
1583
|
+
var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc))
|
|
1584
|
+
);
|
|
1260
1585
|
|
|
1261
|
-
text-align: var(
|
|
1262
|
-
|
|
1586
|
+
text-align: var(
|
|
1587
|
+
--_ctm-mob-dn-im-se-tt-an-dc,
|
|
1588
|
+
var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc))
|
|
1589
|
+
);
|
|
1263
1590
|
|
|
1264
|
-
letter-spacing: var(
|
|
1265
|
-
|
|
1591
|
+
letter-spacing: var(
|
|
1592
|
+
--_ctm-mob-dn-im-se-lr-sg-dc,
|
|
1593
|
+
var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc))
|
|
1594
|
+
);
|
|
1266
1595
|
|
|
1267
|
-
line-height: var(
|
|
1268
|
-
|
|
1596
|
+
line-height: var(
|
|
1597
|
+
--_ctm-mob-dn-im-se-le-ht-dc,
|
|
1598
|
+
var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc))
|
|
1599
|
+
);
|
|
1269
1600
|
|
|
1270
|
-
text-decoration: var(
|
|
1271
|
-
|
|
1601
|
+
text-decoration: var(
|
|
1602
|
+
--_ctm-mob-dn-im-se-ue-dc,
|
|
1603
|
+
var(--_ctm-tab-dn-im-se-ue-dc, var(--_ctm-dn-im-se-ue-dc))
|
|
1604
|
+
);
|
|
1272
1605
|
}
|
|
1273
1606
|
|
|
1274
1607
|
// h3 {
|
|
1275
1608
|
// margin-bottom: var(--_mb-4);
|
|
1276
1609
|
// }
|
|
1277
1610
|
}
|
|
1278
|
-
|
|
1279
|
-
>img {
|
|
1611
|
+
> img {
|
|
1280
1612
|
object-fit: cover;
|
|
1281
1613
|
}
|
|
1282
|
-
|
|
1283
1614
|
&[data-text-position="On Image"] {
|
|
1284
1615
|
.gallery-header {
|
|
1285
1616
|
width: 100%;
|
|
@@ -1296,7 +1627,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
1296
1627
|
justify-content: flex-start;
|
|
1297
1628
|
}
|
|
1298
1629
|
}
|
|
1299
|
-
|
|
1300
1630
|
&[data-widget-alignment="center"] {
|
|
1301
1631
|
// align-items: center;
|
|
1302
1632
|
|
|
@@ -1306,9 +1636,7 @@ $overflowSelector: ".flex__overflow";
|
|
|
1306
1636
|
justify-content: center;
|
|
1307
1637
|
}
|
|
1308
1638
|
}
|
|
1309
|
-
|
|
1310
1639
|
&[data-widget-alignment="bottom"] {
|
|
1311
|
-
|
|
1312
1640
|
// align-items: flex-end;
|
|
1313
1641
|
.gallery-header {
|
|
1314
1642
|
bottom: 0;
|
|
@@ -1325,7 +1653,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
1325
1653
|
&[data-text-position="bottom"] {
|
|
1326
1654
|
flex-direction: column-reverse;
|
|
1327
1655
|
}
|
|
1328
|
-
|
|
1329
1656
|
&[data-text-position="left"] {
|
|
1330
1657
|
flex-direction: row;
|
|
1331
1658
|
|
|
@@ -1346,11 +1673,10 @@ $overflowSelector: ".flex__overflow";
|
|
|
1346
1673
|
|
|
1347
1674
|
// The image takes whatever the caption leaves. Scoped to the row directions —
|
|
1348
1675
|
// in top/bottom the main axis is vertical and a flex-basis here would break it.
|
|
1349
|
-
>img {
|
|
1676
|
+
> img {
|
|
1350
1677
|
flex: 1 1 0;
|
|
1351
1678
|
min-width: 0;
|
|
1352
1679
|
}
|
|
1353
|
-
|
|
1354
1680
|
&[data-widget-alignment="top"] {
|
|
1355
1681
|
align-items: flex-start;
|
|
1356
1682
|
|
|
@@ -1358,7 +1684,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
1358
1684
|
justify-content: flex-start;
|
|
1359
1685
|
}
|
|
1360
1686
|
}
|
|
1361
|
-
|
|
1362
1687
|
&[data-widget-alignment="center"] {
|
|
1363
1688
|
align-items: center;
|
|
1364
1689
|
|
|
@@ -1366,7 +1691,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
1366
1691
|
justify-content: center;
|
|
1367
1692
|
}
|
|
1368
1693
|
}
|
|
1369
|
-
|
|
1370
1694
|
&[data-widget-alignment="bottom"] {
|
|
1371
1695
|
align-items: flex-end;
|
|
1372
1696
|
|
|
@@ -1375,10 +1699,8 @@ $overflowSelector: ".flex__overflow";
|
|
|
1375
1699
|
}
|
|
1376
1700
|
}
|
|
1377
1701
|
}
|
|
1378
|
-
|
|
1379
1702
|
&[data-text-position="right"] {
|
|
1380
1703
|
flex-direction: row-reverse;
|
|
1381
|
-
|
|
1382
1704
|
.gallery-header {
|
|
1383
1705
|
// The item's own Text Container Width, not the widget's. This read
|
|
1384
1706
|
// --_ctm-dn-gy-wt-lt-tt-cr-wh, which is always emitted as 100%; combined with
|
|
@@ -1396,7 +1718,7 @@ $overflowSelector: ".flex__overflow";
|
|
|
1396
1718
|
|
|
1397
1719
|
// The image takes whatever the caption leaves. Scoped to the row directions —
|
|
1398
1720
|
// in top/bottom the main axis is vertical and a flex-basis here would break it.
|
|
1399
|
-
>img {
|
|
1721
|
+
> img {
|
|
1400
1722
|
flex: 1 1 0;
|
|
1401
1723
|
min-width: 0;
|
|
1402
1724
|
}
|
|
@@ -1408,7 +1730,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
1408
1730
|
justify-content: flex-start;
|
|
1409
1731
|
}
|
|
1410
1732
|
}
|
|
1411
|
-
|
|
1412
1733
|
&[data-widget-alignment="center"] {
|
|
1413
1734
|
align-items: center;
|
|
1414
1735
|
|
|
@@ -1416,7 +1737,6 @@ $overflowSelector: ".flex__overflow";
|
|
|
1416
1737
|
justify-content: center;
|
|
1417
1738
|
}
|
|
1418
1739
|
}
|
|
1419
|
-
|
|
1420
1740
|
&[data-widget-alignment="bottom"] {
|
|
1421
1741
|
align-items: flex-end;
|
|
1422
1742
|
|
|
@@ -1425,8 +1745,7 @@ $overflowSelector: ".flex__overflow";
|
|
|
1425
1745
|
}
|
|
1426
1746
|
}
|
|
1427
1747
|
}
|
|
1428
|
-
|
|
1429
|
-
&>img {
|
|
1748
|
+
& > img {
|
|
1430
1749
|
width: 100%;
|
|
1431
1750
|
height: 100%;
|
|
1432
1751
|
// object-fit: cover;
|
|
@@ -1446,8 +1765,7 @@ $overflowSelector: ".flex__overflow";
|
|
|
1446
1765
|
display: flex;
|
|
1447
1766
|
justify-content: center;
|
|
1448
1767
|
margin-block: 12px;
|
|
1449
|
-
|
|
1450
|
-
&>button {
|
|
1768
|
+
& > button {
|
|
1451
1769
|
padding-inline: 24px;
|
|
1452
1770
|
border: 1px solid gray;
|
|
1453
1771
|
padding-block: 12px;
|
|
@@ -1455,4 +1773,4 @@ $overflowSelector: ".flex__overflow";
|
|
|
1455
1773
|
}
|
|
1456
1774
|
}
|
|
1457
1775
|
}
|
|
1458
|
-
}
|
|
1776
|
+
}
|