Common changes in stylesheets

src/stylesheets/css/Lungo.layout.article.css

@@ -1,7 +1,7 @@
 article{position:absolute;width:inherit;height:auto;top:0px;bottom:0px;visibility:hidden;z-index:0;}
 article.current{visibility:visible;z-index:1;}
 header:not(.extended)~article{top:40px;}
-header.extended~article{top:74px;}
+header.extended~article{top:75px;}
 footer:not(.toolbar)~article{bottom:40px;}
 footer.toolbar~article{bottom:48px;}
 article.aside{-webkit-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0);}

src/stylesheets/css/Lungo.layout.aside.css

@@ -1,6 +1,11 @@
 section.aside{-webkit-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0);}section.aside.onright{-webkit-transform:translate3d(-256px, 0, 0);transform:translate3d(-256px, 0, 0);}
 aside{position:absolute;width:inherit;height:inherit;top:0px;visibility:hidden;z-index:0;width:256px;max-width:256px;}aside.onright{right:0px;}
 aside.current{visibility:visible;}
+header:not(.extended)~aside{top:40px;}
+header.extended~aside{top:74px;}
+footer~aside{bottom:40px;height:auto;}
+footer.toolbar~aside{bottom:48px;}
+aside~article{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}
 aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:15px;line-height:40px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 aside .icon{width:24px;float:left;margin:8px 4px 0 0;font-size:24px;line-height:24px;text-align:center;}
 aside .anchor{font-weight:bold;padding:3px 10px 4px;}

src/stylesheets/css/Lungo.layout.css

@@ -1,9 +1,9 @@
 section{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:1;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}section:first-child,section.show{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
 section.hide{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
 header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:39px;}
-header{top:0px;}
+header{top:0px;}header .onleft{margin-left:4px !important;}
+header .onright{margin-right:4px !important;}
 footer{bottom:0px;}
 header .title,footer .title{margin:0 4px;float:left;z-index:-1;font-size:15px;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 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;}
+section header a.button,section footer a.button{margin:3px 1px 0px;}

src/stylesheets/css/Lungo.layout.nav.css

@@ -9,4 +9,4 @@ nav .bubble{position:relative;top:-8px;left:-8px;margin-right:-20px;}
 .toolbar.with-labels .icon{line-height:40px;padding-bottom:8px;}
 .toolbar .bubble{top:-52px;left:4px;}
 .toolbar abbr{position:absolute;top:34px;width:inherit;height:11px;margin-left:0px;display:block !important;font-size:11px;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;}
+.groupbar{position:absolute;top:39px;height:28px;width:100%;padding:4px 0 2px;display:block;line-height:28px;z-index:2;}.groupbar a{padding:0px;}

src/stylesheets/css/Lungo.theme.pro.css

@@ -51,14 +51,14 @@ nav a.current, nav a.active {
 }
 .groupbar {
   background: #ededed;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
 }
 .groupbar a {
   color: #6e6e6e;
 }
 .groupbar a.current {
   color: #6e6e6e;
-  box-shadow: inset 0 -4px 0 #05bde9;
+  border-bottom: solid 3px #05bde9;
 }
 /* @end */
 /* @group <aside> */

src/stylesheets/less/Lungo.layout.article.less

@@ -11,7 +11,7 @@
 
 @defaultTrasition : @easeOutSine;
 @header_footer_height: 40px;
-	@header_extended_height: 74px;
+	@header_extended_height: 75px;
 @footer_toolbar_height: 48px;
 
 /* @group <article> */

src/stylesheets/less/Lungo.layout.aside.less

@@ -15,7 +15,6 @@
 @footer_toolbar_height: 48px;
 
 /* @group <aside> */
-
 section.aside {
 	.transform(translate3d(256px, 0, 0));
 	&.onright { .transform(translate3d(-256px, 0, 0)); }
@@ -36,6 +35,20 @@ aside {
 	&.current { visibility: visible;} 
 }
 
+header:not(.extended) ~ aside { top: @header_footer_height; }    
+header.extended ~ aside { top: @header_extended_height; }        
+footer ~ aside { 
+        bottom: @header_footer_height; 
+        height: auto; 
+    }
+        footer.toolbar ~ aside { bottom: @footer_toolbar_height; }
+    
+    aside ~ article {
+        .transform(translate3d(0px, 0, 0));
+        -webkit-transition: -webkit-transform 250ms @defaultTrasition;
+    }
+
+
 	aside a {
 		display: block;
 		width: 244px;

src/stylesheets/less/Lungo.layout.less

@@ -49,6 +49,8 @@ header, footer  {
 header  {
 	top: 0px;
 	//&.extended { height: 72px; }
+	& .onleft { margin-left: 4px !important;}
+	& .onright {margin-right: 4px !important;}
 }
 
 footer  {
@@ -63,6 +65,7 @@ header .title, footer .title  {
 	font-weight: bold;
 }
 
+
 header .title {
 	position: absolute;
 	left: 0px;
@@ -72,8 +75,10 @@ header .title {
 }
 
 section header a.button, section footer a.button  {
-	margin: 3px 0 0 1px;
+	margin: 3px 1px 0px;
+	/*
 	&:first-of-type { margin-left: 4px; }	
 	&:last-child { margin-right: 4px; }
+	*/
 }
 /* @end */

src/stylesheets/less/Lungo.layout.nav.less

@@ -97,13 +97,16 @@ nav {
 
 .groupbar {
 	position: absolute;
-	top: 39px;    
- 	height: 34px;
-    width: 100%;
-    line-height: 34px;
+	top: 39px;
+	height: 28px;
+	width: 100%;
+	padding: 4px 0 2px;	
+ 	display: block; 
+    line-height: 28px;
+    z-index: 2;
     
     & a {
     	padding: 0px;
-	}
+}
 }
 /* @end */

src/stylesheets/less/Lungo.theme.pro.less

@@ -43,8 +43,7 @@ footer {
 }
 
 article { 
-	background-color: #ededed; 
-	
+	background-color: #ededed; 	
 	& .title {
     	color: #797979;
     	text-shadow: 0px 1px 0px #fff;
@@ -69,14 +68,14 @@ nav a {
 }
 
 .groupbar {
-    background: #ededed;  
-    box-shadow: 0 1px 0 rgba(0,0,0,0.1);
+    background: #ededed;
+    border-bottom: solid 1px rgba(0,0,0,0.1);
     
     & a {
     	color: #6e6e6e;
     	&.current {
 			color: #6e6e6e;
-    		box-shadow: inset 0 -4px 0 @theme-light;
+			border-bottom: solid 3px @theme-light;
     	}
 	}
 }