Remove old control checkbox .. now it's native control

example/components.html

@@ -105,17 +105,22 @@
         <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>
+
+                 <br/>
+                <input type="checkbox" checked>
+                <br/>
+                <input type="checkbox">
+                <br/>
+                <input type="checkbox" checked>
+                <br/>
+
+
+                <label>Progress</label>
+                <div id="progress-normal" data-progress="25%"></div>
+                <label>Range</label>
+                <input type="range" placeholder="type your name" min="0" max="8" />
+                </div>
+            </div>
             <ul>
                 <li class="selectable">
                     <strong>&lt;li .selectable&gt; + &lt;strong&gt; </strong>

example/static/sections/form.html

@@ -63,7 +63,10 @@
 
             <fieldset>
                 <label class="anchor">label Lorem ipsum dolor sit amet</label>
-                 <div data-control-checkbox="check" class="inline right"></div>
+                <input type="checkbox" class="inline right" />
+                <input type="checkbox" checked>
+
+                 <!-- <div data-control-checkbox="check" class="inline right"></div> -->
              </fieldset>
 
             <fieldset data-icon="plus">
@@ -121,7 +124,7 @@
 
             <fieldset>
                 <label class="anchor">label Lorem ipsum dolor sit amet</label>
-                <div data-control-checkbox="check_indent" class="inline right"></div>
+                <div data-control-checkbox="check_indent" class="inline on-right"></div>
              </fieldset>
 
 
@@ -177,19 +180,6 @@
             <label>Range</label>
             <input type="range" placeholder="type your name" min="0" max="8" />
 
-
-            <label>Checkbox</label>
-            <div class="layout horizontal">
-                <div>
-                    <div data-control-checkbox="normal"></div>
-                </div>
-                <div>
-                    <div data-control-checkbox="twit-example" class="icon twitter accept"></div>
-                </div>
-                <div>
-                    <div data-control-checkbox="ok-example" class="icon ok cancel"></div>
-                </div>
-            </div>
             <br/>
 
             <button class="anchor margin-bottom" data-label="Normal"></button>

src/boot/Lungo.Boot.Events.coffee

@@ -30,7 +30,6 @@ Lungo.Boot.Events = do (lng = Lungo) ->
     lng.dom(C.QUERY.ASIDE_ROUTER).touch _onAside
     lng.dom(C.QUERY.MENU_ROUTER).touch _onMenu
     lng.dom(QUERY.MENU_HREF).touch _closeMenu
-    lng.dom(QUERY.CONTROL_CHECKBOX).on C.EVENT.CHANGE, _changeCheckboxValue
     for transition in C.EVENT.TRANSITION_END
       lng.dom("body").delegate C.ELEMENT.SECTION, transition, _transitionEnd
       lng.dom("body").delegate C.ELEMENT.ASIDE, transition, _transitionEnd
@@ -51,7 +50,6 @@ Lungo.Boot.Events = do (lng = Lungo) ->
       _onAsyncResource el, C.ELEMENT.ARTICLE
     else
       lng.Router.article lng.Router.history(), el.data("view-article"), el
-      # lng.Aside.hide()
 
   _onAsyncResource = (el, type) ->
     url = el.data "async"
@@ -73,7 +71,6 @@ Lungo.Boot.Events = do (lng = Lungo) ->
       lng.Router.section id
     do lng.Notification.hide
 
-
   _onAside = (event) ->
     do event.preventDefault
     aside_id = lng.dom(event.target).closest(C.QUERY.ASIDE_ROUTER).data "view-aside"
@@ -90,16 +87,6 @@ Lungo.Boot.Events = do (lng = Lungo) ->
     parent = el.parent("[data-control=menu]").removeClass(CLASS.SHOW).attr C.ATTRIBUTE.ID
     lng.dom("[data-view-menu=#{parent}] > .icon").attr "class", "icon " + el.data("icon")
 
-  _changeCheckboxValue = (event) ->
-    #@TODO >> Refactor names
-    event.preventDefault()
-    el = lng.dom(this)
-    input = el.find "input"
-    checked = input[0].checked
-    input.val checked.toString()
-    el.removeClass "checked"
-    if checked  then el.addClass "checked"
-
   _transitionEnd = (event) ->
     section = lng.dom(event.target)
     hasDirection = section.data("direction")
@@ -109,5 +96,4 @@ Lungo.Boot.Events = do (lng = Lungo) ->
     if hasDirection or asideRelated or shadowRelated then lng.Router.animationEnd event
     else lng.Aside.animationEnd event
 
-
   init: init

src/modules/Lungo.Attributes.coffee

@@ -42,13 +42,6 @@ Lungo.Attributes =
     selector: "header"
     html: "<h1 class=\"title centered\">{{value}}</h1>"
 
-  "control-checkbox":
-    selector: "*"
-    html: """
-      <input type="checkbox" value="None" id="{{value}}" />
-      <label for="{{value}}"></label>
-    """
-
   loading:
     selector: "*"
     html: """

src/stylesheets/__init.styl

@@ -28,6 +28,7 @@ INDENT                  = 0.8em
 FORM_HEIGHT             = 30px
 FORM_border             = 2px
 FORM_border_height      = FORM_HEIGHT + (FORM_border * 4)
-FORM_PROGRESS_HEIGHT    = 12px
+FORM_PROGRESS_HEIGHT    = 5px
+FORM_RADIO_BUTTON       = 26px
 
 BUTTON_HEIGHT           = 34px

src/stylesheets/lungo.widget.form.styl

@@ -100,22 +100,22 @@ form, .form
   & input[type=range]
     -webkit-appearance: none
     outline: none
-
     height: FORM_PROGRESS_HEIGHT
     width: 100%
-    padding:0
+    padding: 0
     border: none
-
+    margin-bottom: 0.5em
     &::-webkit-slider-thumb
       position: relative
-      width: SIZE = (FORM_PROGRESS_HEIGHT * 2)
-      height: SIZE
+      width: FORM_RADIO_BUTTON
+      height: FORM_RADIO_BUTTON
       -webkit-appearance: none
       border: none
 
   /* -------------------------- PROGRESS -------------------------- */
   & [data-progress]
     width: 100%
+    margin-bottom: 0.5em
     & .bar
       height: FORM_PROGRESS_HEIGHT
       line-height: FORM_PROGRESS_HEIGHT
@@ -128,66 +128,15 @@ form, .form
         transition(width TRANSITION_TIME DEFAULT_TRANSITION)
 
   /* -------------------------- CHECKBOX -------------------------- */
-  & [data-control-checkbox]
-    FORM_HEIGHT = 36px
-    display: inline-block
-    width: 76px
-    height: FORM_HEIGHT !important
-    position: relative
-    line-height: FORM_HEIGHT !important
-    font-size: inherit
-    &, & label
-      transition all 100ms ease
-
-    input[type=checkbox]
-      visibility: hidden
-
-    &:after, &:before
-      z-index: 0
-      position: absolute
-    &:before
-      left: (FORM_HEIGHT / 2.2)
-      opacity: 0
-    &:after
-      right: (FORM_HEIGHT / 2.2)
-    &.checked
-      &:before
-        opacity: 1
-        z-index: 1
-      &:after
-        opacity: 0
-        z-index: 0
-
-    & label
-      display: block
-      height: S = (FORM_HEIGHT - 6)
-      width: S
-      cursor: pointer
-      position: absolute
-      top: 3px
-      left: 3px
-      margin: 0px !important
-      z-index: 1
-
-    & 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
+    border-radius: FORM_RADIO_BUTTON
     cursor: pointer
-    height: 28px
+    height: (FORM_RADIO_BUTTON + 2)
     position: relative
     transition: border .25s .15s,
                 box-shadow .25s .3s,
@@ -196,15 +145,14 @@ form, .form
     vertical-align: top
 
     &:after
-      background-color: WHITE
-      border: 1px solid GREY
-      border-radius: 24px
+      BUTTON = (FORM_RADIO_BUTTON - 2)
+      border-radius: BUTTON
       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
+      height: BUTTON
       left: 0
       position: absolute
       right: 16px
@@ -214,15 +162,12 @@ form, .form
                   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,

src/stylesheets/theme/theme.widget.form.styl

@@ -27,7 +27,7 @@ form, .form
       border-bottom: 1px solid rgba(0,0,0,0.1)
 
   & 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, label.select
-    background-color: white
+    background-color: #fff
     color: rgba(0, 0, 0, 0.75)
     &.border
       border: FORM_border solid FORM_color
@@ -60,15 +60,15 @@ form, .form
   & input[type=range]
     background-color: FORM_color
     color: darken(FORM_color, 25%)
-    border-radius: (FORM_border_radius * 4)
+    border-radius: (FORM_border_radius / 2)
     &:active
       background-color: THEME !important
       color: #fff
-      &::-webkit-slider-thumb
-        background-color: darken(THEME, 25%) !important
     &::-webkit-slider-thumb
-      border-radius (FORM_border_radius * 4)
-      background-color: darken(FORM_color, 25%)
+      border-radius: 1em
+      background-color: darken(#fff, 2%)
+      border: 1px solid FORM_color
+      box-shadow: 0 1px 4px hsla(0, 0%,0%,.15)
 
   /* -------------------------- PROGRESS -------------------------- */
   & [data-progress]
@@ -76,48 +76,20 @@ form, .form
     & .value
       background-color: THEME
     &, & .value
-      border-radius (FORM_border_radius * 3)
+      border-radius: (FORM_border_radius / 2)
 
   /* -------------------------- CHECKBOX -------------------------- */
-  & [data-control-checkbox]
-    background: FORM_color
-    color: darken(FORM_color, 25%)
-    font-weight: 700
-    border-radius: (FORM_border_radius * 4)
-    // box-shadow: inset0 1px 2px rgba(0,0,0,0.25),0 1px0 rgba(255,255,255,0.25)
-    & label
-      border-radius: (FORM_border_radius * 4)
-      background: darken(FORM_color, 25%)
-    &.checked
-      background-color: THEME
-      color: #fff !important
-      & label
-        background-color: darken(THEME, 25%)
-
-    &.accept
-      &.checked
-        background-color: SUCCESS
-        & label
-          background-color: darken(SUCCESS, 25%)
-    &.cancel
-      &.checked
-        background-color: DANGER
-        & label
-          background-color: darken(DANGER, 25%)
+  & input[type=checkbox]
+    background-color: darken(#fff, 2%)
+    border: 1px solid FORM_color
+    box-shadow: inset 0 0 0 1px FORM_color
+    &:after
+      background-color: #fff
+      border: 1px solid FORM_color
 
-    // Expand
-    &.icon
-      font-family:'lungojsicon'
-      font-size: 1.3em
-      line-height: 1.4em
+    &:checked
+      border-color: SUCCESS
+      box-shadow: inset 0 0 0 13px SUCCESS
 
-      &.twitter
-        &:before
-          content: "\f099"
-        &:after
-          content: "\f099"
-      &.ok
-        &:before
-          content: "\f00c"
-        &:after
-          content: "\f00d"
+      &:after
+        border-color: SUCCESS