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