New stylesheet for buttons

… now with data-image support

src/stylesheets/css/Lungo.layout.css

@@ -5,18 +5,19 @@ header{top:0px;}
 footer{bottom:0px;}
 header .title,footer .title{margin:0 8px;float:left;z-index:-1;font-size:1.15em;font-weight:bold;}
 header .title{position:absolute;left:0px;right:0px;text-align:center;display:inline-block;}
-section header a.button,section footer a.button{margin:3px 3px auto 4px;}
-section header a.button.icon,section footer a.button.icon{width:17px;}
-nav{height:inherit;text-align:center;}nav a{padding:0 6px;z-index:1000;float:left;}nav a .icon{font-size:2.1em;line-height:38px;display:inline-block;}
-nav a abbr{position:relative;bottom:5px;margin-left:2px;display:none;font-size:1.0em;}
+section header a.button,section footer a.button{margin:3px 0 0 1px;}section header a.button:first-of-type,section footer a.button:first-of-type{margin-left:4px;}
+section header a.button:last-child,section footer a.button:last-child{margin-right:4px;}
+nav{height:inherit;text-align:center;}nav a{padding:0 6px;z-index:1000;float:left;line-height:38px;}nav a .icon{position:relative;top:3px;font-size:24px;display:inline-block;}
+nav a img{width:16px;height:16px;top:0px !important;}
+nav a abbr{position:relative;margin-left:2px;display:none;}
 nav a.current abbr,nav a.active abbr{display:inline;}
-nav .bubble{position:relative;top:-16px;left:-10px;margin-right:-20px;}
+nav .bubble{position:relative;top:-8px;left:-8px;margin-right:-20px;}
 .toolbar{height:48px;display:block;}.toolbar nav{display:block;}
 .toolbar a{padding:0;}
-.toolbar .icon{display:block;font-size:2.5em;line-height:48px;}
+.toolbar .icon{display:block;top:0px;font-size:2.5em;line-height:48px;}
 .toolbar.with-labels .icon{line-height:40px;padding-bottom:8px;}
-.toolbar .bubble{top:-54px;left:6px;padding:1px 4px;}
-.toolbar abbr{position:absolute;top:34px;width:inherit;height:12px;display:block !important;font-size:0.9em;line-height:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
+.toolbar .bubble{top:-54px;left:6px;}
+.toolbar abbr{position:absolute;top:34px;width:inherit;height:12px;display:block !important;line-height:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 .groupbar{position:absolute;top:39px;height:34px;width:100%;line-height:34px;}.groupbar a{padding:0px;}
 aside{position:absolute;top:0px;bottom:0px;height:auto;width:256px;max-width:256px;opacity:0;z-index:0;}
 aside.show{opacity:1;}

src/stylesheets/css/Lungo.widgets.button.css

@@ -1,4 +1,5 @@
-a.button{display:inline-block;height:30px;padding:0 9px 0 8px;color:#fff !important;outline:none;background:#5a5a5a;-webkit-user-select:none;user-select:none;line-height:32px;text-align:center;text-decoration:none;}a.button:active,a.button.active{background:#4b4b4b;}
+a.button{display:inline-block;height:30px;padding:0 9px 0 8px;color:#fff !important;outline:none;background:#5a5a5a;-webkit-user-select:none;user-select:none;line-height:31px;text-align:center;text-decoration:none;}a.button:active,a.button.active{background:#4b4b4b;}
 a.button:disabled,a.button.disabled{background:rgba(255, 255, 255, 0.2);color:#999 !important;}
-a.button .icon{float:left;font-size:1.5em;line-height:32px;}
-a.button.big{position:relative;width:100%;margin-bottom:4px;padding:6px 0;font-size:16px;line-height:32px;}a.button.big .icon{display:inline-block;float:none;margin-right:4px;line-height:14px;}
+a.button .icon{position:relative;top:3px;height:16px;width:16px;font-size:22px;line-height:17px;}
+a.button img{top:0px !important;}
+a.button.big{width:100%;height:40px;padding:0px;margin-bottom:4px;font-size:16px;line-height:42px;}a.button.big .icon{margin-right:4px;font-size:24px;height:18px;width:18px;}

src/stylesheets/css/Lungo.widgets.css

@@ -14,4 +14,4 @@
 .mini{font-size:20px !important;height:16px !important;width:16px !important;line-height:16px !important;}
 .framed{border:2px solid #fff;}
 .round{-webkit-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;background-clip:padding-box;}
-.bubble{padding:2px 4px 1px;-webkit-border-radius:1px;border-radius:1px;-webkit-background-clip:padding-box;background-clip:padding-box;font-size:0.8em;font-weight:bold;line-height:1.0em;}
+.bubble{padding:2px 3px 1px;-webkit-border-radius:1px;border-radius:1px;-webkit-background-clip:padding-box;background-clip:padding-box;font-size:0.8em;font-weight:bold;line-height:1.0em;}

src/stylesheets/less/Lungo.layout.less

@@ -69,11 +69,9 @@ header .title {
 }
 
 section header a.button, section footer a.button  {
-	margin: 3px 3px auto 4px;
-}
-
-section header a.button.icon, section footer a.button.icon  {
-	width: 17px;
+	margin: 3px 0 0 1px;
+	&:first-of-type { margin-left: 4px; }	
+	&:last-child { margin-right: 4px; }
 }
 /* @end */
 
@@ -87,19 +85,25 @@ nav {
 		padding: 0 6px;
 		z-index: 1000;
 		float: left;
+		line-height: 38px;
 		
 		& .icon {
-		    font-size: 2.1em;
-		    line-height: 38px;
+			position: relative;
+			top:  3px;
+		    font-size: 24px;
 		    display: inline-block;
 		}
 		
+		& img {
+    		width: 16px;
+    		height: 16px;
+    		top: 0px !important;
+		}
+		
 		& abbr {
-    		position: relative;
-			bottom: 5px;
-			margin-left: 2px;
+    		position: relative;    		
+    		margin-left: 2px;
 			display: none;
-			font-size: 1.0em;
 		}
 		
 		&.current abbr, &.active abbr { display: inline; }
@@ -107,8 +111,8 @@ nav {
 	
 	& .bubble {
     	position: relative;
-	    top:  -16px;
-	    left: -10px;
+	    top:  -8px;
+	    left: -8px;
 	    margin-right: -20px;  
 	}
 }
@@ -121,6 +125,7 @@ nav {
 	& a { padding: 0; }
 	& .icon {
     	display: block;
+    	top:  0px;
 		font-size: 2.5em;
 		line-height: 48px;
 	}
@@ -133,7 +138,6 @@ nav {
 	& .bubble {
     	top:  -54px;
 	    left: 6px;
-	    padding: 1px 4px;
 	}
 	
 	& abbr {
@@ -143,7 +147,6 @@ nav {
     	height: 12px;
     	display: block !important;
     	
-    	font-size: 0.9em;
     	line-height: 12px;
     	    	
     	overflow: hidden;

src/stylesheets/less/Lungo.widgets.button.less

@@ -19,7 +19,7 @@ a.button {
 	background: #5a5a5a;
 	
 	.user-select(none);
-	line-height: 32px;
+	line-height: 31px;
 	text-align: center; 
 	text-decoration: none;
 
@@ -33,25 +33,31 @@ a.button {
 	}
 	
 	& .icon {
-    	float: left;	
-		font-size: 1.5em;
-		line-height: 32px;
+		position: relative;
+		top: 3px;
+		height: 16px;
+		width: 16px;
+    	font-size: 22px;
+		line-height: 17px;
+	}
+	
+	& img {
+		top:  0px !important;    	
 	}
 	
 	&.big {
-    	position: relative; 
 		width: 100%; 
+		height: 40px;	
+		padding: 0px;	
 		margin-bottom: 4px;
-		padding: 6px 0;
 		
 		font-size: 16px;
-		line-height: 32px;
-		
+		line-height: 42px;
 		& .icon {
-			display: inline-block;
-			float: none;
-			margin-right: 4px;			
-			line-height: 14px;
+			margin-right: 4px;	
+			font-size: 24px;
+			height: 18px;
+			width: 18px;
 		}
 	}
 }

src/stylesheets/less/Lungo.widgets.less

@@ -81,7 +81,7 @@
 /* @end */
 
 .bubble {
-	padding: 2px 4px 1px;
+	padding: 2px 3px 1px;
 	.border-radius(1px);		
 	font-size: 0.8em;
 	font-weight: bold;