Checkbox styled

example/components/lungo/theme.green.css

@@ -522,9 +522,6 @@ form input[type=range],
   -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
   -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
   box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
 }
 form input[type=range]:not(.checkbox),
 .form input[type=range]:not(.checkbox) {
@@ -541,21 +538,21 @@ form input[type=range].checkbox,
 }
 form input[type=range].checkbox.active,
 .form input[type=range].checkbox.active {
+  color: #fff;
   background-color: #57c5a0;
 }
 form input[type=range]::-webkit-slider-thumb,
 .form input[type=range]::-webkit-slider-thumb {
-  -webkit-border-radius: FORM-border-radius;
-  -moz-border-radius: FORM-border-radius;
-  border-radius: FORM-border-radius;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   background: #eee;
-  -webkit-box-shadow: inset 0 0 1px #bbb;
-  -moz-box-shadow: inset 0 0 1px #bbb;
-  box-shadow: inset 0 0 1px #bbb;
+  background-color: #e7eae2;
+  border: solid 1px #d0d4c6;
 }
 form input[type=range]::-webkit-slider-thumb::after,
 .form input[type=range]::-webkit-slider-thumb::after {
-  background: #fff;
+  background: #d0d4c6;
 }
 form .progress .bar,
 .form .progress .bar {

example/components/lungo/theme.grey.css

@@ -521,9 +521,6 @@ form input[type=range],
   -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
   -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
   box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
 }
 form input[type=range]:not(.checkbox),
 .form input[type=range]:not(.checkbox) {
@@ -540,21 +537,21 @@ form input[type=range].checkbox,
 }
 form input[type=range].checkbox.active,
 .form input[type=range].checkbox.active {
+  color: #fff;
   background-color: #c9c9c9;
 }
 form input[type=range]::-webkit-slider-thumb,
 .form input[type=range]::-webkit-slider-thumb {
-  -webkit-border-radius: FORM-border-radius;
-  -moz-border-radius: FORM-border-radius;
-  border-radius: FORM-border-radius;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   background: #eee;
-  -webkit-box-shadow: inset 0 0 1px #bbb;
-  -moz-box-shadow: inset 0 0 1px #bbb;
-  box-shadow: inset 0 0 1px #bbb;
+  background-color: #e7eae2;
+  border: solid 1px #d0d4c6;
 }
 form input[type=range]::-webkit-slider-thumb::after,
 .form input[type=range]::-webkit-slider-thumb::after {
-  background: #fff;
+  background: #d0d4c6;
 }
 form .progress .bar,
 .form .progress .bar {

example/components/lungo/theme.lungo.css

@@ -522,9 +522,6 @@ form input[type=range],
   -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
   -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
   box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
 }
 form input[type=range]:not(.checkbox),
 .form input[type=range]:not(.checkbox) {
@@ -541,21 +538,20 @@ form input[type=range].checkbox,
 }
 form input[type=range].checkbox.active,
 .form input[type=range].checkbox.active {
+  color: #fff;
   background-color: #03b1ff;
 }
 form input[type=range]::-webkit-slider-thumb,
 .form input[type=range]::-webkit-slider-thumb {
-  -webkit-border-radius: FORM-border-radius;
-  -moz-border-radius: FORM-border-radius;
-  border-radius: FORM-border-radius;
-  background: #eee;
-  -webkit-box-shadow: inset 0 0 1px #bbb;
-  -moz-box-shadow: inset 0 0 1px #bbb;
-  box-shadow: inset 0 0 1px #bbb;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  background-color: #e7eae2;
+  border: solid 1px #d0d4c6;
 }
 form input[type=range]::-webkit-slider-thumb::after,
 .form input[type=range]::-webkit-slider-thumb::after {
-  background: #fff;
+  background: #d0d4c6;
 }
 form .progress .bar,
 .form .progress .bar {

example/components/lungo/theme.red.css

@@ -522,9 +522,6 @@ form input[type=range],
   -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
   -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
   box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
 }
 form input[type=range]:not(.checkbox),
 .form input[type=range]:not(.checkbox) {
@@ -541,21 +538,21 @@ form input[type=range].checkbox,
 }
 form input[type=range].checkbox.active,
 .form input[type=range].checkbox.active {
+  color: #fff;
   background-color: #f17c70;
 }
 form input[type=range]::-webkit-slider-thumb,
 .form input[type=range]::-webkit-slider-thumb {
-  -webkit-border-radius: FORM-border-radius;
-  -moz-border-radius: FORM-border-radius;
-  border-radius: FORM-border-radius;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   background: #eee;
-  -webkit-box-shadow: inset 0 0 1px #bbb;
-  -moz-box-shadow: inset 0 0 1px #bbb;
-  box-shadow: inset 0 0 1px #bbb;
+  background-color: #e7eae2;
+  border: solid 1px #d0d4c6;
 }
 form input[type=range]::-webkit-slider-thumb::after,
 .form input[type=range]::-webkit-slider-thumb::after {
-  background: #fff;
+  background: #d0d4c6;
 }
 form .progress .bar,
 .form .progress .bar {

example/index.html

@@ -70,7 +70,46 @@
             </nav>
         </header>
 
-        <article id="main-article" class="active list indented scroll">
+         <article id="form-extras" class="active scroll">
+        <form>
+            <fieldset data-icon="search">
+                <input type="search" placeholder="Search..."/>
+            </fieldset>
+        </form>
+        <form  class="margined">
+            <div class="six columns">
+                <label>Address</label>
+                <input type="text" placeholder="placeholder"/>
+            </div>
+            <div class="three columns right">
+                <label>Pin Code</label>
+                <input type="password" value="value" disabled/>
+            </div>
+
+            <label>Select your skill</label>
+            <label class="select">
+                <select class="custom">
+                    <option value="1">HTML5 Jedi</option>
+                    <option value="2">Two</option>
+                    <option value="3">Three</option>
+                </select>
+            </label>
+
+            <label>Progress</label>
+            <div id="progress-normal" data-progress="25%"></div>
+
+            <label>Range</label>
+            <input type="range" placeholder="type your name" />
+
+            <label>Checkbox</label>
+            <br/>
+            <input type="range" min="0" max="1" class="checkbox active" value="1">
+
+            <a href="#form-normal" data-router="article" class="button anchor accept" data-label="Return to normal Elements"></a>
+        </form>
+    </article>
+
+        <article id="main-article" class="activse list indented scroll">
             <ul>
                 <li class="dark">
                     <strong>

src/boot/Lungo.Boot.Events.js

@@ -29,7 +29,7 @@ Lungo.Boot.Events = (function(lng, undefined) {
     var init = function() {
         lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_hideAsideIfNecesary);
         lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
-        // lng.dom(SELECTORS.INPUT_CHECKBOX).tap(_changeCheckboxValue);
+        lng.dom(SELECTORS.INPUT_CHECKBOX).tap(_changeCheckboxValue);
         lng.View.Aside.suscribeEvents(lng.dom(SELECTORS.HREF_ASIDE));
     };
 

src/stylesheets/lungo.widgets.form.styl

@@ -24,7 +24,7 @@ form, .form
   & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea
     display: block
     width: 100%
-    padding: 6px
+    padding: 0px 6px
     height: FORM_INPUT_HEIGHT
     transition all 0.15s linear
     font-family: inherit
@@ -90,41 +90,44 @@ form, .form
         top: -1px
 
     &.checkbox
-      width: 70px
+      width: 64px
       height: FORM_INPUT_HEIGHT
       line-height: FORM_INPUT_HEIGHT
-      padding: 1px 2px
-      font-family:'lungojsicon'
+      padding: 0px 1px
+      border-radius 2px
 
       &:after
-        top: -(FORM_INPUT_HEIGHT - 1)
+        top: -(FORM_INPUT_HEIGHT - 2)
         position: relative
-        content: "\0055"
+        content: "OFF"
         float: right
         padding: 0 8px
+        font-weight: 700
+        font-size: 12px
+        line-height: (FORM_INPUT_HEIGHT - 2)
 
       &.active:after
         float: left
-        content: "\0051"
+        content: "ON"
 
     &::-webkit-slider-thumb
-        -webkit-appearance: none
-        width: FORM_INPUT_HEIGHT
+        position: relative
+        width: 24px
         height: 24px
-        position:relative
-        margin:2px 2px 2px 2px
-        border: none
+        margin: 2px
+        -webkit-appearance: none
 
     &::-webkit-slider-thumb::after
-      width:12px
-      height:12px
-      display:block
+      SIZE = 6px
+      width: SIZE
+      height: SIZE
+      display: block
       content: ""
       position: relative
-      border-radius: 8px
+      border-radius (SIZE / 2)
       z-index: 9
-      top: 6px
-      left: 9px
+      top: 8.5px
+      left: 8.5px
 
   & .progress
     width: 100%

src/stylesheets/theme.green.styl

@@ -285,7 +285,6 @@ form, .form
 
   & input[type=range]
     box-shadow  FORM_shadow_form
-    border-radius FORM_radius
 
     &:not(.checkbox)
       background-color: #ddd
@@ -293,18 +292,19 @@ form, .form
         background-color: THEME_light
 
     &.checkbox
-      background-color: #aaaaaa
+      background-color: #aaa
       color: rgba(255,255,255,0.6)
       &.active
+        color: #fff
         background-color: THEME_light
 
     &::-webkit-slider-thumb
-      border-radius: FORM-border-radius
+      border-radius: 2px
       background: #eee
-      box-shadow(inset 0 0 1px #bbb)
-
+      background-color: lighten(FORM_border_color, 50%)
+      border: solid 1px FORM_border_color
     &::-webkit-slider-thumb::after
-      background: #fff
+      background: FORM_border_color
 
   & .progress
     & .bar

src/stylesheets/theme.grey.styl

@@ -284,7 +284,6 @@ form, .form
 
   & input[type=range]
     box-shadow  FORM_shadow_form
-    border-radius FORM_radius
 
     &:not(.checkbox)
       background-color: #ddd
@@ -292,18 +291,19 @@ form, .form
         background-color: THEME_light
 
     &.checkbox
-      background-color: #aaaaaa
+      background-color: #aaa
       color: rgba(255,255,255,0.6)
       &.active
+        color: #fff
         background-color: THEME_light
 
     &::-webkit-slider-thumb
-      border-radius: FORM-border-radius
+      border-radius: 2px
       background: #eee
-      box-shadow(inset 0 0 1px #bbb)
-
+      background-color: lighten(FORM_border_color, 50%)
+      border: solid 1px FORM_border_color
     &::-webkit-slider-thumb::after
-      background: #fff
+      background: FORM_border_color
 
   & .progress
     & .bar

src/stylesheets/theme.lungo.styl

@@ -286,7 +286,6 @@ form, .form
 
   & input[type=range]
     box-shadow  FORM_shadow_form
-    border-radius FORM_radius
 
     &:not(.checkbox)
       background-color: #ddd
@@ -294,18 +293,18 @@ form, .form
         background-color: THEME_light
 
     &.checkbox
-      background-color: #aaaaaa
+      background-color: #aaa
       color: rgba(255,255,255,0.6)
       &.active
+        color: #fff
         background-color: THEME_light
 
     &::-webkit-slider-thumb
-      border-radius: FORM-border-radius
-      background: #eee
-      box-shadow(inset 0 0 1px #bbb)
-
+      border-radius: 2px
+      background-color: lighten(FORM_border_color, 50%)
+      border: solid 1px FORM_border_color
     &::-webkit-slider-thumb::after
-      background: #fff
+      background: FORM_border_color
 
   & .progress
     & .bar

src/stylesheets/theme.red.styl

@@ -285,7 +285,6 @@ form, .form
 
   & input[type=range]
     box-shadow  FORM_shadow_form
-    border-radius FORM_radius
 
     &:not(.checkbox)
       background-color: #ddd
@@ -293,18 +292,19 @@ form, .form
         background-color: THEME_light
 
     &.checkbox
-      background-color: #aaaaaa
+      background-color: #aaa
       color: rgba(255,255,255,0.6)
       &.active
+        color: #fff
         background-color: THEME_light
 
     &::-webkit-slider-thumb
-      border-radius: FORM-border-radius
+      border-radius: 2px
       background: #eee
-      box-shadow(inset 0 0 1px #bbb)
-
+      background-color: lighten(FORM_border_color, 50%)
+      border: solid 1px FORM_border_color
     &::-webkit-slider-thumb::after
-      background: #fff
+      background: FORM_border_color
 
   & .progress
     & .bar