@sc-360-v2/storefront-cms-library 0.5.44 → 0.5.45
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/builder.js +1 -1
- package/dist/fb-dropdown.scss +135 -125
- package/dist/hotspot.scss +375 -109
- package/dist/types/builder/tools/element-edit/createForm.d.ts +3 -1
- package/dist/types/builder/tools/element-edit/faq.d.ts +8 -1
- package/dist/types/builder/tools/element-edit/imageHotspot.d.ts +16 -5
- package/dist/types/builder/tools/element-edit/profile.d.ts +3 -12
- package/dist/types/builder/tools/element-edit/uomSelector.d.ts +5 -0
- package/dist/types/upload-media/types.d.ts +2 -1
- package/dist/uom-selector.scss +60 -2
- package/dist/uploadMedia.js +1 -1
- package/dist/volume-pricing.scss +0 -1
- package/package.json +1 -1
package/dist/hotspot.scss
CHANGED
|
@@ -2,101 +2,99 @@
|
|
|
2
2
|
@use "sass:list";
|
|
3
3
|
@use "./functions.scss" as *;
|
|
4
4
|
|
|
5
|
-
$
|
|
5
|
+
// $ics is the tip's border-width: a 5px border with no content box makes a
|
|
6
|
+
// 10px triangle whose apex sits at the centre of the 10px box.
|
|
7
|
+
$ics: 5px;
|
|
8
|
+
$tip: $ics * 2;
|
|
6
9
|
$bm: 30px;
|
|
7
|
-
|
|
10
|
+
|
|
11
|
+
// Gap between the marker's edge and the tooltip. Held in a custom property so it
|
|
12
|
+
// can track the marker's real size at runtime (see --_sf-tp-gp below); at the
|
|
13
|
+
// default 30px marker it resolves to 20px, matching the previous flat offset.
|
|
14
|
+
$g: var(--_sf-tp-gp);
|
|
8
15
|
|
|
9
16
|
$resizerOn: "[data-cms-element-resizer='true']";
|
|
10
17
|
$dndOn: "[data-cms-new-element-dragging-v2='true']";
|
|
11
18
|
$fullViewOn: '[data-view-state="full"]';
|
|
12
19
|
|
|
20
|
+
// Each entry places the tooltip relative to the marker's centre, then pins the
|
|
21
|
+
// tip to the tooltip edge that faces the marker. Because $g already absorbs the
|
|
22
|
+
// marker's half-size, every tip offset below is a constant: the triangle always
|
|
23
|
+
// spans exactly the gap, base on the tooltip edge and apex on the marker edge.
|
|
13
24
|
$data: (
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
25
|
+
// tooltip to the LEFT — tip on its right edge, pointing right
|
|
26
|
+
leftTop: (transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
|
|
27
|
+
icon: (right: -#{$tip},
|
|
28
|
+
bottom: calc(#{$bm} - #{$ics}),
|
|
18
29
|
border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
|
|
19
30
|
),
|
|
20
31
|
),
|
|
21
|
-
leftCenter: (transform: translate(calc(-100% - #{$
|
|
22
|
-
icon: (
|
|
23
|
-
|
|
24
|
-
transform: translate(calc(100% + #{$ics}), calc(-50% + (0px * 1.75))),
|
|
32
|
+
leftCenter: (transform: translate(calc(-100% - #{$g}), -50%),
|
|
33
|
+
icon: (right: -#{$tip},
|
|
34
|
+
top: calc(50% - #{$ics}),
|
|
25
35
|
border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
|
|
26
36
|
),
|
|
27
37
|
),
|
|
28
|
-
leftBottom: (transform: translate(calc(-100% - #{$
|
|
29
|
-
icon: (
|
|
30
|
-
|
|
31
|
-
transform: translate(calc(100% + #{$ics}), calc(-100% + (#{$ics} * 1.75))),
|
|
38
|
+
leftBottom: (transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
|
|
39
|
+
icon: (right: -#{$tip},
|
|
40
|
+
top: calc(#{$bm} - #{$ics}),
|
|
32
41
|
border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
|
|
33
42
|
),
|
|
34
43
|
),
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
44
|
+
// tooltip ABOVE — tip on its bottom edge, pointing down
|
|
45
|
+
topLeft: (transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
|
|
46
|
+
icon: (bottom: -#{$tip},
|
|
47
|
+
right: calc(#{$bm} - #{$ics}),
|
|
39
48
|
border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
|
|
40
49
|
),
|
|
41
50
|
),
|
|
42
|
-
topCenter: (transform: translate(
|
|
43
|
-
icon: (bottom:
|
|
44
|
-
|
|
45
|
-
transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
|
|
51
|
+
topCenter: (transform: translate(-50%, calc(-100% - #{$g})),
|
|
52
|
+
icon: (bottom: -#{$tip},
|
|
53
|
+
left: calc(50% - #{$ics}),
|
|
46
54
|
border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
|
|
47
55
|
),
|
|
48
56
|
),
|
|
49
|
-
topRight: (transform: translate(calc(-
|
|
50
|
-
icon: (bottom:
|
|
51
|
-
left: #{$bm},
|
|
52
|
-
transform: translate(calc(-100% + (#{$ics} * 1.25)), calc(100% + #{$ics})),
|
|
57
|
+
topRight: (transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
|
|
58
|
+
icon: (bottom: -#{$tip},
|
|
59
|
+
left: calc(#{$bm} - #{$ics}),
|
|
53
60
|
border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
|
|
54
61
|
),
|
|
55
62
|
),
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
63
|
+
// tooltip to the RIGHT — tip on its left edge, pointing left
|
|
64
|
+
rightTop: (transform: translate(#{$g}, calc(-100% + #{$bm})),
|
|
65
|
+
icon: (left: -#{$tip},
|
|
66
|
+
bottom: calc(#{$bm} - #{$ics}),
|
|
60
67
|
border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
|
|
61
68
|
),
|
|
62
69
|
),
|
|
63
|
-
rightCenter: (transform: translate(
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
left: 0px,
|
|
67
|
-
transform: translate(calc(-100% - #{$ics}), calc(50% + (0px * 1.75))),
|
|
70
|
+
rightCenter: (transform: translate(#{$g}, -50%),
|
|
71
|
+
icon: (left: -#{$tip},
|
|
72
|
+
top: calc(50% - #{$ics}),
|
|
68
73
|
border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
|
|
69
74
|
),
|
|
70
75
|
),
|
|
71
|
-
rightBottom: (transform: translate(
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
left: 0,
|
|
75
|
-
transform: translate(calc(-100% - #{$ics}), calc(-100% - (#{$bm} * 2.05))),
|
|
76
|
+
rightBottom: (transform: translate(#{$g}, calc(0% - #{$bm})),
|
|
77
|
+
icon: (left: -#{$tip},
|
|
78
|
+
top: calc(#{$bm} - #{$ics}),
|
|
76
79
|
border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
|
|
77
80
|
),
|
|
78
81
|
),
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
icon: (
|
|
82
|
-
|
|
83
|
-
transform: translate(calc(50% + (#{$ics} * 0.75)), calc(-100% - #{$ics})),
|
|
82
|
+
// tooltip BELOW — tip on its top edge, pointing up
|
|
83
|
+
bottomLeft: (transform: translate(calc(-100% + #{$bm}), #{$g}),
|
|
84
|
+
icon: (top: -#{$tip},
|
|
85
|
+
right: calc(#{$bm} - #{$ics}),
|
|
84
86
|
border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
|
|
85
87
|
),
|
|
86
88
|
),
|
|
87
|
-
bottomCenter: (transform: translate(
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
top: 0,
|
|
91
|
-
transform: translate(calc(0% + (#{$ics} * 2.75)), calc(-100% - #{$ics})),
|
|
89
|
+
bottomCenter: (transform: translate(-50%, #{$g}),
|
|
90
|
+
icon: (top: -#{$tip},
|
|
91
|
+
left: calc(50% - #{$ics}),
|
|
92
92
|
border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
|
|
93
93
|
),
|
|
94
94
|
),
|
|
95
|
-
bottomRight: (transform: translate(calc(0% - #{$bm}),
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
top: 0,
|
|
99
|
-
transform: translate(calc(-50% - (#{$ics} * 1.25)), calc(-100% - #{$ics})),
|
|
95
|
+
bottomRight: (transform: translate(calc(0% - #{$bm}), #{$g}),
|
|
96
|
+
icon: (top: -#{$tip},
|
|
97
|
+
left: calc(#{$bm} - #{$ics}),
|
|
100
98
|
border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
|
|
101
99
|
),
|
|
102
100
|
),
|
|
@@ -104,6 +102,17 @@ $data: (
|
|
|
104
102
|
|
|
105
103
|
[data-div-type="element"] {
|
|
106
104
|
&[data-element-type="imageHotspot"] {
|
|
105
|
+
// Half the marker as it actually renders, and the gap the tooltip keeps from
|
|
106
|
+
// the marker's centre. Both are driven by the size controls rather than by
|
|
107
|
+
// literals, so the tip lands on the marker at any size.
|
|
108
|
+
--_sf-ht-hf: calc(#{prepareMediaVariable(--_ctm-dn-ht-se-ht-se, 30px)} / 2);
|
|
109
|
+
--_sf-tp-gp: calc(var(--_sf-ht-hf) + #{$ics});
|
|
110
|
+
|
|
111
|
+
// the icon marker is sized by its svg plus .hotspot__icon's 4px padding
|
|
112
|
+
&[data-hotspot-style="icon"] {
|
|
113
|
+
--_sf-ht-hf: calc((#{prepareMediaVariable(--_ctm-dn-ht-se-in-se, 30px)} + 8px) / 2);
|
|
114
|
+
}
|
|
115
|
+
|
|
107
116
|
&[data-hotspot-position] {
|
|
108
117
|
@each $key, $value in $data {
|
|
109
118
|
&[data-hotspot-position="#{$key}"] {
|
|
@@ -175,11 +184,11 @@ $data: (
|
|
|
175
184
|
min-width: 100px;
|
|
176
185
|
width: prepareMediaVariable(--_ctm-dn-tp-dn-tp-wh);
|
|
177
186
|
min-height: 100px;
|
|
178
|
-
height: prepareMediaVariable(--_ctm-dn-tp-dn-
|
|
187
|
+
height: prepareMediaVariable(--_ctm-dn-tp-dn-ht);
|
|
179
188
|
top: var(--_sf-im-psn-tp, 0);
|
|
180
189
|
left: var(--_sf-im-psn-lt, 0);
|
|
181
190
|
|
|
182
|
-
padding:
|
|
191
|
+
padding: prepareMediaVariable(--_ctm-dn-tp-dn-pg);
|
|
183
192
|
display: flex;
|
|
184
193
|
justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
|
|
185
194
|
align-items: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
|
|
@@ -192,64 +201,304 @@ $data: (
|
|
|
192
201
|
border-style: solid;
|
|
193
202
|
}
|
|
194
203
|
|
|
195
|
-
|
|
204
|
+
|
|
205
|
+
.tooltip__image_with_text {
|
|
206
|
+
display: flex;
|
|
207
|
+
// justify-content: center;
|
|
208
|
+
gap: prepareMediaVariable(--_ctm-dn-tp-dn-im-gp);
|
|
196
209
|
overflow-y: auto;
|
|
210
|
+
height: 100%;
|
|
197
211
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
font-style: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ft-se-ic);
|
|
205
|
-
text-align: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-an);
|
|
206
|
-
letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lr-sg);
|
|
207
|
-
line-height: prepareMediaVariable(--_ctm-dn-tp-tt-dn-le-ht);
|
|
208
|
-
text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-dn-ue);
|
|
212
|
+
&.hrz {
|
|
213
|
+
flex-direction: row;
|
|
214
|
+
|
|
215
|
+
.tooltip__image {
|
|
216
|
+
flex-direction: column;
|
|
217
|
+
}
|
|
209
218
|
}
|
|
210
219
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
text-align: prepareMediaVariable(--_ctm-dn-tp-tt-dn-tt-an-dc);
|
|
218
|
-
letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lr-sg-dc);
|
|
219
|
-
line-height: prepareMediaVariable(--_ctm-dn-tp-tt-dn-le-ht-dc);
|
|
220
|
-
text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-dn-lh-dc);
|
|
220
|
+
&.vtl {
|
|
221
|
+
flex-direction: column;
|
|
222
|
+
|
|
223
|
+
.tooltip__image {
|
|
224
|
+
flex-direction: row;
|
|
225
|
+
}
|
|
221
226
|
}
|
|
222
|
-
}
|
|
223
227
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
228
|
+
.tooltip__image {
|
|
229
|
+
height: 100%;
|
|
230
|
+
width: 100%;
|
|
231
|
+
background-color: prepareMediaVariable(--_ctm-dn-tp-ie-bd-cr);
|
|
232
|
+
transition: transform 0.3s ease-in-out;
|
|
233
|
+
display: flex;
|
|
234
|
+
justify-content: prepareMediaVariable(--_ctm-dn-tp-ie-hl-at);
|
|
235
|
+
align-items: prepareMediaVariable(--_ctm-dn-tp-ie-vl-at);
|
|
236
|
+
|
|
237
|
+
img {
|
|
238
|
+
object-fit: prepareMediaVariable(--_ctm-dn-tp-ie-ft-os);
|
|
239
|
+
height: prepareMediaVariable(--_ctm-dn-tp-ie-ht);
|
|
240
|
+
width: prepareMediaVariable(--_ctm-dn-tp-ie-wh);
|
|
241
|
+
// max-width: 100%;
|
|
242
|
+
rotate: calc(#{prepareMediaVariable(--_ctm-dn-tp-ie-re)} * 1deg);
|
|
243
|
+
scale: prepareMediaVariable(--_ctm-dn-tp-ie-zm-ie);
|
|
244
|
+
border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-br-rs);
|
|
245
|
+
|
|
246
|
+
&:hover {
|
|
247
|
+
&[data-on-img-hover="Zoom In"] {
|
|
248
|
+
transform: scale(1.08);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
&[data-on-img-hover="Zoom Out"] {
|
|
252
|
+
transform: scale(0.92);
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.text_box {
|
|
259
|
+
display: flex;
|
|
260
|
+
flex-direction: column;
|
|
261
|
+
gap: prepareMediaVariable(--_ctm-dn-tp-tt-wr-im-gp);
|
|
262
|
+
|
|
263
|
+
span {
|
|
264
|
+
font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
|
|
265
|
+
font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy);
|
|
266
|
+
color: prepareMediaVariable(--_ctm-dn-tp-tt-cr);
|
|
267
|
+
|
|
268
|
+
font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt);
|
|
269
|
+
font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic);
|
|
270
|
+
text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an);
|
|
271
|
+
letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg);
|
|
272
|
+
line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht);
|
|
273
|
+
text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-ue);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
p {
|
|
277
|
+
font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-dc);
|
|
278
|
+
color: prepareMediaVariable(--_ctm-dn-tp-tt-cr-dc);
|
|
279
|
+
font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy-dc);
|
|
280
|
+
font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt-dc);
|
|
281
|
+
font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic-dc);
|
|
282
|
+
text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an-dc);
|
|
283
|
+
letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg-dc);
|
|
284
|
+
line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht-dc);
|
|
285
|
+
text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-lh-dc);
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.btn__with__text[data-btn-name="tooltipButton"] {
|
|
290
|
+
width: 100%;
|
|
291
|
+
|
|
292
|
+
&[data-show-shadow="false"] {
|
|
293
|
+
--_show-shadow: none;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
&[data-icon-position="left"] {
|
|
297
|
+
--_sf-fd-bn: row;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
&[data-icon-position="right"] {
|
|
301
|
+
--_sf-fd-bn: row-reverse;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
&[data-icon-position="center"] {
|
|
305
|
+
--_sf-fd-bn: row;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
span {
|
|
309
|
+
svg rect {
|
|
310
|
+
fill: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-cr));
|
|
311
|
+
}
|
|
312
|
+
}
|
|
241
313
|
|
|
242
314
|
&:hover {
|
|
243
|
-
|
|
244
|
-
|
|
315
|
+
--_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-bd-cr)};
|
|
316
|
+
// @include BgColorLighter(var(--_sf-hr-cr), 5%);
|
|
317
|
+
--_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-cr)};
|
|
318
|
+
--_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-se)};
|
|
319
|
+
--_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-wh)};
|
|
320
|
+
--_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-br-rs)};
|
|
321
|
+
--_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-at)};
|
|
322
|
+
--_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-gp)};
|
|
323
|
+
|
|
324
|
+
// for shadow
|
|
325
|
+
--_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-sw-ae)};
|
|
326
|
+
--_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-sw-br)};
|
|
327
|
+
--_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-sw-hr)};
|
|
328
|
+
--_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-tp-bn-hr-se-sw-cr)};
|
|
329
|
+
// for font
|
|
330
|
+
|
|
331
|
+
--_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-cr)};
|
|
332
|
+
--_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-fy)};
|
|
333
|
+
--_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-se)};
|
|
334
|
+
--_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-wt)};
|
|
335
|
+
--_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ft-se-ic)};
|
|
336
|
+
--_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-tt-an)};
|
|
337
|
+
--_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-lr-sg)};
|
|
338
|
+
--_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-le-ht)};
|
|
339
|
+
|
|
340
|
+
--_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-in-se)};
|
|
341
|
+
--_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-in-se)};
|
|
342
|
+
--_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-in-c1)};
|
|
343
|
+
--_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-ue)};
|
|
344
|
+
|
|
345
|
+
// for pading and width
|
|
346
|
+
--_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-pg)};
|
|
347
|
+
--_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-tp-bn-hr-se-wh)};
|
|
348
|
+
|
|
349
|
+
&[data-hover-show-shadow="false"] {
|
|
350
|
+
--_hover-show-shadow: none;
|
|
245
351
|
}
|
|
246
352
|
|
|
247
|
-
&[data-
|
|
248
|
-
|
|
353
|
+
&[data-hover-show-icon="false"] {
|
|
354
|
+
--_hover-show-icon: none;
|
|
249
355
|
}
|
|
250
356
|
}
|
|
357
|
+
|
|
358
|
+
background-color: var(--_sf-hr-bd-cr,
|
|
359
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-bd-cr));
|
|
360
|
+
|
|
361
|
+
padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-pg));
|
|
362
|
+
width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wh));
|
|
363
|
+
display: flex;
|
|
364
|
+
flex-direction: var(--_sf-fd-bn);
|
|
365
|
+
align-items: center;
|
|
366
|
+
|
|
367
|
+
justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-at));
|
|
368
|
+
gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-gp));
|
|
369
|
+
|
|
370
|
+
border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-rs));
|
|
371
|
+
|
|
372
|
+
box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-cr));
|
|
373
|
+
|
|
374
|
+
&[data-show-border="true"] {
|
|
375
|
+
border-color: var(--_sf-hr-br-cr,
|
|
376
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-cr));
|
|
377
|
+
|
|
378
|
+
border-style: var(--_sf-hr-br-se,
|
|
379
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-se));
|
|
380
|
+
|
|
381
|
+
border-width: var(--_sf-hr-br-wh,
|
|
382
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-wh));
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.txt {
|
|
386
|
+
display: flex;
|
|
387
|
+
|
|
388
|
+
color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-cr));
|
|
389
|
+
|
|
390
|
+
font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-fy));
|
|
391
|
+
|
|
392
|
+
font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se));
|
|
393
|
+
|
|
394
|
+
font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-wt));
|
|
395
|
+
|
|
396
|
+
font-style: var(--_sf-hr-ft-se-ic,
|
|
397
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se-ic));
|
|
398
|
+
|
|
399
|
+
text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-tt-an));
|
|
400
|
+
|
|
401
|
+
letter-spacing: var(--_sf-hr-lr-sg,
|
|
402
|
+
prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-lr-sg));
|
|
403
|
+
|
|
404
|
+
line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-le-ht));
|
|
405
|
+
|
|
406
|
+
text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.icon {
|
|
410
|
+
display: var(--_hover-show-icon, var(--_show-icon, flex));
|
|
411
|
+
|
|
412
|
+
svg {
|
|
413
|
+
width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-in-se));
|
|
414
|
+
height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-in-se));
|
|
415
|
+
|
|
416
|
+
path {
|
|
417
|
+
stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-in-c1));
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
[data-element-style="Text"] {
|
|
423
|
+
display: inline-block;
|
|
424
|
+
width: 100%;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.icon--hover {
|
|
428
|
+
display: none;
|
|
429
|
+
transition: opacity 0.2s ease;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
&:hover .icon--hover {
|
|
433
|
+
// opacity: 1;
|
|
434
|
+
display: flex;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
&:hover .icon--default {
|
|
438
|
+
// opacity: 0;
|
|
439
|
+
display: none;
|
|
440
|
+
}
|
|
251
441
|
}
|
|
252
442
|
}
|
|
443
|
+
|
|
444
|
+
// .text_box {
|
|
445
|
+
// overflow-y: auto;
|
|
446
|
+
|
|
447
|
+
// h6 {
|
|
448
|
+
// font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
|
|
449
|
+
// font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy);
|
|
450
|
+
// color: prepareMediaVariable(--_ctm-dn-tp-tt-cr);
|
|
451
|
+
|
|
452
|
+
// font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt);
|
|
453
|
+
// font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic);
|
|
454
|
+
// text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an);
|
|
455
|
+
// letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg);
|
|
456
|
+
// line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht);
|
|
457
|
+
// text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-ue);
|
|
458
|
+
// }
|
|
459
|
+
|
|
460
|
+
// p {
|
|
461
|
+
// font-size: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-dc);
|
|
462
|
+
// color: prepareMediaVariable(--_ctm-dn-tp-tt-cr-dc);
|
|
463
|
+
// font-family: prepareMediaVariable(--_ctm-dn-tp-tt-ft-fy-dc);
|
|
464
|
+
// font-weight: prepareMediaVariable(--_ctm-dn-tp-tt-ft-wt-dc);
|
|
465
|
+
// font-style: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se-ic-dc);
|
|
466
|
+
// text-align: prepareMediaVariable(--_ctm-dn-tp-tt-tt-an-dc);
|
|
467
|
+
// letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg-dc);
|
|
468
|
+
// line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht-dc);
|
|
469
|
+
// text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-lh-dc);
|
|
470
|
+
// }
|
|
471
|
+
// }
|
|
472
|
+
|
|
473
|
+
// .tooltip__image {
|
|
474
|
+
// height: 100%;
|
|
475
|
+
// width: 100%;
|
|
476
|
+
// background-color: prepareMediaVariable(--_ctm-dn-tp-ie-bd-cr);
|
|
477
|
+
// transition: transform 0.3s ease-in-out;
|
|
478
|
+
// display: flex;
|
|
479
|
+
// justify-content: prepareMediaVariable(--_ctm-dn-tp-ie-hl-at);
|
|
480
|
+
// align-items: prepareMediaVariable(--_ctm-dn-tp-ie-vl-at);
|
|
481
|
+
|
|
482
|
+
|
|
483
|
+
// img {
|
|
484
|
+
// object-fit: prepareMediaVariable(--_ctm-dn-tp-ie-ft-os);
|
|
485
|
+
// height: -webkit-fill-available;
|
|
486
|
+
// max-width: 100%;
|
|
487
|
+
// rotate: calc(#{prepareMediaVariable(--_ctm-dn-tp-ie-re)} * 1deg);
|
|
488
|
+
// scale: prepareMediaVariable(--_ctm-dn-tp-ie-zm-ie);
|
|
489
|
+
// border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-br-rs);
|
|
490
|
+
|
|
491
|
+
// &:hover {
|
|
492
|
+
// &[data-on-img-hover="Zoom In"] {
|
|
493
|
+
// transform: scale(1.08);
|
|
494
|
+
// }
|
|
495
|
+
|
|
496
|
+
// &[data-on-img-hover="Zoom Out"] {
|
|
497
|
+
// transform: scale(0.92);
|
|
498
|
+
// }
|
|
499
|
+
// }
|
|
500
|
+
// }
|
|
501
|
+
// }
|
|
253
502
|
}
|
|
254
503
|
}
|
|
255
504
|
}
|
|
@@ -295,17 +544,17 @@ $data: (
|
|
|
295
544
|
|
|
296
545
|
&[data-hotspot-tooltip-image-style-show-border="true"] {
|
|
297
546
|
.tooltip__image {
|
|
298
|
-
border-style: prepareMediaVariable(--_ctm-dn-tp-ie-
|
|
299
|
-
border-color: prepareMediaVariable(--_ctm-dn-tp-ie-
|
|
300
|
-
border-width: prepareMediaVariable(--_ctm-dn-tp-ie-
|
|
301
|
-
border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-
|
|
547
|
+
border-style: prepareMediaVariable(--_ctm-dn-tp-ie-br-se);
|
|
548
|
+
border-color: prepareMediaVariable(--_ctm-dn-tp-ie-br-cr);
|
|
549
|
+
border-width: prepareMediaVariable(--_ctm-dn-tp-ie-br-wh);
|
|
550
|
+
border-radius: prepareMediaVariable(--_ctm-dn-tp-ie-br-rs);
|
|
302
551
|
}
|
|
303
552
|
}
|
|
304
553
|
|
|
305
554
|
&[data-hotspot-tooltip-image-style-show-shadow="true"] {
|
|
306
555
|
.tooltip__image {
|
|
307
556
|
box-shadow: var(--_show-shadow,
|
|
308
|
-
prepareMediaVariable(--_ctm-dn-tp-ie-
|
|
557
|
+
prepareMediaVariable(--_ctm-dn-tp-ie-sw-ae) prepareMediaVariable(--_ctm-dn-tp-ie-sw-br) prepareMediaVariable(--_ctm-dn-tp-ie-sw-sd) prepareMediaVariable(--_ctm-dn-tp-ie-sw-cr));
|
|
309
558
|
}
|
|
310
559
|
}
|
|
311
560
|
|
|
@@ -388,6 +637,21 @@ $data: (
|
|
|
388
637
|
background: prepareMediaVariable(--_ctm-dn-ht-se-bd-cr);
|
|
389
638
|
border-radius: prepareMediaVariable(--_ctm-dn-ht-se-br-rs);
|
|
390
639
|
padding: 4px;
|
|
640
|
+
// centre on the anchor point, matching .hotspot. Uses translate rather
|
|
641
|
+
// than transform so scaleInOut's transform cannot override it.
|
|
642
|
+
position: absolute;
|
|
643
|
+
top: 50%;
|
|
644
|
+
left: 50%;
|
|
645
|
+
translate: -50% -50%;
|
|
646
|
+
animation: scaleInOut prepareMediaVariable(--_ctm-dn-ht-se-an-fy) infinite;
|
|
647
|
+
|
|
648
|
+
&[data-hotspot-shape="circle"] {
|
|
649
|
+
border-radius: 50%;
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
&[data-hotspot-shape="any"] {
|
|
653
|
+
border-radius: prepareMediaVariable(--_ctm-dn-ht-se-br-rs);
|
|
654
|
+
}
|
|
391
655
|
|
|
392
656
|
span {
|
|
393
657
|
svg {
|
|
@@ -403,8 +667,8 @@ $data: (
|
|
|
403
667
|
|
|
404
668
|
.hotspot {
|
|
405
669
|
background: prepareMediaVariable(--_ctm-dn-ht-se-bd-cr);
|
|
406
|
-
|
|
407
|
-
|
|
670
|
+
height: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
|
|
671
|
+
width: prepareMediaVariable(--_ctm-dn-tp-tt-ft-se);
|
|
408
672
|
position: absolute;
|
|
409
673
|
cursor: pointer;
|
|
410
674
|
width: prepareMediaVariable(--_ctm-dn-ht-se-ht-se);
|
|
@@ -414,7 +678,9 @@ $data: (
|
|
|
414
678
|
align-items: center;
|
|
415
679
|
top: 50%;
|
|
416
680
|
left: 50%;
|
|
417
|
-
transform:
|
|
681
|
+
// translate, not transform: scaleInOut animates transform and would
|
|
682
|
+
// otherwise override the centring whenever a frequency is set.
|
|
683
|
+
translate: -50% -50%;
|
|
418
684
|
box-sizing: border-box;
|
|
419
685
|
justify-content: center;
|
|
420
686
|
animation: scaleInOut prepareMediaVariable(--_ctm-dn-ht-se-an-fy) infinite;
|
|
@@ -6,10 +6,12 @@ interface selfLayoutInterface {
|
|
|
6
6
|
}
|
|
7
7
|
export interface selfDesignInterface {
|
|
8
8
|
selectorKey: string;
|
|
9
|
+
formContainer: any;
|
|
9
10
|
}
|
|
10
11
|
export declare enum createFormSelectorKeysEnum {
|
|
11
12
|
LAYOUT = "layout",
|
|
12
|
-
DESIGN = "design"
|
|
13
|
+
DESIGN = "design",
|
|
14
|
+
FORM_CONTAINER = "formContainer"
|
|
13
15
|
}
|
|
14
16
|
export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
|
|
15
17
|
export {};
|
|
@@ -60,6 +60,12 @@ export interface selfDesignInterface {
|
|
|
60
60
|
borderRadius?: CMSIBCommonInterface;
|
|
61
61
|
};
|
|
62
62
|
divider: any;
|
|
63
|
+
infoIcon?: any & {
|
|
64
|
+
selectorKey?: string;
|
|
65
|
+
showIcon?: CMSIBCommonInterface;
|
|
66
|
+
iconColor?: CMSIBCommonInterface;
|
|
67
|
+
iconSize?: CMSIBCommonInterface;
|
|
68
|
+
};
|
|
63
69
|
}
|
|
64
70
|
export declare enum ButtonSelectorKeysEnum {
|
|
65
71
|
LAYOUT = "layout",
|
|
@@ -67,7 +73,8 @@ export declare enum ButtonSelectorKeysEnum {
|
|
|
67
73
|
FAQ_WIDGET = "faqWidget",
|
|
68
74
|
COLLAPSED_ACCRORDION_ITEM = "collapsedAccordionItem",
|
|
69
75
|
EXPANDED_ACCRORDION_ITEM = "expandedAccordionItem",
|
|
70
|
-
DIVIDER = "divider"
|
|
76
|
+
DIVIDER = "divider",
|
|
77
|
+
INFO_ICON = "infoIcon"
|
|
71
78
|
}
|
|
72
79
|
export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
|
|
73
80
|
export {};
|