New form style, more clean :)

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

@@ -6,25 +6,39 @@
  *
  * @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;
+*/
 .app {
   background: #000000;
 }
 /* @group <header> & <footer> & <article> */
 header {
-  background-color: #72be4b;
-  border-top: 1px solid #84dd56;
-  border-bottom: 1px solid #589739;
+  background-color: #05b8e2;
+  border-top: 1px solid #05bde9;
+  border-bottom: 1px solid #07acd0;
+  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;
 }
 .title {
-  color: #fff;
-  text-shadow: 0px 1px 0px #589739;
+  color: #ffffff;
+  font-size: 1.1em;
+  text-shadow: 0px 1px 0px #07acd0;
 }
 article {
-  background-color: #e2e2e2;
+  background-color: #e8e8e8;
 }
 article .title {
   color: #797979;
@@ -36,7 +50,7 @@ nav a {
   color: rgba(0, 0, 0, 0.5);
 }
 nav a.current {
-  color: #fff;
+  color: #ffffff;
 }
 .toolbar a.current {
   background: #1c1c1c;
@@ -128,7 +142,7 @@ aside ~ article {
 /* @end */
 /* @group widgets */
 .splash {
-  background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
+  background: #05b8e2 -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #05bde9), color-stop(1, #07acd0));
   color: #fff;
   text-shadow: 0px 1px 1px #000;
 }
@@ -142,32 +156,43 @@ a.button:active {
 /* @end */
 /* @group <inputs> */
 input, textarea, select {
-  border: 1px solid #c5c5c5;
-  background: #ffffff -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(0.25, #ffffff));
-}
-.rounded input, textarea, select {
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
+  border: 1px solid #e1e1e1;
+  border-radius: 0px;
+  color: #858585;
 }
 input:focus, textarea:focus, select:focus {
-  border: 1px solid #058cf5;
-  -webkit-box-shadow: 0px 0px 4px 0px #058cf5;
-  box-shadow: 0px 0px 4px 0px #058cf5;
-  background: #e8fefe;
+  border-color: #05b8e2;
+  color: #05b8e2;
+}
+label {
+  font-size: 0.75em;
+  color: #05b8e2;
+  text-transform: uppercase;
 }
 .select:after {
-  background: #ccc;
+  background: #858585;
   color: white;
 }
+input[type="checkbox"] + span, input[type="radio"] + span {
+  color: #fff;
+  background: #a0a0a0;
+}
+input[type="checkbox"] + span::before, input[type="radio"] + span::before {
+  background: #c1c1c1;
+}
+input[type="checkbox"]:checked + span, input[type="radio"]:checked + span {
+  background: #29a2c2;
+}
 /* @end */
 .bubble {
   color: #fff;
   text-shadow: none;
   box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.7);
 }
+header .bubble.count {
+  background: #2c2c2d;
+}
 .bubble.count {
-  background: #e33100;
+  background: #05b8e2;
 }
 /* @end */

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

@@ -1,28 +1,25 @@
-.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;}
+.form,form{font-size:0.9em;width:inherit !important;}
+label{line-height:27px;}
+input:not([type=checkbox]),textarea,select{display:inline-block;padding:5px;width:95%;margin-bottom:2px;outline:none;-webkit-appearance:none;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;}
-input[type=search]+.button .icon{font-size:20px !important;}
+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%;}
-.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;}
+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;}
 .no-pointer-events .select:after{content:none;}
-input[type="checkbox"],input[type="radio"]{width:74px;float:left;z-index:2;}
-input[type="checkbox"]+span::after,input[type="radio"]+span::after{content:"off";}
-input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{content:"on";}
-.iphone-toggle-buttons{-moz-user-select:none;-webkit-user-select:none;user-select:none;}
-.iphone-toggle-buttons{margin:4px 0;}
-input[type="checkbox"]+span,input[type="radio"]+span,input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]+span::after,input[type="radio"]+span::after{-moz-border-radius:16px;-webkit-border-radius:16px;border-radius:16px;display:inline-block;}
+input[type="checkbox"],input[type="radio"]{width:82px;height:27px;z-index:2;}
+input[type="checkbox"]+span::after,input[type="radio"]+span::after{content:"OFF";}
+input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{content:"ON";}
+input[type="checkbox"]+span,input[type="radio"]+span,input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]+span::after,input[type="radio"]+span::after{display:inline-block;}
 input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]+span::after,input[type="radio"]+span::after,input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before,input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{top:0;}
 input[type="checkbox"]+span::after,input[type="radio"]+span::after,input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before{right:0;}
 input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{left:0;}
 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;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;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;}
+input[type="checkbox"],input[type="radio"]{-webkit-opacity:0;opacity:0;}
+input[type="checkbox"]+span,input[type="radio"]+span{width:82px;height:27px;position:relative;font-size:11px;line-height:29px;font-weight:bold;text-transform:uppercase;text-indent:-9999px;}
+input[type="checkbox"]+span::before,input[type="radio"]+span::before{content:"";width:41px;height:27px;}
+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;}
 @media screen and (-webkit-min-device-pixel-ratio:0){.custom-select select{padding-right:30px;}}

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

@@ -8,6 +8,24 @@
  */
 
 @import "mixins.less";
+/*
+//ARTIC
+@master-color: #2daf96;
+	@master-color-light: #35d2b3;
+	@master-color-dark: #22937d;
+*/
+
+/*
+//GREEN
+@master-color: #2ea03c;
+	@master-color-light: #34b745;
+	@master-color-dark: #248831;
+*/
+@master-color:  #05b8e2;
+	@master-color-light: #05bde9;
+	@master-color-dark: #07acd0;
+
+@secondary-color: #2c2c2d;
 
 .app {
     background: @black;
@@ -15,10 +33,10 @@
 	
 /* @group <header> & <footer> & <article> */
 header {
-	background-color: #72be4b;
-	
-	border-top: 1px solid #84dd56;	
-	border-bottom: 1px solid #589739;
+	background-color: @master-color;
+	border-top: 1px solid @master-color-light;	
+	border-bottom: 1px solid @master-color-dark;
+	box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
 }
 	
 footer {
@@ -27,12 +45,13 @@ footer {
 }
 
 .title {
-	color: #fff;
+	color: @white;
+	font-size: 1.1em;
 	//text-shadow: 0px -1px 0px rgba(0,0,0,0.5) ;
-	text-shadow: 0px 1px 0px #589739; 
+	text-shadow: 0px 1px 0px @master-color-dark;
 }
 
-article { background-color: #e2e2e2; }
+article { background-color: #e8e8e8; }
 	
 	article .title {
     	color: #797979;
@@ -43,7 +62,7 @@ article { background-color: #e2e2e2; }
 /* @group <nav> */
 nav a { color: rgba(0,0,0,0.5); }
 
-nav a.current { color: #fff; }
+nav a.current { color: @white; }
 
 .toolbar a.current{
 	background: #1c1c1c;
@@ -149,16 +168,13 @@ aside {
 /* @group widgets */
 
 .splash { 
-	background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
+	background: @master-color -webkit-gradient(linear, left top, left bottom, color-stop(0.1, @master-color-light), color-stop(1, @master-color-dark));
 	color: #fff; 
 	text-shadow: 0px 1px 1px #000;
 }
 
 /* @group .button */
-
 a.button {
-	
-	
 	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,0.2), 0px 1px 0px rgba(255,255,255,0.2);
 }
 
@@ -169,32 +185,51 @@ a.button:active {
 
 /* @group <inputs> */
 input, textarea, select {
-	border: 1px solid #c5c5c5;
-	
-	background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(0.25, #fff));
-
-}
-
-.rounded input, textarea, select {
-    .border-radius(2px);
+	border: 1px solid #e1e1e1;
+	border-radius: 0px;
+	color: #858585;
 }
 	
 input:focus, textarea:focus, select:focus { 
-	border: 1px solid #058cf5;
-	.box-shadow(0px 0px 4px 0px #058cf5);
-	background: #e8fefe;
+	border-color: @master-color;
+	color:  @master-color;
+}
+
+label {
+	font-size: 0.75em;
+	color: @master-color;
+	text-transform: uppercase;
 }
 	
 .select:after {
-	background: #ccc;
+	background: #858585;
 	color: white;
 }
+
+input[type="checkbox"] + span, input[type="radio"] + span {
+	color: #fff;
+	background: #a0a0a0;
+}
+	input[type="checkbox"] + span::before, 
+	input[type="radio"] + span::before {
+		background: #c1c1c1;
+	}
+	
+	input[type="checkbox"]:checked + span, 
+	input[type="radio"]:checked + span {
+		background: #29a2c2;
+	}
+
+
 /* @end */
 
 .bubble {
 	color: #fff;
 	text-shadow: none;
 	box-shadow: inset 0px 0px 2px rgba(0,0,0,0.7);
+}	
+	header .bubble.count {
+    background: @secondary-color;
 }
-	.bubble.count { background: #e33100; }
+	.bubble.count { background: @master-color; }
 /* @end */

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

@@ -10,13 +10,12 @@
 @import "mixins.less";
 
 .form, form {
-	font-size: 0.95em;
+	font-size: 0.9em;
 	width: inherit !important;
 }
 
-label:not(.checkbox) {
-    display: block;
-    margin-bottom: 2px;
+label {
+    line-height: 27px;
 }
 
 input:not([type=checkbox]), textarea, select {  
@@ -27,8 +26,8 @@ input:not([type=checkbox]), textarea, select {
 	
 	outline: none; 	
 	-webkit-appearance: none;
-		
-	font-size: 1.0em;
+	font-size:  14px;
+	
 	font-weight: bold;
 	line-height: 1.25em;
 }
@@ -41,14 +40,12 @@ input[type=search] {
 	    float: right;
 	    padding: 0px;
 	    width: 32px;
+	    height: 30px;
 	}
 	input[type=search] + .button .icon{
-	    font-size: 20px !important;
+	    font-size: 22px !important;	    
+	    line-height: 30px;
 	}
-
-
-
-
 /* @end */
 
 select{ 
@@ -60,51 +57,44 @@ label.select {
     position: relative;
     display: inline-block;
     width: 100%;
+	padding-top: 2px;
 }
     
 .select:after {
-	padding: 0 7px;
+	text-align: center;
 	position: absolute;
 	top: 0;
 	right: 0;
 	bottom: 0;
-	height:30px;
+	height:29px;
+	width: 29px;
 	
 	content: "▼";     
-	pointer-events:none;
-	
-	font-size: 60%;
+	pointer-events:none;	
 	line-height: 32px;
+	margin-top: 2px;
 }
     
 .no-pointer-events .select:after {
 	content: none;
 }
 
+/* @group Switch */
+
 input[type="checkbox"], input[type="radio"]{
-	width: 74px;
-	float: left;
+	width: 82px;
+	height: 27px;
 	z-index: 2;
 }
 
 input[type="checkbox"] + span::after,
    input[type="radio"] + span::after {
-	content: "off";
+	content: "OFF";
 }
 
 input[type="checkbox"]:checked + span::after,
    input[type="radio"]:checked + span::after {
-	content: "on";
-}
-
-.iphone-toggle-buttons {
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	user-select: none;
-}
-
-.iphone-toggle-buttons {
-	margin: 4px 0;
+	content: "ON";
 }
 
 input[type="checkbox"] + span,
@@ -113,9 +103,6 @@ input[type="checkbox"] + span,
    input[type="radio"] + span::before,
    input[type="checkbox"] + span::after,
    input[type="radio"] + span::after {
-	-moz-border-radius: 16px;
-	-webkit-border-radius: 16px;
-	border-radius: 16px;
 	display: inline-block;
 }
 
@@ -155,71 +142,50 @@ input[type="checkbox"],
 
 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));
+	width: 82px;
+	height:27px;
 	position: relative;
+	font-size: 11px;
+	line-height: 29px;
+	font-weight: bold;
+	text-transform: uppercase;
 	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));
-	.box-shadow(1px 0 1px #bebebe);
+	width: 41px;
+	height: 27px;
 }
 
 input[type="checkbox"] + span::after,
    input[type="radio"] + span::after {
 	text-indent: 0;
-	width: 56px;
-	height: 32px;
+	width: 41px;
+	height: 27px;
 	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;
+	box-shadow: 0px 1px 0px #fff, 0px 2px 0px #d2d2d2;
 }
 
 input[type="checkbox"]:checked + span::before,
    input[type="radio"]:checked + span::before {
 	left: auto;
-	-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;
-	.border-radius(16px 0 0 16px);
+	height: 27px;
 }
+/* @end */
+
+
 
 @media screen and (-webkit-min-device-pixel-ratio:0) { 
 	.custom-select select {padding-right:30px;}