@sc-360-v2/storefront-cms-library 0.5.51 → 0.5.52
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-order.scss +62 -13
- package/dist/breadcrumbs.scss +13 -0
- package/dist/builder.js +1 -1
- package/dist/cart-details.scss +214 -0
- package/dist/cart.scss +57 -55
- package/dist/category-groups-product-image.scss +72 -21
- package/dist/hotspot.scss +141 -74
- package/dist/icon-library.scss +78 -74
- package/dist/image-temp.scss +2 -1
- package/dist/language-selector.scss +173 -55
- package/dist/light-box-v2.scss +4 -3
- package/dist/menu-v2.scss +51 -3
- package/dist/modal.scss +251 -28
- package/dist/product-basic-elements.scss +0 -246
- package/dist/product-image-allocation.scss +51 -15
- package/dist/product-image-bundles.scss +72 -15
- package/dist/product-image.scss +178 -19
- package/dist/repeater-embla-controls.scss +9 -1
- package/dist/repeater-grid-toggle.scss +42 -18
- package/dist/repeater.scss +69 -102
- package/dist/scroll.scss +52 -11
- package/dist/search.scss +1 -1
- package/dist/skeleton.scss +24 -35
- package/dist/tab-container.scss +14 -12
- package/dist/tab-v2.scss +178 -68
- package/dist/text-temp-v2.scss +11 -0
- package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +0 -5
- package/dist/types/builder/tools/element-edit/product-image.d.ts +1 -0
- package/dist/types/builder/tools/element-edit/repeater.d.ts +1 -1
- package/dist/types/builder/tools/element-edit/tabsV2.d.ts +55 -1
- package/dist/types/builder/tools/element-edit/video.d.ts +32 -0
- package/dist/video.scss +548 -476
- package/package.json +1 -1
package/dist/cart.scss
CHANGED
|
@@ -189,15 +189,12 @@
|
|
|
189
189
|
width: max-content;
|
|
190
190
|
min-width: 20px;
|
|
191
191
|
max-width: 80px;
|
|
192
|
+
height: max-content;
|
|
193
|
+
min-height: max(20px, 1.4em);
|
|
192
194
|
box-sizing: border-box;
|
|
193
|
-
// Driven by the Cart Item Count > Padding control. The schema does declare
|
|
194
|
-
// `padding`, so `--_ctm-*-dn-ct-is-ct-pg` is emitted for any element saved
|
|
195
|
-
// since; the final literal fallback covers elements saved before that and
|
|
196
|
-
// keeps the declaration valid when the variable is absent. It was hardcoded
|
|
197
|
-
// to 12px 4px, which is why the control had no effect.
|
|
198
195
|
padding: var(
|
|
199
196
|
--_ctm-mob-dn-ct-is-ct-pg,
|
|
200
|
-
var(--_ctm-tab-dn-ct-is-ct-pg, var(--_ctm-dn-ct-is-ct-pg,
|
|
197
|
+
var(--_ctm-tab-dn-ct-is-ct-pg, var(--_ctm-dn-ct-is-ct-pg, 0px))
|
|
201
198
|
);
|
|
202
199
|
position: absolute;
|
|
203
200
|
top: -3px !important;
|
|
@@ -225,59 +222,60 @@
|
|
|
225
222
|
list-style: none;
|
|
226
223
|
margin-left: 5px;
|
|
227
224
|
|
|
228
|
-
color: var(
|
|
229
|
-
--_ctm-mob-dn-mi-ct-tt-cr,
|
|
230
|
-
var(--_ctm-tab-dn-mi-ct-tt-cr, var(--_ctm-dn-mi-ct-tt-cr))
|
|
231
|
-
);
|
|
232
|
-
font-family: var(
|
|
233
|
-
--_ctm-mob-dn-mi-ct-tt-ft-fy,
|
|
234
|
-
var(--_ctm-tab-dn-mi-ct-tt-ft-fy, var(--_ctm-dn-mi-ct-tt-ft-fy))
|
|
235
|
-
);
|
|
236
|
-
font-size: var(
|
|
237
|
-
--_ctm-mob-dn-mi-ct-tt-ft-se,
|
|
238
|
-
var(--_ctm-tab-dn-mi-ct-tt-ft-se, var(--_ctm-dn-mi-ct-tt-ft-se))
|
|
239
|
-
);
|
|
240
|
-
font-weight: var(
|
|
241
|
-
--_ctm-mob-dn-mi-ct-tt-ft-wt,
|
|
242
|
-
var(--_ctm-tab-dn-mi-ct-tt-ft-wt, var(--_ctm-dn-mi-ct-tt-ft-wt))
|
|
243
|
-
);
|
|
244
|
-
font-style: var(
|
|
245
|
-
--_ctm-mob-dn-mi-ct-tt-ft-se-ic,
|
|
246
|
-
var(--_ctm-tab-dn-mi-ct-tt-ft-se-ic, var(--_ctm-dn-mi-ct-tt-ft-se-ic))
|
|
247
|
-
);
|
|
248
|
-
text-align: var(
|
|
249
|
-
--_ctm-mob-dn-mi-ct-tt-tt-an,
|
|
250
|
-
var(--_ctm-tab-dn-mi-ct-tt-tt-an, var(--_ctm-dn-mi-ct-tt-tt-an))
|
|
251
|
-
);
|
|
252
|
-
letter-spacing: var(
|
|
253
|
-
--_ctm-mob-dn-mi-ct-tt-lr-sg,
|
|
254
|
-
var(--_ctm-tab-dn-mi-ct-tt-lr-sg, var(--_ctm-dn-mi-ct-tt-lr-sg))
|
|
255
|
-
);
|
|
256
|
-
line-height: var(
|
|
257
|
-
--_ctm-mob-dn-mi-ct-tt-le-ht,
|
|
258
|
-
var(--_ctm-tab-dn-mi-ct-tt-le-ht, var(--_ctm-dn-mi-ct-tt-le-ht))
|
|
259
|
-
);
|
|
260
|
-
text-decoration: var(
|
|
261
|
-
--_ctm-mob-dn-mi-ct-tt-ue,
|
|
262
|
-
var(--_ctm-tab-dn-mi-ct-tt-ue, var(--_ctm-dn-mi-ct-tt-ue))
|
|
263
|
-
);
|
|
264
|
-
text-transform: var(
|
|
265
|
-
--_ctm-mob-dn-mi-ct-tt-tt-tm,
|
|
266
|
-
var(--_ctm-tab-dn-mi-ct-tt-tt-tm, var(--_ctm-dn-mi-ct-tt-tt-tm, none))
|
|
267
|
-
);
|
|
268
|
-
word-wrap: var(
|
|
269
|
-
--_ctm-mob-dn-mi-ct-tt-wd-wp,
|
|
270
|
-
var(--_ctm-tab-dn-mi-ct-tt-wd-wp, var(--_ctm-dn-mi-ct-tt-wd-wp, normal))
|
|
271
|
-
);
|
|
272
|
-
word-break: var(
|
|
273
|
-
--_ctm-mob-dn-mi-ct-tt-wd-bk,
|
|
274
|
-
var(--_ctm-tab-dn-mi-ct-tt-wd-bk, var(--_ctm-dn-mi-ct-tt-wd-bk, normal))
|
|
275
|
-
);
|
|
276
|
-
|
|
277
225
|
a {
|
|
278
226
|
display: flex;
|
|
279
227
|
flex-direction: column;
|
|
280
228
|
}
|
|
229
|
+
.cart__text__span {
|
|
230
|
+
color: var(
|
|
231
|
+
--_ctm-mob-dn-mi-ct-tt-cr,
|
|
232
|
+
var(--_ctm-tab-dn-mi-ct-tt-cr, var(--_ctm-dn-mi-ct-tt-cr))
|
|
233
|
+
);
|
|
234
|
+
font-family: var(
|
|
235
|
+
--_ctm-mob-dn-mi-ct-tt-ft-fy,
|
|
236
|
+
var(--_ctm-tab-dn-mi-ct-tt-ft-fy, var(--_ctm-dn-mi-ct-tt-ft-fy))
|
|
237
|
+
);
|
|
238
|
+
font-size: var(
|
|
239
|
+
--_ctm-mob-dn-mi-ct-tt-ft-se,
|
|
240
|
+
var(--_ctm-tab-dn-mi-ct-tt-ft-se, var(--_ctm-dn-mi-ct-tt-ft-se))
|
|
241
|
+
);
|
|
242
|
+
font-weight: var(
|
|
243
|
+
--_ctm-mob-dn-mi-ct-tt-ft-wt,
|
|
244
|
+
var(--_ctm-tab-dn-mi-ct-tt-ft-wt, var(--_ctm-dn-mi-ct-tt-ft-wt))
|
|
245
|
+
);
|
|
246
|
+
font-style: var(
|
|
247
|
+
--_ctm-mob-dn-mi-ct-tt-ft-se-ic,
|
|
248
|
+
var(--_ctm-tab-dn-mi-ct-tt-ft-se-ic, var(--_ctm-dn-mi-ct-tt-ft-se-ic))
|
|
249
|
+
);
|
|
250
|
+
text-align: var(
|
|
251
|
+
--_ctm-mob-dn-mi-ct-tt-tt-an,
|
|
252
|
+
var(--_ctm-tab-dn-mi-ct-tt-tt-an, var(--_ctm-dn-mi-ct-tt-tt-an))
|
|
253
|
+
);
|
|
254
|
+
letter-spacing: var(
|
|
255
|
+
--_ctm-mob-dn-mi-ct-tt-lr-sg,
|
|
256
|
+
var(--_ctm-tab-dn-mi-ct-tt-lr-sg, var(--_ctm-dn-mi-ct-tt-lr-sg))
|
|
257
|
+
);
|
|
258
|
+
line-height: var(
|
|
259
|
+
--_ctm-mob-dn-mi-ct-tt-le-ht,
|
|
260
|
+
var(--_ctm-tab-dn-mi-ct-tt-le-ht, var(--_ctm-dn-mi-ct-tt-le-ht))
|
|
261
|
+
);
|
|
262
|
+
text-decoration: var(
|
|
263
|
+
--_ctm-mob-dn-mi-ct-tt-ue,
|
|
264
|
+
var(--_ctm-tab-dn-mi-ct-tt-ue, var(--_ctm-dn-mi-ct-tt-ue))
|
|
265
|
+
);
|
|
266
|
+
text-transform: var(
|
|
267
|
+
--_ctm-mob-dn-mi-ct-tt-tt-tm,
|
|
268
|
+
var(--_ctm-tab-dn-mi-ct-tt-tt-tm, var(--_ctm-dn-mi-ct-tt-tt-tm, none))
|
|
269
|
+
);
|
|
270
|
+
word-wrap: var(
|
|
271
|
+
--_ctm-mob-dn-mi-ct-tt-wd-wp,
|
|
272
|
+
var(--_ctm-tab-dn-mi-ct-tt-wd-wp, var(--_ctm-dn-mi-ct-tt-wd-wp, normal))
|
|
273
|
+
);
|
|
274
|
+
word-break: var(
|
|
275
|
+
--_ctm-mob-dn-mi-ct-tt-wd-bk,
|
|
276
|
+
var(--_ctm-tab-dn-mi-ct-tt-wd-bk, var(--_ctm-dn-mi-ct-tt-wd-bk, normal))
|
|
277
|
+
);
|
|
278
|
+
}
|
|
281
279
|
|
|
282
280
|
.cart__total {
|
|
283
281
|
color: var(
|
|
@@ -312,6 +310,10 @@
|
|
|
312
310
|
--_ctm-mob-dn-mi-ct-tt-le-ht-dc,
|
|
313
311
|
var(--_ctm-tab-dn-mi-ct-tt-le-ht-dc, var(--_ctm-dn-mi-ct-tt-le-ht-dc))
|
|
314
312
|
);
|
|
313
|
+
text-decoration: var(
|
|
314
|
+
--_ctm-mob-dn-mi-ct-tt-ue-dc,
|
|
315
|
+
var(--_ctm-tab-dn-mi-ct-tt-ue-dc, var(--_ctm-dn-mi-ct-tt-ue-dc))
|
|
316
|
+
);
|
|
315
317
|
text-transform: var(
|
|
316
318
|
--_ctm-mob-dn-mi-ct-tt-tt-tm-dc,
|
|
317
319
|
var(--_ctm-tab-dn-mi-ct-tt-tt-tm-dc, var(--_ctm-dn-mi-ct-tt-tt-tm-dc, none))
|
|
@@ -37,7 +37,11 @@
|
|
|
37
37
|
)
|
|
38
38
|
);
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
// Content-sized display styles — the element grows with the number of images.
|
|
41
|
+
// See product-image.scss for the full reasoning.
|
|
42
|
+
$contentSizedGallery: '.embla[data-scroll-control="Non"]:is([data-display-style="Grid"][data-scroll-direction="Vertical"], [data-display-style="Rows"], [data-display-style="Masonry"])';
|
|
43
|
+
|
|
44
|
+
&:not(:has(#{$contentSizedGallery})) {
|
|
41
45
|
height: var(
|
|
42
46
|
--_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht,
|
|
43
47
|
var(
|
|
@@ -47,6 +51,16 @@
|
|
|
47
51
|
);
|
|
48
52
|
}
|
|
49
53
|
|
|
54
|
+
&:has(#{$contentSizedGallery}) {
|
|
55
|
+
min-height: var(
|
|
56
|
+
--_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht,
|
|
57
|
+
var(
|
|
58
|
+
--_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht,
|
|
59
|
+
var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht)
|
|
60
|
+
)
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
|
|
50
64
|
// &[data-view-state="full"] {
|
|
51
65
|
// width: auto;
|
|
52
66
|
// // height: 100%;
|
|
@@ -234,27 +248,47 @@
|
|
|
234
248
|
|
|
235
249
|
width: 100%;
|
|
236
250
|
height: 100%;
|
|
251
|
+
|
|
252
|
+
// Gallery Widget Style > Border / Shadow toggles. Distinct names from the item
|
|
253
|
+
// ones below, because .gallery__slide is a descendant and would otherwise
|
|
254
|
+
// inherit whatever is set here.
|
|
255
|
+
&[data-show-border="false"] {
|
|
256
|
+
--_show-gy-border: none;
|
|
257
|
+
}
|
|
258
|
+
&[data-show-shadow="false"] {
|
|
259
|
+
--_show-gy-shadow: none;
|
|
260
|
+
}
|
|
261
|
+
|
|
237
262
|
border-color: var(
|
|
238
|
-
--
|
|
263
|
+
--_show-gy-border,
|
|
239
264
|
var(
|
|
240
|
-
--_ctm-
|
|
241
|
-
var(
|
|
265
|
+
--_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr,
|
|
266
|
+
var(
|
|
267
|
+
--_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr,
|
|
268
|
+
var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr)
|
|
269
|
+
)
|
|
242
270
|
)
|
|
243
271
|
);
|
|
244
272
|
|
|
245
273
|
border-style: var(
|
|
246
|
-
--
|
|
274
|
+
--_show-gy-border,
|
|
247
275
|
var(
|
|
248
|
-
--_ctm-
|
|
249
|
-
var(
|
|
276
|
+
--_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se,
|
|
277
|
+
var(
|
|
278
|
+
--_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se,
|
|
279
|
+
var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se)
|
|
280
|
+
)
|
|
250
281
|
)
|
|
251
282
|
);
|
|
252
283
|
|
|
253
284
|
border-width: var(
|
|
254
|
-
--
|
|
285
|
+
--_show-gy-border,
|
|
255
286
|
var(
|
|
256
|
-
--_ctm-
|
|
257
|
-
var(
|
|
287
|
+
--_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh,
|
|
288
|
+
var(
|
|
289
|
+
--_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh,
|
|
290
|
+
var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh)
|
|
291
|
+
)
|
|
258
292
|
)
|
|
259
293
|
);
|
|
260
294
|
|
|
@@ -267,7 +301,7 @@
|
|
|
267
301
|
);
|
|
268
302
|
|
|
269
303
|
box-shadow: var(
|
|
270
|
-
--_show-shadow,
|
|
304
|
+
--_show-gy-shadow,
|
|
271
305
|
var(
|
|
272
306
|
--_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-ae,
|
|
273
307
|
var(
|
|
@@ -1788,25 +1822,42 @@
|
|
|
1788
1822
|
var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-bd-cr)
|
|
1789
1823
|
)
|
|
1790
1824
|
);
|
|
1825
|
+
// Item Style > Border / Shadow toggles.
|
|
1826
|
+
&[data-show-border="false"] {
|
|
1827
|
+
--_show-im-border: none;
|
|
1828
|
+
}
|
|
1829
|
+
&[data-show-shadow="false"] {
|
|
1830
|
+
--_show-im-shadow: none;
|
|
1831
|
+
}
|
|
1832
|
+
|
|
1791
1833
|
border-color: var(
|
|
1792
|
-
--
|
|
1834
|
+
--_show-im-border,
|
|
1793
1835
|
var(
|
|
1794
|
-
--_ctm-
|
|
1795
|
-
var(
|
|
1836
|
+
--_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr,
|
|
1837
|
+
var(
|
|
1838
|
+
--_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr,
|
|
1839
|
+
var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr)
|
|
1840
|
+
)
|
|
1796
1841
|
)
|
|
1797
1842
|
);
|
|
1798
1843
|
border-style: var(
|
|
1799
|
-
--
|
|
1844
|
+
--_show-im-border,
|
|
1800
1845
|
var(
|
|
1801
|
-
--_ctm-
|
|
1802
|
-
var(
|
|
1846
|
+
--_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se,
|
|
1847
|
+
var(
|
|
1848
|
+
--_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se,
|
|
1849
|
+
var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se)
|
|
1850
|
+
)
|
|
1803
1851
|
)
|
|
1804
1852
|
);
|
|
1805
1853
|
border-width: var(
|
|
1806
|
-
--
|
|
1854
|
+
--_show-im-border,
|
|
1807
1855
|
var(
|
|
1808
|
-
--_ctm-
|
|
1809
|
-
var(
|
|
1856
|
+
--_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh,
|
|
1857
|
+
var(
|
|
1858
|
+
--_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh,
|
|
1859
|
+
var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh)
|
|
1860
|
+
)
|
|
1810
1861
|
)
|
|
1811
1862
|
);
|
|
1812
1863
|
border-radius: var(
|
|
@@ -1818,7 +1869,7 @@
|
|
|
1818
1869
|
);
|
|
1819
1870
|
|
|
1820
1871
|
box-shadow: var(
|
|
1821
|
-
--_show-shadow,
|
|
1872
|
+
--_show-im-shadow,
|
|
1822
1873
|
var(
|
|
1823
1874
|
--_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-ae,
|
|
1824
1875
|
var(
|
package/dist/hotspot.scss
CHANGED
|
@@ -13,6 +13,8 @@ $bm: 30px;
|
|
|
13
13
|
// default 30px marker it resolves to 20px, matching the previous flat offset.
|
|
14
14
|
$g: var(--_sf-tp-gp);
|
|
15
15
|
|
|
16
|
+
$overflowSelector: ".flex__overflow";
|
|
17
|
+
|
|
16
18
|
$resizerOn: "[data-cms-element-resizer='true']";
|
|
17
19
|
$dndOn: "[data-cms-new-element-dragging-v2='true']";
|
|
18
20
|
$fullViewOn: '[data-view-state="full"]';
|
|
@@ -23,81 +25,105 @@ $fullViewOn: '[data-view-state="full"]';
|
|
|
23
25
|
// spans exactly the gap, base on the tooltip edge and apex on the marker edge.
|
|
24
26
|
$data: (
|
|
25
27
|
// tooltip to the LEFT — tip on its right edge, pointing right
|
|
26
|
-
leftTop: (
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
leftTop: (
|
|
29
|
+
transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
|
|
30
|
+
icon: (
|
|
31
|
+
right: -#{$tip},
|
|
32
|
+
bottom: calc(#{$bm} - #{$ics}),
|
|
33
|
+
border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
|
|
34
|
+
),
|
|
30
35
|
),
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
icon: (
|
|
36
|
+
leftCenter: (
|
|
37
|
+
transform: translate(calc(-100% - #{$g}), -50%),
|
|
38
|
+
icon: (
|
|
39
|
+
right: -#{$tip},
|
|
34
40
|
top: calc(50% - #{$ics}),
|
|
35
41
|
border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
|
|
36
42
|
),
|
|
37
43
|
),
|
|
38
|
-
leftBottom: (
|
|
39
|
-
|
|
44
|
+
leftBottom: (
|
|
45
|
+
transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
|
|
46
|
+
icon: (
|
|
47
|
+
right: -#{$tip},
|
|
40
48
|
top: calc(#{$bm} - #{$ics}),
|
|
41
49
|
border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
|
|
42
50
|
),
|
|
43
51
|
),
|
|
44
52
|
// tooltip ABOVE — tip on its bottom edge, pointing down
|
|
45
|
-
topLeft: (
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
53
|
+
topLeft: (
|
|
54
|
+
transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
|
|
55
|
+
icon: (
|
|
56
|
+
bottom: -#{$tip},
|
|
57
|
+
right: calc(#{$bm} - #{$ics}),
|
|
58
|
+
border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
|
|
59
|
+
),
|
|
49
60
|
),
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
icon: (
|
|
61
|
+
topCenter: (
|
|
62
|
+
transform: translate(-50%, calc(-100% - #{$g})),
|
|
63
|
+
icon: (
|
|
64
|
+
bottom: -#{$tip},
|
|
53
65
|
left: calc(50% - #{$ics}),
|
|
54
66
|
border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
|
|
55
67
|
),
|
|
56
68
|
),
|
|
57
|
-
topRight: (
|
|
58
|
-
|
|
69
|
+
topRight: (
|
|
70
|
+
transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
|
|
71
|
+
icon: (
|
|
72
|
+
bottom: -#{$tip},
|
|
59
73
|
left: calc(#{$bm} - #{$ics}),
|
|
60
74
|
border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
|
|
61
75
|
),
|
|
62
76
|
),
|
|
63
77
|
// tooltip to the RIGHT — tip on its left edge, pointing left
|
|
64
|
-
rightTop: (
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
78
|
+
rightTop: (
|
|
79
|
+
transform: translate(#{$g}, calc(-100% + #{$bm})),
|
|
80
|
+
icon: (
|
|
81
|
+
left: -#{$tip},
|
|
82
|
+
bottom: calc(#{$bm} - #{$ics}),
|
|
83
|
+
border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
|
|
84
|
+
),
|
|
68
85
|
),
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
icon: (
|
|
86
|
+
rightCenter: (
|
|
87
|
+
transform: translate(#{$g}, -50%),
|
|
88
|
+
icon: (
|
|
89
|
+
left: -#{$tip},
|
|
72
90
|
top: calc(50% - #{$ics}),
|
|
73
91
|
border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
|
|
74
92
|
),
|
|
75
93
|
),
|
|
76
|
-
rightBottom: (
|
|
77
|
-
|
|
94
|
+
rightBottom: (
|
|
95
|
+
transform: translate(#{$g}, calc(0% - #{$bm})),
|
|
96
|
+
icon: (
|
|
97
|
+
left: -#{$tip},
|
|
78
98
|
top: calc(#{$bm} - #{$ics}),
|
|
79
99
|
border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
|
|
80
100
|
),
|
|
81
101
|
),
|
|
82
102
|
// tooltip BELOW — tip on its top edge, pointing up
|
|
83
|
-
bottomLeft: (
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
103
|
+
bottomLeft: (
|
|
104
|
+
transform: translate(calc(-100% + #{$bm}), #{$g}),
|
|
105
|
+
icon: (
|
|
106
|
+
top: -#{$tip},
|
|
107
|
+
right: calc(#{$bm} - #{$ics}),
|
|
108
|
+
border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
|
|
109
|
+
),
|
|
87
110
|
),
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
icon: (
|
|
111
|
+
bottomCenter: (
|
|
112
|
+
transform: translate(-50%, #{$g}),
|
|
113
|
+
icon: (
|
|
114
|
+
top: -#{$tip},
|
|
91
115
|
left: calc(50% - #{$ics}),
|
|
92
116
|
border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
|
|
93
117
|
),
|
|
94
118
|
),
|
|
95
|
-
bottomRight: (
|
|
96
|
-
|
|
119
|
+
bottomRight: (
|
|
120
|
+
transform: translate(calc(0% - #{$bm}), #{$g}),
|
|
121
|
+
icon: (
|
|
122
|
+
top: -#{$tip},
|
|
97
123
|
left: calc(#{$bm} - #{$ics}),
|
|
98
124
|
border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
|
|
99
125
|
),
|
|
100
|
-
)
|
|
126
|
+
)
|
|
101
127
|
);
|
|
102
128
|
|
|
103
129
|
[data-div-type="element"] {
|
|
@@ -120,9 +146,7 @@ $data: (
|
|
|
120
146
|
@each $prop, $val in $value {
|
|
121
147
|
@if ($prop !=icon) {
|
|
122
148
|
#{$prop}: #{$val};
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
@else {
|
|
149
|
+
} @else {
|
|
126
150
|
@each $key2, $value2 in $val {
|
|
127
151
|
&:after {
|
|
128
152
|
#{$key2}: #{$value2};
|
|
@@ -140,8 +164,12 @@ $data: (
|
|
|
140
164
|
[data-div-type="element"] {
|
|
141
165
|
&[data-element-type="imageHotspot"] {
|
|
142
166
|
// width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
|
|
143
|
-
width: var(
|
|
144
|
-
|
|
167
|
+
width: var(
|
|
168
|
+
--_sf-el-wh-st-mx,
|
|
169
|
+
calc(
|
|
170
|
+
1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
|
|
171
|
+
)
|
|
172
|
+
);
|
|
145
173
|
margin: var(--_ctm-lt-mn, --_tst-lt-mn);
|
|
146
174
|
// height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
147
175
|
// aspect-ratio: 1 / var(--_sf-aspect-ratio);
|
|
@@ -163,21 +191,19 @@ $data: (
|
|
|
163
191
|
}
|
|
164
192
|
}
|
|
165
193
|
|
|
166
|
-
|
|
194
|
+
& > .wrapper {
|
|
167
195
|
width: 100%;
|
|
168
196
|
position: relative;
|
|
169
197
|
|
|
170
198
|
background-color: prepareMediaVariable(--_ctm-dn-ie-se-bd-cr);
|
|
171
199
|
padding: prepareMediaVariable(--_ctm-lt-pg, var(--_tst-lt-pg));
|
|
172
|
-
box-shadow: prepareMediaVariable(--_ctm-dn-ie-se-sw-ae)
|
|
200
|
+
box-shadow: prepareMediaVariable(--_ctm-dn-ie-se-sw-ae)
|
|
201
|
+
prepareMediaVariable(--_ctm-dn-ie-se-sw-br) prepareMediaVariable(--_ctm-dn-ie-se-sw-sd)
|
|
202
|
+
prepareMediaVariable(--_ctm-dn-ie-se-sw-cr);
|
|
173
203
|
|
|
174
|
-
|
|
204
|
+
& > div {
|
|
175
205
|
&.hotspot__tooltip {
|
|
176
|
-
--_sf-br-vl: {
|
|
177
|
-
#prepareMediaVariable(--_ctm-dn-tp-dn-br-rs, 0px)
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
;
|
|
206
|
+
--_sf-br-vl: #{prepareMediaVariable(--_ctm-dn-tp-dn-br-rs, 0px)};
|
|
181
207
|
position: absolute;
|
|
182
208
|
background: prepareMediaVariable(--_ctm-dn-tp-dn-bd-cr);
|
|
183
209
|
z-index: 1000;
|
|
@@ -201,16 +227,22 @@ $data: (
|
|
|
201
227
|
border-style: solid;
|
|
202
228
|
}
|
|
203
229
|
|
|
204
|
-
|
|
205
230
|
.tooltip__image_with_text {
|
|
206
231
|
display: flex;
|
|
207
232
|
// justify-content: center;
|
|
208
233
|
gap: prepareMediaVariable(--_ctm-dn-tp-dn-im-gp);
|
|
209
234
|
overflow-y: auto;
|
|
210
235
|
height: 100%;
|
|
236
|
+
width: 100%;
|
|
211
237
|
|
|
238
|
+
// This wrapper fills the tooltip, so the tooltip's own justify/align
|
|
239
|
+
// above can't move it — the alignment has to be applied here, on the
|
|
240
|
+
// container that actually holds the image and the text box. Which axis
|
|
241
|
+
// each maps to flips with the stack direction.
|
|
212
242
|
&.hrz {
|
|
213
243
|
flex-direction: row;
|
|
244
|
+
justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
|
|
245
|
+
align-items: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
|
|
214
246
|
|
|
215
247
|
.tooltip__image {
|
|
216
248
|
flex-direction: column;
|
|
@@ -219,6 +251,8 @@ $data: (
|
|
|
219
251
|
|
|
220
252
|
&.vtl {
|
|
221
253
|
flex-direction: column;
|
|
254
|
+
justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
|
|
255
|
+
align-items: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
|
|
222
256
|
|
|
223
257
|
.tooltip__image {
|
|
224
258
|
flex-direction: row;
|
|
@@ -271,6 +305,13 @@ $data: (
|
|
|
271
305
|
letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg);
|
|
272
306
|
line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht);
|
|
273
307
|
text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-ue);
|
|
308
|
+
text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-tt-tm, none);
|
|
309
|
+
word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-wd-wp, normal);
|
|
310
|
+
word-break: prepareMediaVariable(--_ctm-dn-tp-tt-wd-bk, normal);
|
|
311
|
+
|
|
312
|
+
&#{$overflowSelector} {
|
|
313
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
314
|
+
}
|
|
274
315
|
}
|
|
275
316
|
|
|
276
317
|
p {
|
|
@@ -283,6 +324,13 @@ $data: (
|
|
|
283
324
|
letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg-dc);
|
|
284
325
|
line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht-dc);
|
|
285
326
|
text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-lh-dc);
|
|
327
|
+
text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-tt-tm-dc, none);
|
|
328
|
+
word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-wd-wp-dc, normal);
|
|
329
|
+
word-break: prepareMediaVariable(--_ctm-dn-tp-tt-wd-bk-dc, normal);
|
|
330
|
+
|
|
331
|
+
&#{$overflowSelector} {
|
|
332
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
|
|
333
|
+
}
|
|
286
334
|
}
|
|
287
335
|
}
|
|
288
336
|
|
|
@@ -355,8 +403,10 @@ $data: (
|
|
|
355
403
|
}
|
|
356
404
|
}
|
|
357
405
|
|
|
358
|
-
background-color: var(
|
|
359
|
-
|
|
406
|
+
background-color: var(
|
|
407
|
+
--_sf-hr-bd-cr,
|
|
408
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-bd-cr)
|
|
409
|
+
);
|
|
360
410
|
|
|
361
411
|
padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-pg));
|
|
362
412
|
width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wh));
|
|
@@ -369,17 +419,26 @@ $data: (
|
|
|
369
419
|
|
|
370
420
|
border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-rs));
|
|
371
421
|
|
|
372
|
-
box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-ae))
|
|
422
|
+
box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-ae))
|
|
423
|
+
var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-br))
|
|
424
|
+
var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-sd))
|
|
425
|
+
var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-cr));
|
|
373
426
|
|
|
374
427
|
&[data-show-border="true"] {
|
|
375
|
-
border-color: var(
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
428
|
+
border-color: var(
|
|
429
|
+
--_sf-hr-br-cr,
|
|
430
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-cr)
|
|
431
|
+
);
|
|
432
|
+
|
|
433
|
+
border-style: var(
|
|
434
|
+
--_sf-hr-br-se,
|
|
435
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-se)
|
|
436
|
+
);
|
|
437
|
+
|
|
438
|
+
border-width: var(
|
|
439
|
+
--_sf-hr-br-wh,
|
|
440
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-wh)
|
|
441
|
+
);
|
|
383
442
|
}
|
|
384
443
|
|
|
385
444
|
.txt {
|
|
@@ -393,13 +452,17 @@ $data: (
|
|
|
393
452
|
|
|
394
453
|
font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-wt));
|
|
395
454
|
|
|
396
|
-
font-style: var(
|
|
397
|
-
|
|
455
|
+
font-style: var(
|
|
456
|
+
--_sf-hr-ft-se-ic,
|
|
457
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se-ic)
|
|
458
|
+
);
|
|
398
459
|
|
|
399
460
|
text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-tt-an));
|
|
400
461
|
|
|
401
|
-
letter-spacing: var(
|
|
402
|
-
|
|
462
|
+
letter-spacing: var(
|
|
463
|
+
--_sf-hr-lr-sg,
|
|
464
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-lr-sg)
|
|
465
|
+
);
|
|
403
466
|
|
|
404
467
|
line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-le-ht));
|
|
405
468
|
|
|
@@ -479,7 +542,6 @@ $data: (
|
|
|
479
542
|
// justify-content: prepareMediaVariable(--_ctm-dn-tp-ie-hl-at);
|
|
480
543
|
// align-items: prepareMediaVariable(--_ctm-dn-tp-ie-vl-at);
|
|
481
544
|
|
|
482
|
-
|
|
483
545
|
// img {
|
|
484
546
|
// object-fit: prepareMediaVariable(--_ctm-dn-tp-ie-ft-os);
|
|
485
547
|
// height: -webkit-fill-available;
|
|
@@ -537,7 +599,9 @@ $data: (
|
|
|
537
599
|
|
|
538
600
|
&[data-hotspot-tooltip-style-show-shadow="true"] {
|
|
539
601
|
.hotspot__tooltip {
|
|
540
|
-
box-shadow: prepareMediaVariable(--_ctm-dn-tp-dn-sw-ae)
|
|
602
|
+
box-shadow: prepareMediaVariable(--_ctm-dn-tp-dn-sw-ae)
|
|
603
|
+
prepareMediaVariable(--_ctm-dn-tp-dn-sw-br) prepareMediaVariable(--_ctm-dn-tp-dn-sw-sd)
|
|
604
|
+
prepareMediaVariable(--_ctm-dn-tp-dn-sw-cr);
|
|
541
605
|
}
|
|
542
606
|
}
|
|
543
607
|
|
|
@@ -552,21 +616,24 @@ $data: (
|
|
|
552
616
|
|
|
553
617
|
&[data-hotspot-tooltip-image-style-show-shadow="true"] {
|
|
554
618
|
.tooltip__image {
|
|
555
|
-
box-shadow: var(
|
|
556
|
-
|
|
619
|
+
box-shadow: var(
|
|
620
|
+
--_show-shadow,
|
|
621
|
+
prepareMediaVariable(--_ctm-dn-tp-ie-sw-ae) prepareMediaVariable(--_ctm-dn-tp-ie-sw-br)
|
|
622
|
+
prepareMediaVariable(--_ctm-dn-tp-ie-sw-sd) prepareMediaVariable(--_ctm-dn-tp-ie-sw-cr)
|
|
623
|
+
);
|
|
557
624
|
}
|
|
558
625
|
}
|
|
559
626
|
|
|
560
627
|
&[data-hotspot-style-show-shadow="true"] {
|
|
561
|
-
|
|
562
628
|
.hotspot,
|
|
563
629
|
.hotspot__icon {
|
|
564
|
-
box-shadow: prepareMediaVariable(--_ctm-dn-ht-se-sw-ae)
|
|
630
|
+
box-shadow: prepareMediaVariable(--_ctm-dn-ht-se-sw-ae)
|
|
631
|
+
prepareMediaVariable(--_ctm-dn-ht-se-sw-br) prepareMediaVariable(--_ctm-dn-ht-se-sw-sd)
|
|
632
|
+
prepareMediaVariable(--_ctm-dn-ht-se-sw-cr);
|
|
565
633
|
}
|
|
566
634
|
}
|
|
567
635
|
|
|
568
636
|
&[data-hotspot-style-show-border="true"] {
|
|
569
|
-
|
|
570
637
|
.hotspot,
|
|
571
638
|
.hotspot__icon {
|
|
572
639
|
border-style: prepareMediaVariable(--_ctm-dn-ht-se-br-se);
|
|
@@ -705,4 +772,4 @@ $data: (
|
|
|
705
772
|
}
|
|
706
773
|
}
|
|
707
774
|
}
|
|
708
|
-
}
|
|
775
|
+
}
|