New version of checkbox (inspired in iOS7)

example/components.html

@@ -103,7 +103,19 @@
         </nav>
 
         <article id="layout-art2" class="list scroll ">
-
+            <div class="form indented">
+                <div>
+                 <div data-control-checkbox="check" ></div>
+
+                 <hr>
+<input type="checkbox" checked>
+<hr>
+<input type="checkbox">
+<hr>
+<input type="checkbox" checked>
+<hr>
+             </div>
+</div>
             <ul>
                 <li class="selectable">
                     <strong>&lt;li .selectable&gt; + &lt;strong&gt; </strong>

src/stylesheets/lungo.widget.form.styl

@@ -129,6 +129,7 @@ form, .form
 
   /* -------------------------- CHECKBOX -------------------------- */
   & [data-control-checkbox]
+    FORM_HEIGHT = 36px
     display: inline-block
     width: 76px
     height: FORM_HEIGHT !important
@@ -145,11 +146,9 @@ form, .form
       z-index: 0
       position: absolute
     &:before
-      content: "ON"
       left: (FORM_HEIGHT / 2.2)
       opacity: 0
     &:after
-      content: "OFF"
       right: (FORM_HEIGHT / 2.2)
     &.checked
       &:before
@@ -172,3 +171,63 @@ form, .form
 
     & input[type=checkbox]:checked + label
       left: 49px
+
+
+  WHITE =  #fff
+  GREEN = #53d76a
+  GREY = #d3d3d3
+  input[type="checkbox"]
+    appearance: none
+    -webkit-appearance: none
+    -webkit-user-select: text
+    -webkit-font-smoothing: antialiased
+
+    background-color: darken(WHITE, 2%)
+    border: 1px solid GREY
+    border-radius: 26px
+    box-shadow: inset 0 0 0 1px GREY
+    cursor: pointer
+    height: 28px
+    position: relative
+    transition: border .25s .15s,
+                box-shadow .25s .3s,
+                padding .25s
+    width: 44px
+    vertical-align: top
+
+    &:after
+      background-color: WHITE
+      border: 1px solid GREY
+      border-radius: 24px
+      box-shadow: inset 0 -3px 3px hsla(0,0%,0%,.025),
+                  0 1px 4px hsla(0,0%,0%,.15),
+                  0 4px 4px hsla(0,0%,0%,.1)
+      content: ''
+      display: block
+      height: 24px
+      left: 0
+      position: absolute
+      right: 16px
+      top: 0
+      transition: border .25s .15s,
+                  left .25s .1s,
+                  right .15s .175s
+
+    &:checked
+      border-color: GREEN
+      box-shadow: inset 0 0 0 13px GREEN
+      padding-left: 18px
+      transition: border .25s,
+                  box-shadow .25s,
+                  padding .25s .15s
+
+      &:after
+        border-color: GREEN
+        left: 16px
+        right: 0
+        transition: border .25s,
+                    left .15s .25s,
+                    right .25s .175s
+
+
+