@sc-360-v2/storefront-cms-library 0.2.94 → 0.2.95

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 (30) hide show
  1. package/dist/breadcrumbs.scss +574 -269
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +0 -14
  4. package/dist/button.scss +4 -1
  5. package/dist/cart-details.scss +176 -4
  6. package/dist/cartDropdownOverlay.scss +19 -4
  7. package/dist/grid.scss +21 -49
  8. package/dist/icon-list.scss +110 -0
  9. package/dist/map.scss +505 -334
  10. package/dist/product-image.scss +25 -7
  11. package/dist/quantity-selector.scss +1 -0
  12. package/dist/quick-order-pad.scss +2 -2
  13. package/dist/quotes.scss +660 -62
  14. package/dist/repeater-grid-toggle.scss +58 -0
  15. package/dist/repeater.scss +181 -151
  16. package/dist/rfqs.scss +661 -62
  17. package/dist/spotlight.scss +1608 -66
  18. package/dist/types/builder/elements/form-builder/index.d.ts +32 -0
  19. package/dist/types/builder/elements/order-status/index.d.ts +27 -0
  20. package/dist/types/builder/enums/index.d.ts +4 -1
  21. package/dist/types/builder/index.d.ts +2 -1
  22. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +15 -5
  23. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  24. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +15 -0
  25. package/dist/types/builder/tools/element-edit/quotes.d.ts +33 -3
  26. package/dist/types/builder/tools/element-edit/rfqs.d.ts +33 -3
  27. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +133 -10
  28. package/dist/variant-picker.scss +1 -0
  29. package/dist/widget.scss +1 -0
  30. package/package.json +1 -1
package/dist/map.scss CHANGED
@@ -90,7 +90,7 @@ $data: (
90
90
  ),
91
91
  ),
92
92
  bottomLeft: (
93
- transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.25))),
93
+ transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.70))),
94
94
  border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
95
95
  icon: (
96
96
  right: #{$bm},
@@ -100,7 +100,7 @@ $data: (
100
100
  ),
101
101
  ),
102
102
  bottomCenter: (
103
- transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.25))),
103
+ transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.70))),
104
104
  border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
105
105
  icon: (
106
106
  right: 50%,
@@ -110,7 +110,7 @@ $data: (
110
110
  ),
111
111
  ),
112
112
  bottomRight: (
113
- transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.25))),
113
+ transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.70))),
114
114
  border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
115
115
  icon: (
116
116
  left: 30px,
@@ -174,7 +174,69 @@ $data: (
174
174
  &[data-show-shadow="false"] {
175
175
  --_show-shadow: none;
176
176
  }
177
+ &[data-hotspot-position="topLeft"] {
178
+ --_show-shadow: none;
179
+ .hotspot__tooltip {
180
+ border-style: var(--_ctm-dn-tp-dn-br-se);
181
+ border-color: var(--_ctm-dn-tp-dn-br-cr);
182
+ border-width: var(--_ctm-dn-tp-dn-br-wh);
183
+ border-radius: var(--_ctm-dn-tp-dn-br-rs);
184
+ }
185
+ }
177
186
 
187
+ &[data-hotspot-image-style-show-border="true"] {
188
+ .imageHotspot-element {
189
+ border-style: var(--_ctm-dn-ie-se-br-se);
190
+ border-color: var(--_ctm-dn-ie-se-br-cr);
191
+ border-width: var(--_ctm-dn-ie-se-br-wh);
192
+ border-radius: var(--_ctm-dn-ie-se-br-rs);
193
+ }
194
+ }
195
+ &[data-hotspot-tooltip-style-show-border="true"] {
196
+ .hotspot__tooltip {
197
+ border-style: var(--_ctm-dn-tp-dn-br-se);
198
+ border-color: var(--_ctm-dn-tp-dn-br-cr);
199
+ border-width: var(--_ctm-dn-tp-dn-br-wh);
200
+ border-radius: var(--_ctm-dn-tp-dn-br-rs);
201
+ }
202
+ }
203
+ &[data-hotspot-tooltip-style-show-shadow="true"] {
204
+ .hotspot__tooltip {
205
+ box-shadow: var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
206
+ var(--_ctm-dn-tp-dn-sw-cr);
207
+ }
208
+ }
209
+ &[data-hotspot-tooltip-image-style-show-border="true"] {
210
+ .tooltip__image {
211
+ border-style: var(--_ctm-dn-tp-ie-dn-br-se);
212
+ border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
213
+ border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
214
+ border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
215
+ }
216
+ }
217
+ &[data-hotspot-tooltip-image-style-show-shadow="true"] {
218
+ .tooltip__image {
219
+ box-shadow: var(
220
+ --_show-shadow,
221
+ var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br) var(--_ctm-dn-tp-ie-dn-sw-sd)
222
+ var(--_ctm-dn-tp-ie-dn-sw-cr)
223
+ );
224
+ }
225
+ }
226
+ &[data-hotspot-style-show-shadow="true"] {
227
+ .hotspot {
228
+ box-shadow: var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
229
+ var(--_ctm-dn-ht-se-sw-cr);
230
+ }
231
+ }
232
+ &[data-hotspot-style-show-border="true"] {
233
+ .hotspot {
234
+ border-style: var(--_ctm-dn-ht-se-br-se);
235
+ border-color: var(--_ctm-dn-ht-se-br-cr);
236
+ border-width: var(--_ctm-dn-ht-se-br-wh);
237
+ border-radius: var(--_ctm-dn-ht-se-br-rs);
238
+ }
239
+ }
178
240
  .map-element {
179
241
  --text-high-contrast-rgb-value: 49, 49, 49;
180
242
  --detail-medium-contrast: rgb(234, 234, 234);
@@ -427,358 +489,467 @@ $data: (
427
489
  transform: scale(1);
428
490
  }
429
491
  }
492
+ .hotspot__container {
493
+ position: absolute;
494
+ top:43%;
495
+ left:12%;
430
496
  .hotspot__main {
431
497
  position: relative;
432
498
  .hotspot {
433
- background: var(
434
- --_ctm-mob-dn-pn-se-bd-cr,
435
- var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
436
- );
437
- border-style: var(
438
- --_ctm-mob-dn-pn-se-br-se,
439
- var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se))
440
- );
441
- border-color: var(
442
- --_ctm-mob-dn-pn-se-br-cr,
443
- var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr))
444
- );
445
- border-width: var(
446
- --_ctm-mob-dn-pn-se-br-wh,
447
- var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh))
448
- );
449
- border-radius: var(
450
- --_ctm-mob-dn-pn-se-br-rs,
451
- var(--_ctm-tab-dn-pn-se-br-rs, var(--_ctm-dn-pn-se-br-rs))
452
- );
453
- box-shadow: var(
454
- --_show-shadow,
455
- var(
456
- --_ctm-mob-dn-pn-se-sw-ae,
457
- var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))
458
- )
459
- var(
460
- --_ctm-mob-dn-pn-se-sw-br,
461
- var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))
462
- )
463
- var(
464
- --_ctm-mob-dn-pn-se-sw-sd,
465
- var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))
466
- )
467
- var(
468
- --_ctm-mob-dn-pn-se-sw-cr,
469
- var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr))
470
- )
471
- );
472
-
499
+ background: var(--_ctm-dn-ht-se-bd-cr);
500
+ // height: var(--_ctm-dn-tp-tt-dn-ft-se);
501
+ // width: var(--_ctm-dn-tp-tt-dn-ft-se);
473
502
  position: absolute;
474
503
  cursor: pointer;
475
- width: var(
476
- --_ctm-mob-dn-pn-se-ht-se,
477
- var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
478
- );
479
- height: var(
480
- --_ctm-mob-dn-pn-se-ht-se,
481
- var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
482
- );
483
- background-color: var(
484
- --_ctm-mob-dn-pn-se-bd-cr,
485
- var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
486
- );
487
-
504
+ width: var(--_ctm-dn-ht-se-ht-se);
505
+ height: var(--_ctm-dn-ht-se-ht-se);
506
+ background-color: var(--_ctm-dn-ht-se-bd-cr);
488
507
  display: flex;
489
508
  align-items: center;
490
509
  top: 50%;
491
510
  left: 50%;
492
511
  transform: translate(-50%, -50%);
512
+ box-sizing: border-box;
493
513
  justify-content: center;
494
- animation: scaleInOut
495
- var(
496
- --_ctm-mob-dn-pn-se-an-fy,
497
- var(--_ctm-tab-dn-pn-se-an-fy, var(--_ctm-dn-pn-se-an-fy))
498
- )
499
- infinite;
500
-
501
- .icon {
502
- display: var(--_sf-show-icon-ff, flex);
503
-
504
- svg {
505
- width: var(
506
- --_ctm-mob-dn-pn-se-in-se,
507
- var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
508
- );
509
- height: var(
510
- --_ctm-mob-dn-pn-se-in-se,
511
- var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
512
- );
513
-
514
- path {
515
- stroke: var(
516
- --_ctm-mob-dn-pn-se-in-c1,
517
- var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
518
- );
519
- fill: var(
520
- --_ctm-mob-dn-pn-se-in-c1,
521
- var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
522
- );
523
- }
524
- }
514
+ animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
515
+ &[data-hotspot-shape="circle"] {
516
+ border-radius: 50%;
517
+ }
518
+ &[data-hotspot-shape="any"] {
519
+ border-radius: var(--_ctm-dn-ht-se-br-rs);
525
520
  }
526
521
  }
527
- .hotspot__tooltip {
528
- position: absolute;
529
- background: var(
530
- --_ctm-mob-dn-tp-dn-bd-cr,
531
- var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
532
- );
533
- border-style: var(
534
- --_ctm-mob-dn-tp-dn-br-se,
535
- var(--_ctm-tab-dn-tp-dn-br-se, var(--_ctm-dn-tp-dn-br-se))
536
- );
537
- border-color: var(
538
- --_ctm-mob-dn-tp-dn-br-cr,
539
- var(--_ctm-tab-dn-tp-dn-br-cr, var(--_ctm-dn-tp-dn-br-cr))
540
- );
541
- border-width: var(
542
- --_ctm-mob-dn-tp-dn-br-wh,
543
- var(--_ctm-tab-dn-tp-dn-br-wh, var(--_ctm-dn-tp-dn-br-wh))
544
- );
545
- border-radius: var(
546
- --_ctm-mob-dn-tp-dn-br-rs,
547
- var(--_ctm-tab-dn-tp-dn-br-rs, var(--_ctm-dn-tp-dn-br-rs))
548
- );
549
-
550
- box-shadow: var(
551
- --_show-shadow,
552
- var(
553
- --_ctm-mob-dn-tp-dn-sw-ae,
554
- var(--_ctm-tab-dn-tp-dn-sw-ae, var(--_ctm-dn-tp-dn-sw-ae))
555
- )
556
- var(
557
- --_ctm-mob-dn-tp-dn-sw-br,
558
- var(--_ctm-tab-dn-tp-dn-sw-br, var(--_ctm-dn-tp-dn-sw-br))
559
- )
560
- var(
561
- --_ctm-mob-dn-tp-dn-sw-sd,
562
- var(--_ctm-tab-dn-tp-dn-sw-sd, var(--_ctm-dn-tp-dn-sw-sd))
563
- )
564
- var(
565
- --_ctm-mob-dn-tp-dn-sw-cr,
566
- var(--_ctm-tab-dn-tp-dn-sw-cr, var(--_ctm-dn-tp-dn-sw-cr))
567
- )
568
- );
569
-
570
- z-index: 1000;
571
- min-width: 100px;
572
- width: var(
573
- --_ctm-mob-dn-tp-dn-tp-wh,
574
- var(--_ctm-tab-dn-tp-dn-tp-wh, var(--_ctm-dn-tp-dn-tp-wh))
575
- );
576
- min-height: 100px;
577
- height: var(
578
- --_ctm-mob-dn-tp-dn-tp-ht,
579
- var(--_ctm-tab-dn-tp-dn-tp-ht, var(--_ctm-dn-tp-dn-tp-ht))
580
- );
522
+ }
523
+ }
524
+ .hotspot__tooltip {
525
+ --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
526
+ position: absolute;
527
+ background: var(--_ctm-dn-tp-dn-bd-cr);
528
+ z-index: 1000;
529
+ min-width: 100px;
530
+ width: var(--_ctm-dn-tp-dn-tp-wh);
531
+ min-height: 100px;
532
+ height: var(--_ctm-dn-tp-dn-tp-ht);
533
+ top:43%;
534
+ left:12%;
535
+ // top: var(--_sf-im-psn-tp, 0);
536
+ // left: var(--_sf-im-psn-lt, 0);
537
+
538
+ padding: 4px 8px;
539
+ display: flex;
540
+ justify-content: var(--_ctm-dn-tp-dn-hl-at);
541
+ align-items: var(--_ctm-dn-tp-dn-vl-at);
581
542
 
582
- // border-radius: 4px;
583
- // transform: translate(-10%, -130%);
584
- left: -10px;
585
- bottom: 7px;
586
- padding: 4px 8px;
587
- display: flex;
588
- justify-content: var(
589
- --_ctm-mob-dn-tp-dn-hl-at,
590
- var(--_ctm-tab-dn-tp-dn-hl-at, var(--_ctm-dn-tp-dn-hl-at))
591
- );
592
- align-items: var(
593
- --_ctm-mob-dn-tp-dn-vl-at,
594
- var(--_ctm-tab-dn-tp-dn-vl-at, var(--_ctm-dn-tp-dn-vl-at))
595
- );
543
+ &::after {
544
+ content: "";
545
+ position: absolute;
596
546
 
597
- &::after {
598
- content: "";
599
- position: absolute;
600
- top: 100%;
601
- left: 20px;
602
- margin-left: -5px;
603
- border-width: 5px;
604
- border-style: solid;
605
- border-color: var(
606
- --_ctm-mob-dn-tp-dn-bd-cr,
607
- var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
608
- )
609
- transparent transparent transparent;
547
+ border-width: 5px;
548
+ border-style: solid;
549
+ }
550
+ .text_box {
551
+ overflow-y: auto;
552
+ h6 {
553
+ font-size: var(--_ctm-dn-tp-tt-dn-ft-se);
554
+ font-family: var(--_ctm-dn-tp-tt-dn-ft-fy);
555
+ color: var(--_ctm-dn-tp-tt-dn-cr);
556
+
557
+ font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt);
558
+ font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic);
559
+ text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
560
+ letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
561
+ line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
562
+ text-decoration: var(--_ctm-dn-tp-tt-dn-ue);
610
563
  }
611
- span {
612
- svg {
613
- width: var(
614
- --_ctm-mob-dn-pn-se-in-se,
615
- var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
616
- );
617
- height: var(
618
- --_ctm-mob-dn-pn-se-in-se,
619
- var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
620
- );
621
- path {
622
- stroke: var(
623
- --_ctm-mob-dn-pn-se-in-c1,
624
- var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
625
- );
626
- }
627
- }
564
+ p {
565
+ font-size: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
566
+ color: var(--_ctm-dn-tp-tt-dn-cr-dc);
567
+ font-family: var(--_ctm-dn-tp-tt-dn-ft-fy-dc);
568
+ font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt-dc);
569
+ font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
570
+ text-align: var(--_ctm-dn-tp-tt-dn-tt-an-dc);
571
+ letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg-dc);
572
+ line-height: var(--_ctm-dn-tp-tt-dn-le-ht-dc);
573
+ text-decoration: var(--_ctm-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-ue-dc));
628
574
  }
629
-
630
- .text_box {
631
- h6 {
632
- font-size: var(
633
- --_ctm-mob-dn-tp-tt-dn-ft-se,
634
- var(--_ctm-tab-dn-tp-tt-dn-ft-se, var(--_ctm-dn-tp-tt-dn-ft-se))
635
- );
636
- font-family: var(
637
- --_ctm-mob-dn-tp-tt-dn-ft-fy,
638
- var(--_ctm-tab-dn-tp-tt-dn-ft-fy, var(--_ctm-dn-tp-tt-dn-ft-fy))
639
- );
640
- color: var(
641
- --_ctm-mob-dn-tp-tt-dn-cr,
642
- var(--_ctm-tab-dn-tp-tt-dn-cr, var(--_ctm-dn-tp-tt-dn-cr))
643
- );
644
-
645
- font-weight: var(
646
- --_ctm-mob-dn-tp-tt-dn-ft-wt,
647
- var(--_ctm-tab-dn-tp-tt-dn-ft-wt, var(--_ctm-dn-tp-tt-dn-ft-wt))
648
- );
649
- font-style: var(
650
- --_ctm-mob-dn-tp-tt-dn-ft-se-ic,
651
- var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic, var(--_ctm-dn-tp-tt-dn-ft-se-ic))
652
- );
653
- text-align: var(
654
- --_ctm-mob-dn-tp-tt-dn-tt-an,
655
- var(--_ctm-tab-dn-tp-tt-dn-tt-an, var(--_ctm-dn-tp-tt-dn-tt-an))
656
- );
657
- letter-spacing: var(
658
- --_ctm-mob-dn-tp-tt-dn-lr-sg,
659
- var(--_ctm-tab-dn-tp-tt-dn-lr-sg, var(--_ctm-dn-tp-tt-dn-lr-sg))
660
- );
661
- line-height: var(
662
- --_ctm-mob-dn-tp-tt-dn-le-ht,
663
- var(--_ctm-tab-dn-tp-tt-dn-le-ht, var(--_ctm-dn-tp-tt-dn-le-ht))
664
- );
665
- text-decoration: var(
666
- --_ctm-mob-dn-tp-tt-dn-ue,
667
- var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue))
668
- );
669
- }
670
-
671
- p {
672
- font-size: var(
673
- --_ctm-mob-dn-tp-tt-dn-ft-se-dc,
674
- var(--_ctm-tab-dn-tp-tt-dn-ft-se-dc, var(--_ctm-dn-tp-tt-dn-ft-se-dc))
675
- );
676
- color: var(
677
- --_ctm-mob-dn-tp-tt-dn-cr-dc,
678
- var(--_ctm-tab-dn-tp-tt-dn-cr-dc, var(--_ctm-dn-tp-tt-dn-cr-dc))
679
- );
680
- font-family: var(
681
- --_ctm-mob-dn-tp-tt-dn-ft-fy-dc,
682
- var(--_ctm-tab-dn-tp-tt-dn-ft-fy-dc, var(--_ctm-dn-tp-tt-dn-ft-fy-dc))
683
- );
684
- font-weight: var(
685
- --_ctm-mob-dn-tp-tt-dn-ft-wt-dc,
686
- var(--_ctm-tab-dn-tp-tt-dn-ft-wt-dc, var(--_ctm-dn-tp-tt-dn-ft-wt-dc))
687
- );
688
- font-style: var(
689
- --_ctm-mob-dn-tp-tt-dn-ft-se-ic-dc,
690
- var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic-dc, var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc))
691
- );
692
- text-align: var(
693
- --_ctm-mob-dn-tp-tt-dn-tt-an-dc,
694
- var(--_ctm-tab-dn-tp-tt-dn-tt-an-dc, var(--_ctm-dn-tp-tt-dn-tt-an-dc))
695
- );
696
- letter-spacing: var(
697
- --_ctm-mob-dn-tp-tt-dn-lr-sg-dc,
698
- var(--_ctm-tab-dn-tp-tt-dn-lr-sg-dc, var(--_ctm-dn-tp-tt-dn-lr-sg-dc))
699
- );
700
- line-height: var(
701
- --_ctm-mob-dn-tp-tt-dn-le-ht-dc,
702
- var(--_ctm-tab-dn-tp-tt-dn-le-ht-dc, var(--_ctm-dn-tp-tt-dn-le-ht-dc))
703
- );
704
- text-decoration: var(
705
- --_ctm-mob-dn-tp-tt-dn-ue-dc,
706
- var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc))
707
- );
708
- }
709
- }
710
- .tooltip__image {
711
- background-color: var(
712
- --_ctm-mob-dn-tp-ie-dn-bd-cr,
713
- var(--_ctm-tab-dn-tp-ie-dn-bd-cr, var(--_ctm-dn-tp-ie-dn-bd-cr))
714
- );
715
- transition: transform 0.3s ease-in-out;
716
- border-style: var(
717
- --_ctm-mob-dn-tp-ie-dn-br-se,
718
- var(--_ctm-tab-dn-tp-ie-dn-br-se, var(--_ctm-dn-tp-ie-dn-br-se))
719
- );
720
- border-color: var(
721
- --_ctm-mob-dn-tp-ie-dn-br-cr,
722
- var(--_ctm-tab-dn-tp-ie-dn-br-cr, var(--_ctm-dn-tp-ie-dn-br-cr))
723
- );
724
- border-width: var(
725
- --_ctm-mob-dn-tp-ie-dn-br-wh,
726
- var(--_ctm-tab-dn-tp-ie-dn-br-wh, var(--_ctm-dn-tp-ie-dn-br-wh))
727
- );
728
- border-radius: var(
729
- --_ctm-mob-dn-tp-ie-dn-br-rs,
730
- var(--_ctm-tab-dn-tp-ie-dn-br-rs, var(--_ctm-dn-tp-ie-dn-br-rs))
731
- );
732
- box-shadow: var(
733
- --_show-shadow,
734
- var(
735
- --_ctm-mob-dn-tp-ie-dn-sw-ae,
736
- var(--_ctm-tab-dn-tp-ie-dn-sw-ae, var(--_ctm-dn-tp-ie-dn-sw-ae))
737
- )
738
- var(
739
- --_ctm-mob-dn-tp-ie-dn-sw-br,
740
- var(--_ctm-tab-dn-tp-ie-dn-sw-br, var(--_ctm-dn-tp-ie-dn-sw-br))
741
- )
742
- var(
743
- --_ctm-mob-dn-tp-ie-dn-sw-sd,
744
- var(--_ctm-tab-dn-tp-ie-dn-sw-sd, var(--_ctm-dn-tp-ie-dn-sw-sd))
745
- )
746
- var(
747
- --_ctm-mob-dn-tp-ie-dn-sw-cr,
748
- var(--_ctm-tab-dn-tp-ie-dn-sw-cr, var(--_ctm-dn-tp-ie-dn-sw-cr))
749
- )
750
- );
751
- display: flex;
752
- justify-content: var(
753
- --_ctm-mob-dn-tp-ie-dn-hl-at,
754
- var(--_ctm-tab-dn-tp-ie-dn-hl-at, var(--_ctm-dn-tp-ie-dn-hl-at))
755
- );
756
- align-items: var(
757
- --_ctm-mob-dn-tp-ie-dn-vl-at,
758
- var(--_ctm-tab-dn-tp-ie-dn-vl-at, var(--_ctm-dn-tp-ie-dn-vl-at))
759
- );
760
-
761
- img {
762
- object-fit: var(
763
- --_ctm-mob-dn-tp-ie-dn-ft-os,
764
- var(--_ctm-tab-dn-tp-ie-dn-ft-os, var(--_ctm-dn-tp-ie-dn-ft-os))
765
- );
766
- max-width: 100%;
767
- rotate: calc(
768
- var(
769
- --_ctm-mob-dn-tp-ie-dn-ud,
770
- var(--_ctm-tab-dn-tp-ie-dn-ud, var(--_ctm-dn-tp-ie-dn-ud))
771
- ) *
772
- 1deg
773
- );
774
- scale: var(
775
- --_ctm-mob-dn-tp-ie-dn-zm-ie,
776
- var(--_ctm-tab-dn-tp-ie-dn-zm-ie, var(--_ctm-dn-tp-ie-dn-zm-ie))
777
- );
575
+ }
576
+ .tooltip__image {
577
+ width: 100%;
578
+ background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
579
+ transition: transform 0.3s ease-in-out;
580
+ display: flex;
581
+ justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
582
+ align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
583
+ img {
584
+ object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
585
+ height: -webkit-fill-available;
586
+ max-width: 100%;
587
+ rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
588
+ scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
589
+
590
+ &:hover {
591
+ &[data-on-img-hover="Zoom In"] {
592
+ transform: scale(1.08);
593
+ }
594
+ &[data-on-img-hover="Zoom Out"] {
595
+ transform: scale(0.92);
596
+ }
778
597
  }
779
598
  }
780
599
  }
781
600
  }
601
+ // .hotspot__main {
602
+ // position: relative;
603
+ // .hotspot {
604
+ // background: var(
605
+ // --_ctm-mob-dn-pn-se-bd-cr,
606
+ // var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
607
+ // );
608
+ // border-style: var(
609
+ // --_ctm-mob-dn-pn-se-br-se,
610
+ // var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se))
611
+ // );
612
+ // border-color: var(
613
+ // --_ctm-mob-dn-pn-se-br-cr,
614
+ // var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr))
615
+ // );
616
+ // border-width: var(
617
+ // --_ctm-mob-dn-pn-se-br-wh,
618
+ // var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh))
619
+ // );
620
+ // border-radius: var(
621
+ // --_ctm-mob-dn-pn-se-br-rs,
622
+ // var(--_ctm-tab-dn-pn-se-br-rs, var(--_ctm-dn-pn-se-br-rs))
623
+ // );
624
+ // box-shadow: var(
625
+ // --_show-shadow,
626
+ // var(
627
+ // --_ctm-mob-dn-pn-se-sw-ae,
628
+ // var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))
629
+ // )
630
+ // var(
631
+ // --_ctm-mob-dn-pn-se-sw-br,
632
+ // var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))
633
+ // )
634
+ // var(
635
+ // --_ctm-mob-dn-pn-se-sw-sd,
636
+ // var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))
637
+ // )
638
+ // var(
639
+ // --_ctm-mob-dn-pn-se-sw-cr,
640
+ // var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr))
641
+ // )
642
+ // );
643
+
644
+ // position: absolute;
645
+ // cursor: pointer;
646
+ // width: var(
647
+ // --_ctm-mob-dn-pn-se-ht-se,
648
+ // var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
649
+ // );
650
+ // height: var(
651
+ // --_ctm-mob-dn-pn-se-ht-se,
652
+ // var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
653
+ // );
654
+ // background-color: var(
655
+ // --_ctm-mob-dn-pn-se-bd-cr,
656
+ // var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
657
+ // );
658
+
659
+ // display: flex;
660
+ // align-items: center;
661
+ // top: 50%;
662
+ // left: 50%;
663
+ // transform: translate(-50%, -50%);
664
+ // justify-content: center;
665
+ // animation: scaleInOut
666
+ // var(
667
+ // --_ctm-mob-dn-pn-se-an-fy,
668
+ // var(--_ctm-tab-dn-pn-se-an-fy, var(--_ctm-dn-pn-se-an-fy))
669
+ // )
670
+ // infinite;
671
+
672
+ // .icon {
673
+ // display: var(--_sf-show-icon-ff, flex);
674
+
675
+ // svg {
676
+ // width: var(
677
+ // --_ctm-mob-dn-pn-se-in-se,
678
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
679
+ // );
680
+ // height: var(
681
+ // --_ctm-mob-dn-pn-se-in-se,
682
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
683
+ // );
684
+
685
+ // path {
686
+ // stroke: var(
687
+ // --_ctm-mob-dn-pn-se-in-c1,
688
+ // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
689
+ // );
690
+ // fill: var(
691
+ // --_ctm-mob-dn-pn-se-in-c1,
692
+ // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
693
+ // );
694
+ // }
695
+ // }
696
+ // }
697
+ // }
698
+ // .hotspot__tooltip {
699
+ // position: absolute;
700
+ // background: var(
701
+ // --_ctm-mob-dn-tp-dn-bd-cr,
702
+ // var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
703
+ // );
704
+ // border-style: var(
705
+ // --_ctm-mob-dn-tp-dn-br-se,
706
+ // var(--_ctm-tab-dn-tp-dn-br-se, var(--_ctm-dn-tp-dn-br-se))
707
+ // );
708
+ // border-color: var(
709
+ // --_ctm-mob-dn-tp-dn-br-cr,
710
+ // var(--_ctm-tab-dn-tp-dn-br-cr, var(--_ctm-dn-tp-dn-br-cr))
711
+ // );
712
+ // border-width: var(
713
+ // --_ctm-mob-dn-tp-dn-br-wh,
714
+ // var(--_ctm-tab-dn-tp-dn-br-wh, var(--_ctm-dn-tp-dn-br-wh))
715
+ // );
716
+ // border-radius: var(
717
+ // --_ctm-mob-dn-tp-dn-br-rs,
718
+ // var(--_ctm-tab-dn-tp-dn-br-rs, var(--_ctm-dn-tp-dn-br-rs))
719
+ // );
720
+
721
+ // box-shadow: var(
722
+ // --_show-shadow,
723
+ // var(
724
+ // --_ctm-mob-dn-tp-dn-sw-ae,
725
+ // var(--_ctm-tab-dn-tp-dn-sw-ae, var(--_ctm-dn-tp-dn-sw-ae))
726
+ // )
727
+ // var(
728
+ // --_ctm-mob-dn-tp-dn-sw-br,
729
+ // var(--_ctm-tab-dn-tp-dn-sw-br, var(--_ctm-dn-tp-dn-sw-br))
730
+ // )
731
+ // var(
732
+ // --_ctm-mob-dn-tp-dn-sw-sd,
733
+ // var(--_ctm-tab-dn-tp-dn-sw-sd, var(--_ctm-dn-tp-dn-sw-sd))
734
+ // )
735
+ // var(
736
+ // --_ctm-mob-dn-tp-dn-sw-cr,
737
+ // var(--_ctm-tab-dn-tp-dn-sw-cr, var(--_ctm-dn-tp-dn-sw-cr))
738
+ // )
739
+ // );
740
+
741
+ // z-index: 1000;
742
+ // min-width: 100px;
743
+ // width: var(
744
+ // --_ctm-mob-dn-tp-dn-tp-wh,
745
+ // var(--_ctm-tab-dn-tp-dn-tp-wh, var(--_ctm-dn-tp-dn-tp-wh))
746
+ // );
747
+ // min-height: 100px;
748
+ // height: var(
749
+ // --_ctm-mob-dn-tp-dn-tp-ht,
750
+ // var(--_ctm-tab-dn-tp-dn-tp-ht, var(--_ctm-dn-tp-dn-tp-ht))
751
+ // );
752
+
753
+ // // border-radius: 4px;
754
+ // // transform: translate(-10%, -130%);
755
+ // left: -10px;
756
+ // bottom: 7px;
757
+ // padding: 4px 8px;
758
+ // display: flex;
759
+ // justify-content: var(
760
+ // --_ctm-mob-dn-tp-dn-hl-at,
761
+ // var(--_ctm-tab-dn-tp-dn-hl-at, var(--_ctm-dn-tp-dn-hl-at))
762
+ // );
763
+ // align-items: var(
764
+ // --_ctm-mob-dn-tp-dn-vl-at,
765
+ // var(--_ctm-tab-dn-tp-dn-vl-at, var(--_ctm-dn-tp-dn-vl-at))
766
+ // );
767
+
768
+ // &::after {
769
+ // content: "";
770
+ // position: absolute;
771
+ // top: 100%;
772
+ // left: 20px;
773
+ // margin-left: -5px;
774
+ // border-width: 5px;
775
+ // border-style: solid;
776
+ // border-color: var(
777
+ // --_ctm-mob-dn-tp-dn-bd-cr,
778
+ // var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
779
+ // )
780
+ // transparent transparent transparent;
781
+ // }
782
+ // span {
783
+ // svg {
784
+ // width: var(
785
+ // --_ctm-mob-dn-pn-se-in-se,
786
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
787
+ // );
788
+ // height: var(
789
+ // --_ctm-mob-dn-pn-se-in-se,
790
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
791
+ // );
792
+ // path {
793
+ // stroke: var(
794
+ // --_ctm-mob-dn-pn-se-in-c1,
795
+ // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
796
+ // );
797
+ // }
798
+ // }
799
+ // }
800
+
801
+ // .text_box {
802
+ // h6 {
803
+ // font-size: var(
804
+ // --_ctm-mob-dn-tp-tt-dn-ft-se,
805
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se, var(--_ctm-dn-tp-tt-dn-ft-se))
806
+ // );
807
+ // font-family: var(
808
+ // --_ctm-mob-dn-tp-tt-dn-ft-fy,
809
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-fy, var(--_ctm-dn-tp-tt-dn-ft-fy))
810
+ // );
811
+ // color: var(
812
+ // --_ctm-mob-dn-tp-tt-dn-cr,
813
+ // var(--_ctm-tab-dn-tp-tt-dn-cr, var(--_ctm-dn-tp-tt-dn-cr))
814
+ // );
815
+
816
+ // font-weight: var(
817
+ // --_ctm-mob-dn-tp-tt-dn-ft-wt,
818
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-wt, var(--_ctm-dn-tp-tt-dn-ft-wt))
819
+ // );
820
+ // font-style: var(
821
+ // --_ctm-mob-dn-tp-tt-dn-ft-se-ic,
822
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic, var(--_ctm-dn-tp-tt-dn-ft-se-ic))
823
+ // );
824
+ // text-align: var(
825
+ // --_ctm-mob-dn-tp-tt-dn-tt-an,
826
+ // var(--_ctm-tab-dn-tp-tt-dn-tt-an, var(--_ctm-dn-tp-tt-dn-tt-an))
827
+ // );
828
+ // letter-spacing: var(
829
+ // --_ctm-mob-dn-tp-tt-dn-lr-sg,
830
+ // var(--_ctm-tab-dn-tp-tt-dn-lr-sg, var(--_ctm-dn-tp-tt-dn-lr-sg))
831
+ // );
832
+ // line-height: var(
833
+ // --_ctm-mob-dn-tp-tt-dn-le-ht,
834
+ // var(--_ctm-tab-dn-tp-tt-dn-le-ht, var(--_ctm-dn-tp-tt-dn-le-ht))
835
+ // );
836
+ // text-decoration: var(
837
+ // --_ctm-mob-dn-tp-tt-dn-ue,
838
+ // var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue))
839
+ // );
840
+ // }
841
+
842
+ // p {
843
+ // font-size: var(
844
+ // --_ctm-mob-dn-tp-tt-dn-ft-se-dc,
845
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se-dc, var(--_ctm-dn-tp-tt-dn-ft-se-dc))
846
+ // );
847
+ // color: var(
848
+ // --_ctm-mob-dn-tp-tt-dn-cr-dc,
849
+ // var(--_ctm-tab-dn-tp-tt-dn-cr-dc, var(--_ctm-dn-tp-tt-dn-cr-dc))
850
+ // );
851
+ // font-family: var(
852
+ // --_ctm-mob-dn-tp-tt-dn-ft-fy-dc,
853
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-fy-dc, var(--_ctm-dn-tp-tt-dn-ft-fy-dc))
854
+ // );
855
+ // font-weight: var(
856
+ // --_ctm-mob-dn-tp-tt-dn-ft-wt-dc,
857
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-wt-dc, var(--_ctm-dn-tp-tt-dn-ft-wt-dc))
858
+ // );
859
+ // font-style: var(
860
+ // --_ctm-mob-dn-tp-tt-dn-ft-se-ic-dc,
861
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic-dc, var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc))
862
+ // );
863
+ // text-align: var(
864
+ // --_ctm-mob-dn-tp-tt-dn-tt-an-dc,
865
+ // var(--_ctm-tab-dn-tp-tt-dn-tt-an-dc, var(--_ctm-dn-tp-tt-dn-tt-an-dc))
866
+ // );
867
+ // letter-spacing: var(
868
+ // --_ctm-mob-dn-tp-tt-dn-lr-sg-dc,
869
+ // var(--_ctm-tab-dn-tp-tt-dn-lr-sg-dc, var(--_ctm-dn-tp-tt-dn-lr-sg-dc))
870
+ // );
871
+ // line-height: var(
872
+ // --_ctm-mob-dn-tp-tt-dn-le-ht-dc,
873
+ // var(--_ctm-tab-dn-tp-tt-dn-le-ht-dc, var(--_ctm-dn-tp-tt-dn-le-ht-dc))
874
+ // );
875
+ // text-decoration: var(
876
+ // --_ctm-mob-dn-tp-tt-dn-ue-dc,
877
+ // var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc))
878
+ // );
879
+ // }
880
+ // }
881
+ // .tooltip__image {
882
+ // background-color: var(
883
+ // --_ctm-mob-dn-tp-ie-dn-bd-cr,
884
+ // var(--_ctm-tab-dn-tp-ie-dn-bd-cr, var(--_ctm-dn-tp-ie-dn-bd-cr))
885
+ // );
886
+ // transition: transform 0.3s ease-in-out;
887
+ // border-style: var(
888
+ // --_ctm-mob-dn-tp-ie-dn-br-se,
889
+ // var(--_ctm-tab-dn-tp-ie-dn-br-se, var(--_ctm-dn-tp-ie-dn-br-se))
890
+ // );
891
+ // border-color: var(
892
+ // --_ctm-mob-dn-tp-ie-dn-br-cr,
893
+ // var(--_ctm-tab-dn-tp-ie-dn-br-cr, var(--_ctm-dn-tp-ie-dn-br-cr))
894
+ // );
895
+ // border-width: var(
896
+ // --_ctm-mob-dn-tp-ie-dn-br-wh,
897
+ // var(--_ctm-tab-dn-tp-ie-dn-br-wh, var(--_ctm-dn-tp-ie-dn-br-wh))
898
+ // );
899
+ // border-radius: var(
900
+ // --_ctm-mob-dn-tp-ie-dn-br-rs,
901
+ // var(--_ctm-tab-dn-tp-ie-dn-br-rs, var(--_ctm-dn-tp-ie-dn-br-rs))
902
+ // );
903
+ // box-shadow: var(
904
+ // --_show-shadow,
905
+ // var(
906
+ // --_ctm-mob-dn-tp-ie-dn-sw-ae,
907
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-ae, var(--_ctm-dn-tp-ie-dn-sw-ae))
908
+ // )
909
+ // var(
910
+ // --_ctm-mob-dn-tp-ie-dn-sw-br,
911
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-br, var(--_ctm-dn-tp-ie-dn-sw-br))
912
+ // )
913
+ // var(
914
+ // --_ctm-mob-dn-tp-ie-dn-sw-sd,
915
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-sd, var(--_ctm-dn-tp-ie-dn-sw-sd))
916
+ // )
917
+ // var(
918
+ // --_ctm-mob-dn-tp-ie-dn-sw-cr,
919
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-cr, var(--_ctm-dn-tp-ie-dn-sw-cr))
920
+ // )
921
+ // );
922
+ // display: flex;
923
+ // justify-content: var(
924
+ // --_ctm-mob-dn-tp-ie-dn-hl-at,
925
+ // var(--_ctm-tab-dn-tp-ie-dn-hl-at, var(--_ctm-dn-tp-ie-dn-hl-at))
926
+ // );
927
+ // align-items: var(
928
+ // --_ctm-mob-dn-tp-ie-dn-vl-at,
929
+ // var(--_ctm-tab-dn-tp-ie-dn-vl-at, var(--_ctm-dn-tp-ie-dn-vl-at))
930
+ // );
931
+
932
+ // img {
933
+ // object-fit: var(
934
+ // --_ctm-mob-dn-tp-ie-dn-ft-os,
935
+ // var(--_ctm-tab-dn-tp-ie-dn-ft-os, var(--_ctm-dn-tp-ie-dn-ft-os))
936
+ // );
937
+ // max-width: 100%;
938
+ // rotate: calc(
939
+ // var(
940
+ // --_ctm-mob-dn-tp-ie-dn-ud,
941
+ // var(--_ctm-tab-dn-tp-ie-dn-ud, var(--_ctm-dn-tp-ie-dn-ud))
942
+ // ) *
943
+ // 1deg
944
+ // );
945
+ // scale: var(
946
+ // --_ctm-mob-dn-tp-ie-dn-zm-ie,
947
+ // var(--_ctm-tab-dn-tp-ie-dn-zm-ie, var(--_ctm-dn-tp-ie-dn-zm-ie))
948
+ // );
949
+ // }
950
+ // }
951
+ // }
952
+ // }
782
953
 
783
954
  .map {
784
955
  width: 100%;