New stylesheet classes: article, aside & nav

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

@@ -0,0 +1,10 @@
+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;}
+footer:not(.toolbar)~article{bottom:40px;}
+footer.toolbar~article{bottom:48px;}
+article.aside{-webkit-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0);}
+@media handheld, only screen and (min-width: 768px){article.aside{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}}article .title{font-size:1.1em;margin:0px 0 4px;}
+article .title .icon{margin-right:4px;}
+article .text{margin:4px 0 8px;display:block;font-size:0.9em;font-weight:normal;line-height:1.4em;}

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

@@ -0,0 +1,8 @@
+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;}
+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;}
+aside .bubble{float:right;font-size:11px;margin:12px 4px 0 0;}
+@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{opacity:1;} aside~article{width:auto !important;left:256px;right:0px !important;}}

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

@@ -0,0 +1,12 @@
+nav{height:inherit;text-align:center;}nav a{padding:0 6px;z-index:1000;float:left;}nav a .icon{position:relative;top:3px;font-size:24px;display:inline-block;}
+nav a img{width:16px;height:16px;top:-1px !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:-8px;left:-8px;margin-right:-20px;}
+.toolbar{height:48px;display:block;}.toolbar nav{display:block;}
+.toolbar a{padding:0;}
+.toolbar .icon{display:block;top:0px;font-size:32px;line-height:48px;}
+.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;}

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

@@ -0,0 +1,58 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Layout
+ * @class Article
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "mixins.less";
+
+@defaultTrasition : @easeOutSine;
+@header_footer_height: 40px;
+	@header_extended_height: 74px;
+@footer_toolbar_height: 48px;
+
+/* @group <article> */
+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: @header_footer_height; }	
+		header.extended ~ article { top: @header_extended_height; }		
+	footer:not(.toolbar) ~ article { bottom: @header_footer_height; }
+		footer.toolbar ~ article { bottom: @footer_toolbar_height; }
+	
+	article.aside { .transform(translate3d(256px, 0, 0)); }
+	
+	@media handheld, only screen and (min-width: 768px) {
+		article.aside { .transform(translate3d(0px, 0, 0)); }
+	}
+	
+	article .title {
+		font-size: 1.1em;
+		 margin: 0px 0 4px;
+	}
+		
+		article .title .icon { margin-right: 4px; }
+	
+	article .text {
+		margin: 4px 0 8px;
+		display: block;
+    	font-size: 0.9em;
+    	font-weight: normal;
+    	line-height: 1.4em;
+	}			
+/* @end */

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

@@ -0,0 +1,79 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Layout
+ * @class Aside
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "mixins.less";
+
+@defaultTrasition : @easeOutSine;
+@header_footer_height: 40px;
+	@header_extended_height: 74px;
+@footer_toolbar_height: 48px;
+
+/* @group <aside> */
+
+section.aside {
+	.transform(translate3d(256px, 0, 0));
+	&.onright { .transform(translate3d(-256px, 0, 0)); }
+}
+
+aside {
+	position: absolute;
+	width: inherit;
+	height: inherit;
+	top: 0px;
+	visibility: hidden;
+	z-index: 0;
+
+	width: 256px;
+	max-width: 256px;
+	
+	&.onright { right: 0px; }
+	&.current { visibility: visible;} 
+}
+
+	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;
+		}
+		aside .bubble {
+	    	float: right;
+	    	font-size: 11px;
+			margin: 12px 4px 0 0;
+		}
+	
+		@media handheld, only screen and (min-width: 768px) {
+			[data-target="aside"] { display: none !important; }		
+			aside { opacity: 1; }
+			aside ~ article{
+				width: auto !important;
+		    	left: 256px;
+		    	right:  0px !important;
+			}
+		}
+/* @end */

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

@@ -0,0 +1,109 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Layout
+ * @class Nav
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "mixins.less";
+
+@defaultTrasition : @easeOutSine;
+@header_footer_height: 40px;
+	@header_extended_height: 74px;
+@footer_toolbar_height: 48px;
+
+/* @group <nav> */
+nav {
+	height: inherit;
+	text-align: center;
+    	
+	& a {
+		padding: 0 6px;
+		z-index: 1000;
+		float: left;
+		//line-height: 39px;
+		
+		& .icon {
+			position: relative;
+			top:  3px;
+		    font-size: 24px;
+		    display: inline-block;
+		}
+		
+		& img {
+    		width: 16px;
+    		height: 16px;
+    		top: -1px !important;
+		}
+		
+		& abbr {
+    		position: relative;    		
+    		margin-left: 2px;
+			display: none;
+		}
+		
+		&.current abbr, &.active abbr { display: inline; }
+	}
+	
+	& .bubble {
+    	position: relative;
+	    top:  -8px;
+	    left: -8px;
+	    margin-right: -20px;  
+	}
+}
+
+.toolbar {
+	height: @footer_toolbar_height;
+	display: block;
+	
+	& nav { display: block; }
+	& a { padding: 0; }
+	& .icon {
+    	display: block;
+    	top:  0px;
+    	font-size: 32px;
+		line-height: @footer_toolbar_height;
+	}
+	
+	&.with-labels .icon {
+    	line-height: 40px;
+		padding-bottom: 8px;
+	}
+	
+	& .bubble {
+    	top:  -52px;
+	    left: 4px;
+	}
+	
+	& 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;
+    
+    & a {
+    	padding: 0px;
+	}
+}
+/* @end */