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