New element .progress

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

@@ -1,6 +1,7 @@
-/**
+@import "Lungo.theme.pro.font.css";
+/** 
  * Stylesheet
- *
+ * 
  * @namespace LUNGO.Theme
  * @class Default
  *
@@ -8,13 +9,14 @@
  */
 .app {
   background: #000000;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
 }
 /* @group <header> & <footer> & <article> */
 header {
-  background-color: #91bd09;
-  border-top: 1px solid #b7de3f;
-  border-bottom: 1px solid #758e29;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+  background-color: #05b8e2;
+  border-top: 1px solid #05bde9;
+  border-bottom: 1px solid #07acd0;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 }
 footer {
   background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1c1c));
@@ -47,11 +49,25 @@ nav a.current, nav a.active {
   box-shadow: inset 0px 0px 8px #101010;
   text-shadow: 0px 1px 4px #000;
 }
+.groupbar {
+  background: #ededed;
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+}
+.groupbar a {
+  color: #6e6e6e;
+}
+.groupbar a.current {
+  color: #6e6e6e;
+  border-bottom: solid 3px #05bde9;
+}
 /* @end */
 /* @group <aside> */
 aside {
   background: #252525;
-  box-shadow: inset -1px 0 4px rgba(0, 0, 0, 0.2);
+}
+aside .title {
+  background: #101010;
+  border: none;
 }
 aside a {
   color: #fff;
@@ -72,6 +88,20 @@ aside .anchor {
   background: #101010;
   color: #7a7a7a;
 }
+section.aside {
+  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.5);
+}
+section.aside.onright {
+  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.5);
+}
+@media handheld, only screen and (min-width: 768px) {
+  section.current, section.show {
+    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.5);
+  }
+  section.current.onright, section.show.onright {
+    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.5);
+  }
+}
 /* @end */
 /* @group .list */
 .list, .list li:not(.toolbar) a {
@@ -85,8 +115,8 @@ aside .anchor {
   border-bottom: none;
 }
 .list li.selectable:active {
-  background: #c1de6a;
-  color: #5d7b03;
+  background: #93d6e7;
+  color: #1b6777;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 .list li.selectable:active small, .list li.selectable:active .onright:not(.bubble) {
@@ -96,12 +126,19 @@ aside .anchor {
 .list li small, .list li .onright:not(.bubble) {
   color: #888;
 }
-.list .indented ul {
-  border: 1px solid #e1e1e1;
+.list.indented li {
+  border-left: solid 1px #e1e1e1;
+  border-right: solid 1px #e1e1e1;
+}
+.list.indented li:first-child {
+  border-top: solid 1px #e1e1e1;
+}
+.list.indented li:last-child {
+  border-bottom: solid 1px  #e1e1e1;
 }
 .list .anchor {
-  background: #c1de6a;
-  color: #5d7b03;
+  background: #93d6e7;
+  color: #1b6777;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
   border: none;
 }
@@ -138,21 +175,20 @@ aside .anchor {
 /* @end */
 /* @group widgets */
 .splash {
-  background: #91bd09;
+  background: #07acd0;
   color: #fff;
   text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
 }
 /* @group .button */
 .button {
   border-bottom: 1px inset rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2);
-  font-weight: bold;
 }
 .button:active, .button.active {
   -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.2);
@@ -180,11 +216,11 @@ input, textarea, select {
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
 }
 input:focus, textarea:focus, select:focus {
-  border-color: #91bd09;
-  color: #91bd09;
+  border-color: #05b8e2;
+  color: #05b8e2;
 }
 label {
-  color: #91bd09;
+  color: #05b8e2;
   text-transform: uppercase;
   font-weight: bold;
 }
@@ -200,8 +236,41 @@ input[type="checkbox"] + span::before, input[type="radio"] + span::before {
   background: #c1c1c1;
 }
 input[type="checkbox"]:checked + span, input[type="radio"]:checked + span {
-  background: #758e29;
+  background: #07acd0;
+}
+/* @group range */
+input[type="range"] {
+  background-color: #c7c7c7;
 }
+input[type="range"]:active {
+  background-color: #34b7dc;
+}
+input[type="range"]::-webkit-slider-thumb {
+  border: solid 7px rgba(255, 255, 255, 0.5);
+  background: #34b7dc;
+}
+input[type="range"]:active::-webkit-slider-thumb {
+  box-shadow: 0px 0px 4px #34b7dc;
+}
+/* @end */
+/* @group .progress */
+.progress .labels {
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #858585;
+}
+.progress .bar {
+  background: #c7c7c7;
+}
+.progress .bar .value {
+  background: #34b7dc;
+}
+.progress .bar .value .glow {
+  background-color: rgba(255, 255, 255, 0.25);
+  box-shadow: 0px 0px 3px #34b7dc;
+}
+/* @end */
 /* @end */
 .bubble {
   color: #fff;
@@ -218,6 +287,6 @@ header .bubble.count {
   background: #2c2c2d;
 }
 .bubble.count {
-  background: #91bd09;
+  background: #05b8e2;
 }
 /* @end */

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

@@ -20,7 +20,7 @@ input[type="checkbox"]+span::before,input[type="radio"]+span::before{content:"";
 input[type="checkbox"]+span::after,input[type="radio"]+span::after{text-indent:0;width:41px;height:27px;text-align:center;box-shadow:0px 1px 0px #fff, 0px 2px 0px #d2d2d2;}
 input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before{left:auto;}
 input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{height:27px;}
-input[type="range"]{-webkit-appearance:none;height:3px;width:100%;outline:none;border-radius:1px;position:relative;padding:0px;margin:0px;margin-bottom:4px !important;background-color:#c7c7c7;border:0;cursor:ew-resize;}input[type="range"]:active{background-color:#34b7dc;}
-input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;position:relative;z-index:1;width:24px;height:24px;border-radius:12px;border:solid 7px rgba(255, 255, 255, 0.5);background:#34b7dc;}
-input[type="range"]:active::-webkit-slider-thumb{box-shadow:0px 0px 4px #34b7dc;}
+input[type="range"]{-webkit-appearance:none;height:3px;width:100%;outline:none;border-radius:1px;position:relative;padding:0px;margin:0px;margin-bottom:4px !important;border:0;cursor:ew-resize;}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;position:relative;z-index:1;width:24px;height:24px;border-radius:12px;}
+.progress{width:100%;}.progress .labels{display:block;}.progress .labels span:last-child{float:right;}
+.progress .bar{height:3px;display:block;}.progress .bar .value{display:block;height:inherit;width:0%;-webkit-transition:width 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}.progress .bar .value .glow{float:right;height:inherit;width:3px;}
 @media screen and (-webkit-min-device-pixel-ratio:0){.custom-select select{padding-right:30px;}}

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

@@ -1,6 +1,6 @@
-/**
+/** 
  * Stylesheet
- *
+ * 
  * @namespace LUNGO.Theme
  * @class Default
  *
@@ -8,30 +8,32 @@
  */
 
 @import "mixins.less";
+@import "Lungo.theme.pro.font.css";
 
-@theme: #91bd09;
-	@theme-light: #B7DE3F;
-	@theme-dark: #758E29;
-	@theme-highlight: #C1DE6A;
-		@theme-highlight-color: #5D7B03;
+@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.2);
 	@theme-secondary: #2c2c2d;
 		@theme-secondary-dark: #1c1c1c;
 
 .app {
     background: @black;
+    font-family: 'Roboto', Helvetica, Arial, sans-serif;
 }
-
+	
 /* @group <header> & <footer> & <article> */
 header {
 	background-color: @theme;
-	border-top: 1px solid @theme-light;
+	border-top: 1px solid @theme-light;	
 	border-bottom: 1px solid @theme-dark;
-	box-shadow: 0 1px 0 rgba(0,0,0,0.2);
+	box-shadow: 0 1px 0 rgba(0,0,0,0.1);
 }
-
+	
 footer {
-	background: @theme-secondary -webkit-gradient(linear, left top, left bottom, color-stop(0.25, @theme-secondary), color-stop(1, @theme-secondary-dark));
+	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;
 }
 
@@ -40,9 +42,8 @@ footer {
 	text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
 }
 
-article {
-	background-color: #ededed;
-
+article { 
+	background-color: #ededed; 	
 	& .title {
     	color: #797979;
     	text-shadow: 0px 1px 0px #fff;
@@ -51,110 +52,143 @@ article {
 /* @end */
 
 /* @group <nav> */
-nav a {
-	color: rgba(255,255,255,0.5);
+nav a { 
+	color: rgba(255,255,255,0.5); 	
 	
-	&.current, &.active { color: @white; }
+	&.current, &.active {  color: @white; }
 }
 
-.toolbar a {
-	color: rgba(255,255,255,0.2);
-
+.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;
 	}
 }
+
+.groupbar {
+    background: #ededed;
+    border-bottom: solid 1px rgba(0,0,0,0.1);
+    
+    & a {
+    	color: #6e6e6e;
+    	&.current {
+			color: #6e6e6e;
+			border-bottom: solid 3px @theme-light;
+    	}
+	}
+}
 /* @end */
 
 /* @group <aside> */
 aside {
     background: #252525;
-	box-shadow: inset -1px 0 4px rgba(0,0,0,0.2);
-
+    
+    & .title {
+    	background: #101010;
+    	border:  none;
+	}
+    
     & a {
     	color: #fff;
-	    text-shadow: 0px 1px 0px #000;
+	    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;
+    		text-shadow: none; 
 			color: #7a7a7a;
 		}
 	}
-
+	
 	& .anchor {
     	background: #101010;
 		color:  #7a7a7a;
 	}
 }
+
+section.aside {
+    box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+	&.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
+}
+	
+@media handheld, only screen and (min-width: 768px) {
+	section.current, section.show {
+	    box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+		&.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
+	}
+}
+
 /* @end */
 
 /* @group .list */
+.list, .list li:not(.toolbar) a { color: #2a2a2a; }
+
 .list {
-	&, & li:not(.toolbar) a {
-    	color: #2a2a2a;
-	}
-	
     & li {
 		background: #fff;
 		border-bottom: 1px inset #e1e1e1;
 
 		&: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;
     			text-shadow: none;
-			}
+			} 
 		}
-
+		
 		& small, & .onright:not(.bubble) { color: #888; }
+	} 
+		
+	&.indented li { 
+		border-left: solid 1px #e1e1e1;
+		border-right: solid 1px #e1e1e1;
+		
+		&:first-child { border-top: solid 1px #e1e1e1; }
+		&:last-child { border-bottom: solid 1px  #e1e1e1; }
 	}
-
-	& .indented ul { border: 1px solid #e1e1e1; }
-
+	
     & .anchor {
 		background: @theme-highlight;
 		color: @theme-highlight-color;
 		text-shadow: @theme-highlight-text-shadow;
 		border: none;
 	}
-
-	& .tip { color: #7a7a7a;
+	
+	& .tip { color: #7a7a7a; 
 		&.darker {
-			background-color: #2c2c2d;
+			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;
+			box-shadow: inset 0px 1px 0px #fff;			
 			text-shadow: 0px 1px 0px #fff;
 		}
-	}
-
+	}	
+	
 	& .toolbar {
 		border-bottom-color: rgba(0,0,0,0.2);
-
-		& .toolbar a {
-			box-shadow: 1px 0px 0px #d9d9d9;
-
+		
+		& .toolbar a { 
+			box-shadow: 1px 0px 0px #d9d9d9; 
+			
 			&:last-child { box-shadow: none; }
 			&.current {
 				background: transparent;
@@ -168,18 +202,19 @@ aside {
 /* @end */
 
 /* @group widgets */
-.splash {
-	background: @theme;
-	color: #fff;
+.splash { 
+	background: @theme-dark;
+	color: #fff; 
 	text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
 }
 
+
+
 /* @group .button */
 .button {
 	border-bottom: 1px inset rgba(0,0,0,0.2);		
-	.border-radius(1px);
+	.border-radius(2px);
 	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 3px rgba(0,0,0,0.2);	
-	font-weight: bold;
 	
 	&:active, &.active { 
 		-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.2);
@@ -206,8 +241,8 @@ input, textarea, select {
 	color: #858585;
 	font-family: 'Roboto', Helvetica, Arial, sans-serif;
 }
-
-input:focus, textarea:focus, select:focus {
+	
+input:focus, textarea:focus, select:focus { 
 	border-color: @theme;
 	color:  @theme;
 }
@@ -217,7 +252,7 @@ label {
 	text-transform: uppercase;
 	font-weight: bold;
 }
-
+	
 .select:after {
 	background: #858585;
 	color: white;
@@ -227,15 +262,56 @@ input[type="checkbox"] + span, input[type="radio"] + span {
 	color: #fff;
 	background: #a0a0a0;
 }
-	input[type="checkbox"] + span::before,
+	input[type="checkbox"] + span::before, 
 	input[type="radio"] + span::before {
 		background: #c1c1c1;
 	}
-
-	input[type="checkbox"]:checked + span,
+	
+	input[type="checkbox"]:checked + span, 
 	input[type="radio"]:checked + span {
 		background: @theme-dark;
 	}
+
+/* @group range */
+input[type="range"] {
+	background-color: #c7c7c7;
+	
+	&:active { background-color: #34b7dc; }
+	&::-webkit-slider-thumb {
+		border: solid 7px rgba(255,255,255, 0.5);
+		background: #34b7dc;
+	}
+	&:active::-webkit-slider-thumb {
+		box-shadow: 0px 0px 4px #34b7dc;
+	}
+}
+/* @end */
+
+/* @group .progress */
+.progress {
+    .labels {
+    	font-size: 12px;
+    	font-weight: bold;
+    	line-height: 18px;
+    	color: #858585;
+	}
+	
+    & .bar {
+		background: #c7c7c7;
+		
+    	& .value {
+			background: #34b7dc;	
+	    
+	    	& .glow {
+				background-color: rgba(255,255,255,0.25);
+	    		box-shadow: 0px 0px 3px #34b7dc;
+			}
+		}
+	}
+}
+/* @end */
+
+
 /* @end */
 
 .bubble {
@@ -243,7 +319,7 @@ input[type="checkbox"] + span, input[type="radio"] + span {
 	.border-radius(2px);
 	text-shadow: none;
 	font-weight: bold !important;
-}
+}	
 	header .bubble.count {background: @theme-secondary;}
 	.bubble.count { background: @theme; }
 /* @end */

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

@@ -8,6 +8,9 @@
  */
 
 @import "mixins.less";
+
+@defaultTrasition : @easeOutSine;
+
 .form {
 	
 }
@@ -189,7 +192,6 @@ input[type="checkbox"]:checked + span::after,
 /* @end */
 
 /* @group range */
-
 input[type="range"] {
 	-webkit-appearance:	none;
 	height: 3px;
@@ -200,32 +202,51 @@ input[type="range"] {
 	padding: 0px;
 	margin: 0px;
 	margin-bottom: 4px !important;
-	
-	background-color: #c7c7c7;
-	
 	border: 0;
 	cursor: ew-resize;
 	
-	&:active { background-color: #34b7dc; }
 	&::-webkit-slider-thumb {
 		-webkit-appearance:	none;	
 		position: relative;
-		z-index: 		1;
+		z-index: 1;
 	
 		width: 24px;
 		height: 24px;
 		border-radius: 12px;
-		border: solid 7px rgba(255,255,255, 0.5);
-		
-		background: #34b7dc;
-		//box-shadow: inset 0px 0px 1px rgba(0,0,0,0.2);
 	}
-	&:active::-webkit-slider-thumb {
-		box-shadow: 0px 0px 4px #34b7dc;
+}
+/* @end */
+
+/* @group progress */
+.progress {
+    width: 100%;
+    
+    .labels {
+    	display: block;
+		& span:last-child { float: right; }
+	}
+	
+    & .bar {
+		height:  3px;
+		display: block;
+		
+    	& .value {
+			display:block;
+	    	height: inherit;
+	    	width: 0%;
+	    	-webkit-transition: width 250ms @defaultTrasition;	
+	    	
+	    	& .glow {
+				float:right;
+				height: inherit;
+	    		width: 3px;
+	    	}
+		}
 	}
 }
 /* @end */
 
+
 @media screen and (-webkit-min-device-pixel-ratio:0) { 
 	.custom-select select {padding-right:30px;}
 }