]> git.openstreetmap.org Git - rails.git/blobdiff - vendor/assets/leaflet/leaflet.css
Update leaflet to 1.3.3
[rails.git] / vendor / assets / leaflet / leaflet.css
index dea175f0f0fe3cf0c55fd63b158a25bcd4a03397..d1b47a1251c18df4c08b0b8c0b2c64522c90eab9 100644 (file)
@@ -1,16 +1,12 @@
 /* required styles */
 
 /* required styles */
 
-.leaflet-map-pane,
+.leaflet-pane,
 .leaflet-tile,
 .leaflet-marker-icon,
 .leaflet-marker-shadow,
 .leaflet-tile,
 .leaflet-marker-icon,
 .leaflet-marker-shadow,
-.leaflet-tile-pane,
 .leaflet-tile-container,
 .leaflet-tile-container,
-.leaflet-overlay-pane,
-.leaflet-shadow-pane,
-.leaflet-marker-pane,
-.leaflet-popup-pane,
-.leaflet-overlay-pane svg,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
 .leaflet-zoom-box,
 .leaflet-image-layer,
 .leaflet-layer {
 .leaflet-zoom-box,
 .leaflet-image-layer,
 .leaflet-layer {
@@ -20,8 +16,6 @@
        }
 .leaflet-container {
        overflow: hidden;
        }
 .leaflet-container {
        overflow: hidden;
-       -ms-touch-action: none;
-       touch-action: none;
        }
 .leaflet-tile,
 .leaflet-marker-icon,
        }
 .leaflet-tile,
 .leaflet-marker-icon,
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
-       -webkit-user-drag: none;
+         -webkit-user-drag: none;
+       }
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+       image-rendering: -webkit-optimize-contrast;
+       }
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+       width: 1600px;
+       height: 1600px;
+       -webkit-transform-origin: 0 0;
        }
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
        display: block;
        }
        }
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
        display: block;
        }
-/* map is broken in FF if you have max-width: 100% on tiles */
-.leaflet-container img {
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg,
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer {
        max-width: none !important;
        max-width: none !important;
+       max-height: none !important;
        }
        }
-/* stupid Android 2 doesn't understand "max-width: none" properly */
-.leaflet-container img.leaflet-image-layer {
-       max-width: 15000px !important;
+
+.leaflet-container.leaflet-touch-zoom {
+       -ms-touch-action: pan-x pan-y;
+       touch-action: pan-x pan-y;
        }
        }
+.leaflet-container.leaflet-touch-drag {
+       -ms-touch-action: pinch-zoom;
+       /* Fallback for FF which doesn't support pinch-zoom */
+       touch-action: none;
+       touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+       -ms-touch-action: none;
+       touch-action: none;
+}
+.leaflet-container {
+       -webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+       -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
 .leaflet-tile {
        filter: inherit;
        visibility: hidden;
 .leaflet-tile {
        filter: inherit;
        visibility: hidden;
 .leaflet-zoom-box {
        width: 0;
        height: 0;
 .leaflet-zoom-box {
        width: 0;
        height: 0;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+       z-index: 800;
        }
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
 .leaflet-overlay-pane svg {
        -moz-user-select: none;
        }
 
        }
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
 .leaflet-overlay-pane svg {
        -moz-user-select: none;
        }
 
-.leaflet-tile-pane    { z-index: 2; }
-.leaflet-objects-pane { z-index: 3; }
-.leaflet-overlay-pane { z-index: 4; }
-.leaflet-shadow-pane  { z-index: 5; }
-.leaflet-marker-pane  { z-index: 6; }
-.leaflet-popup-pane   { z-index: 7; }
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
 
 .leaflet-vml-shape {
        width: 1px;
 
 .leaflet-vml-shape {
        width: 1px;
 
 .leaflet-control {
        position: relative;
 
 .leaflet-control {
        position: relative;
-       z-index: 7;
+       z-index: 800;
+       pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
        pointer-events: auto;
        }
 .leaflet-top,
        pointer-events: auto;
        }
 .leaflet-top,
 
 /* zoom and fade animations */
 
 
 /* zoom and fade animations */
 
-.leaflet-fade-anim .leaflet-tile,
+.leaflet-fade-anim .leaflet-tile {
+       will-change: opacity;
+       }
 .leaflet-fade-anim .leaflet-popup {
        opacity: 0;
        -webkit-transition: opacity 0.2s linear;
 .leaflet-fade-anim .leaflet-popup {
        opacity: 0;
        -webkit-transition: opacity 0.2s linear;
             -o-transition: opacity 0.2s linear;
                transition: opacity 0.2s linear;
        }
             -o-transition: opacity 0.2s linear;
                transition: opacity 0.2s linear;
        }
-.leaflet-fade-anim .leaflet-tile-loaded,
 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
        opacity: 1;
        }
 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
        opacity: 1;
        }
-
+.leaflet-zoom-animated {
+       -webkit-transform-origin: 0 0;
+           -ms-transform-origin: 0 0;
+               transform-origin: 0 0;
+       }
+.leaflet-zoom-anim .leaflet-zoom-animated {
+       will-change: transform;
+       }
 .leaflet-zoom-anim .leaflet-zoom-animated {
        -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
           -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
 .leaflet-zoom-anim .leaflet-zoom-animated {
        -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
           -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
                transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
        }
 .leaflet-zoom-anim .leaflet-tile,
                transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
        }
 .leaflet-zoom-anim .leaflet-tile,
-.leaflet-pan-anim .leaflet-tile,
-.leaflet-touching .leaflet-zoom-animated {
+.leaflet-pan-anim .leaflet-tile {
        -webkit-transition: none;
           -moz-transition: none;
             -o-transition: none;
        -webkit-transition: none;
           -moz-transition: none;
             -o-transition: none;
 
 /* cursors */
 
 
 /* cursors */
 
-.leaflet-clickable {
+.leaflet-interactive {
        cursor: pointer;
        }
        cursor: pointer;
        }
-.leaflet-container {
+.leaflet-grab {
        cursor: -webkit-grab;
        cursor:    -moz-grab;
        }
        cursor: -webkit-grab;
        cursor:    -moz-grab;
        }
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+       cursor: crosshair;
+       }
 .leaflet-popup-pane,
 .leaflet-control {
        cursor: auto;
        }
 .leaflet-popup-pane,
 .leaflet-control {
        cursor: auto;
        }
-.leaflet-dragging .leaflet-container,
-.leaflet-dragging .leaflet-clickable {
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
        cursor: move;
        cursor: -webkit-grabbing;
        cursor:    -moz-grabbing;
        }
 
        cursor: move;
        cursor: -webkit-grabbing;
        cursor:    -moz-grabbing;
        }
 
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+       pointer-events: none;
+       }
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive {
+       pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+       pointer-events: auto;
+       }
 
 /* visual tweaks */
 
 
 /* visual tweaks */
 
        height: 30px;
        line-height: 30px;
        }
        height: 30px;
        line-height: 30px;
        }
-
+.leaflet-touch .leaflet-bar a:first-child {
+       border-top-left-radius: 2px;
+       border-top-right-radius: 2px;
+       }
+.leaflet-touch .leaflet-bar a:last-child {
+       border-bottom-left-radius: 2px;
+       border-bottom-right-radius: 2px;
+       }
 
 /* zoom control */
 
 
 /* zoom control */
 
        font: bold 18px 'Lucida Console', Monaco, monospace;
        text-indent: 1px;
        }
        font: bold 18px 'Lucida Console', Monaco, monospace;
        text-indent: 1px;
        }
-.leaflet-control-zoom-out {
-       font-size: 20px;
-       }
 
 
-.leaflet-touch .leaflet-control-zoom-in {
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
        font-size: 22px;
        }
        font-size: 22px;
        }
-.leaflet-touch .leaflet-control-zoom-out {
-       font-size: 24px;
-       }
 
 
 /* layers control */
 
 
 /* layers control */
        color: #333;
        background: #fff;
        }
        color: #333;
        background: #fff;
        }
+.leaflet-control-layers-scrollbar {
+       overflow-y: scroll;
+       overflow-x: hidden;
+       padding-right: 5px;
+       }
 .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
 .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
        margin: 5px -10px 5px -6px;
        }
 
        margin: 5px -10px 5px -6px;
        }
 
+/* Default icon URLs */
+.leaflet-default-icon-path {
+       background-image: url(images/marker-icon.png);
+       }
+
 
 /* attribution and scale controls */
 
 
 /* attribution and scale controls */
 
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
-       -moz-box-sizing: content-box;
-            box-sizing: content-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
 
        background: #fff;
        background: rgba(255, 255, 255, 0.5);
 
        background: #fff;
        background: rgba(255, 255, 255, 0.5);
 .leaflet-popup {
        position: absolute;
        text-align: center;
 .leaflet-popup {
        position: absolute;
        text-align: center;
+       margin-bottom: 20px;
        }
 .leaflet-popup-content-wrapper {
        padding: 1px;
        }
 .leaflet-popup-content-wrapper {
        padding: 1px;
        margin: 18px 0;
        }
 .leaflet-popup-tip-container {
        margin: 18px 0;
        }
 .leaflet-popup-tip-container {
-       margin: 0 auto;
        width: 40px;
        height: 20px;
        width: 40px;
        height: 20px;
-       position: relative;
+       position: absolute;
+       left: 50%;
+       margin-left: -20px;
        overflow: hidden;
        overflow: hidden;
+       pointer-events: none;
        }
 .leaflet-popup-tip {
        width: 17px;
        }
 .leaflet-popup-tip {
        width: 17px;
 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
        background: white;
 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
        background: white;
-
+       color: #333;
        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
        }
 .leaflet-container a.leaflet-popup-close-button {
        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
        }
 .leaflet-container a.leaflet-popup-close-button {
        top: 0;
        right: 0;
        padding: 4px 4px 0 0;
        top: 0;
        right: 0;
        padding: 4px 4px 0 0;
+       border: none;
        text-align: center;
        width: 18px;
        height: 14px;
        text-align: center;
        width: 18px;
        height: 14px;
        background: #fff;
        border: 1px solid #666;
        }
        background: #fff;
        border: 1px solid #666;
        }
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+       position: absolute;
+       padding: 6px;
+       background-color: #fff;
+       border: 1px solid #fff;
+       border-radius: 3px;
+       color: #222;
+       white-space: nowrap;
+       -webkit-user-select: none;
+       -moz-user-select: none;
+       -ms-user-select: none;
+       user-select: none;
+       pointer-events: none;
+       box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+       }
+.leaflet-tooltip.leaflet-clickable {
+       cursor: pointer;
+       pointer-events: auto;
+       }
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+       position: absolute;
+       pointer-events: none;
+       border: 6px solid transparent;
+       background: transparent;
+       content: "";
+       }
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+       margin-top: 6px;
+}
+.leaflet-tooltip-top {
+       margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+       left: 50%;
+       margin-left: -6px;
+       }
+.leaflet-tooltip-top:before {
+       bottom: 0;
+       margin-bottom: -12px;
+       border-top-color: #fff;
+       }
+.leaflet-tooltip-bottom:before {
+       top: 0;
+       margin-top: -12px;
+       margin-left: -6px;
+       border-bottom-color: #fff;
+       }
+.leaflet-tooltip-left {
+       margin-left: -6px;
+}
+.leaflet-tooltip-right {
+       margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+       top: 50%;
+       margin-top: -6px;
+       }
+.leaflet-tooltip-left:before {
+       right: 0;
+       margin-right: -12px;
+       border-left-color: #fff;
+       }
+.leaflet-tooltip-right:before {
+       left: 0;
+       margin-left: -12px;
+       border-right-color: #fff;
+       }