Using less syntaxis

src/stylesheets/css/Lungo.layout.css

@@ -1,6 +1,6 @@
-section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-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{z-index:1;-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
-section.hide{z-index:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
+section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-transform:translate3d(320px, 0, 0);transform:translate3d(320px, 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{z-index:1;-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}
+section.hide{z-index:0;-webkit-transform:translate3d(-320px, 0, 0);transform:translate3d(-320px, 0, 0);}
 header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:38px;}
 header{top:0px;}
 footer{bottom:0px;}

src/stylesheets/css/Lungo.theme.default.css

@@ -8,16 +8,9 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 /*
-//ARTIC
-@master-color: #2daf96;
-	@master-color-light: #35d2b3;
-	@master-color-dark: #22937d;
-*/
-/*
-//GREEN
-@master-color: #2ea03c;
-	@master-color-light: #34b745;
-	@master-color-dark: #248831;
+@theme: #2daf96;
+	@theme-light: #35d2b3;
+	@theme-dark: #22937d;
 */
 .app {
   background: #000000;
@@ -31,7 +24,7 @@ header {
   box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
 }
 footer {
-  background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d));
+  background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1c1c));
   border-top: 1px inset #1c1c1c;
 }
 .title {
@@ -56,7 +49,7 @@ nav a.current, nav a:active {
 .toolbar a {
   color: rgba(255, 255, 255, 0.2);
 }
-.toolbar a.current, .toolbar nav a:active {
+.toolbar a.current, .toolbar a:active {
   background: #1c1c1c;
   box-shadow: inset 0px 0px 8px #101010;
   text-shadow: 0px 1px 4px #000;
@@ -85,7 +78,7 @@ aside .anchor {
   background: #101010;
   color: #7a7a7a;
 }
-aside ~ article {
+aside  ~ article {
   box-shadow: -1px 0px 4px #000000;
 }
 /* @end */
@@ -105,51 +98,47 @@ aside ~ article {
   color: #1b6777;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
 }
-.indented ul {
+.list li.selectable:active small, .list li.selectable:active .onright:not(.bubble) {
+  color: #ffffff;
+}
+.list li small, .list li .onright:not(.bubble) {
+  color: #888;
+}
+.list .indented ul {
   border: 1px solid #e1e1e1;
 }
-.list .darker {
+.list .anchor {
+  background: #93d6e7;
+  color: #1b6777;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+  border: none;
+}
+.list .tip {
+  color: #7a7a7a;
+}
+.list .tip.darker {
   background-color: #2c2c2d;
   color: #fff;
   text-shadow: 0px 1px 0px #000;
 }
-.list li.darker a {
+.list .tip.darker a {
   color: #fff !important;
 }
-.list .dark {
+.list .tip.dark {
   background-color: #f4f4f4;
   box-shadow: inset 0px 1px 0px #fff;
   text-shadow: 0px 1px 0px #fff;
 }
-.list small, .list .onright:not(.bubble) {
-  color: #888;
-}
-.list li.selectable:active small, .list li.selectable:active .onright:not(.bubble) {
-  color: #34bcd7;
-  color: #ffffff;
-}
-.list .tip {
-  color: #7a7a7a;
-}
-.list li.anchor {
-  background: #93d6e7;
-  color: #1b6777;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
-  border: none;
-}
 .list .toolbar {
   border-bottom-color: rgba(0, 0, 0, 0.2);
 }
-.list .arrow:before {
-  color: #a9a9a9;
-}
-.list .toolbar a {
+.list .toolbar .toolbar a {
   box-shadow: 1px 0px 0px #d9d9d9;
 }
-.list .toolbar a:last-child {
+.list .toolbar .toolbar a:last-child {
   box-shadow: none;
 }
-.list .toolbar a.current {
+.list .toolbar .toolbar a.current {
   background: transparent;
   color: #333;
   text-shadow: none !important;

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

@@ -1,5 +1,4 @@
-a.button{display:inline-block;height:31px;padding:0 9px 0 8px;color:#fff !important;outline:none;-webkit-user-select:none;user-select:none;-webkit-border-radius:1px;border-radius:1px;-webkit-background-clip:padding-box;background-clip:padding-box;background:#5a5a5a;font-weight:bold;line-height:32px;text-align:center;text-decoration:none;}
+a.button{display:inline-block;height:31px;padding:0 9px 0 8px;color:#fff !important;outline:none;background:#5a5a5a;-webkit-user-select:none;user-select:none;-webkit-border-radius:1px;border-radius:1px;-webkit-background-clip:padding-box;background-clip:padding-box;font-weight:bold;line-height:32px;text-align:center;text-decoration:none;}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;width:17px;height:30px;font-size:1.5em;line-height:31px;}
-a.button.big{position:relative;height:30px;width:100%;margin-bottom:4px;padding:6px 0;font-size:16px;line-height:31px;}
-a.button.big .icon{width:20px;height:28px;line-height:32px;margin-left:0.6em;margin-right:-48px;}
+a.button.big{position:relative;height:30px;width:100%;margin-bottom:4px;padding:6px 0;font-size:16px;line-height:31px;}a.button.big .icon{width:20px;height:28px;line-height:32px;margin-left:0.6em;margin-right:-48px;}

src/stylesheets/css/Lungo.widgets.form.css

@@ -1,9 +1,7 @@
 .form,form{width:inherit !important;}
 label{font-size:0.75em;line-height:27px;}
 input:not([type=checkbox]),textarea,select{display:inline-block;padding:5px;width:95%;margin-bottom:2px;outline:none;-webkit-appearance:none;border-radius:0px;font-size:14px;font-weight:bold;line-height:1.25em;}
-input[type=search]{width:86%;}
-input[type=search]+.button{float:right;padding:0px;width:32px;height:30px;}
-input[type=search]+.button .icon{font-size:22px !important;line-height:30px;}
+input[type=search]{width:86%;}input[type=search] +.button{float:right;padding:0px;width:32px;height:30px;}input[type=search] +.button .icon{font-size:22px !important;line-height:30px;}
 select{width:100%;}
 label.select{position:relative;display:inline-block;width:100%;padding-top:2px;}
 .select:after{text-align:center;position:absolute;top:0;right:0;bottom:0;height:29px;width:29px;content:"▼";pointer-events:none;line-height:32px;margin-top:2px;}

src/stylesheets/less/Lungo.layout.less

@@ -19,22 +19,22 @@ section{
 	height: inherit;
 	z-index: 0;
 	
-	.transform(translate3d(100%, 0, 0));
-	//.transform(translate3d(320px, 0, 0));
+	//.transform(translate3d(100%, 0, 0));
+	.transform(translate3d(320px, 0, 0));
 	-webkit-backface-visibility: hidden;
 	-webkit-transition: -webkit-transform 250ms @defaultTrasition;
 }
 
 section:first-child, section.show {	
 	z-index: 1;
-	.transform(translate3d(0%, 0, 0));
-	//.transform(translate3d(0px, 0, 0));
+	//.transform(translate3d(0%, 0, 0));
+	.transform(translate3d(0px, 0, 0));
 }
 
 section.hide {
 	z-index: 0;
-	.transform(translate3d(-100%, 0, 0));
-	//.transform(translate3d(-320px, 0, 0));
+	//.transform(translate3d(-100%, 0, 0));
+	.transform(translate3d(-320px, 0, 0));
 }
 /* @end */
 

src/stylesheets/less/Lungo.theme.default.less

@@ -9,25 +9,23 @@
 
 @import "mixins.less";
 @import "Lungo.theme.default.font.css";
-/*
-//ARTIC
-@master-color: #2daf96;
-	@master-color-light: #35d2b3;
-	@master-color-dark: #22937d;
-*/
 
+//ARTIC
 /*
-//GREEN
-@master-color: #2ea03c;
-	@master-color-light: #34b745;
-	@master-color-dark: #248831;
+@theme: #2daf96;
+	@theme-light: #35d2b3;
+	@theme-dark: #22937d;
 */
-@master-color:  #05b8e2;
-	@master-color-light: #05bde9;
-	@master-color-dark: #07acd0;
-	@master-color-base: #93d6e7;
-@secondary-color: #2c2c2d;
 
+@theme:  #05b8e2;
+	@theme-light: #05bde9;
+	@theme-dark: #07acd0;
+	@theme-highlight: #93d6e7;
+		@theme-highlight-color: #1b6777;
+		@theme-highlight-text-shadow: 0 1px 0 rgba(255,255,255,0.1);
+	@theme-secondary: #2c2c2d;
+		@theme-secondary-dark: #1c1c1c;
+		
 .app {
     background: @black;
     font-family: 'Roboto', Helvetica, Arial, sans-serif;
@@ -35,15 +33,15 @@
 	
 /* @group <header> & <footer> & <article> */
 header {
-	background-color: @master-color;
-	border-top: 1px solid @master-color-light;	
-	border-bottom: 1px solid @master-color-dark;
+	background-color: @theme;
+	border-top: 1px solid @theme-light;	
+	border-bottom: 1px solid @theme-dark;
 	box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
 }
 	
 footer {
-	background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d));
-	border-top: 1px inset #1c1c1c;
+	background: @theme-secondary -webkit-gradient(linear, left top, left bottom, color-stop(0.25, @theme-secondary), color-stop(1, @theme-secondary-dark));	
+	border-top: 1px inset @theme-secondary-dark;
 }
 
 .title {
@@ -51,138 +49,136 @@ footer {
 	text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
 }
 
-article { background-color: #f9f9f9; }
+article { 
+	background-color: #f9f9f9; 
 	
-	article .title {
+	& .title {
     	color: #797979;
     	text-shadow: 0px 1px 0px #fff;
 	}
+}
 /* @end */
 
 /* @group <nav> */
-nav a { color: rgba(255,255,255,0.5); }
-	nav a.current, nav a:active { color: @white; }
-	//nav a.current { box-shadow: inset 0px -4px 0px @white; }
+nav a { 
+	color: rgba(255,255,255,0.5); 	
+	&.current, &:active { 
+		color: @white; 
+	}
+}
 
-.toolbar a {  color: rgba(255,255,255,0.2); }
-	.toolbar a.current, .toolbar nav a:active {
+.toolbar a {  
+	color: rgba(255,255,255,0.2); 
+	&.current, &:active {
 		background: #1c1c1c;
 		box-shadow: inset 0px 0px 8px #101010;
 		text-shadow: 0px 1px 4px #000;
 	}
+}
 /* @end */
 
 /* @group <aside> */
-
 aside {
     background: #252525;
-}
-	aside a {
-		color: #fff;
+    
+    & a {
+    	color: #fff;
 	    text-shadow: 0px 1px 0px #000;    
 	    border-bottom: 1px inset #101010;
 		border-top: 1px inset #868686;
+		
+		&.current {
+    		background: #1c1c1c;
+			box-shadow: inset 0px 0px 8px #101010;
+			border-top: 1px inset #1c1c1c;
+		}
+		
+		& .icon {
+    		text-shadow: none; 
+			color: #7a7a7a;
+		}
 	}
 	
-	aside a.current { 
-		background: #1c1c1c;
-		box-shadow: inset 0px 0px 8px #101010;
-		border-top: 1px inset #1c1c1c;
-	}
-	
-	aside a .icon { 
-		text-shadow: none; 
-		color: #7a7a7a;
-	}
-	
-	aside .anchor {
-	    background: #101010;
+	& .anchor {
+    	background: #101010;
 		color:  #7a7a7a;
 	}
 	
-	aside ~ article {
+	& ~ article {
 		box-shadow: -1px 0px 4px #000;
 	}
-
+}
 /* @end */
 
 /* @group .list */
 .list, .list li:not(.toolbar) a { color: #2a2a2a; }
-	
-	.list li {
+
+.list {
+    & li {
 		background: #fff;
 		border-bottom: 1px inset #e1e1e1;
-	}
-	
-	.list li:last-child { border-bottom: none; }
-	
-	.list li.selectable:active {
-    	background: #93d6e7;
-		color: #1b6777;
-		text-shadow: 0 1px 0 rgba(255,255,255,0.1);
-	}
-	
-	.indented ul {
-    	border: 1px solid #e1e1e1;
-	}
-	
-	.list .darker {
-		background-color: #2c2c2d;	
-		color: #fff;
-		text-shadow: 0px 1px 0px #000;
-	}
-		.list li.darker a{ color: #fff !important; }
-	
-	.list .dark {
-	    background-color: #f4f4f4;
-		box-shadow: inset 0px 1px 0px #fff;			
-		text-shadow: 0px 1px 0px #fff;
-	}
-
-	.list small, .list .onright:not(.bubble) {
-		color: #888;
-	}
-	
-	.list li.selectable:active small, 
-	.list li.selectable:active .onright:not(.bubble) {
-    	color: #34bcd7;
-    	color: @white;
-	}
-	
-	.list .tip {
-		color: #7a7a7a;
-	}
+		
+		&:last-child { border-bottom: none; }
+		
+		&.selectable:active {
+    		background: @theme-highlight;
+			color: @theme-highlight-color;
+			text-shadow: @theme-highlight-text-shadow;
+			
+			& small, & .onright:not(.bubble) {
+    			color: @white;
+			} 
+		}
+		
+		& small, & .onright:not(.bubble) { color: #888; }
+	} 
+		
+	& .indented ul { border: 1px solid #e1e1e1; }
 	
-	.list li.anchor {
-		background: #93d6e7;
-		color: #1b6777;
-		text-shadow: 0 1px 0 rgba(255,255,255,0.1);
+    & .anchor {
+		background: @theme-highlight;
+		color: @theme-highlight-color;
+		text-shadow: @theme-highlight-text-shadow;
 		border: none;
 	}
 	
-	.list .toolbar {
-		border-bottom-color: rgba(0,0,0,0.2);
+	& .tip { color: #7a7a7a; 
+		&.darker {
+			background-color: #2c2c2d;	
+			color: #fff;
+			text-shadow: 0px 1px 0px #000;
+			
+			& a { color: #fff !important; }
+		}
+		
+		&.dark {
+		    background-color: #f4f4f4;
+			box-shadow: inset 0px 1px 0px #fff;			
+			text-shadow: 0px 1px 0px #fff;
+		}
 	}	
 	
-	.list .arrow:before {
-		color: #a9a9a9;
-	}
-	
-	.list .toolbar a { box-shadow: 1px 0px 0px #d9d9d9; }
-		
-		.list .toolbar a:last-child { box-shadow: none; }
+	& .toolbar {
+		border-bottom-color: rgba(0,0,0,0.2);
 		
-		.list .toolbar a.current {
-			background: transparent;
-			color: #333;
-			text-shadow: none !important;
+		& .toolbar a { 
+			box-shadow: 1px 0px 0px #d9d9d9; 
+			
+			&:last-child { box-shadow: none; }
+			&.current {
+				background: transparent;
+				color: #333;
+				text-shadow: none !important;
+			}
+
 		}
+	}
+}
 /* @end */
 
 /* @group widgets */
-
 .splash { 
-	background: @master-color-dark;
+	background: @theme-dark;
 	color: #fff; 
 	text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
 }
@@ -190,10 +186,8 @@ aside {
 /* @group .button */
 a.button {
 	box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 2px 0px rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.1);
-}
-
-a.button:active {
-	box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
+	
+	&:active { box-shadow: inset 0 0 8px rgba(0,0,0,0.4); }
 }
 /* @end */
 
@@ -205,12 +199,12 @@ input, textarea, select {
 }
 	
 input:focus, textarea:focus, select:focus { 
-	border-color: @master-color;
-	color:  @master-color;
+	border-color: @theme;
+	color:  @theme;
 }
 
 label {
-	color: @master-color;
+	color: @theme;
 	text-transform: uppercase;
 	font-weight: bold;
 }
@@ -231,7 +225,7 @@ input[type="checkbox"] + span, input[type="radio"] + span {
 	
 	input[type="checkbox"]:checked + span, 
 	input[type="radio"]:checked + span {
-		background: @master-color-dark;
+		background: @theme-dark;
 	}
 /* @end */
 
@@ -242,6 +236,6 @@ input[type="checkbox"] + span, input[type="radio"] + span {
 	font-weight: bold !important;
 	box-shadow: inset 0px 0px 1px rgba(0,0,0,01);
 }	
-	header .bubble.count {background: @secondary-color;}
-	.bubble.count { background: @master-color; }
+	header .bubble.count {background: @theme-secondary;}
+	.bubble.count { background: @theme; }
 /* @end */

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

@@ -15,42 +15,47 @@ a.button {
 	padding: 0 9px 0 8px;
 	color: #fff !important;
 	outline: none;
+	background: #5a5a5a;	
 	.user-select(none);
 	.border-radius(1px);
-	background: #5a5a5a;
 	font-weight: bold;
 	line-height: 32px;
 	text-align: center; 
 	text-decoration: none;
-}
 
-a.button:disabled, a.button.disabled {
-	background: rgba(255,255,255,0.2);
-	color: #999 !important; 
-}
-
-a.button .icon{ 
-	float: left;
-	width: 17px;
-	height: 30px;	
-	font-size: 1.5em;
-	line-height: 31px;}
+	&:active { 
+		background: #4b4b4b; 
+	}
 	
-a.button.big { 
-	position: relative; 
-	height: 30px; 
-	width: 100%; 
-	margin-bottom: 4px;
-	padding: 6px 0;
+	&:disabled, &.disabled {
+    	background: rgba(255,255,255,0.2);
+		color: #999 !important; 
+	}
 	
-	font-size: 16px;
-	line-height: 31px;
-}
+	& .icon {
+    	float: left;
+		width: 17px;
+		height: 30px;	
+		font-size: 1.5em;
+		line-height: 31px;
+	}
 	
-a.button.big .icon {	
-	width: 20px;
-	height: 28px;
-	line-height: 32px;
-	margin-left: 0.6em; 
-	margin-right: -48px;
+	&.big {
+    	position: relative; 
+		height: 30px; 
+		width: 100%; 
+		margin-bottom: 4px;
+		padding: 6px 0;
+		
+		font-size: 16px;
+		line-height: 31px;
+		
+		& .icon {
+    		width: 20px;
+			height: 28px;
+			line-height: 32px;
+			margin-left: 0.6em; 
+			margin-right: -48px;    	
+		}
+	}
 }

src/stylesheets/less/Lungo.widgets.form.less

@@ -36,24 +36,25 @@ input:not([type=checkbox]), textarea, select {
 /* @group search */
 input[type=search] {
 	width: 86%;
-}
-	input[type=search] + .button {
-	    float: right;
+	
+	& + .button {
+    	float: right;
 	    padding: 0px;
 	    width: 32px;
 	    height: 30px;
+	    
+	    & .icon {
+    		font-size: 22px !important;	    
+	    	line-height: 30px;
+		}    
 	}
-	input[type=search] + .button .icon{
-	    font-size: 22px !important;	    
-	    line-height: 30px;
-	}
+}
 /* @end */
 
-select{ 
+select { 
 	width: 100%;
 }
 
-
 label.select {
     position: relative;
     display: inline-block;
@@ -224,9 +225,6 @@ input[type="range"]::-webkit-slider-thumb {
 */
 /* @end */
 
-
-
-
 @media screen and (-webkit-min-device-pixel-ratio:0) { 
 	.custom-select select {padding-right:30px;}
 }