New stylesheets

src/stylesheets/css/Lungo.layout.css

@@ -1,4 +1,3 @@
-body{height:100%;}
 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;}
@@ -24,7 +23,7 @@ header~article{top:40px;}
 footer~article{bottom:40px;}
 article.current{z-index:1;opacity:1;}
 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;}
+@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 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;}

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

@@ -1,8 +1,8 @@
-.list{font-size:1.2em;font-weight:bold;width:inherit;}
-.list li:not(.toolbar){padding:8px 6px;list-style-type:none;}
+.list{width:inherit;font-size:1.2em;line-height:1.05em;font-weight:bold;}
+.list li:not(.toolbar){padding:8px 6px 8px 8px;list-style-type:none;}
 .list a{display:block;}
 .list li:not(.toolbar) img,.list li:not(.toolbar) .icon{float:left;width:32px;height:32px;margin-right:6px;font-size:36px;font-weight:normal;}
-.list small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.85em;font-weight:normal;line-height:0.85em;}
+.list small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.85em;font-weight:normal;}
 .list .icon{display:inline-block;}
 .list .tip{font-size:0.85em;font-weight:bold;}
 .list .light{font-size:0.9em;font-weight:normal;}

src/stylesheets/css/Lungo.widgets.colour.css

@@ -1,6 +1,6 @@
 a.grey,.grey{background-color:#cccccc;}
 a.grey:active{background-color:#b5b5b5;}
-a.black,.grey{background-color:#2c2c2d;}
+a.black,.grey{background-color:#000000;}
 a.black:active{background-color:#000000;}
 a.red,.red{background-color:#e33100;}
 a.red:active{background-color:#c5280f;}
@@ -27,7 +27,7 @@ a.twitter:active{background-color:#2bafda;}
 a.facebook,.facebook:not(span){background-color:#3b5998;}
 a.facebook:active{background-color:#2c4579;}
 li.grey{box-shadow:inset 3px 0px 0px #cccccc;}
-li.black{box-shadow:inset 3px 0px 0px #2c2c2d;}
+li.black{box-shadow:inset 3px 0px 0px #000000;}
 li.red{box-shadow:inset 3px 0px 0px #e33100;}
 li.lightgreen{box-shadow:inset 3px 0px 0px #91bd09;}
 li.green{box-shadow:inset 3px 0px 0px #009600;}

src/stylesheets/css/Lungo.widgets.css

@@ -1,9 +1,9 @@
-.scroll,scroll{position:relative;display:block;width:100%;height:100%;}
-section.copyright img{max-height:128px;}
+.scrollable{position:absolute;display:block;width:100%;height:100%;}
+.scroll{overflow:scroll;-webkit-overflow-scrolling:touch;}
 .onleft{float:left;}
 .onright{float:right;}
-.indented{width:auto;padding:10px 10px 0;}
-.indented ul{margin-bottom:10px;height:inherit;}
+.indented{width:auto;height:auto;padding:10px 10px 0px;}
+.indented ul{margin-bottom:10px;height:auto;width:inherit;}
 .rounded ul{-webkit-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;background-clip:padding-box;}
 .rounded li:first-child{-webkit-border-radius:4px 4px 0px 0px;border-radius:4px 4px 0px 0px;-webkit-background-clip:padding-box;background-clip:padding-box;}
 .rounded li:last-child{-webkit-border-radius:0px 0px 4px 4px;border-radius:0px 0px 4px 4px;-webkit-background-clip:padding-box;background-clip:padding-box;}
@@ -15,4 +15,3 @@ section.copyright img{max-height:128px;}
 .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 3px;-webkit-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;background-clip:padding-box;font-size:0.8em;font-weight:bold;line-height:1.0em;}
-.scroll{overflow:scroll;-webkit-overflow-scrolling:touch;}

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

@@ -1,4 +1,4 @@
-.form,form{font-size:0.95em;}
+.form,form{font-size:0.95em;width:inherit !important;}
 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:86%;}
@@ -20,9 +20,9 @@ input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type=
 input[type="checkbox"],input[type="radio"],input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]+span::after,input[type="radio"]+span::after{position:absolute;}
 input[type="checkbox"],input[type="radio"]{filter:alpha(opacity=0);-moz-opacity:0;-webkit-opacity:0;opacity:0;}
 input[type="checkbox"]+span,input[type="radio"]+span{width:74px;margin-bottom:8px;height:30px;font:bold 14px/30px Arial,Sans-serif;color:#8c8c8c;text-transform:uppercase;border:solid 1px #bcbbbb;background:#c8c8c8 -webkit-gradient(linear, left top, left bottom, color-stop(0, #c8c8c8), color-stop(1, #f3f3f3));position:relative;text-indent:-9999px;}
-input[type="checkbox"]+span::before,input[type="radio"]+span::before{content:"";width:29px;height:29px;border-top:solid 1px #fff;border-right:solid 1px #bebebe;background:#cfcfcf -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfcfcf), color-stop(1, #f9f9f9));-webkit-box-shadow:1px 0 1px #bebebe;-moz-box-shadow:1px 0 1px #bebebe;box-shadow:1px 0 1px #bebebe;}
+input[type="checkbox"]+span::before,input[type="radio"]+span::before{content:"";width:29px;height:29px;border-top:solid 1px #fff;border-right:solid 1px #bebebe;background:#cfcfcf -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfcfcf), color-stop(1, #f9f9f9));-webkit-box-shadow:1px 0 1px #bebebe;box-shadow:1px 0 1px #bebebe;}
 input[type="checkbox"]+span::after,input[type="radio"]+span::after{text-indent:0;width:56px;height:32px;text-align:center;}
 input[type="checkbox"]:checked+span,input[type="radio"]:checked+span{background:#5d96ea -webkit-gradient(linear, left top, left bottom, color-stop(0, #1b45bd), color-stop(1, #5d96ea));color:#fff;text-shadow:-1px -1px #0d2046;}
-input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before{left:auto;-webkit-box-shadow:-2px 0 1px #3a5e91;-webkit-box-shadow:-2px 0 1px #3a5e91;-moz-box-shadow:-2px 0 1px #3a5e91;box-shadow:-2px 0 1px #3a5e91;}
-input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{border-top:solid 1px #0f2a4f;border-bottom:solid 1px #0f2a4f;border-left:solid 1px #2c5496;height:30px;top:-1px;left:-1px;-webkit-border-radius:16px 0 0 16px;-moz-border-radius:16px 0 0 16px;border-radius:16px 0 0 16px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before{left:auto;-webkit-box-shadow:-2px 0 1px #3a5e91;-webkit-box-shadow:-2px 0 1px #3a5e91;box-shadow:-2px 0 1px #3a5e91;}
+input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{border-top:solid 1px #0f2a4f;border-bottom:solid 1px #0f2a4f;border-left:solid 1px #2c5496;height:30px;top:-1px;left:-1px;-webkit-border-radius:16px 0 0 16px;border-radius:16px 0 0 16px;-webkit-background-clip:padding-box;background-clip:padding-box;}
 @media screen and (-webkit-min-device-pixel-ratio:0){.custom-select select{padding-right:30px;}}

src/stylesheets/less/Lungo.layout.less

@@ -12,10 +12,6 @@
 @defaultTrasition : @easeOutSine;
 
 /* @group <section> */
-body {
-	height: 100%;
-}
-
 section{
 	position: absolute;
 	position: fixed;
@@ -195,7 +191,7 @@ article {
 	
 	article .title {
 		font-size: 1.1em;
-		margin: 0 4px 4px;
+		margin: 0px 4px 4px;
 	}
 		
 		article .title .icon { margin-right: 4px; }

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

@@ -10,13 +10,13 @@
  @import "mixins.less";
  
 .list {
+    width: inherit;
     font-size: 1.2em;
+    line-height: 1.05em;
     font-weight: bold;
-    width: inherit;
 }
- 
 	.list li:not(.toolbar) {
-		padding: 8px 6px;
+		padding: 8px 6px 8px 8px;
 		list-style-type: none;
 	}
 	
@@ -40,7 +40,6 @@
 		text-overflow: ellipsis;
 		font-size: 0.85em;
 		font-weight: normal;
-		line-height: 0.85em;
 	}
 	
 	

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

@@ -16,8 +16,8 @@ a.button {
 	color: #fff !important;
 	outline: none;
 	.user-select(none);
-	.border-radius(3px);
-	/* @ToDo >> mixins.less */
+	.border-radius(2px);
+	
 	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);
@@ -32,7 +32,6 @@ a.button {
 
 a.button:active {
   -webkit-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);
-  -moz-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);
   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);
 }
 
@@ -58,6 +57,7 @@ a.button.big {
 	width: 100%; 
 	margin-bottom: 4px;
 	padding: 6px 0;
+	
 	font-size: 16px;
 	line-height: 31px;
 }

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

@@ -11,6 +11,7 @@
 
 .form, form {
 	font-size: 0.95em;
+	width: inherit !important;
 }
 
 label:not(.checkbox) {

src/stylesheets/less/Lungo.widgets.less

@@ -9,16 +9,25 @@
 
 @import "mixins.less";
 
-.scroll, scroll { 
-	position: relative; 
-	display: block; 
-	width: 100%; 
+/* @group scroll */
+
+.scrollable { 
+	position: absolute;
+	display: block;
+	width: 100%;
 	height: 100%;
+	
+}
+
+.scroll {
+  	overflow: scroll;
+  	-webkit-overflow-scrolling: touch;
 }
 
-section.copyright img{
-	max-height: 128px;
+.scroll .vertical {
+    
 }
+/* @end */
 
 /* @group .position */
 .onleft { float: left; }
@@ -27,12 +36,15 @@ section.copyright img{
 	
 .indented {
     width: auto;
-	padding: 10px 10px 0;
+    height: auto;
+	padding: 10px 10px 0px;
 }
 
 .indented ul {
 		margin-bottom: 10px;
-		height: inherit;
+		height: auto;
+		width: inherit;
+		
 	}
 	.rounded ul { .border-radius(4px); }	
 	.rounded li:first-child { .border-radius(4px 4px 0px 0px); }
@@ -78,10 +90,4 @@ section.copyright img{
 	font-size: 0.8em;
 	font-weight: bold;		
 	line-height: 1.0em;
-}
-
-
-.scroll {
-  	overflow: scroll;
-  	-webkit-overflow-scrolling: touch;
 }

src/stylesheets/less/mixins.less

@@ -13,6 +13,7 @@
 
 @white:             #fff;
 @black:				#000;
+@black-active:		#000;
 
 @grey:       		#ccc;
 @grey-active:		#b5b5b5;