diff --git a/dist/leaflet.css b/dist/leaflet.css index ea3da390..2410992d 100644 --- a/dist/leaflet.css +++ b/dist/leaflet.css @@ -191,37 +191,58 @@ /* general toolbar styles */ .leaflet-bar { - box-shadow: 0 0 8px rgba(0,0,0,0.4); - border: 1px solid #888; - -webkit-border-radius: 5px; - border-radius: 5px; + box-shadow: 0 1px 7px rgba(0,0,0,0.65); + -webkit-border-radius: 4px; + border-radius: 4px; } -.leaflet-bar-part { - background-color: rgba(255, 255, 255, 0.8); - border-bottom: 1px solid #aaa; +.leaflet-bar a { + background-color: #fff; + border-bottom: 1px solid #ccc; + width: 26px; + height: 26px; + line-height: 26px; + display: block; + text-align: center; + text-decoration: none; + color: black; } -.leaflet-bar-part-top { +.leaflet-bar a, +.leaflet-control-layers-toggle { + background-position: 50% 50%; + background-repeat: no-repeat; + display: block; + } +.leaflet-bar a:hover { + background-color: #f4f4f4; + } +.leaflet-bar a:first-child { -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } -.leaflet-bar-part-bottom { +.leaflet-bar a:last-child { -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; border-bottom: none; } +.leaflet-bar a.leaflet-disabled { + cursor: default; + background-color: #f4f4f4; + color: #bbb; + } .leaflet-touch .leaflet-bar { -webkit-border-radius: 10px; border-radius: 10px; } -.leaflet-touch .leaflet-bar-part { - border-bottom: 4px solid rgba(0,0,0,0.3); +.leaflet-touch .leaflet-bar a { + width: 30px; + height: 30px; } -.leaflet-touch .leaflet-bar-part-top { +.leaflet-touch .leaflet-bar a:first-child { -webkit-border-radius: 7px 7px 0 0; border-radius: 7px 7px 0 0; } -.leaflet-touch .leaflet-bar-part-bottom { +.leaflet-touch .leaflet-bar a:last-child { -webkit-border-radius: 0 0 7px 7px; border-radius: 0 0 7px 7px; border-bottom: none; @@ -234,48 +255,23 @@ margin-left: 13px; margin-top: 12px; } -.leaflet-control-zoom a { - width: 22px; - height: 22px; - text-align: center; - text-decoration: none; - color: black; - } -.leaflet-control-zoom a, -.leaflet-control-layers-toggle { - background-position: 50% 50%; - background-repeat: no-repeat; - display: block; - } -.leaflet-control-zoom a:hover { - background-color: #fff; - color: #777; - } .leaflet-control-zoom-in { - font: bold 18px/24px Arial, Helvetica, sans-serif; + font: bold 18px 'Lucida Console', Monaco, monospace; } .leaflet-control-zoom-out { - font: bold 23px/20px Tahoma, Verdana, sans-serif; - } -.leaflet-control-zoom a.leaflet-control-zoom-disabled { - cursor: default; - background-color: rgba(255, 255, 255, 0.8); - color: #bbb; + font: bold 22px 'Lucida Console', Monaco, monospace; } -.leaflet-touch .leaflet-control-zoom a { - width: 30px; - height: 30px; - } .leaflet-touch .leaflet-control-zoom-in { - font-size: 24px; - line-height: 29px; + font-size: 22px; + line-height: 30px; } .leaflet-touch .leaflet-control-zoom-out { font-size: 28px; - line-height: 24px; + line-height: 30px; } + /* layers control */ .leaflet-control-layers { diff --git a/dist/leaflet.ie.css b/dist/leaflet.ie.css index b59c8144..14b84b69 100644 --- a/dist/leaflet.ie.css +++ b/dist/leaflet.ie.css @@ -35,12 +35,6 @@ .leaflet-control-layers { border: 3px solid #999; } -.leaflet-control-zoom a { - background-color: #eee; - } -.leaflet-control-zoom a:hover { - background-color: #fff; - } .leaflet-control-layers-toggle { } .leaflet-control-attribution, diff --git a/src/control/Control.Zoom.js b/src/control/Control.Zoom.js index 98e5388c..91f1efff 100644 --- a/src/control/Control.Zoom.js +++ b/src/control/Control.Zoom.js @@ -9,23 +9,14 @@ L.Control.Zoom = L.Control.extend({ onAdd: function (map) { var zoomName = 'leaflet-control-zoom', - barName = 'leaflet-bar', - partName = barName + '-part', - container = L.DomUtil.create('div', zoomName + ' ' + barName); + container = L.DomUtil.create('div', zoomName + ' leaflet-bar'); this._map = map; - this._zoomInButton = this._createButton('+', 'Zoom in', - zoomName + '-in ' + - partName + ' ' + - partName + '-top', - container, this._zoomIn, this); - - this._zoomOutButton = this._createButton('-', 'Zoom out', - zoomName + '-out ' + - partName + ' ' + - partName + '-bottom', - container, this._zoomOut, this); + this._zoomInButton = this._createButton( + '+', 'Zoom in', zoomName + '-in', container, this._zoomIn, this); + this._zoomOutButton = this._createButton( + '-', 'Zoom out', zoomName + '-out', container, this._zoomOut, this); map.on('zoomend', this._updateDisabled, this); @@ -64,7 +55,7 @@ L.Control.Zoom = L.Control.extend({ _updateDisabled: function () { var map = this._map, - className = 'leaflet-control-zoom-disabled'; + className = 'leaflet-disabled'; L.DomUtil.removeClass(this._zoomInButton, className); L.DomUtil.removeClass(this._zoomOutButton, className);