@sc-360-v2/storefront-cms-library 0.1.3 → 0.1.5

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.
Files changed (54) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/button.scss +75 -34
  3. package/dist/code-temp.scss +58 -0
  4. package/dist/container.scss +17 -0
  5. package/dist/countdown.scss +378 -0
  6. package/dist/editor-core.scss +312 -0
  7. package/dist/embed-temp.scss +58 -0
  8. package/dist/faq.scss +242 -0
  9. package/dist/functions.scss +133 -0
  10. package/dist/gallery-slider-temp.scss +410 -0
  11. package/dist/grid.scss +34 -0
  12. package/dist/hotspot.scss +250 -0
  13. package/dist/image-temp.scss +75 -0
  14. package/dist/map.scss +280 -0
  15. package/dist/pickup-locations.scss +180 -0
  16. package/dist/product-actions.scss +180 -0
  17. package/dist/product-inventory.scss +180 -0
  18. package/dist/product-price.scss +61 -0
  19. package/dist/scroll.scss +157 -0
  20. package/dist/section.scss +60 -0
  21. package/dist/social.scss +166 -0
  22. package/dist/store-locations.scss +180 -0
  23. package/dist/table.scss +373 -0
  24. package/dist/text-temp.scss +58 -0
  25. package/dist/types/builder/elements/paymentMethods/index.d.ts +26 -0
  26. package/dist/types/builder/elements/pickup-locations/index.d.ts +26 -0
  27. package/dist/types/builder/elements/product-actions/index.d.ts +26 -0
  28. package/dist/types/builder/elements/product-inventory/index.d.ts +26 -0
  29. package/dist/types/builder/elements/productDetails/index.d.ts +67 -0
  30. package/dist/types/builder/elements/productHighlights/index.d.ts +26 -0
  31. package/dist/types/builder/elements/productPrice/index.d.ts +29 -0
  32. package/dist/types/builder/elements/section/index.d.ts +1 -0
  33. package/dist/types/builder/elements/shippingEstimator/index.d.ts +26 -0
  34. package/dist/types/builder/elements/store-locations/index.d.ts +26 -0
  35. package/dist/types/builder/elements/volumePricing/index.d.ts +26 -0
  36. package/dist/types/builder/enums/index.d.ts +2 -1
  37. package/dist/types/builder/index.d.ts +10 -1
  38. package/dist/types/builder/tools/element-edit/common.d.ts +3 -0
  39. package/dist/types/builder/tools/element-edit/gallery-slider.d.ts +12 -2
  40. package/dist/types/builder/tools/element-edit/index.d.ts +10 -1
  41. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +37 -0
  42. package/dist/types/builder/tools/element-edit/pickupLocations.d.ts +22 -0
  43. package/dist/types/builder/tools/element-edit/productActions.d.ts +55 -0
  44. package/dist/types/builder/tools/element-edit/productDetails.d.ts +42 -0
  45. package/dist/types/builder/tools/element-edit/productHighlights.d.ts +24 -0
  46. package/dist/types/builder/tools/element-edit/productInventory.d.ts +35 -0
  47. package/dist/types/builder/tools/element-edit/productPrice.d.ts +38 -0
  48. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +14 -0
  49. package/dist/types/builder/tools/element-edit/storeLocations.d.ts +24 -0
  50. package/dist/types/builder/tools/element-edit/volumePricing.d.ts +54 -0
  51. package/dist/video.scss +199 -0
  52. package/dist/volume-pricing.scss +28 -0
  53. package/dist/widget.scss +23 -1
  54. package/package.json +1 -1
package/dist/hotspot.scss ADDED
@@ -0,0 +1,250 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="imageHotspot"] {
6
+ // width: var(--_lt-wh);
7
+ // height: var(--_lt-ht);
8
+ // margin: var(--_lt-mn);
9
+ // padding: var(--_lt-pg);
10
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
+ width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
13
+ height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
14
+ // height: ;
15
+ aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
+ --_aspect-ratio: calc(
17
+ 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
+ );
19
+
20
+ & > .wrapper {
21
+ width: 100%;
22
+ position: relative;
23
+ }
24
+ &[data-show-shadow="false"] {
25
+ --_show-shadow: none;
26
+ }
27
+ &[data-hotspot-image-style-show-shadow="true"] {
28
+ .imageHotspot-element {
29
+ box-shadow: var(
30
+ --_show-shadow,
31
+ var(--_ctm-dn-ie-se-sw-ae) var(--_ctm-dn-ie-se-sw-br) var(--_ctm-dn-ie-se-sw-sd)
32
+ var(--_ctm-dn-ie-se-sw-cr)
33
+ );
34
+ }
35
+ }
36
+ &[data-hotspot-image-style-show-border="true"] {
37
+ .imageHotspot-element {
38
+ border-style: var(--_ctm-dn-ie-se-br-se);
39
+ border-color: var(--_ctm-dn-ie-se-br-cr);
40
+ border-width: var(--_ctm-dn-ie-se-br-wh);
41
+ border-radius: var(--_ctm-dn-ie-se-br-rs);
42
+ }
43
+ }
44
+ &[data-hotspot-tooltip-style-show-border="true"] {
45
+ .hotspot__tooltip {
46
+ border-style: var(--_ctm-dn-tp-dn-br-se);
47
+ border-color: var(--_ctm-dn-tp-dn-br-cr);
48
+ border-width: var(--_ctm-dn-tp-dn-br-wh);
49
+ border-radius: var(--_ctm-dn-tp-dn-br-rs);
50
+ }
51
+ }
52
+ &[data-hotspot-tooltip-style-show-shadow="true"] {
53
+ .hotspot__tooltip {
54
+ box-shadow: var(
55
+ --_show-shadow,
56
+ var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
57
+ var(--_ctm-dn-tp-dn-sw-cr)
58
+ );
59
+ }
60
+ }
61
+ &[data-hotspot-tooltip-image-style-show-border="true"] {
62
+ .tooltip__image {
63
+ border-style: var(--_ctm-dn-tp-ie-dn-br-se);
64
+ border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
65
+ border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
66
+ border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
67
+ }
68
+ }
69
+ &[data-hotspot-tooltip-image-style-show-shadow="true"] {
70
+ .tooltip__image {
71
+ box-shadow: var(
72
+ --_show-shadow,
73
+ var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br) var(--_ctm-dn-tp-ie-dn-sw-sd)
74
+ var(--_ctm-dn-tp-ie-dn-sw-cr)
75
+ );
76
+ }
77
+ }
78
+ &[data-hotspot-style-show-shadow="true"] {
79
+ .hotspot {
80
+ box-shadow: var(
81
+ --_show-shadow,
82
+ var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
83
+ var(--_ctm-dn-ht-se-sw-cr)
84
+ );
85
+ }
86
+ }
87
+ &[data-hotspot-style-show-border="true"] {
88
+ .hotspot {
89
+ border-style: var(--_ctm-dn-ht-se-br-se);
90
+ border-color: var(--_ctm-dn-ht-se-br-cr);
91
+ border-width: var(--_ctm-dn-ht-se-br-wh);
92
+ border-radius: var(--_ctm-dn-ht-se-br-rs);
93
+ }
94
+ }
95
+ // &[data-hotspot-position = "topLeft"]{
96
+ // .hotspot{
97
+ // top: var(--_ctm-dn-ht-tl-t);
98
+ // }
99
+ // }
100
+ .imageHotspot-element {
101
+ background-color: var(--_ctm-dn-ie-se-bd-cr);
102
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
103
+ display: flex;
104
+ flex-direction: column;
105
+ --_sf-gp: 16px;
106
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
107
+ row-gap: var(--_sf-gp);
108
+ width: 100%;
109
+ // height: 100%;
110
+ // transform: scale(var(--_ctm-dn-zm-ie));
111
+ scale: var(--_ctm-dn-ie-se-zm-ie);
112
+ transition: transform 0.3s ease-in-out;
113
+ rotate: calc(var(--_ctm-dn-ie-se-ud) * 1deg);
114
+
115
+ &:hover {
116
+ &[data-on-hover="Zoom Out"] {
117
+ transform: scale(0.9998);
118
+ }
119
+ &[data-on-hover="Zoom In"] {
120
+ transform: scale(1.08);
121
+ }
122
+ }
123
+ }
124
+
125
+ .img__overlay {
126
+ background: var(--_ctm-dn-ie-se-oy-cr);
127
+ height: 100%;
128
+ width: 100%;
129
+ position: absolute;
130
+ top: 0;
131
+ }
132
+ @keyframes scaleInOut {
133
+ 0% {
134
+ transform: scale(1);
135
+ }
136
+ 50% {
137
+ transform: scale(1.5);
138
+ }
139
+ 100% {
140
+ transform: scale(1);
141
+ }
142
+ }
143
+ .hotspot__container {
144
+ position: absolute;
145
+ .hotspot__main {
146
+ position: relative;
147
+ .hotspot {
148
+ background: var(--_ctm-dn-ht-se-bd-cr);
149
+ // height: var(--_ctm-dn-tp-tt-dn-ft-se);
150
+ // width: var(--_ctm-dn-tp-tt-dn-ft-se);
151
+ position: absolute;
152
+ cursor: pointer;
153
+ width: var(--_ctm-dn-ht-se-ht-se);
154
+ height: var(--_ctm-dn-ht-se-ht-se);
155
+ background-color: var(--_ctm-dn-ht-se-bd-cr);
156
+ display: flex;
157
+ align-items: center;
158
+ top: 50%;
159
+ left: 50%;
160
+ transform: translate(-50%, -50%);
161
+ box-sizing: border-box;
162
+ justify-content: center;
163
+ animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
164
+ &[data-hotspot-shape="circle"] {
165
+ border-radius: 50%;
166
+ }
167
+ &[data-hotspot-shape="any"] {
168
+ border-radius: var(--_ctm-dn-ht-se-br-rs);
169
+ }
170
+ span {
171
+ svg {
172
+ width: var(--_ctm-dn-ht-se-in-se);
173
+ height: var(--_ctm-dn-ht-se-in-se);
174
+ path {
175
+ stroke: var(--_ctm-dn-ht-se-in-c1);
176
+ }
177
+ }
178
+ }
179
+ }
180
+ .hotspot__tooltip {
181
+ position: absolute;
182
+ background: var(--_ctm-dn-tp-dn-bd-cr);
183
+ z-index: 1000;
184
+ min-width: 100px;
185
+ width: var(--_ctm-dn-tp-dn-tp-wh);
186
+ min-height: 100px;
187
+ height: var(--_ctm-dn-tp-dn-tp-ht);
188
+ // border-radius: 4px;
189
+ // transform: translate(-10%, -130%);
190
+ left: -15px;
191
+ bottom: 15px;
192
+ padding: 4px 8px;
193
+ display: flex;
194
+ justify-content: var(--_ctm-dn-tp-dn-hl-at);
195
+ align-items: var(--_ctm-dn-tp-dn-vl-at);
196
+
197
+ &::after {
198
+ content: "";
199
+ position: absolute;
200
+ top: 100%;
201
+ left: 20px;
202
+ margin-left: -5px;
203
+ border-width: 5px;
204
+ border-style: solid;
205
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent;
206
+ }
207
+ .text_box {
208
+ overflow-y: auto;
209
+ h6 {
210
+ font-size: var(--_ctm-dn-tp-tt-dn-ft-se);
211
+ font-family: var(--_ctm-dn-tp-tt-dn-ft-fy);
212
+ color: var(--_ctm-dn-tp-tt-dn-cr);
213
+
214
+ font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt);
215
+ font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic);
216
+ text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
217
+ letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
218
+ line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
219
+ text-decoration: var(--_ctm-dn-tp-tt-dn-lh, var(--_ctm-dn-tp-tt-dn-ue));
220
+ }
221
+ p {
222
+ font-size: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
223
+ color: var(--_ctm-dn-tp-tt-dn-cr-dc);
224
+ font-family: var(--_ctm-dn-tp-tt-dn-ft-fy-dc);
225
+ font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt-dc);
226
+ font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
227
+ text-align: var(--_ctm-dn-tp-tt-dn-tt-an-dc);
228
+ letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg-dc);
229
+ line-height: var(--_ctm-dn-tp-tt-dn-le-ht-dc);
230
+ text-decoration: var(--_ctm-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-ue-dc));
231
+ }
232
+ }
233
+ .tooltip__image {
234
+ background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
235
+ transition: transform 0.3s ease-in-out;
236
+ display: flex;
237
+ justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
238
+ align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
239
+ img {
240
+ object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
241
+ max-width: 100%;
242
+ rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
243
+ scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
244
+ }
245
+ }
246
+ }
247
+ }
248
+ }
249
+ }
250
+ }
package/dist/image-temp.scss ADDED
@@ -0,0 +1,75 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="image"] {
6
+ // width: var(--_lt-wh);
7
+ // height: var(--_lt-ht);
8
+ // margin: var(--_lt-mn);
9
+ // padding: var(--_lt-pg);
10
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
+ width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
13
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
14
+ // height: ;
15
+ aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
+ --_aspect-ratio: calc(
17
+ 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
+ );
19
+ &[data-cms-element-resizer="true"] {
20
+ // height: var(--_ctm-lt-ht);
21
+ width: auto;
22
+ img {
23
+ // width: 100%;
24
+ height: 100%;
25
+ }
26
+ }
27
+
28
+ & > .wrapper {
29
+ width: 100%;
30
+ overflow: clip;
31
+ // height: 100%;
32
+ }
33
+ &[data-show-shadow="false"] {
34
+ --_show-shadow: none;
35
+ }
36
+
37
+ .image-element {
38
+ background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
39
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
40
+ display: flex;
41
+ flex-direction: column;
42
+ --_sf-gp: 16px;
43
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
44
+ row-gap: var(--_sf-gp);
45
+ width: 100%;
46
+ // height: 100%;
47
+ border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
48
+ border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
49
+ border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
50
+ border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
51
+ box-shadow: var(
52
+ --_show-shadow,
53
+ var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
54
+ var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
55
+ );
56
+
57
+ // transform: scale(var(--_ctm-dn-zm-ie));
58
+ scale: var(--_ctm-dn-zm-ie);
59
+ transition: transform 0.3s ease-in-out;
60
+ rotate: calc(var(--_ctm-dn-ud) * 1deg);
61
+
62
+ &:hover {
63
+ &[data-on-hover="Zoom Out"] {
64
+ transform: scale(0.9998);
65
+ }
66
+ &[data-on-hover="Zoom In"] {
67
+ transform: scale(1.08);
68
+ }
69
+ }
70
+ }
71
+ // .image-element:hover {
72
+ // padding: 30px;
73
+ // }
74
+ }
75
+ }
package/dist/map.scss ADDED
@@ -0,0 +1,280 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="map"] {
6
+ // width: var(--_lt-wh);
7
+ // height: var(--_lt-ht);
8
+ // margin: var(--_lt-mn);
9
+ // padding: var(--_lt-pg);
10
+ width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
+ // width: 50%;
12
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
+ margin: var(--_ctm-lt-mn, --_tst-lt-mn);
14
+ // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
15
+ // height: var(--_ctm-lt-ht);
16
+ // height: ;
17
+ // height: auto;
18
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
19
+ --_aspect-ratio: calc(
20
+ 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
21
+ );
22
+ & > .wrapper {
23
+ width: 100%;
24
+ // height: 100%;
25
+ }
26
+ &[data-show-shadow="false"] {
27
+ --_show-shadow: none;
28
+ }
29
+
30
+ .map-element {
31
+ --text-high-contrast-rgb-value: 49, 49, 49;
32
+ --detail-medium-contrast: rgb(234, 234, 234);
33
+ --text-body: rgb(54, 49, 61);
34
+
35
+ position: relative;
36
+ background-color: var(--_ctm-dn-mp-wt-bd-cr, var(--_tst-dn-mp-wt-bd-cr));
37
+ padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
38
+ display: flex;
39
+ flex-direction: column;
40
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
41
+
42
+ gap: var(--_ctm-dn-mp-wt-lt-mp-ad-tt-cr-sg);
43
+ align-content: var(--_ctm-dn-mp-wt-lt-mp-ad-tt-cr-sg, center);
44
+
45
+ width: 100%;
46
+ height: var(--_ctm-lt-ht, var(--_tst-lt-wh));
47
+
48
+ border-color: var(--_ctm-dn-mp-wt-br-cr, var(--_tst-dn-mp-wt-br-cr));
49
+ border-style: var(--_ctm-dn-mp-wt-br-se, var(--_tst-dn-mp-wt-br-se));
50
+ border-width: var(--_ctm-dn-mp-wt-br-wh, var(--_tst-dn-mp-wt-br-wh));
51
+ border-radius: var(--_ctm-dn-mp-wt-br-rs, var(--_tst-dn-mp-wt-br-rs));
52
+ box-shadow: var(
53
+ --_show-shadow,
54
+ var(--_ctm-dn-mp-wt-sw-ae, var(--_tst-dn-mp-wt-sw-ae))
55
+ var(--_ctm-dn-mp-wt-sw-br, var(--_tst-dn-mp-wt-sw-br))
56
+ var(--_ctm-dn-mp-wt-sw-sd, var(--_tst-dn-mp-wt-sw-sd))
57
+ var(--_ctm-dn-mp-wt-sw-cr, var(--_tst-dn-mp-wt-sw-cr))
58
+ );
59
+
60
+ .gallery-header {
61
+ text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
62
+ // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
63
+ display: flex;
64
+ flex-direction: column;
65
+
66
+ gap: var(--_ctm-dn-mp-wt-tt-cr-lt-te-ad-dn-sg);
67
+ padding-block: var(--_ctm-dn-mp-wt-tt-cr-lt-tt-vl-pg);
68
+ padding-inline: var(--_ctm-dn-mp-wt-tt-cr-lt-tt-hl-pg);
69
+ background-color: var(--_ctm-dn-mp-wt-tt-cr-dn-bd-cr, var(--_tst-dn-mp-wt-tt-cr-dn-bd-cr));
70
+ width: 100%;
71
+ border-color: var(--_ctm-dn-mp-wt-tt-cr-dn-br-cr, var(--_tst-dn-mp-wt-tt-cr-dn-br-cr));
72
+ border-style: var(--_ctm-dn-mp-wt-tt-cr-dn-br-se, var(--_tst-dn-mp-wt-tt-cr-dn-br-se));
73
+ border-width: var(--_ctm-dn-mp-wt-tt-cr-dn-br-wh, var(--_tst-dn-mp-wt-tt-cr-dn-br-wh));
74
+ border-radius: var(--_ctm-dn-mp-wt-tt-cr-dn-br-rs, var(--_tst-dn-mp-wt-tt-cr-dn-br-rs));
75
+ box-shadow: var(
76
+ --_show-shadow,
77
+ var(--_ctm-dn-mp-wt-tt-cr-dn-sw-ae, var(--_tst-dn-mp-wt-tt-cr-dn-sw-ae))
78
+ var(--_ctm-dn-mp-wt-tt-cr-dn-sw-br, var(--_tst-dn-mp-wt-tt-cr-dn-sw-br))
79
+ var(--_ctm-dn-mp-wt-tt-cr-dn-sw-sd, var(--_tst-dn-mp-wt-tt-cr-dn-sw-sd))
80
+ var(--_ctm-dn-mp-wt-tt-cr-dn-sw-cr, var(--_tst-dn-mp-wt-sw-cr))
81
+ );
82
+
83
+ & h3 {
84
+ color: var(--_ctm-dn-mp-wt-cr, var(--_tst-dn-mp-wt-cr));
85
+ font-family: var(--_ctm-dn-mp-wt-ft-fy, var(--_tst-dn-mp-wt-ft-fy)), sans-serif;
86
+ font-size: var(--_ctm-dn-mp-wt-ft-se, var(--_tst-dn-mp-wt-ft-se));
87
+ font-weight: var(--_ctm-dn-mp-wt-ft-wt, var(--_tst-dn-mp-wt-ft-wt));
88
+ font-style: var(--_ctm-dn-mp-wt-ft-se-ic, var(--_tst-dn-mp-wt-ft-se-ic));
89
+ text-align: var(--_ctm-dn-mp-wt-tt-an, var(--_tst-dn-mp-wt-tt-an));
90
+ letter-spacing: var(--_ctm-dn-mp-wt-lr-sg, var(--_tst-dn-mp-wt-lr-sg));
91
+ line-height: var(--_ctm-dn-mp-wt-le-ht, var(--_tst-dn-mp-wt-le-ht));
92
+ text-decoration: var(
93
+ --_ctm-dn-mp-wt-lh,
94
+ var(--_ctm-dn-mp-wt-ue),
95
+ var(--_tst-dn-mp-wt-lh)
96
+ );
97
+ }
98
+ & p {
99
+ color: var(--_ctm-dn-mp-wt-cr-dc, var(--_tst-dn-mp-wt-cr-dc));
100
+ font-family: var(--_ctm-dn-mp-wt-ft-fy-dc, var(--_tst-dn-mp-wt-ft-fy-dc)), sans-serif;
101
+ font-size: var(--_ctm-dn-mp-wt-ft-se-dc, var(--_tst-dn-mp-wt-ft-se-dc));
102
+ font-weight: var(--_ctm-dn-mp-wt-ft-wt-dc, var(--_tst-dn-mp-wt-ft-wt-dc));
103
+ font-style: var(--_ctm-dn-mp-wt-ft-se-ic-dc, var(--_tst-dn-mp-wt-ft-se-ic-dc));
104
+ text-align: var(--_ctm-dn-mp-wt-tt-an-dc, var(--_tst-dn-mp-wt-tt-an-dc));
105
+ letter-spacing: var(--_ctm-dn-mp-wt-lr-sg-dc, var(--_tst-dn-mp-wt-lr-sg-dc));
106
+ line-height: var(--_ctm-dn-mp-wt-le-ht-dc, var(--_tst-dn-mp-wt-le-ht-dc));
107
+ text-decoration: var(
108
+ --_ctm-dn-mp-wt-lh-dc,
109
+ var(--_ctm-dn-mp-wt-ue-dc),
110
+ var(--_tst-dn-mp-wt-lh)
111
+ );
112
+ }
113
+ // h3 {
114
+ // margin-bottom: var(--_mb-4);
115
+ // }
116
+ }
117
+
118
+ .img__overlay {
119
+ background: var(--_ctm-dn-ie-se-oy-cr);
120
+ height: 100%;
121
+ width: 100%;
122
+ position: absolute;
123
+ top: 0;
124
+ }
125
+ @keyframes scaleInOut {
126
+ 0% {
127
+ transform: scale(1);
128
+ }
129
+ 50% {
130
+ transform: scale(1.5);
131
+ }
132
+ 100% {
133
+ transform: scale(1);
134
+ }
135
+ }
136
+ .hotspot__main {
137
+ position: relative;
138
+ .hotspot {
139
+ background: var(--_ctm-dn-pn-se-bd-cr);
140
+ // height: var(--_ctm-dn-tp-tt-dn-ft-se);
141
+ // width: var(--_ctm-dn-tp-tt-dn-ft-se);
142
+ border-style: var(--_ctm-dn-pn-se-br-se);
143
+ border-color: var(--_ctm-dn-pn-se-br-cr);
144
+ border-width: var(--_ctm-dn-pn-se-br-wh);
145
+ border-radius: var(--_ctm-dn-pn-se-br-rs);
146
+ box-shadow: var(
147
+ --_show-shadow,
148
+ var(--_ctm-dn-pn-se-sw-ae) var(--_ctm-dn-pn-se-sw-br) var(--_ctm-dn-pn-se-sw-sd)
149
+ var(--_ctm-dn-pn-se-sw-cr)
150
+ );
151
+ position: absolute;
152
+ cursor: pointer;
153
+ width: var(--_ctm-dn-pn-se-ht-se);
154
+ height: var(--_ctm-dn-pn-se-ht-se);
155
+ background-color: var(--_ctm-dn-pn-se-bd-cr);
156
+ display: flex;
157
+ align-items: center;
158
+ top: 50%;
159
+ left: 50%;
160
+ transform: translate(-50%, -50%);
161
+ justify-content: center;
162
+ animation: scaleInOut var(--_ctm-dn-pn-se-an-fy) infinite;
163
+ .icon {
164
+ display: var(--_sf-show-icon-ff, flex);
165
+ svg {
166
+ width: var(--_ctm-dn-pn-se-in-se, var(--_tst-dn-pn-se-in-se));
167
+ height: var(--_ctm-dn-pn-se-in-se, var(--_tst-dn-pn-se-in-se));
168
+ path {
169
+ stroke: var(--_ctm-dn-pn-se-in-c1, var(--_tst-dn-pn-se-in-c1));
170
+ fill: var(--_ctm-dn-pn-se-in-c1, var(--_tst-dn-pn-se-in-c1));
171
+ }
172
+ }
173
+ }
174
+ }
175
+ .hotspot__tooltip {
176
+ position: absolute;
177
+ background: var(--_ctm-dn-tp-dn-bd-cr);
178
+ border-style: var(--_ctm-dn-tp-dn-br-se);
179
+ border-color: var(--_ctm-dn-tp-dn-br-cr);
180
+ border-width: var(--_ctm-dn-tp-dn-br-wh);
181
+ border-radius: var(--_ctm-dn-tp-dn-br-rs);
182
+ box-shadow: var(
183
+ --_show-shadow,
184
+ var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
185
+ var(--_ctm-dn-tp-dn-sw-cr)
186
+ );
187
+ z-index: 1000;
188
+ min-width: 100px;
189
+ width: var(--_ctm-dn-tp-dn-tp-wh);
190
+ min-height: 100px;
191
+ height: var(--_ctm-dn-tp-dn-tp-ht);
192
+ // border-radius: 4px;
193
+ // transform: translate(-10%, -130%);
194
+ left: -10px;
195
+ bottom: 7px;
196
+ padding: 4px 8px;
197
+ display: flex;
198
+ justify-content: var(--_ctm-dn-tp-dn-hl-at);
199
+ align-items: var(--_ctm-dn-tp-dn-vl-at);
200
+
201
+ &::after {
202
+ content: "";
203
+ position: absolute;
204
+ top: 100%;
205
+ left: 20px;
206
+ margin-left: -5px;
207
+ border-width: 5px;
208
+ border-style: solid;
209
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent;
210
+ }
211
+ span {
212
+ svg {
213
+ width: var(--_ctm-dn-pn-se-in-se);
214
+ height: var(--_ctm-dn-pn-se-in-se);
215
+ path {
216
+ stroke: var(--_ctm-dn-pn-se-in-c1);
217
+ }
218
+ }
219
+ }
220
+ .text_box {
221
+ h6 {
222
+ font-size: var(--_ctm-dn-tp-tt-dn-ft-se);
223
+ font-family: var(--_ctm-dn-tp-tt-dn-ft-fy);
224
+ color: var(--_ctm-dn-tp-tt-dn-cr);
225
+
226
+ font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt);
227
+ font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic);
228
+ text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
229
+ letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
230
+ line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
231
+ text-decoration: var(--_ctm-dn-tp-tt-dn-lh, var(--_ctm-dn-tp-tt-dn-ue));
232
+ }
233
+ p {
234
+ font-size: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
235
+ color: var(--_ctm-dn-tp-tt-dn-cr-dc);
236
+ font-family: var(--_ctm-dn-tp-tt-dn-ft-fy-dc);
237
+ font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt-dc);
238
+ font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
239
+ text-align: var(--_ctm-dn-tp-tt-dn-tt-an-dc);
240
+ letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg-dc);
241
+ line-height: var(--_ctm-dn-tp-tt-dn-le-ht-dc);
242
+ text-decoration: var(--_ctm-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-ue-dc));
243
+ }
244
+ }
245
+ .tooltip__image {
246
+ background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
247
+ transition: transform 0.3s ease-in-out;
248
+ border-style: var(--_ctm-dn-tp-ie-dn-br-se);
249
+ border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
250
+ border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
251
+ border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
252
+ box-shadow: var(
253
+ --_show-shadow,
254
+ var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br)
255
+ var(--_ctm-dn-tp-ie-dn-sw-sd) var(--_ctm-dn-tp-ie-dn-sw-cr)
256
+ );
257
+ display: flex;
258
+ justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
259
+ align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
260
+ img {
261
+ object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
262
+ max-width: 100%;
263
+ rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
264
+ scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
265
+ }
266
+ }
267
+ }
268
+ }
269
+
270
+ .map {
271
+ width: 100%;
272
+ height: 100%;
273
+ img {
274
+ width: 100%;
275
+ height: 100%;
276
+ }
277
+ }
278
+ }
279
+ }
280
+ }