PluginProbe
WP Directory Kit / 1.1.8
WP Directory Kit v1.1.8
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.1.8, at elementor-elements/assets/css/widgets/wdk-map.scss

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