Changes in stylesheets

src/stylesheets/css/Lungo.layout.css

@@ -1,12 +1,8 @@
 body{height:100%;}
-section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-transition:-webkit-transform 0.3s ease-in-out;}
-section:first-child{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
-section.hide{z-index:0;-webkit-transform:translate3d(-100%, 0, 0);-moz-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0);-o-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
-section.show{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
-section.static.hide{-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
-section.popup{-webkit-transform:translate3d(0, 100%, 0);-moz-transform:translate3d(0, 100%, 0);-ms-transform:translate3d(0, 100%, 0);-o-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);}
-section.popup.show{-webkit-transform:translate3d(0, 0%, 0);-moz-transform:translate3d(0, 0%, 0);-ms-transform:translate3d(0, 0%, 0);-o-transform:translate3d(0, 0%, 0);transform:translate3d(0, 0%, 0);}
-section.popup.hide{-webkit-transform:translate3d(0, -100%, 0);-moz-transform:translate3d(0, -100%, 0);-ms-transform:translate3d(0, -100%, 0);-o-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);}
+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{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);z-index:1;}
+section.hide{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);z-index:0;}
+section.show{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);z-index:1;}
 header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:38px;}
 header{top:0px;}
 footer{bottom:0px;}
@@ -14,27 +10,26 @@ header .title,footer .title{float:left;margin:0 8px;font-size:1.3em;}
 header .title{position:absolute;left:0px;width:100%;margin:0px auto;text-align:center;z-index:-1;}
 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;font-size:1.5em;font-weight:normal;}
-aside{position:absolute;top:0px;bottom:0px;height:auto;width:0px;}
-aside.show{width:256px;}
+aside{position:absolute;top:0px;bottom:0px;height:auto;width:256px;opacity:0;}
+aside.show{opacity:1;}
 header~aside{padding-top:40px;}
 footer~aside{padding-bottom:40px;}
-aside~article{-webkit-transition:left 0.3s ease-in-out;left:0px;}
+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:1.1em;font-weight:bold;line-height:40px;}
 aside .icon{width:28px;height:28px;float:left;margin:8px 6px 0 0;font-size:1.9em;line-height:1.0em;text-align:center;}
 aside .anchor{font-weight:bold;padding:3px 10px 4px;}
 aside .bubble{float:right;margin:12px 4px 0 0;}
-@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{width:256px;} aside~article{width:auto !important;left:256px;right:0px !important;}}article{position:absolute;width:inherit;height:inherit;top:0px;bottom:0px;display:block;z-index:0;opacity: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;}}article{position:absolute;width:inherit;height:inherit;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
 header~article{top:40px;}
 footer~article{bottom:40px;}
 article.current{z-index:1;opacity:1;}
-article.aside{left:256px !important;}
-article .title{font-size:1.2em;margin:0 4px 4px;}
+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:0 4px 4px;}
 article .title .icon{margin-right:4px;}
 nav{height:inherit;text-align:center;font-weight:normal;}
 nav a{display:inline-block;padding:0 6px;height:inherit;float:left;font-size:2.0em;line-height:38px;}
 nav a abbr{position:relative;bottom:3px;margin-left:2px;display:none;font-size:0.5em;font-weight:bold;}
 nav a.current abbr{display:inline;}
-nav a.current{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
 .toolbar{height:48px;display:block;}
 .toolbar a{float:left;padding:0;font-size:2.2em;}
 .toolbar .icon{display:block;line-height:52px;}

src/stylesheets/css/Lungo.layout.list.css

@@ -15,7 +15,3 @@
 .list a.arrow:before{float:right;content:">";position:relative;top:6px;font-size:16px;font-family:"Courier New",Courier,mono;font-weight:bold;}
 .list .onright{font-size:0.85em;}
 .list .onright .icon{font-size:1.2em !important;height:12px !important;width:12px !important;margin:0px;}
-.indented ul{margin-bottom:10px;}
-.indented.rounded ul{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
-.indented.rounded li:first-child{-webkit-border-radius:4px 4px 0px 0px;-moz-border-radius:4px 4px 0px 0px;border-radius:4px 4px 0px 0px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
-.indented.rounded li:last-child{-webkit-border-radius:0px 0px 4px 4px;-moz-border-radius:0px 0px 4px 4px;border-radius:0px 0px 4px 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}

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

@@ -7,18 +7,11 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 .app {
-  font-size: 13px;
-  background: #000;
+  background: #000000;
 }
 /* @group <header> & <footer> & <article> */
 header {
   background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
-  -webkit-border-radius: 6px 6px 0 0;
-  -moz-border-radius: 6px 6px 0 0;
-  border-radius: 6px 6px 0 0;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
   border-top: 1px solid #6dc0a1;
   border-bottom: 1px solid #063322;
 }
@@ -54,7 +47,6 @@ nav a.current {
 /* @group <aside> */
 aside {
   background: #252525;
-  box-shadow: inset -1px 0px 8px #000000;
 }
 aside a {
   color: #fff;
@@ -75,6 +67,9 @@ aside .anchor {
   background: #101010;
   color: #7a7a7a;
 }
+aside ~ article {
+  box-shadow: -1px 0px 4px #000000;
+}
 /* @end */
 /* @group .list */
 .list, .list li:not(.toolbar) a {
@@ -144,16 +139,13 @@ input, textarea, select {
 }
 .rounded input, textarea, select {
   -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
   border-radius: 2px;
   -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
   background-clip: padding-box;
 }
 input:focus, textarea:focus, select:focus {
   border: 1px solid #058cf5;
   -webkit-box-shadow: 0px 0px 4px 0px #058cf5;
-  -moz-box-shadow: 0px 0px 4px 0px #058cf5;
   box-shadow: 0px 0px 4px 0px #058cf5;
   background: #e8fefe;
 }

src/stylesheets/css/Lungo.widgets.css

@@ -3,7 +3,11 @@ section.copyright{margin-top:128px;z-index:1000;background:#000;text-align:cente
 section.copyright img{max-height:128px;}
 .onleft{float:left;}
 .onright{float:right;}
-.indented{padding:10px;width:auto;}
+.indented{width:auto;padding:10px 10px 0;}
+.indented ul{height:inherit;}
+.rounded ul{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.rounded li:first-child{-webkit-border-radius:4px 4px 0px 0px;-moz-border-radius:4px 4px 0px 0px;border-radius:4px 4px 0px 0px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.rounded li:last-child{-webkit-border-radius:0px 0px 4px 4px;-moz-border-radius:0px 0px 4px 4px;border-radius:0px 0px 4px 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
 .margin-top-4{margin-top:4px;}
 .hidden{display:none;}
 .semi-opacity{opacity:0.5;}

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

@@ -1,8 +1,9 @@
 .form,form{font-size:0.95em;}
 label:not(.checkbox){display:block;margin-bottom:2px;}
 input:not([type=checkbox]),textarea,select{display:inline-block;padding:5px;width:95%;margin-bottom:2px;outline:none;-webkit-appearance:none;font-size:1.0em;font-weight:bold;line-height:1.25em;}
-input[type=search]{width:100%;}
-input[type=search]:before{content:"hola";}
+input[type=search]{width:86%;}
+input[type=search]+.button{float:right;padding:0px;width:32px;}
+input[type=search]+.button .icon{font-size:20px !important;}
 select{width:100%;}
 label.select{position:relative;display:inline-block;width:100%;}
 .select:after{padding:0 7px;position:absolute;top:0;right:0;bottom:0;height:30px;content:"▼";pointer-events:none;font-size:60%;line-height:32px;}

src/stylesheets/less/Lungo.layout.less

@@ -9,6 +9,8 @@
 
 @import "mixins.less";
 
+@defaultTrasition : @easeOutSine;
+
 /* @group <section> */
 body {
 	height: 100%;
@@ -20,42 +22,26 @@ section{
 	width: 100%;
 	height: inherit;
 	z-index: 0;
-	-webkit-backface-visibility: hidden;
-	.transform(translate3d(100%, 0, 0));
 	
-	-webkit-transition: -webkit-transform 0.3s ease-in-out;
+	.transform(translate3d(100%, 0, 0));
+	-webkit-backface-visibility: hidden;
+	-webkit-transition: -webkit-transform 250ms @defaultTrasition;
 }
 
-section:first-child  {
-	z-index: 1;
+section:first-child {
 	.transform(translate3d(0%, 0, 0));
+	z-index: 1;
 }
 
-section.hide  {
-	z-index: 0;
+section.hide {
 	.transform(translate3d(-100%, 0, 0));
+	z-index: 0;
+	
 }
-section.show  {
-	 z-index: 1;
-	.transform(translate3d(0%, 0, 0));
-}
-
-section.static.hide  {
+section.show {
 	.transform(translate3d(0%, 0, 0));
+	 z-index: 1;
 }
-
-section.popup  {
-	.transform(translate3d(0, 100%, 0));
-}
-
-section.popup.show  {
-	.transform(translate3d(0, 0%, 0));
-}
-
-section.popup.hide  {
-	.transform(translate3d(0, -100%, 0));
-}
-
 /* @end */
 
 
@@ -110,10 +96,12 @@ aside {
 	top: 0px;
 	bottom: 0px;
 	height: auto;
-	width: 0px;
+	width: 256px;
+	opacity: 0;
 }
+
 	aside.show {
-		width: 256px;
+		opacity: 1;
 	}
 
 header ~ aside {
@@ -124,12 +112,12 @@ footer ~ aside {
 	padding-bottom: 40px;
 }
 
-aside ~ article{
-	-webkit-transition: left 0.3s ease-in-out;
-	left: 0px;
+aside ~ article {
+	.transform(translate3d(0px, 0, 0));
+	-webkit-transition: -webkit-transform 250ms @defaultTrasition;
 }
 
-aside a{
+aside a {
 	display: block;
 	width: 244px;
 	height: 40px;
@@ -167,7 +155,7 @@ aside a{
 	}
 
 	aside {
-		width: 256px;
+		opacity: 1;
 	}
 
 	aside ~ article{
@@ -199,10 +187,14 @@ article {
 		opacity: 1;
 	}
 	
-	article.aside { left: 256px !important; }
+	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.2em;
+		font-size: 1.1em;
 		margin: 0 4px 4px;
 	}
 		
@@ -243,9 +235,11 @@ nav a.current abbr {
 	display: inline;
 }
 
+/*
 nav a.current {
-	.transition(all 0.3s ease-in-out);
+	.transition(all 0.3s @easeInOutCubic);
 }
+*/
 
 
 .toolbar {

src/stylesheets/less/Lungo.layout.list.less

@@ -117,12 +117,3 @@
     	margin: 0px;
 	}
 /* @end */
-
-/* @group .indented */
-	.indented ul {
-		margin-bottom: 10px;
-	}
-	.indented.rounded ul { .border-radius(4px); }	
-	.indented.rounded li:first-child { .border-radius(4px 4px 0px 0px); }
-	.indented.rounded li:last-child { .border-radius(0px 0px 4px 4px); }
-/* @end */

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

@@ -8,16 +8,15 @@
  */
 
 @import "mixins.less";
+
 .app {
-	font-size: 13px;
-    background: #000;
+    background: @black;
 }
 	
 /* @group <header> & <footer> & <article> */
 header {
 	background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
 	
-	.border-radius(6px, 6px, 0, 0);
 	border-top: 1px solid #6dc0a1;	
 	border-bottom: 1px solid #063322;
 }
@@ -53,9 +52,9 @@ nav a.current { color: #fff; }
 /* @end */
 
 /* @group <aside> */
+
 aside {
     background: #252525;
-	box-shadow: inset -1px 0px 8px #000;
 }
 	aside a {
 		color: #fff;
@@ -79,6 +78,10 @@ aside {
 	    background: #101010;
 		color:  #7a7a7a;
 	}
+	
+	aside ~ article {
+		box-shadow: -1px 0px 4px #000;
+	}
 
 /* @end */
 
@@ -148,7 +151,6 @@ aside {
 	background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
 	color: #fff; 
 	text-shadow: 0px 1px 1px #000;
-	
 }
 
 /* @group <inputs> */

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

@@ -18,7 +18,7 @@ a.button {
 	.user-select(none);
 	.border-radius(3px);
 	/* @ToDo >> mixins.less */
-	background: #666 -webkit-gradient(linear,left top,left bottom,color-stop(.2, rgba(255,255,255,0.25)),color-stop(1, rgba(255,255,255,0)));
+	background: #2c2c2d -webkit-gradient(linear,left top,left bottom,color-stop(.2, rgba(255,255,255,0.25)),color-stop(1, rgba(255,255,255,0)));
 	-webkit-box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
 	box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
 		
@@ -36,11 +36,6 @@ a.button:active {
   box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
 }
 
-/* @group .button */
-a.button{ background-color: #1d563f; }
-a.button:active{ background-color: rgba(0,0,0,0.5); }
-/* @end */
-  
 a.button:disabled, a.button.disabled {
 	background: rgba(255,255,255,0.2);
 	border: 1px solid #999;

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

@@ -32,13 +32,23 @@ input:not([type=checkbox]), textarea, select {
 	line-height: 1.25em;
 }
 
+/* @group search */
 input[type=search] {
-	width: 100%;
+	width: 86%;
 }
+	input[type=search] + .button {
+	    float: right;
+	    padding: 0px;
+	    width: 32px;
+	}
+	input[type=search] + .button .icon{
+	    font-size: 20px !important;
+	}
 
-input[type=search]:before {
-	content:"hola";
-}
+
+
+
+/* @end */
 
 select{ 
 	width: 100%;

src/stylesheets/less/Lungo.widgets.less

@@ -34,10 +34,18 @@ section.copyright img{
 .onright { float: right;}
 	
 .indented {
-	padding: 10px;
     width: auto;
+	padding: 10px 10px 0;
 }
 
+.indented ul {
+		//margin-bottom: 10px;
+		height: inherit;
+	}
+	.rounded ul { .border-radius(4px); }	
+	.rounded li:first-child { .border-radius(4px 4px 0px 0px); }
+	.rounded li:last-child { .border-radius(0px 0px 4px 4px); }
+
 .margin-top-4{ margin-top: 4px; }
 /* @end */