PluginProbe
WP Directory Kit / 1.2.6
WP Directory Kit v1.2.6
1.5.9 1.5.7 1.5.6 1.5.5 1.5.4 1.5.3 trunk 1.1.0 1.1.6 1.1.8 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.8 All 37 releases
wpdirectorykit / elementor-elements / assets / css / widgets / wdk-map.scss

wdk-map.scss in WP Directory Kit 1.2.6, at elementor-elements/assets/css/widgets/wdk-map.scss

1,238 lines 31.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @-webkit-keyframes wdk_placeHolderShimmer {
2 0% {
3 background-position: -468px 0
4 }
5 100% {
6 background-position: 468px 0
7 }
8 }
9
10 @keyframes wdk_placeHolderShimmer {
11 0% {
12 background-position: -468px 0
13 }
14 100% {
15 background-position: 468px 0
16 }
17 }
18
19 .wdk-element .wdk-map {
20
21 .wdk-favorites-actions a.wdk-add-favorites-action {
22 color: #fff;
23 }
24 .wdk-listing-card .wdk-footer {
25 z-index: 5;
26 position: relative;
27 }
28
29 img.leaflet-tile {
30 box-shadow: none !important;
31 }
32
33 .wdk-listing-card .wdk-thumbnail .wdk-image {
34 height: 190px;
35 }
36
37 .animated-background {
38 animation-duration: 1s;
39 animation-fill-mode: forwards;
40 animation-iteration-count: infinite;
41 animation-name: wdk_placeHolderShimmer;
42 animation-timing-function: linear;
43 -webkit-animation-duration: 1s;
44 -webkit-animation-fill-mode: forwards;
45 -webkit-animation-iteration-count: infinite;
46 -webkit-animation-name: wdk_placeHolderShimmer;
47 -webkit-animation-timing-function: linear;
48 background: #f6f7f8;
49 background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
50 background-size: 800px 104px;
51 height: 96px;
52 position: relative;
53 }
54
55 .map_infowindow .loading_content {
56 height: 280px;
57 margin: 0;
58 margin-bottom: 5px;
59 width: 100%;
60 position: relative;
61 z-index: 5;
62 }
63
64 .map_infowindow .loading_content .box_line {
65 height: 10px;
66 background: #fff;
67 width: 100%;
68 margin: 0;
69 margin-bottom: 0px;
70 float: left;
71 height: 16px;
72 }
73
74 .map_infowindow .loading_content .box_line.m20 {
75 margin-bottom: 16px;
76 }
77
78 .map_infowindow .loading_content .box_line.side {
79 width: 48%
80 }
81
82 .map_infowindow .loading_content .box_line.side:nth-child(odd) {
83 margin-right: 2%
84 }
85
86 .map_infowindow .loading_content .box_line.side:nth-child(even) {
87 margin-left: 2%
88 }
89
90 .map_infowindow .loading_content .box_line.m170 {
91 margin-bottom: 125px;
92 height: 1px;
93 }
94
95
96 div#wdk_map_results{
97 height:350px;
98 }
99
100 .wdk_marker-cluster img,
101 .wdk_cluster img {
102 display: none !important;
103 }
104
105 .wdk_marker-cluster,
106 .wdk_cluster {
107 background: transparent !important;
108 }
109
110 .wdk_marker-cluster div,
111 .wdk_cluster div {
112 color: #fff !important;
113 width: 36px !important;
114 height: 36px !important;
115 line-height: 36px !important;
116 background: #0074e4 !important;
117 -webkit-border-radius: 50% !important;
118 border-radius: 50% !important;
119 position: relative;
120 text-align: center;
121 font-size: 14px !important;
122 -webkit-animation: cluster-animation 2.5s infinite;
123 animation: cluster-animation 2.5s infinite;
124 }
125
126
127 @-webkit-keyframes cluster-animation {
128 0%,
129 100% {
130 -webkit-transform: scale(1.3) rotate(0deg);
131 transform: scale(1.3) rotate(0deg);
132 }
133
134 50% {
135 -webkit-transform: scale(1.55) rotate(90deg);
136 transform: scale(1.55) rotate(90deg);
137 }
138 }
139
140 @keyframes cluster-animation {
141 0%,
142 100% {
143 -webkit-transform: scale(1.3) rotate(0deg);
144 transform: scale(1.3) rotate(0deg);
145 }
146
147 50% {
148 -webkit-transform: scale(1.55) rotate(90deg);
149 transform: scale(1.55) rotate(90deg);
150 }
151 }
152
153 .wdk_map-marker-container {
154 position: absolute;
155 margin-top: 10px;
156 -webkit-transform: translate3d(-50%, -100%, 0);
157 transform: translate3d(-50%, -100%, 0);
158 }
159
160 .wdk_marker-container {
161 position: relative;
162 margin: 10px auto;
163 width: 49px;
164 height: 49px;
165 z-index: 1;
166 -webkit-border-radius: 50%;
167 border-radius: 50%;
168 cursor: pointer;
169 top: -5px;
170 margin-bottom: 21px;
171 text-align: center;
172 }
173
174 .wdk_marker-container {
175 -webkit-perspective: 1000;
176 perspective: 1000;
177 }
178
179 .wdk_marker-card {
180 width: 100%;
181 height: 100%;
182 -webkit-transform-style: preserve-3d;
183 transform-style: preserve-3d;
184 -webkit-transition: all 0.4s ease-in-out;
185 -o-transition: all 0.4s ease-in-out;
186 transition: all 0.4s ease-in-out;
187 position: absolute;
188 z-index: 1;
189 }
190
191 .wdk_marker-arrow {
192 display: none;
193 width: 0;
194 content: "";
195 height: 0;
196 /* filter: drop-shadow(0px 0px 1px #0074e4); */
197 border-style: solid;
198 border-width: 40px 24px 0;
199 margin-left: -0px;
200 border-color: #0074e4 transparent transparent;
201 top: 31px;
202 left: 50%;
203 -webkit-transform: translateX(-50%);
204 -ms-transform: translateX(-50%);
205 transform: translateX(-50%);
206 position: absolute;
207 -webkit-border-radius: 0;
208 border-radius: 0;
209 z-index: 1;
210 }
211
212 .wdk_face {
213 position: absolute;
214 width: 100%;
215 height: 124%;
216 -webkit-backface-visibility: hidden;
217 backface-visibility: hidden;
218 text-align: center;
219 -webkit-border-radius: 10%;
220 border-radius: 10%;
221 color: #fff;
222 z-index: 100;
223 -webkit-border-radius: 0;
224 border-radius: 0;
225 -webkit-transform: perspective(100px);
226 transform: perspective(100px);
227 }
228
229 .wdk_face i {
230 line-height: 61px;
231 font-size: 18px;
232 position: relative;
233 z-index: 78;
234 color: #0074e4;
235 -webkit-transform: perspective(0);
236 transform: perspective(0);
237 left: -1px;
238 transition: all .15s;
239 }
240
241 .wdk_face.front {
242 color: #0074e4;
243 z-index: 100;
244 position: relative;
245 z-index: 100;
246 position: absolute;
247 }
248
249 .wdk_marker-container:hover .wdk_face i {
250 color: #fff;
251 }
252
253 .wdk_marker-card:after {
254 content: '';
255 position: absolute;
256 top: 4px;
257 margin-top: 0px;
258 left: 2px;
259 width: 44px;
260 height: 63px;
261 z-index: 1;
262 -webkit-transition: all 0.4s ease-in-out;
263 -o-transition: all 0.4s ease-in-out;
264 transition: all 0.4s ease-in-out;
265 -webkit-transform: perspective(34px) rotateX(20deg) rotateZ(-45deg);
266 transform: perspective(34px) rotateX(20deg) rotateZ(-45deg);
267 -webkit-transform-origin: 50% 50%;
268 -ms-transform-origin: 50% 50%;
269 transform-origin: 50% 50%;
270 -webkit-border-radius: 60% 50% 60% 0;
271 border-radius: 60% 50% 60% 0;
272 padding: 0 3px 3px 0;
273 width: 43px;
274 height: 43px;
275 background: #fff;
276 z-index: 0;
277 filter: blur(.25px);
278 }
279
280 .wdk_marker-container:hover .wdk_marker-card:after {
281 background: #0074e4;
282 }
283
284 .wdk_marker-card:before {
285 content: '';
286 position: absolute;
287 top: 2px;
288 left: 0px;
289 width: 44px;
290 height: 63px;
291 z-index: 1;
292 -webkit-transition: all 0.4s ease-in-out;
293 -o-transition: all 0.4s ease-in-out;
294 transition: all 0.4s ease-in-out;
295 -webkit-transform: perspective(38px) rotateX(20deg) rotateZ(-45deg);
296 transform: perspective(38px) rotateX(20deg) rotateZ(-45deg);
297 -webkit-transform-origin: 50% 50%;
298 -ms-transform-origin: 50% 50%;
299 transform-origin: 50% 50%;
300 -webkit-border-radius: 60% 50% 60% 0;
301 border-radius: 60% 50% 60% 0;
302 padding: 0 3px 3px 0;
303 width: 47px;
304 height: 47px;
305 background: #0074e4;
306 z-index: 0;
307 filter: blur(.25px);
308 }
309
310 .wdk_marker-container:hover .wdk_marker-card:after {
311 opacity: 0;
312 }
313
314 .wdk_face.back {
315 -webkit-transform: rotateY(180deg);
316 transform: rotateY(180deg);
317 -webkit-box-sizing: border-box;
318 box-sizing: border-box;
319 background: #0074e4;
320 border-color: #0074e4;
321 color: #fff;
322 z-index: 25;
323 }
324
325 .wdk_face.back i {
326 transform: scaleX(-1);
327 line-height: 38px;
328 font-size: 18px; }
329
330 .wdk_face.back:after {
331 content: "";
332 display: block;
333 width: 36px;
334 height: 36px;
335 top: 2px;
336 left: 2px;
337 -webkit-border-radius: 10%;
338 border-radius: 10%;
339 position: absolute; }
340
341 .wdk_marker-container.wdk_marker_label {
342 height: auto;
343 width: auto;
344 padding: 0;
345 border-radius: 0;
346 margin: 0;
347 margin-left: 0px;
348 top: 0;
349 position: initial;
350 display: inline-block;
351 margin-left: -50%;
352 box-shadow: 0 0 2px 0 #ffffff69;
353 transition: all .15s;
354
355 &:not(.wdk_marker_clear) {
356 padding: 1px 5px;
357 border: 1px solid #d9304f;
358 background: #e93e5f;
359 color: #fff;
360 }
361
362 img {
363 max-width: 55px !important;
364 max-height: 50px !important;
365 }
366 }
367
368 .custom-zoom-in,
369 .custom-zoom-out {
370 background-color: #fff;
371 color: #333;
372 cursor: pointer;
373 -webkit-border-radius: 50%;
374 border-radius: 50%;
375 margin: 5px 15px;
376 -webkit-transition: color 0.3s, background-color 0.3s;
377 -o-transition: color 0.3s, background-color 0.3s;
378 transition: color 0.3s, background-color 0.3s;
379 -webkit-box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.2);
380 box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.2);
381 text-align: center;
382 font-size: 15px;
383 height: 34px;
384 width: 34px; }
385
386 .custom-zoom-in:hover,
387 .custom-zoom-out:hover {
388 background-color: #66676b;
389 color: #fff; }
390
391 .custom-zoom-in:before,
392 .custom-zoom-out:before {
393 font-family: "FontAwesome";
394 width: 100%;
395 line-height: 35px;
396 transition: -webkit-text-stroke 0.3s;
397 -webkit-text-stroke: 1px #fff; }
398
399 .zoomControlWrapper {
400 position: absolute;
401 left: 0;
402 right: auto;
403 width: 70px; }
404
405 .custom-zoom-in:before {
406 content: "\f067"; }
407
408 .custom-zoom-out:before {
409 content: "\f068"; }
410
411 .custom-zoom-in:hover:before,
412 .custom-zoom-out:hover:before {
413 -webkit-text-stroke: 1px #66676b; }
414
415 #mapnav-buttons {
416 position: absolute;
417 -webkit-transform: translate(0, 0);
418 -ms-transform: translate(0, 0);
419 transform: translate(0, 0);
420 z-index: 999;
421 font-size: 14px;
422 display: inline-block;
423 bottom: 20px;
424 right: 20px;
425 list-style: none;
426 padding: 0; }
427
428 #mapnav-buttons.top {
429 top: 20px;
430 right: 20px;
431 bottom: auto; }
432
433 #mapnav-buttons li {
434 float: left;
435 margin-left: 4px;
436 line-height: 20px; }
437
438 #geoLocation,
439 #mapnav-buttons a,
440 #scrollEnabling,
441 #streetView {
442 color: #333;
443 background-color: #fff;
444 padding: 9px 18px 7px;
445 font-weight: 500;
446 -transition: all 0.2s ease-in-out;
447 -webkit-box-sizing: border-box;
448 box-sizing: border-box;
449 display: inline-block;
450 -webkit-border-radius: 50px;
451 border-radius: 50px;
452 -webkit-box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.2);
453 box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.2);
454 }
455
456 #geoLocation:hover,
457 #mapnav-buttons a:hover,
458 #scrollEnabling.enabled,
459 #scrollEnabling:hover,
460 #streetView:hover {
461 background-color: #66676b;
462 color: #fff; }
463
464 #nextpoint:after,
465 #prevpoint:before {
466 font-family: "FontAwesome";
467 position: relative;
468 font-weight: 500;
469 margin: 0 0 0 6px;
470 font-size: 17px;
471 top: 0;
472 line-height: 1px; }
473
474 #prevpoint:before {
475 content: "\f104";
476 margin: 0 6px 0 0; }
477
478 #nextpoint:after {
479 content: "\f105";
480 margin: 0 0 0 6px; }
481
482 #geoLocation,
483 #scrollEnabling,
484 #streetView {
485 position: absolute;
486 top: 20px;
487 right: 20px;
488 z-index: 999;
489 font-size: 13px;
490 line-height: 21px; }
491
492 #geoLocation:before,
493 #scrollEnabling:before,
494 #streetView:before {
495 content: "\e015";
496 font-family: "simple-line-icons";
497 position: relative;
498 top: 2px;
499 margin: 0 6px 0 0;
500 font-size: 15px;
501 line-height: 1px; }
502
503 #scrollEnabling:before {
504 margin-left: -3px; }
505
506 #streetView:before {
507 content: "\f21d";
508 font-family: "FontAwesome";
509 font-size: 16px;
510 top: 1px;
511 margin-right: 8px; }
512
513 #geoLocation {
514 right: auto;
515 left: 20px;
516 padding: 8px 11px; }
517
518 #geoLocation:before {
519 content: "\f192";
520 font-family: "FontAwesome";
521 font-size: 16px;
522 margin: 0;
523 top: 2px;
524 }
525
526 .map-box {
527 background-color: #fff;
528 margin-bottom: 5px;
529 border-radius: 0;
530 -webkit-box-shadow: 0 0 40px 0 rgba(3, 3, 3, 0.15);
531 box-shadow: 0 0 40px 0 rgba(3, 3, 3, 0.15);
532 position: relative;
533 }
534
535 .map-box .rate-info {
536 position: absolute;
537 bottom: 84px;
538 left: 0;
539 padding-bottom: 20px;
540 width: 100%;
541 padding: 10px 10px 15px;
542 display: -webkit-box;
543 display: -ms-flexbox;
544 display: -webkit-flex;
545 display: flex;
546 -webkit-box-align: center;
547 -ms-flex-align: center;
548 -webkit-align-items: center;
549 align-items: center;
550 -ms-flex-wrap: wrap;
551 -webkit-flex-wrap: wrap;
552 flex-wrap: wrap;
553 -webkit-box-pack: justify;
554 -ms-flex-pack: justify;
555 -webkit-justify-content: space-between;
556 justify-content: space-between;
557 z-index: 5;
558 }
559
560 .map-box .rate-info > h5 {
561 top: 4px;
562 float: left;
563 color: #fff;
564 margin: 0px;
565 color: #fff;
566 font-size: 20px;
567 font-weight: 600;
568 float: left;
569 /* padding-left: 24px; */
570 position: relative;
571 top: 2px;
572 z-index: 5;
573 }
574
575 .map-box h4 {
576 margin: 0;
577 padding: 0;
578 }
579
580 .map-box h4 a {
581 padding: 0 0 2px;
582 font-size: 17px;
583 line-height: 25px;
584 display: inline-block;
585 }
586
587 .listing-img-container {
588 position: relative;
589 height: 100%;
590 display: block;
591 -webkit-box-shadow: none !important;
592 box-shadow: none !important;
593 }
594
595 .map-box h4 a:hover {
596 color: #66676b;
597 }
598
599 .map-box p {
600 padding: 0;
601 line-height: 25px;
602 margin: 2px 0 0;
603 font-size: 14px;
604 }
605
606 .map-box ul.listing-details {
607 padding: 0;
608 font-size: 14px;
609 display: none;
610 }
611
612 .map-box .listing-title {
613 padding: 16px 22px;
614 }
615
616 .map-box .listing-img-content {
617 padding: 18px 22px;
618 }
619
620 .map-box .listing-img-content span {
621 font-size: 21px;
622 }
623
624 .map-box .listing-img-content .listing-price i {
625 font-size: 15px;
626 margin: -7px 0 0;
627 }
628
629 .infoBox > img {
630 position: absolute !important;
631 right: 0;
632 top: 0;
633 }
634
635 .map-box .listing-img-container::before {
636 content: "";
637 display: none;
638 position: absolute;
639 height: 100%;
640 width: 100%;
641 background: -o-linear-gradient(bottom, rgba(35, 35, 37, 0.85) 0%, rgba(35, 35, 37, 0.4) 35%, rgba(22, 22, 23, 0) 60%, transparent 100%);
642 background: -webkit-gradient(linear, left bottom, left top, from(rgba(35, 35, 37, 0.85)), color-stop(35%, rgba(35, 35, 37, 0.4)), color-stop(60%, rgba(22, 22, 23, 0)), to(transparent));
643 background: linear-gradient(to top, rgba(35, 35, 37, 0.85) 0%, rgba(35, 35, 37, 0.4) 35%, rgba(22, 22, 23, 0) 60%, transparent 100%);
644 background-color: rgba(35, 35, 37, 0.2);
645 }
646
647 .map-box .listing-item-content {
648 position: static;
649 width: 100%;
650 margin-top: -3px;
651 background-color: #fff;
652 padding: 15px 23px 20px 23px;
653 border-left: 1px solid #e0e1e5;
654 border-right: 1px solid #e0e1e5;
655 border-bottom: 0;
656 -webkit-box-shadow: none;
657 box-shadow: none;
658 }
659
660 .map-box .listing-item-content h3 {
661 color: #242526;
662 font-size: 16px;
663 padding: 0 0 2px;
664 font-weight: 500;
665 margin: 0;
666 line-height: 27px;
667 margin-bottom: 5px;
668 }
669
670 .map-box .listing-item-content span {
671 font-size: 12px;
672 font-weight: 400;
673 display: inline-block;
674 color: #aeb4b6;
675 }
676
677 .map-box .listing-item-content span i {
678 padding-right: 5px;
679 }
680
681 .infoBox-close {
682 position: absolute;
683 top: 10px;
684 right: 10px;
685 display: inline-block;
686 z-index: 999;
687 text-align: center;
688 line-height: 29px;
689 cursor: pointer;
690 font-size: 15px;
691 font-weight: 500;
692 height: 29px;
693 width: 29px;
694 background-color: #fff;
695 color: #333;
696 font-family: "FontAwesome";
697 -webkit-border-radius: 50%;
698 border-radius: 50%;
699 -webkit-text-stroke: 1px #fff;
700 }
701
702 .infoBox-close:hover {
703 color: #fff;
704 background-color: #66676b;
705 -webkit-text-stroke: 1px #66676b;
706 }
707
708 .map-box-icon {
709 height: 38px;
710 width: 38px;
711 position: absolute;
712 bottom: 0;
713 right: 0;
714 background-color: #3685cf;
715 display: block;
716 color: #fff;
717 font-size: 12px;
718 z-index: 101;
719 text-align: center;
720 -webkit-transform: translateX(50%);
721 -ms-transform: translateX(50%);
722 transform: translateX(50%);
723 opacity: 0;
724 visibility: hidden;
725 }
726
727 .map-box-icon:before {
728 content: "\f064";
729 font-family: "FontAwesome";
730 position: relative;
731 top: 7px;
732 display: block;
733 }
734
735 .map-box-image:hover .map-box-icon {
736 opacity: 1;
737 visibility: visible;
738 -webkit-transform: translateY(0);
739 -ms-transform: translateX(0);
740 transform: translateX(0);
741 }
742
743 .map-box-image {
744 position: relative;
745 overflow: hidden;
746 display: block;
747 }
748
749 .infoBox .star-rating {
750 font-size: 16px;
751 margin-top: 1px;
752 }
753
754 .infoBox .star-rating span {
755 margin-right: 3px;
756 }
757
758 .infoBox .rating-counter {
759 position: relative;
760 top: -1px;
761 }
762
763 .infoBox:after {
764 content: "";
765 position: absolute;
766 bottom: -5px;
767 left: 50%;
768 -webkit-transform: translateX(-50%);
769 -ms-transform: translateX(-50%);
770 transform: translateX(-50%);
771 width: 0;
772 height: 0;
773 border-left: 12px solid transparent;
774 border-right: 12px solid transparent;
775 border-top: 12px solid #fff;
776 }
777
778 .wdk-listing-card {
779 border: 0;
780 overflow: hidden;
781 }
782
783 /* custom marker */
784
785 .leaflet-container .leaflet-marker-pane .wdk_marker-container-image img {
786 max-width: 100% !important;
787 max-height: 100% !important;
788 }
789
790 .leaflet-container .leaflet-marker-pane .wdk_marker-container-image.clicked .wdk_marker-card,
791 .leaflet-container .leaflet-marker-pane .wdk_marker-container-image:hover .wdk_marker-card {
792 -webkit-transform: initial;
793 -ms-transform: initial;
794 transform: initial;
795 }
796
797 .google_marker span {
798 position: absolute;
799 z-index: 2;
800 width: 29px;
801 height: 29px;
802 left: 50%;
803 -webkit-transform: translate(-50%, -50%);
804 -ms-transform: translate(-50%, -50%);
805 transform: translate(-50%, -50%);
806 top: 50%;
807 background: white;
808 -webkit-border-radius: 50%;
809 border-radius: 50%;
810 color: #18ad50;
811 display: -ms-flexbox;
812 display: -webkit-box;
813 display: -webkit-flex;
814 display: flex;
815 -webkit-box-align: center;
816 -ms-flex-align: center;
817 -webkit-align-items: center;
818 align-items: center;
819 -ms-flex-line-pack: center;
820 -webkit-align-content: center;
821 align-content: center;
822 -webkit-box-pack: center;
823 -ms-flex-pack: center;
824 -webkit-justify-content: center;
825 justify-content: center;
826 text-align: center;
827 }
828
829 .google_marker span i {
830 line-height: 1;
831 font-size: 16px;
832 margin-left: 0;
833 }
834
835 .leaflet-container .leaflet-marker-pane .google_marker img {
836 position: absolute;
837 z-index: 2;
838 max-width: 20px !important;
839 max-height: 20px !important;
840 max-width: 20px;
841 max-height: 22px;
842 left: 50%;
843 -ms-transform: translate(-50%, -50%);
844 transform: translate(-50%, -50%);
845 -webkit-transform: translate(-50%, -50%);
846 top: 50%;
847 max-width: 18px;
848 }
849
850 .gm-style .google_marker img {
851 max-width: 18px;
852 }
853
854 /* end custom marker */
855
856 /* leaftet map */
857
858 .leaflet-popup-content-wrapper .leaflet-popup-content,
859 .popupCustom .leaflet-popup-content-wrapper .leaflet-popup-content {
860 margin: 0;
861 margin-bottom: 0;
862 }
863
864 .leaflet-popup-content-wrapper .leaflet-popup-content,
865 .popupCustom .leaflet-popup-content-wrapper .leaflet-popup-content {
866 position: relative;
867 }
868
869 .leaflet-popup-content-wrapper .infoBox-close,
870 .popupCustom .leaflet-popup-content-wrapper .infoBox-close {
871 display: none;
872 }
873
874 .infobox:after {
875 content: "";
876 position: absolute;
877 bottom: -17px;
878 left: 50%;
879 width: 20px;
880 height: 20px;
881 border-left: 12px solid transparent;
882 border-right: 12px solid transparent;
883 border-top: 12px solid #fff;
884 background: #fff;
885 -webkit--transform: rotate(45deg) translateX(-50%);
886 -webkit-transform: rotate(45deg) translateX(-50%);
887 -ms-transform: rotate(45deg) translateX(-50%);
888 transform: rotate(45deg) translateX(-50%);
889 border: 1px solid #e0e1e5;
890 border-width: 0 1px 1px 0;
891 margin-left: -4px;
892 }
893
894 .leaflet-container a.leaflet-popup-close-button {
895 position: absolute;
896 top: 8px;
897 right: 8px;
898 display: -ms-flexbox;
899 display: -webkit-box;
900 display: -webkit-flex;
901 display: flex;
902 -webkit-box-pack: center;
903 -ms-flex-pack: center;
904 -webkit-justify-content: center;
905 justify-content: center;
906 -webkit-box-align: center;
907 -ms-flex-align: center;
908 -webkit-align-items: center;
909 align-items: center;
910 text-align: center;
911 line-height: 29px;
912 cursor: pointer;
913 font-size: 15px;
914 font-weight: 500;
915 height: 29px;
916 width: 29px;
917 padding: 0;
918 background-color: #fff;
919 color: #333;
920 -webkit-border-radius: 50%;
921 border-radius: 50%;
922 -webkit-text-stroke: 1px #fff;
923 font: normal normal normal 14px/1 FontAwesome;
924 font-size: 14px;
925 font-size: 0;
926 text-rendering: auto;
927 -webkit-font-smoothing: antialiased;
928 -webkit-transition: all 0.4s linear;
929 -o-transition: all 0.4s linear;
930 transition: all 0.4s linear;
931 z-index: 15;
932 }
933
934 a.leaflet-popup-close-button::after {
935 content: "\f00d";
936 font-size: 15px;
937 }
938
939 .leaflet-container a.leaflet-popup-close-button:hover {
940 color: #fff;
941 background-color: #66676b;
942 }
943
944 .leaflet-container:hover a.leaflet-popup-close-button {
945 opacity: 1;
946 }
947
948 .popupcustom-default .leaflet-popup-content-wrapper .leaflet-popup-content {
949 min-width: 150px;
950 background: #fff;
951 text-align: center;
952 padding: 25px 18px 15px 18px;
953 margin: 0;
954 }
955
956 .widget-property-map .popupcustom-default .leaflet-popup-content-wrapper .leaflet-popup-content {
957 padding: 0;
958 }
959
960 .widget-property-map .leaflet-container .popupcustom-default .map-box {
961 border-bottom: 0;
962 }
963
964 .leaflet-container .popupcustom-default a.leaflet-popup-close-button {
965 position: absolute;
966 top: 8px;
967 right: 8px;
968 }
969
970 .leaflet-top,
971 .leaflet-bottom,
972 .leaflet-pane {
973 z-index: 1 !important;
974 }
975
976 .leaflet-top,
977 .leaflet-bottom {
978 z-index: 10;
979 }
980
981 .infobox {
982 width: 250px;
983 height: auto;
984 box-shadow: none;
985 background: transparent;
986 border: 0;
987 }
988
989 .infobox.wdk-infobox-basic {
990 background: #fff;
991 padding: 10px 10px;
992 }
993
994 .infobox.wdk-infobox-basic .title {
995 margin: 0;
996 }
997
998 &.infobox-basic .leaflet-container a.leaflet-popup-close-button {
999 position: absolute;
1000 top: -12px;
1001 right: -12px;
1002 }
1003
1004 .leaflet-popup-content-wrapper, .leaflet-popup-tip {
1005 box-shadow: none;
1006 background: transparent;
1007 border: 0;
1008 }
1009
1010 .map-box .listing-img-container img {
1011 width: 100%;
1012 -webkit-border-radius: 4px 4px 0 0;
1013 border-radius: 4px 4px 0 0;
1014 position: relative;
1015 height: calc(100% - 84px);
1016 -o-object-fit: cover;
1017 object-fit: cover;
1018 -webkit-box-shadow: none;
1019 box-shadow: none;
1020 }
1021
1022 .map-box .rate-info > span {
1023 color: #fff;
1024 text-transform: uppercase;
1025 font-size: 12px;
1026 background: rgba(145, 147, 152, 0.7);
1027 -webkit-border-radius: 50px;
1028 border-radius: 50px;
1029 padding: 5px 13px;
1030 float: right;
1031 margin-top: 2px;
1032 background: #a357de;
1033 z-index: 5;
1034 }
1035
1036 .rate-info:before {
1037 content: '';
1038 position: absolute;
1039 top: 0;
1040 left: 0;
1041 width: 100%;
1042 height: 100%;
1043 background-image: -o-linear-gradient(rgba(255, 255, 255, 0.02), rgba(44, 44, 47, 0.75));
1044 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.02)), to(rgba(44, 44, 47, 0.75)));
1045 background-image: linear-gradient(rgba(255, 255, 255, 0.02), rgba(44, 44, 47, 0.75));
1046 z-index: 0;
1047 }
1048
1049 a {
1050 -webkit-box-shadow: none !important;
1051 box-shadow: none !important;
1052 }
1053
1054 .leaflet-top {
1055 top: 50%;
1056 margin-top: -37px;
1057 }
1058
1059 .leaflet-touch .leaflet-bar {
1060 border: 0;
1061 background-clip: padding-box;
1062 }
1063
1064 .leaflet-touch .leaflet-bar a{
1065 background-color: #fff;
1066 color: #333;
1067 cursor: pointer;
1068 border-radius: 50% !important;
1069 margin: 5px 15px;
1070 -webkit-transition: color 0.3s, background-color 0.3s;
1071 -o-transition: color 0.3s, background-color 0.3s;
1072 transition: color 0.3s, background-color 0.3s;
1073 -webkit-box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.2) !important;
1074 box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.2) !important;
1075 text-align: center;
1076 font-size: 15px;
1077 height: 34px;
1078 width: 34px;
1079 display: flex;
1080 align-items: center;
1081 justify-content: center;
1082 line-height: 1;
1083
1084 &.leaflet-control-zoom-fullscreen {
1085
1086 }
1087 }
1088
1089 .leaflet-touch .leaflet-bar a:hover{
1090 background-color: #66676b;
1091 color: #fff;
1092 }
1093
1094 .wdk-infobox {
1095 padding: 15px 20px;
1096 width: 180px;
1097 }
1098
1099 .wdk-infobox .wdk-infobox_title {
1100 font-size: 16px;
1101 margin: 0;
1102 padding-bottom: 10px;
1103 }
1104
1105 .wdk-infobox .wdk-infobox_text {
1106 font-size: 12px;
1107 margin: 0;
1108 }
1109
1110 .gmnoprint img{
1111 max-width: initial;
1112 }
1113 .marker-cluster {
1114 background: transparent !important;
1115 }
1116
1117 .marker-cluster div {
1118 background: #0074e4;
1119 color: #fff;
1120 }
1121
1122 .marker-cluster div::before {
1123 border: 7px solid #0074e4;
1124 opacity: 0.25;
1125 -webkit-box-shadow: inset 0 0 0 4px #0074e4;
1126 box-shadow: inset 0 0 0 4px #0074e4;
1127 content: '';
1128 position: absolute;
1129 border-radius: 50%;
1130 top: 0;
1131 left: 0;
1132 width: 100%;
1133 height: 100%;
1134 -webkit-animation: cluster-animation 2.5s infinite;
1135 animation: cluster-animation 2.5s infinite;
1136 }
1137
1138 .wdk-listing-card .wdk-subtitle-part span {
1139 overflow: hidden;
1140 text-overflow: ellipsis;
1141 display: -webkit-box;
1142 -webkit-line-clamp: 2;
1143 -webkit-box-orient: vertical;
1144 }
1145
1146 .leaflet-container a.leaflet-popup-close-button {
1147 top: 6px;
1148 }
1149
1150 @media (max-width: 767px) {
1151 .infobox {
1152 width: 320px !important;
1153
1154 .wdk-listing-card {
1155 display: grid;
1156 grid-auto-rows: minmax(0px, auto);
1157
1158 .wdk-thumbnail {
1159 grid-column: 1;
1160 grid-row: 10 / 1;
1161 width: 120px;
1162
1163 .wdk-image {
1164 height: 100% !important;
1165 }
1166
1167 .wdk-over-image-bottom {
1168 padding: 7px 10px 5px;
1169 }
1170
1171 .wdk-over-image-top {
1172 margin: 5px 5px;
1173 }
1174
1175 .wdk-compare-listing-button-actions,
1176 .wdk-favorites-actions .fa {
1177 font-size: 17px;
1178 }
1179 }
1180
1181 @for $i from 1 through 10 {
1182 > div:nth-child(#{$i+1}) {
1183 grid-column: 2;
1184 grid-row: #{$i} / #{$i};
1185 }
1186 }
1187
1188 }
1189
1190 .map_infowindow .loading_content {
1191 height: 134px;
1192 overflow: hidden;
1193 }
1194
1195 }
1196 }
1197 }
1198
1199
1200 @media not all and (min-resolution:.001dpcm)
1201 { @supports (-webkit-appearance:none) and (stroke-color:transparent) {
1202
1203 body .wdk-element .wdk-map .wdk_marker-card::before,
1204 body .wdk-element .wdk-map .wdk_marker-card::after {
1205 -webkit-transform: perspective(0) rotateX(0deg) rotateZ(-44deg);
1206 transform: perspective(0) rotateX(0deg) rotateZ(-44deg);
1207 }
1208
1209 body .wdk-element .wdk-map .wdk_marker-card::after {
1210 top: 10px;
1211 }
1212
1213 body .wdk-element .wdk-map .wdk_marker-card::before {
1214 top: 8px;
1215 }
1216 }}
1217
1218
1219 @-webkit-keyframes cluster-animation {
1220 0%,
1221 100% {
1222 -webkit-transform: scale(1.1) rotate(0deg);
1223 transform: scale(1.1) rotate(0deg); }
1224 50% {
1225 -webkit-transform: scale(1.35) rotate(90deg);
1226 transform: scale(1.35) rotate(90deg); }
1227 }
1228
1229 @keyframes cluster-animation {
1230 0%,
1231 100% {
1232 -webkit-transform: scale(1.1) rotate(0deg);
1233 transform: scale(1.1) rotate(0deg); }
1234 50% {
1235 -webkit-transform: scale(1.35) rotate(90deg);
1236 transform: scale(1.35) rotate(90deg); }
1237 }
1238