PluginProbe
WP Directory Kit / 1.2.7
WP Directory Kit v1.2.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 1.4.0 1.4.1 All 35 releases
wpdirectorykit / elementor-elements / assets / css / widgets / wdk-map.scss

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

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