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)

dist/leaflet.css

@@ -191,37 +191,58 @@
 /* general toolbar styles */
 
 .leaflet-bar {
-	box-shadow: 0 0 8px rgba(0,0,0,0.4);
+	box-shadow: 0 1px 7px rgba(0,0,0,0.65);
-	border: 1px solid #888;
+	-webkit-border-radius: 4px;
-	-webkit-border-radius: 5px;
+	        border-radius: 4px;
-	        border-radius: 5px;
 	}
-.leaflet-bar-part {
+.leaflet-bar a {
-	background-color: rgba(255, 255, 255, 0.8);
+	background-color: #fff;
-	border-bottom: 1px solid #aaa;
+	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 {
+.leaflet-touch .leaflet-bar a {
-	border-bottom: 4px solid rgba(0,0,0,0.3);
+	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;
+	font: bold 22px 'Lucida Console', Monaco, monospace;
-	}
-.leaflet-control-zoom a.leaflet-control-zoom-disabled {
-	cursor: default;
-	background-color: rgba(255, 255, 255, 0.8);
-	color: #bbb;
 	}
 
-.leaflet-touch .leaflet-control-zoom a {
-	width: 30px;
-	height: 30px;
-	}
 .leaflet-touch .leaflet-control-zoom-in {
-	font-size: 24px;
+	font-size: 22px;
-	line-height: 29px;
+	line-height: 30px;
 	}
 .leaflet-touch .leaflet-control-zoom-out {
 	font-size: 28px;
-	line-height: 24px;
+	line-height: 30px;
 	}
 
+
 /* layers control */
 
 .leaflet-control-layers {

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,

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',
+		    container = L.DomUtil.create('div', zoomName + ' leaflet-bar');
-		    partName = barName + '-part',
-		    container = L.DomUtil.create('div', zoomName + ' ' + barName);
 
 		this._map = map;
 
-		this._zoomInButton = this._createButton('+', 'Zoom in',
+		this._zoomInButton  = this._createButton(
-		        zoomName + '-in ' +
+		        '+', 'Zoom in',  zoomName + '-in',  container, this._zoomIn,  this);
-		        partName + ' ' +
+		this._zoomOutButton = this._createButton(
-		        partName + '-top',
+		        '-', 'Zoom out', zoomName + '-out', container, this._zoomOut, this);
-		        container, this._zoomIn,  this);
-
-		this._zoomOutButton = this._createButton('-', 'Zoom out',
-		        zoomName + '-out ' +
-		        partName + ' ' +
-		        partName + '-bottom',
-		        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);