]> git.openstreetmap.org Git - rails.git/blob - vendor/assets/leaflet/leaflet.css
Merge remote-tracking branch 'openstreetmap/pull/1336'
[rails.git] / vendor / assets / leaflet / leaflet.css
1 /* required styles */
2
3 .leaflet-pane,
4 .leaflet-tile,
5 .leaflet-marker-icon,
6 .leaflet-marker-shadow,
7 .leaflet-tile-container,
8 .leaflet-map-pane svg,
9 .leaflet-map-pane canvas,
10 .leaflet-zoom-box,
11 .leaflet-image-layer,
12 .leaflet-layer {
13         position: absolute;
14         left: 0;
15         top: 0;
16         }
17 .leaflet-container {
18         overflow: hidden;
19         }
20 .leaflet-tile,
21 .leaflet-marker-icon,
22 .leaflet-marker-shadow {
23         -webkit-user-select: none;
24            -moz-user-select: none;
25                 user-select: none;
26           -webkit-user-drag: none;
27         }
28 /* Safari renders non-retina tile on retina better with this, but Chrome is worse */
29 .leaflet-safari .leaflet-tile {
30         image-rendering: -webkit-optimize-contrast;
31         }
32 /* hack that prevents hw layers "stretching" when loading new tiles */
33 .leaflet-safari .leaflet-tile-container {
34         width: 1600px;
35         height: 1600px;
36         -webkit-transform-origin: 0 0;
37         }
38 .leaflet-marker-icon,
39 .leaflet-marker-shadow {
40         display: block;
41         }
42 /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
43 /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
44 .leaflet-container .leaflet-overlay-pane svg,
45 .leaflet-container .leaflet-marker-pane img,
46 .leaflet-container .leaflet-tile-pane img,
47 .leaflet-container img.leaflet-image-layer {
48         max-width: none !important;
49         }
50
51 .leaflet-container.leaflet-touch-zoom {
52         -ms-touch-action: pan-x pan-y;
53         touch-action: pan-x pan-y;
54         }
55 .leaflet-container.leaflet-touch-drag {
56         -ms-touch-action: pinch-zoom;
57         }
58 .leaflet-container.leaflet-touch-drag.leaflet-touch-drag {
59         -ms-touch-action: none;
60         touch-action: none;
61 }
62 .leaflet-tile {
63         filter: inherit;
64         visibility: hidden;
65         }
66 .leaflet-tile-loaded {
67         visibility: inherit;
68         }
69 .leaflet-zoom-box {
70         width: 0;
71         height: 0;
72         -moz-box-sizing: border-box;
73              box-sizing: border-box;
74         z-index: 800;
75         }
76 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
77 .leaflet-overlay-pane svg {
78         -moz-user-select: none;
79         }
80
81 .leaflet-pane         { z-index: 400; }
82
83 .leaflet-tile-pane    { z-index: 200; }
84 .leaflet-overlay-pane { z-index: 400; }
85 .leaflet-shadow-pane  { z-index: 500; }
86 .leaflet-marker-pane  { z-index: 600; }
87 .leaflet-tooltip-pane   { z-index: 650; }
88 .leaflet-popup-pane   { z-index: 700; }
89
90 .leaflet-map-pane canvas { z-index: 100; }
91 .leaflet-map-pane svg    { z-index: 200; }
92
93 .leaflet-vml-shape {
94         width: 1px;
95         height: 1px;
96         }
97 .lvml {
98         behavior: url(#default#VML);
99         display: inline-block;
100         position: absolute;
101         }
102
103
104 /* control positioning */
105
106 .leaflet-control {
107         position: relative;
108         z-index: 800;
109         pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
110         pointer-events: auto;
111         }
112 .leaflet-top,
113 .leaflet-bottom {
114         position: absolute;
115         z-index: 1000;
116         pointer-events: none;
117         }
118 .leaflet-top {
119         top: 0;
120         }
121 .leaflet-right {
122         right: 0;
123         }
124 .leaflet-bottom {
125         bottom: 0;
126         }
127 .leaflet-left {
128         left: 0;
129         }
130 .leaflet-control {
131         float: left;
132         clear: both;
133         }
134 .leaflet-right .leaflet-control {
135         float: right;
136         }
137 .leaflet-top .leaflet-control {
138         margin-top: 10px;
139         }
140 .leaflet-bottom .leaflet-control {
141         margin-bottom: 10px;
142         }
143 .leaflet-left .leaflet-control {
144         margin-left: 10px;
145         }
146 .leaflet-right .leaflet-control {
147         margin-right: 10px;
148         }
149
150
151 /* zoom and fade animations */
152
153 .leaflet-fade-anim .leaflet-tile {
154         will-change: opacity;
155         }
156 .leaflet-fade-anim .leaflet-popup {
157         opacity: 0;
158         -webkit-transition: opacity 0.2s linear;
159            -moz-transition: opacity 0.2s linear;
160              -o-transition: opacity 0.2s linear;
161                 transition: opacity 0.2s linear;
162         }
163 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
164         opacity: 1;
165         }
166 .leaflet-zoom-animated {
167         -webkit-transform-origin: 0 0;
168             -ms-transform-origin: 0 0;
169                 transform-origin: 0 0;
170         }
171 .leaflet-zoom-anim .leaflet-zoom-animated {
172         will-change: transform;
173         }
174 .leaflet-zoom-anim .leaflet-zoom-animated {
175         -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
176            -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
177              -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
178                 transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
179         }
180 .leaflet-zoom-anim .leaflet-tile,
181 .leaflet-pan-anim .leaflet-tile {
182         -webkit-transition: none;
183            -moz-transition: none;
184              -o-transition: none;
185                 transition: none;
186         }
187
188 .leaflet-zoom-anim .leaflet-zoom-hide {
189         visibility: hidden;
190         }
191
192
193 /* cursors */
194
195 .leaflet-interactive {
196         cursor: pointer;
197         }
198 .leaflet-grab {
199         cursor: -webkit-grab;
200         cursor:    -moz-grab;
201         }
202 .leaflet-crosshair,
203 .leaflet-crosshair .leaflet-interactive {
204         cursor: crosshair;
205         }
206 .leaflet-popup-pane,
207 .leaflet-control {
208         cursor: auto;
209         }
210 .leaflet-dragging .leaflet-grab,
211 .leaflet-dragging .leaflet-grab .leaflet-interactive,
212 .leaflet-dragging .leaflet-marker-draggable {
213         cursor: move;
214         cursor: -webkit-grabbing;
215         cursor:    -moz-grabbing;
216         }
217
218 /* marker & overlays interactivity */
219 .leaflet-marker-icon,
220 .leaflet-marker-shadow,
221 .leaflet-image-layer,
222 .leaflet-pane > svg path,
223 .leaflet-tile-container {
224         pointer-events: none;
225         }
226
227 .leaflet-marker-icon.leaflet-interactive,
228 .leaflet-image-layer.leaflet-interactive,
229 .leaflet-pane > svg path.leaflet-interactive {
230         pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
231         pointer-events: auto;
232         }
233
234 /* visual tweaks */
235
236 .leaflet-container {
237         background: #ddd;
238         outline: 0;
239         }
240 .leaflet-container a {
241         color: #0078A8;
242         }
243 .leaflet-container a.leaflet-active {
244         outline: 2px solid orange;
245         }
246 .leaflet-zoom-box {
247         border: 2px dotted #38f;
248         background: rgba(255,255,255,0.5);
249         }
250
251
252 /* general typography */
253 .leaflet-container {
254         font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
255         }
256
257
258 /* general toolbar styles */
259
260 .leaflet-bar {
261         box-shadow: 0 1px 5px rgba(0,0,0,0.65);
262         border-radius: 4px;
263         }
264 .leaflet-bar a,
265 .leaflet-bar a:hover {
266         background-color: #fff;
267         border-bottom: 1px solid #ccc;
268         width: 26px;
269         height: 26px;
270         line-height: 26px;
271         display: block;
272         text-align: center;
273         text-decoration: none;
274         color: black;
275         }
276 .leaflet-bar a,
277 .leaflet-control-layers-toggle {
278         background-position: 50% 50%;
279         background-repeat: no-repeat;
280         display: block;
281         }
282 .leaflet-bar a:hover {
283         background-color: #f4f4f4;
284         }
285 .leaflet-bar a:first-child {
286         border-top-left-radius: 4px;
287         border-top-right-radius: 4px;
288         }
289 .leaflet-bar a:last-child {
290         border-bottom-left-radius: 4px;
291         border-bottom-right-radius: 4px;
292         border-bottom: none;
293         }
294 .leaflet-bar a.leaflet-disabled {
295         cursor: default;
296         background-color: #f4f4f4;
297         color: #bbb;
298         }
299
300 .leaflet-touch .leaflet-bar a {
301         width: 30px;
302         height: 30px;
303         line-height: 30px;
304         }
305
306
307 /* zoom control */
308
309 .leaflet-control-zoom-in,
310 .leaflet-control-zoom-out {
311         font: bold 18px 'Lucida Console', Monaco, monospace;
312         text-indent: 1px;
313         }
314 .leaflet-control-zoom-out {
315         font-size: 20px;
316         }
317
318 .leaflet-touch .leaflet-control-zoom-in {
319         font-size: 22px;
320         }
321 .leaflet-touch .leaflet-control-zoom-out {
322         font-size: 24px;
323         }
324
325
326 /* layers control */
327
328 .leaflet-control-layers {
329         box-shadow: 0 1px 5px rgba(0,0,0,0.4);
330         background: #fff;
331         border-radius: 5px;
332         }
333 .leaflet-control-layers-toggle {
334         background-image: url(images/layers.png);
335         width: 36px;
336         height: 36px;
337         }
338 .leaflet-retina .leaflet-control-layers-toggle {
339         background-image: url(images/layers-2x.png);
340         background-size: 26px 26px;
341         }
342 .leaflet-touch .leaflet-control-layers-toggle {
343         width: 44px;
344         height: 44px;
345         }
346 .leaflet-control-layers .leaflet-control-layers-list,
347 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
348         display: none;
349         }
350 .leaflet-control-layers-expanded .leaflet-control-layers-list {
351         display: block;
352         position: relative;
353         }
354 .leaflet-control-layers-expanded {
355         padding: 6px 10px 6px 6px;
356         color: #333;
357         background: #fff;
358         }
359 .leaflet-control-layers-scrollbar {
360         overflow-y: scroll;
361         padding-right: 5px;
362         }
363 .leaflet-control-layers-selector {
364         margin-top: 2px;
365         position: relative;
366         top: 1px;
367         }
368 .leaflet-control-layers label {
369         display: block;
370         }
371 .leaflet-control-layers-separator {
372         height: 0;
373         border-top: 1px solid #ddd;
374         margin: 5px -10px 5px -6px;
375         }
376
377 /* Default icon URLs */
378 .leaflet-default-icon-path {
379         background-image: url(images/marker-icon.png);
380         }
381
382
383 /* attribution and scale controls */
384
385 .leaflet-container .leaflet-control-attribution {
386         background: #fff;
387         background: rgba(255, 255, 255, 0.7);
388         margin: 0;
389         }
390 .leaflet-control-attribution,
391 .leaflet-control-scale-line {
392         padding: 0 5px;
393         color: #333;
394         }
395 .leaflet-control-attribution a {
396         text-decoration: none;
397         }
398 .leaflet-control-attribution a:hover {
399         text-decoration: underline;
400         }
401 .leaflet-container .leaflet-control-attribution,
402 .leaflet-container .leaflet-control-scale {
403         font-size: 11px;
404         }
405 .leaflet-left .leaflet-control-scale {
406         margin-left: 5px;
407         }
408 .leaflet-bottom .leaflet-control-scale {
409         margin-bottom: 5px;
410         }
411 .leaflet-control-scale-line {
412         border: 2px solid #777;
413         border-top: none;
414         line-height: 1.1;
415         padding: 2px 5px 1px;
416         font-size: 11px;
417         white-space: nowrap;
418         overflow: hidden;
419         -moz-box-sizing: border-box;
420              box-sizing: border-box;
421
422         background: #fff;
423         background: rgba(255, 255, 255, 0.5);
424         }
425 .leaflet-control-scale-line:not(:first-child) {
426         border-top: 2px solid #777;
427         border-bottom: none;
428         margin-top: -2px;
429         }
430 .leaflet-control-scale-line:not(:first-child):not(:last-child) {
431         border-bottom: 2px solid #777;
432         }
433
434 .leaflet-touch .leaflet-control-attribution,
435 .leaflet-touch .leaflet-control-layers,
436 .leaflet-touch .leaflet-bar {
437         box-shadow: none;
438         }
439 .leaflet-touch .leaflet-control-layers,
440 .leaflet-touch .leaflet-bar {
441         border: 2px solid rgba(0,0,0,0.2);
442         background-clip: padding-box;
443         }
444
445
446 /* popup */
447
448 .leaflet-popup {
449         position: absolute;
450         text-align: center;
451         margin-bottom: 20px;
452         }
453 .leaflet-popup-content-wrapper {
454         padding: 1px;
455         text-align: left;
456         border-radius: 12px;
457         }
458 .leaflet-popup-content {
459         margin: 13px 19px;
460         line-height: 1.4;
461         }
462 .leaflet-popup-content p {
463         margin: 18px 0;
464         }
465 .leaflet-popup-tip-container {
466         width: 40px;
467         height: 20px;
468         position: absolute;
469         left: 50%;
470         margin-left: -20px;
471         overflow: hidden;
472         pointer-events: none;
473         }
474 .leaflet-popup-tip {
475         width: 17px;
476         height: 17px;
477         padding: 1px;
478
479         margin: -10px auto 0;
480
481         -webkit-transform: rotate(45deg);
482            -moz-transform: rotate(45deg);
483             -ms-transform: rotate(45deg);
484              -o-transform: rotate(45deg);
485                 transform: rotate(45deg);
486         }
487 .leaflet-popup-content-wrapper,
488 .leaflet-popup-tip {
489         background: white;
490         color: #333;
491         box-shadow: 0 3px 14px rgba(0,0,0,0.4);
492         }
493 .leaflet-container a.leaflet-popup-close-button {
494         position: absolute;
495         top: 0;
496         right: 0;
497         padding: 4px 4px 0 0;
498         border: none;
499         text-align: center;
500         width: 18px;
501         height: 14px;
502         font: 16px/14px Tahoma, Verdana, sans-serif;
503         color: #c3c3c3;
504         text-decoration: none;
505         font-weight: bold;
506         background: transparent;
507         }
508 .leaflet-container a.leaflet-popup-close-button:hover {
509         color: #999;
510         }
511 .leaflet-popup-scrolled {
512         overflow: auto;
513         border-bottom: 1px solid #ddd;
514         border-top: 1px solid #ddd;
515         }
516
517 .leaflet-oldie .leaflet-popup-content-wrapper {
518         zoom: 1;
519         }
520 .leaflet-oldie .leaflet-popup-tip {
521         width: 24px;
522         margin: 0 auto;
523
524         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
525         filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
526         }
527 .leaflet-oldie .leaflet-popup-tip-container {
528         margin-top: -1px;
529         }
530
531 .leaflet-oldie .leaflet-control-zoom,
532 .leaflet-oldie .leaflet-control-layers,
533 .leaflet-oldie .leaflet-popup-content-wrapper,
534 .leaflet-oldie .leaflet-popup-tip {
535         border: 1px solid #999;
536         }
537
538
539 /* div icon */
540
541 .leaflet-div-icon {
542         background: #fff;
543         border: 1px solid #666;
544         }
545
546
547 /* Tooltip */
548 /* Base styles for the element that has a tooltip */
549 .leaflet-tooltip {
550         position: absolute;
551         padding: 6px;
552         background-color: #fff;
553         border: 1px solid #fff;
554         border-radius: 3px;
555         color: #222;
556         white-space: nowrap;
557         -webkit-user-select: none;
558         -moz-user-select: none;
559         -ms-user-select: none;
560         user-select: none;
561         pointer-events: none;
562         box-shadow: 0 1px 3px rgba(0,0,0,0.4);
563         }
564 .leaflet-tooltip.leaflet-clickable {
565         cursor: pointer;
566         pointer-events: auto;
567         }
568 .leaflet-tooltip-top:before,
569 .leaflet-tooltip-bottom:before,
570 .leaflet-tooltip-left:before,
571 .leaflet-tooltip-right:before {
572         position: absolute;
573         pointer-events: none;
574         border: 6px solid transparent;
575         background: transparent;
576         content: "";
577         }
578
579 /* Directions */
580
581 .leaflet-tooltip-bottom {
582         margin-top: 6px;
583 }
584 .leaflet-tooltip-top {
585         margin-top: -6px;
586 }
587 .leaflet-tooltip-bottom:before,
588 .leaflet-tooltip-top:before {
589         left: 50%;
590         margin-left: -6px;
591         }
592 .leaflet-tooltip-top:before {
593         bottom: 0;
594         margin-bottom: -12px;
595         border-top-color: #fff;
596         }
597 .leaflet-tooltip-bottom:before {
598         top: 0;
599         margin-top: -12px;
600         margin-left: -6px;
601         border-bottom-color: #fff;
602         }
603 .leaflet-tooltip-left {
604         margin-left: -6px;
605 }
606 .leaflet-tooltip-right {
607         margin-left: 6px;
608 }
609 .leaflet-tooltip-left:before,
610 .leaflet-tooltip-right:before {
611         top: 50%;
612         margin-top: -6px;
613         }
614 .leaflet-tooltip-left:before {
615         right: 0;
616         margin-right: -12px;
617         border-left-color: #fff;
618         }
619 .leaflet-tooltip-right:before {
620         left: 0;
621         margin-left: -12px;
622         border-right-color: #fff;
623         }