org.argeo.suite.workbench.rap/js/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         }