]> git.openstreetmap.org Git - rails.git/blob - vendor/assets/leaflet/leaflet.css
Update Leaflet to 0.6.1
[rails.git] / vendor / assets / leaflet / leaflet.css
1 /* required styles */\r
2 \r
3 .leaflet-map-pane,\r
4 .leaflet-tile,\r
5 .leaflet-marker-icon,\r
6 .leaflet-marker-shadow,\r
7 .leaflet-tile-pane,\r
8 .leaflet-tile-container,\r
9 .leaflet-overlay-pane,\r
10 .leaflet-shadow-pane,\r
11 .leaflet-marker-pane,\r
12 .leaflet-popup-pane,\r
13 .leaflet-overlay-pane svg,\r
14 .leaflet-zoom-box,\r
15 .leaflet-image-layer,\r
16 .leaflet-layer {\r
17         position: absolute;\r
18         left: 0;\r
19         top: 0;\r
20         }\r
21 .leaflet-container {\r
22         overflow: hidden;\r
23         -ms-touch-action: none;\r
24         }\r
25 .leaflet-tile,\r
26 .leaflet-marker-icon,\r
27 .leaflet-marker-shadow {\r
28         -webkit-user-select: none;\r
29            -moz-user-select: none;\r
30                 user-select: none;\r
31         -webkit-user-drag: none;\r
32         }\r
33 .leaflet-marker-icon,\r
34 .leaflet-marker-shadow {\r
35         display: block;\r
36         }\r
37 /* map is broken in FF if you have max-width: 100% on tiles */\r
38 .leaflet-container img {\r
39         max-width: none !important;\r
40         }\r
41 /* stupid Android 2 doesn't understand "max-width: none" properly */\r
42 .leaflet-container img.leaflet-image-layer {\r
43         max-width: 15000px !important;\r
44         }\r
45 .leaflet-tile {\r
46         filter: inherit;\r
47         visibility: hidden;\r
48         }\r
49 .leaflet-tile-loaded {\r
50         visibility: inherit;\r
51         }\r
52 .leaflet-zoom-box {\r
53         width: 0;\r
54         height: 0;\r
55         }\r
56 \r
57 .leaflet-tile-pane    { z-index: 2; }\r
58 .leaflet-objects-pane { z-index: 3; }\r
59 .leaflet-overlay-pane { z-index: 4; }\r
60 .leaflet-shadow-pane  { z-index: 5; }\r
61 .leaflet-marker-pane  { z-index: 6; }\r
62 .leaflet-popup-pane   { z-index: 7; }\r
63 \r
64 \r
65 /* control positioning */\r
66 \r
67 .leaflet-control {\r
68         position: relative;\r
69         z-index: 7;\r
70         pointer-events: auto;\r
71         }\r
72 .leaflet-top,\r
73 .leaflet-bottom {\r
74         position: absolute;\r
75         z-index: 1000;\r
76         pointer-events: none;\r
77         }\r
78 .leaflet-top {\r
79         top: 0;\r
80         }\r
81 .leaflet-right {\r
82         right: 0;\r
83         }\r
84 .leaflet-bottom {\r
85         bottom: 0;\r
86         }\r
87 .leaflet-left {\r
88         left: 0;\r
89         }\r
90 .leaflet-control {\r
91         float: left;\r
92         clear: both;\r
93         }\r
94 .leaflet-right .leaflet-control {\r
95         float: right;\r
96         }\r
97 .leaflet-top .leaflet-control {\r
98         margin-top: 10px;\r
99         }\r
100 .leaflet-bottom .leaflet-control {\r
101         margin-bottom: 10px;\r
102         }\r
103 .leaflet-left .leaflet-control {\r
104         margin-left: 10px;\r
105         }\r
106 .leaflet-right .leaflet-control {\r
107         margin-right: 10px;\r
108         }\r
109 \r
110 \r
111 /* zoom and fade animations */\r
112 \r
113 .leaflet-fade-anim .leaflet-tile,\r
114 .leaflet-fade-anim .leaflet-popup {\r
115         opacity: 0;\r
116         -webkit-transition: opacity 0.2s linear;\r
117            -moz-transition: opacity 0.2s linear;\r
118              -o-transition: opacity 0.2s linear;\r
119                 transition: opacity 0.2s linear;\r
120         }\r
121 .leaflet-fade-anim .leaflet-tile-loaded,\r
122 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {\r
123         opacity: 1;\r
124         }\r
125 \r
126 .leaflet-zoom-anim .leaflet-zoom-animated {\r
127         -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);\r
128            -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);\r
129              -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);\r
130                 transition:         transform 0.25s cubic-bezier(0,0,0.25,1);\r
131         }\r
132 .leaflet-zoom-anim .leaflet-tile,\r
133 .leaflet-pan-anim .leaflet-tile,\r
134 .leaflet-touching .leaflet-zoom-animated {\r
135         -webkit-transition: none;\r
136            -moz-transition: none;\r
137              -o-transition: none;\r
138                 transition: none;\r
139         }\r
140 \r
141 .leaflet-zoom-anim .leaflet-zoom-hide {\r
142         visibility: hidden;\r
143         }\r
144 \r
145 \r
146 /* cursors */\r
147 \r
148 .leaflet-clickable {\r
149         cursor: pointer;\r
150         }\r
151 .leaflet-container {\r
152         cursor: -webkit-grab;\r
153         cursor:    -moz-grab;\r
154         }\r
155 .leaflet-popup-pane,\r
156 .leaflet-control {\r
157         cursor: auto;\r
158         }\r
159 .leaflet-dragging,\r
160 .leaflet-dragging .leaflet-clickable,\r
161 .leaflet-dragging .leaflet-container {\r
162         cursor: move;\r
163         cursor: -webkit-grabbing;\r
164         cursor:    -moz-grabbing;\r
165         }\r
166 \r
167 \r
168 /* visual tweaks */\r
169 \r
170 .leaflet-container {\r
171         background: #ddd;\r
172         outline: 0;\r
173         }\r
174 .leaflet-container a {\r
175         color: #0078A8;\r
176         }\r
177 .leaflet-container a.leaflet-active {\r
178         outline: 2px solid orange;\r
179         }\r
180 .leaflet-zoom-box {\r
181         border: 2px dotted #05f;\r
182         background: white;\r
183         opacity: 0.5;\r
184         }\r
185 \r
186 \r
187 /* general typography */\r
188 .leaflet-container {\r
189         font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;\r
190         }\r
191 \r
192 \r
193 /* general toolbar styles */\r
194 \r
195 .leaflet-bar {\r
196         box-shadow: 0 1px 7px rgba(0,0,0,0.65);\r
197         -webkit-border-radius: 4px;\r
198                 border-radius: 4px;\r
199         }\r
200 .leaflet-bar a, .leaflet-bar a:hover {\r
201         background-color: #fff;\r
202         border-bottom: 1px solid #ccc;\r
203         width: 26px;\r
204         height: 26px;\r
205         line-height: 26px;\r
206         display: block;\r
207         text-align: center;\r
208         text-decoration: none;\r
209         color: black;\r
210         }\r
211 .leaflet-bar a,\r
212 .leaflet-control-layers-toggle {\r
213         background-position: 50% 50%;\r
214         background-repeat: no-repeat;\r
215         display: block;\r
216         }\r
217 .leaflet-bar a:hover {\r
218         background-color: #f4f4f4;\r
219         }\r
220 .leaflet-bar a:first-child {\r
221         -webkit-border-top-left-radius: 4px;\r
222                 border-top-left-radius: 4px;\r
223         -webkit-border-top-right-radius: 4px;\r
224                 border-top-right-radius: 4px;\r
225         }\r
226 .leaflet-bar a:last-child {\r
227         -webkit-border-bottom-left-radius: 4px;\r
228                 border-bottom-left-radius: 4px;\r
229         -webkit-border-bottom-right-radius: 4px;\r
230                 border-bottom-right-radius: 4px;\r
231         border-bottom: none;\r
232         }\r
233 .leaflet-bar a.leaflet-disabled {\r
234         cursor: default;\r
235         background-color: #f4f4f4;\r
236         color: #bbb;\r
237         }\r
238 \r
239 .leaflet-touch .leaflet-bar {\r
240         -webkit-border-radius: 10px;\r
241                 border-radius: 10px;\r
242         }\r
243 .leaflet-touch .leaflet-bar a {\r
244         width: 30px;\r
245         height: 30px;\r
246         }\r
247 .leaflet-touch .leaflet-bar a:first-child {\r
248         -webkit-border-top-left-radius: 7px;\r
249                 border-top-left-radius: 7px;\r
250         -webkit-border-top-right-radius: 7px;\r
251                 border-top-right-radius: 7px;\r
252         }\r
253 .leaflet-touch .leaflet-bar a:last-child {\r
254         -webkit-border-bottom-left-radius: 7px;\r
255                 border-bottom-left-radius: 7px;\r
256         -webkit-border-bottom-right-radius: 7px;\r
257                 border-bottom-right-radius: 7px;\r
258         border-bottom: none;\r
259         }\r
260 \r
261 \r
262 /* zoom control */\r
263 \r
264 .leaflet-control-zoom-in {\r
265         font: bold 18px 'Lucida Console', Monaco, monospace;\r
266         }\r
267 .leaflet-control-zoom-out {\r
268         font: bold 22px 'Lucida Console', Monaco, monospace;\r
269         }\r
270 \r
271 .leaflet-touch .leaflet-control-zoom-in {\r
272         font-size: 22px;\r
273         line-height: 30px;\r
274         }\r
275 .leaflet-touch .leaflet-control-zoom-out {\r
276         font-size: 28px;\r
277         line-height: 30px;\r
278         }\r
279 \r
280 \r
281 /* layers control */\r
282 \r
283 .leaflet-control-layers {\r
284         box-shadow: 0 1px 7px rgba(0,0,0,0.4);\r
285         background: #f8f8f9;\r
286         -webkit-border-radius: 5px;\r
287                 border-radius: 5px;\r
288         }\r
289 .leaflet-control-layers-toggle {\r
290         background-image: url(images/layers.png);\r
291         width: 36px;\r
292         height: 36px;\r
293         }\r
294 .leaflet-retina .leaflet-control-layers-toggle {\r
295         background-image: url(images/layers-2x.png);\r
296         background-size: 26px 26px;\r
297         }\r
298 .leaflet-touch .leaflet-control-layers-toggle {\r
299         width: 44px;\r
300         height: 44px;\r
301         }\r
302 .leaflet-control-layers .leaflet-control-layers-list,\r
303 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {\r
304         display: none;\r
305         }\r
306 .leaflet-control-layers-expanded .leaflet-control-layers-list {\r
307         display: block;\r
308         position: relative;\r
309         }\r
310 .leaflet-control-layers-expanded {\r
311         padding: 6px 10px 6px 6px;\r
312         color: #333;\r
313         background: #fff;\r
314         }\r
315 .leaflet-control-layers-selector {\r
316         margin-top: 2px;\r
317         position: relative;\r
318         top: 1px;\r
319         }\r
320 .leaflet-control-layers label {\r
321         display: block;\r
322         }\r
323 .leaflet-control-layers-separator {\r
324         height: 0;\r
325         border-top: 1px solid #ddd;\r
326         margin: 5px -10px 5px -6px;\r
327         }\r
328 \r
329 \r
330 /* attribution and scale controls */\r
331 \r
332 .leaflet-container .leaflet-control-attribution {\r
333         background-color: rgba(255, 255, 255, 0.7);\r
334         box-shadow: 0 0 5px #bbb;\r
335         margin: 0;\r
336         }\r
337 .leaflet-control-attribution,\r
338 .leaflet-control-scale-line {\r
339         padding: 0 5px;\r
340         color: #333;\r
341         }\r
342 .leaflet-container .leaflet-control-attribution,\r
343 .leaflet-container .leaflet-control-scale {\r
344         font-size: 11px;\r
345         }\r
346 .leaflet-left .leaflet-control-scale {\r
347         margin-left: 5px;\r
348         }\r
349 .leaflet-bottom .leaflet-control-scale {\r
350         margin-bottom: 5px;\r
351         }\r
352 .leaflet-control-scale-line {\r
353         border: 2px solid #777;\r
354         border-top: none;\r
355         color: black;\r
356         line-height: 1.1;\r
357         padding: 2px 5px 1px;\r
358         font-size: 11px;\r
359         text-shadow: 1px 1px 1px #fff;\r
360         background-color: rgba(255, 255, 255, 0.5);\r
361         box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);\r
362         white-space: nowrap;\r
363         overflow: hidden;\r
364         }\r
365 .leaflet-control-scale-line:not(:first-child) {\r
366         border-top: 2px solid #777;\r
367         border-bottom: none;\r
368         margin-top: -2px;\r
369         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\r
370         }\r
371 .leaflet-control-scale-line:not(:first-child):not(:last-child) {\r
372         border-bottom: 2px solid #777;\r
373         }\r
374 \r
375 .leaflet-touch .leaflet-control-attribution,\r
376 .leaflet-touch .leaflet-control-layers,\r
377 .leaflet-touch .leaflet-control-zoom {\r
378         box-shadow: none;\r
379         }\r
380 .leaflet-touch .leaflet-control-layers,\r
381 .leaflet-touch .leaflet-control-zoom {\r
382         border: 4px solid rgba(0,0,0,0.3);\r
383         }\r
384 \r
385 \r
386 /* popup */\r
387 \r
388 .leaflet-popup {\r
389         position: absolute;\r
390         text-align: center;\r
391         }\r
392 .leaflet-popup-content-wrapper {\r
393         padding: 1px;\r
394         text-align: left;\r
395         -webkit-border-radius: 12px;\r
396                 border-radius: 12px;\r
397         }\r
398 .leaflet-popup-content {\r
399         margin: 13px 19px;\r
400         line-height: 1.4;\r
401         }\r
402 .leaflet-popup-content p {\r
403         margin: 18px 0;\r
404         }\r
405 .leaflet-popup-tip-container {\r
406         margin: 0 auto;\r
407         width: 40px;\r
408         height: 20px;\r
409         position: relative;\r
410         overflow: hidden;\r
411         }\r
412 .leaflet-popup-tip {\r
413         width: 17px;\r
414         height: 17px;\r
415         padding: 1px;\r
416 \r
417         margin: -10px auto 0;\r
418 \r
419         -webkit-transform: rotate(45deg);\r
420            -moz-transform: rotate(45deg);\r
421             -ms-transform: rotate(45deg);\r
422              -o-transform: rotate(45deg);\r
423                 transform: rotate(45deg);\r
424         }\r
425 .leaflet-popup-content-wrapper, .leaflet-popup-tip {\r
426         background: white;\r
427 \r
428         box-shadow: 0 3px 14px rgba(0,0,0,0.4);\r
429         }\r
430 .leaflet-container a.leaflet-popup-close-button {\r
431         position: absolute;\r
432         top: 0;\r
433         right: 0;\r
434         padding: 4px 4px 0 0;\r
435         text-align: center;\r
436         width: 18px;\r
437         height: 14px;\r
438         font: 16px/14px Tahoma, Verdana, sans-serif;\r
439         color: #c3c3c3;\r
440         text-decoration: none;\r
441         font-weight: bold;\r
442         background: transparent;\r
443         }\r
444 .leaflet-container a.leaflet-popup-close-button:hover {\r
445         color: #999;\r
446         }\r
447 .leaflet-popup-scrolled {\r
448         overflow: auto;\r
449         border-bottom: 1px solid #ddd;\r
450         border-top: 1px solid #ddd;\r
451         }\r
452 \r
453 \r
454 /* div icon */\r
455 \r
456 .leaflet-div-icon {\r
457         background: #fff;\r
458         border: 1px solid #666;\r
459         }\r
460 .leaflet-editing-icon {\r
461         -webkit-border-radius: 2px;\r
462                 border-radius: 2px;\r
463         }\r