Merge remote-tracking branch 'origin/control-design'
# By Vladimir Agafonkin (4) and jacobtoye (2) # Via Vladimir Agafonkin (1) and jacobtoye (1) * origin/control-design: Removing unnecessary ie only styles. Using hex color instead of rgba to support oldie. make toolbar styles more generic simplify toolbar classes rename top/bottom to first/last in control classes, thanks @yohanboniface improve zoom control design (refining @jacobtoye's work)
This commit is contained in:
Vladimir Agafonkin
commit
a8763e665b
84
dist/leaflet.css
vendored
84
dist/leaflet.css
vendored
@ -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 {
|
||||
|
||||
6
dist/leaflet.ie.css
vendored
6
dist/leaflet.ie.css
vendored
@ -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,
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user