New behavior for checkbox (with input=range)

src/boot/Lungo.Boot.Events.js

@@ -14,11 +14,9 @@ Lungo.Boot.Events = (function(lng, undefined) {
     var CLASS = lng.Constants.CLASS;
     var ELEMENT = lng.Constants.ELEMENT;
     var SELECTORS = {
-        DOCUMENT: document,
-        WINDOW: window,
         HREF_TARGET: 'a[href][data-router]',
         HREF_TARGET_FROM_ASIDE: 'aside a[href][data-router]',
-        CURRENT_SECTION: 'section.aside, section.current'
+        INPUT_CHECKBOX: 'input[type=range].checkbox'
     };
 
     /**
@@ -33,6 +31,7 @@ Lungo.Boot.Events = (function(lng, undefined) {
 
         lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
         lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_hideAsideIfNecesary);
+        lng.dom(SELECTORS.INPUT_CHECKBOX).touch(_changeCheckboxValue);
     };
 
     var _loadTarget = function(event) {
@@ -47,6 +46,13 @@ Lungo.Boot.Events = (function(lng, undefined) {
         if (event) event.preventDefault();
     };
 
+    var _changeCheckboxValue = function(event)  {
+        event.preventDefault();
+        var el = lng.dom(this);
+        var current_value = el.val() > 0 ? 0 : 1;
+        el.toggleClass("active").attr('value', current_value);
+    };
+
     var _selectTarget = function(link) {
         var target_type = link.data(ATTRIBUTE.ROUTER);
 

src/stylesheets/Lungo.theme.default.less

@@ -242,27 +242,11 @@ input, textarea, select {
     border-bottom-right-radius: @border-radius-form;
 }
 
-/* @group .range */
-input[type="checkbox"] + span, input[type="radio"] + span {
-    color: #fff;
-    background: #a0a0a0;
-    .border-radius(@border-radius-form);
-}
-    input[type="checkbox"] + span::before,
-    input[type="radio"] + span::before {
-        background: #c1c1c1;
-        .border-radius(@border-radius-form);
-    }
 
-    input[type="checkbox"]:checked + span,
-    input[type="radio"]:checked + span {
-        .linear-gradient(top, ~','@theme 0%, ~','@theme-dark 100%);
-        .border-radius(@border-radius-form);
-    }
-/* @end */
 
 /* @group range */
-input[type="range"] {
+
+input[type="range"]:not(.checkbox) {
     background-color: #c7c7c7;
     .border-radius(@border-radius-form);
     .box-shadow(@box-shadow-form);
@@ -278,6 +262,7 @@ input[type="range"] {
         .linear-gradient(top, ~','@theme 0%, ~','@theme-dark 100%);
     }
 }
+
 /* @end */
 
 /* @group .progress */

src/stylesheets/Lungo.widgets.form.less

@@ -33,7 +33,7 @@ label:not(.select) {
     line-height: 1.5em;
 }
 
-input:not([type=checkbox]), textarea, select {
+input[type=text], textarea, select {
     display: block;
     width: 96%;
     padding: 0.5% 2%;
@@ -101,49 +101,66 @@ label.select {
 }
 /* @end */
 
-/* @group switch */
-input[type="checkbox"]{
-    width: 82px;
-    height: @input-height;
-    z-index: 2; }
-input[type="checkbox"] + span::after { content: "OFF"; }
-input[type="checkbox"]:checked + span::after { content: "ON"; }
-input[type="checkbox"] + span, input[type="checkbox"] + span::before, input[type="checkbox"] + span::after { display: inline-block; }
-input[type="checkbox"] + span::before,
-   input[type="checkbox"] + span::after,
-   input[type="checkbox"]:checked + span::before,
-   input[type="checkbox"]:checked + span::after {
-    top: 0; }
-input[type="checkbox"] + span::after, input[type="checkbox"]:checked + span::before { right: 0; }
-input[type="checkbox"] + span::before, input[type="checkbox"]:checked + span::after { left: 0; }
-input[type="checkbox"], input[type="checkbox"] + span::before, input[type="checkbox"] + span::after { position: absolute; }
-input[type="checkbox"] {
-    -webkit-opacity: 0;
-    opacity: 0; }
-input[type="checkbox"] + span {
-    width: 82px;
-    height: 27px;
-    position: relative;
-    font-size: 11px;
-    line-height: @input-height;
-    font-weight: bold;
-    text-transform: uppercase;
-    text-indent: -9999px; }
-input[type="checkbox"] + span::before{
-    content: "";
-    width: 41px;
-    height: 27px; }
-input[type="checkbox"] + span::after {
-    text-indent: 0;
-    width: 41px;
-    height: 27px;
-    text-align: center;}
-input[type="checkbox"]:checked + span::before { left: auto; }
-input[type="checkbox"]:checked + span::after { height: 27px; }
-/* @end */
+
+input[type=range].checkbox {
+    -webkit-appearance: none;
+    background: #aaaaaa;
+    color: rgba(255,255,255,0.6);
+    width:70px;
+    height:30px;
+    padding:1px 2px 1px 2px;
+    border-radius:4px;
+    box-shadow:0px 0px 4px 0px #555 inset, 0px 1px 5px 0px #555 inset;
+    font-family:'lungojsicon';
+
+    &:after {
+        content: "\0055";
+        position: relative;
+        float: right;
+        top: -23px;
+        padding: 0 8px;
+        font-size: 1.5em;
+    }
+
+    &.active {
+        background: rgba(102, 186, 40, 1);
+        &:after {
+            float: left;
+            content: "\0051";
+            font-weight: bold;
+        }
+    }
+
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        background-color: #444;
+        width: 30px;
+        height: 24px;
+        border-radius:3px;
+        position:relative;
+        margin:2px 2px 2px 2px;
+        box-shadow:0px 1px 2px 1px #666;
+        background: rgb(255,255,255);
+    }
+    &::-webkit-slider-thumb::after {
+      width:13px;
+      height:13px;
+      display:block;
+      content:"";
+      position:relative;
+      border-radius:7.5px;
+      z-index:9;
+      top:5px;
+      left:9px;
+        background: rgb(234,234,234);
+    }
+
+
+}
+
 
 /* @group range */
-input[type="range"] {
+input[type="range"]:not(.checkbox) {
     -webkit-appearance: none;
     height: 15px;
     width: 100%;

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

@@ -305,45 +305,8 @@ select:focus {
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-/* @group .range */
-input[type="checkbox"] + span,
-input[type="radio"] + span {
-  color: #fff;
-  background: #a0a0a0;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-}
-input[type="checkbox"] + span::before,
-input[type="radio"] + span::before {
-  background: #c1c1c1;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-}
-input[type="checkbox"]:checked + span,
-input[type="radio"]:checked + span {
-  background-image: -webkit-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
-  background-image: -moz-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
-  background-image: -ms-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
-  background-image: -o-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
-  background-image: linear-gradient(top , #2a95d3 0% , #1984c2 100%);
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-}
-/* @end */
 /* @group range */
-input[type="range"] {
+input[type="range"]:not(.checkbox) {
   background-color: #c7c7c7;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
@@ -355,12 +318,12 @@ input[type="range"] {
   -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);
 }
-input[type="range"]:active {
+input[type="range"]:not(.checkbox):active {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
 }
-input[type="range"]::-webkit-slider-thumb {
+input[type="range"]:not(.checkbox)::-webkit-slider-thumb {
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
@@ -369,7 +332,7 @@ input[type="range"]::-webkit-slider-thumb {
   background-clip: padding-box;
   background: #a0a0a0;
 }
-input[type="range"]:active::-webkit-slider-thumb {
+input[type="range"]:not(.checkbox):active::-webkit-slider-thumb {
   -webkit-box-shadow: 0px 0px 4px #39abe1;
   -moz-box-shadow: 0px 0px 4px #39abe1;
   box-shadow: 0px 0px 4px #39abe1;

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

@@ -43,7 +43,7 @@ label:not(.select) {
   font-size: 0.9em;
   line-height: 1.5em;
 }
-input:not([type=checkbox]),
+input[type=text],
 textarea,
 select {
   display: block;
@@ -102,76 +102,58 @@ label.select {
   content: none;
 }
 /* @end */
-/* @group switch */
-input[type="checkbox"] {
-  width: 82px;
-  height: 29px;
-  z-index: 2;
-}
-input[type="checkbox"] + span::after {
-  content: "OFF";
-}
-input[type="checkbox"]:checked + span::after {
-  content: "ON";
-}
-input[type="checkbox"] + span,
-input[type="checkbox"] + span::before,
-input[type="checkbox"] + span::after {
-  display: inline-block;
-}
-input[type="checkbox"] + span::before,
-input[type="checkbox"] + span::after,
-input[type="checkbox"]:checked + span::before,
-input[type="checkbox"]:checked + span::after {
-  top: 0;
-}
-input[type="checkbox"] + span::after,
-input[type="checkbox"]:checked + span::before {
-  right: 0;
+input[type=range].checkbox {
+  -webkit-appearance: none;
+  background: #aaaaaa;
+  color: rgba(255, 255, 255, 0.6);
+  width: 70px;
+  height: 30px;
+  padding: 1px 2px 1px 2px;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px 0px #555 inset, 0px 1px 5px 0px #555 inset;
+  font-family: 'lungojsicon';
+}
+input[type=range].checkbox:after {
+  content: "\0055";
+  position: relative;
+  float: right;
+  top: -23px;
+  padding: 0 8px;
+  font-size: 1.5em;
 }
-input[type="checkbox"] + span::before,
-input[type="checkbox"]:checked + span::after {
-  left: 0;
+input[type=range].checkbox.active {
+  background: #66ba28;
 }
-input[type="checkbox"],
-input[type="checkbox"] + span::before,
-input[type="checkbox"] + span::after {
-  position: absolute;
-}
-input[type="checkbox"] {
-  -webkit-opacity: 0;
-  opacity: 0;
+input[type=range].checkbox.active:after {
+  float: left;
+  content: "\0051";
+  font-weight: bold;
 }
-input[type="checkbox"] + span {
-  width: 82px;
-  height: 27px;
+input[type=range].checkbox::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background-color: #444;
+  width: 30px;
+  height: 24px;
+  border-radius: 3px;
   position: relative;
-  font-size: 11px;
-  line-height: 29px;
-  font-weight: bold;
-  text-transform: uppercase;
-  text-indent: -9999px;
+  margin: 2px 2px 2px 2px;
+  box-shadow: 0px 1px 2px 1px #666;
+  background: #ffffff;
 }
-input[type="checkbox"] + span::before {
+input[type=range].checkbox::-webkit-slider-thumb::after {
+  width: 13px;
+  height: 13px;
+  display: block;
   content: "";
-  width: 41px;
-  height: 27px;
-}
-input[type="checkbox"] + span::after {
-  text-indent: 0;
-  width: 41px;
-  height: 27px;
-  text-align: center;
-}
-input[type="checkbox"]:checked + span::before {
-  left: auto;
-}
-input[type="checkbox"]:checked + span::after {
-  height: 27px;
+  position: relative;
+  border-radius: 7.5px;
+  z-index: 9;
+  top: 5px;
+  left: 9px;
+  background: #eaeaea;
 }
-/* @end */
 /* @group range */
-input[type="range"] {
+input[type="range"]:not(.checkbox) {
   -webkit-appearance: none;
   height: 15px;
   width: 100%;
@@ -182,7 +164,7 @@ input[type="range"] {
   border: 0;
   cursor: ew-resize;
 }
-input[type="range"]::-webkit-slider-thumb {
+input[type="range"]:not(.checkbox)::-webkit-slider-thumb {
   -webkit-appearance: none;
   position: relative;
   z-index: 1;