implemented toggle buttons #248

dist/css/material-wfont.css

@@ -3531,6 +3531,75 @@ body .jumbotron-material-lightgrey,
     opacity: 0;
   }
 }
+.togglebutton {
+  vertical-align: middle;
+}
+.togglebutton,
+.togglebutton * {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.togglebutton label {
+  font-weight: 400;
+  cursor: pointer;
+}
+.togglebutton label input[type=checkbox]:first-child {
+  opacity: 0;
+  display: block;
+  width: 0;
+  height: 0;
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle {
+  background-color: rgba(0, 149, 135, 0.5);
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
+  background-color: #009587;
+}
+.togglebutton label .toggle,
+.togglebutton label input[type=checkbox][disabled]:first-child + .toggle {
+  content: "";
+  display: inline-block;
+  width: 30px;
+  height: 15px;
+  background-color: rgba(80, 80, 80, 0.7);
+  border-radius: 15px;
+  margin-right: 10px;
+  -webkit-transition: background 0.3s ease;
+          transition: background 0.3s ease;
+  vertical-align: middle;
+}
+.togglebutton label .toggle:after {
+  content: "";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-color: #F1F1F1;
+  border-radius: 20px;
+  position: relative;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+  left: -5px;
+  top: -2px;
+  -webkit-transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+          transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+}
+.togglebutton label input[type=checkbox][disabled]:first-child + .toggle:after,
+.togglebutton label input[type=checkbox][disabled]:checked:first-child + .toggle:after {
+  background-color: #BDBDBD;
+}
+.togglebutton label input[type=checkbox]:first-child:checked:active ~ .toggle:after,
+.togglebutton label input[type=checkbox]:first-child:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
+}
+.togglebutton label input[type=checkbox]:first-child:active ~ .toggle:after,
+.togglebutton label input[type=checkbox]:first-child ~ .toggle:active:after,
+.togglebutton label input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
+  left: 15px;
+}
 .form-horizontal .radio {
   margin-bottom: 10px;
 }

dist/css/material.css

@@ -3524,6 +3524,75 @@ body .jumbotron-material-lightgrey,
     opacity: 0;
   }
 }
+.togglebutton {
+  vertical-align: middle;
+}
+.togglebutton,
+.togglebutton * {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.togglebutton label {
+  font-weight: 400;
+  cursor: pointer;
+}
+.togglebutton label input[type=checkbox]:first-child {
+  opacity: 0;
+  display: block;
+  width: 0;
+  height: 0;
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle {
+  background-color: rgba(0, 149, 135, 0.5);
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
+  background-color: #009587;
+}
+.togglebutton label .toggle,
+.togglebutton label input[type=checkbox][disabled]:first-child + .toggle {
+  content: "";
+  display: inline-block;
+  width: 30px;
+  height: 15px;
+  background-color: rgba(80, 80, 80, 0.7);
+  border-radius: 15px;
+  margin-right: 10px;
+  -webkit-transition: background 0.3s ease;
+          transition: background 0.3s ease;
+  vertical-align: middle;
+}
+.togglebutton label .toggle:after {
+  content: "";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-color: #F1F1F1;
+  border-radius: 20px;
+  position: relative;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+  left: -5px;
+  top: -2px;
+  -webkit-transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+          transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+}
+.togglebutton label input[type=checkbox][disabled]:first-child + .toggle:after,
+.togglebutton label input[type=checkbox][disabled]:checked:first-child + .toggle:after {
+  background-color: #BDBDBD;
+}
+.togglebutton label input[type=checkbox]:first-child:checked:active ~ .toggle:after,
+.togglebutton label input[type=checkbox]:first-child:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
+}
+.togglebutton label input[type=checkbox]:first-child:active ~ .toggle:after,
+.togglebutton label input[type=checkbox]:first-child ~ .toggle:active:after,
+.togglebutton label input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+}
+.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
+  left: 15px;
+}
 .form-horizontal .radio {
   margin-bottom: 10px;
 }

dist/js/material.js

@@ -31,6 +31,7 @@
       ].join(","),
       "inputElements": "input.form-control, textarea.form-control, select.form-control",
       "checkboxElements": ".checkbox > label > input[type=checkbox]",
+      "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
       "radioElements": ".radio > label > input[type=radio]"
     },
     "checkbox": function(selector) {
@@ -40,6 +41,13 @@
       .data("mdproc", true)
       .after("<span class=ripple></span><span class=check></span>");
     },
+    "togglebutton": function(selector) {
+      // Add fake-checkbox to material checkboxes
+      $((selector) ? selector : this.options.togglebuttonElements)
+      .filter(":notmdproc")
+      .data("mdproc", true)
+      .after("<span class=toggle></span>");
+    },
     "radio": function(selector) {
       // Add fake-radio to material radios
       $((selector) ? selector : this.options.radioElements)
@@ -124,6 +132,7 @@
       this.ripples();
       this.input();
       this.checkbox();
+      this.togglebutton();
       this.radio();
 
       if (document.arrive) {

dist/js/material.min.js

@@ -1,2 +1,2 @@
-!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a.ripples({target:b?b:this.options.withRipples})},init:function(){this.ripples(),this.input(),this.checkbox(),this.radio(),document.arrive&&document.arrive("input, textarea, select",function(){a.material.init()}),function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})}()}}}(jQuery);
+!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a.ripples({target:b?b:this.options.withRipples})},init:function(){this.ripples(),this.input(),this.checkbox(),this.togglebutton(),this.radio(),document.arrive&&document.arrive("input, textarea, select",function(){a.material.init()}),function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})}()}}}(jQuery);
 //# sourceMappingURL=material.min.js.map

index.html

@@ -1450,6 +1450,12 @@
                                                     <input type="checkbox"> Checkbox
                                                 </label>
                                             </div>
+                                            <br>
+                                            <div class="togglebutton">
+                                                <label>
+                                                    <input type="checkbox" checked> Toggle button
+                                                </label>
+                                            </div>
                                         </div>
                                     </div>
                                     <div class="form-group">

less/_togglebutton.less

@@ -0,0 +1,71 @@
+.togglebutton {
+  vertical-align: middle;
+  &, * {
+    user-select: none;
+  }
+  label {
+      font-weight: 400;
+      cursor: pointer;
+    // Hide original checkbox
+    input[type=checkbox]:first-child {
+      opacity: 0;
+      display: block;
+      width: 0;
+      height:0;
+    }
+    // Switch bg on
+    input[type=checkbox]:first-child:checked + .toggle {
+      background-color: rgba(0, 149, 135, 0.5);
+      // Handle on
+      &:after {
+        background-color: #009587;
+      }
+    }
+    // Switch bg off and disabled
+    .toggle,
+    input[type=checkbox][disabled]:first-child + .toggle {
+      content: "";
+      display: inline-block;
+      width: 30px;
+      height: 15px;
+      background-color: rgba(80, 80, 80, 0.7);
+      border-radius: 15px;
+      margin-right: 10px;
+      transition: background 0.3s ease;
+      vertical-align: middle;
+    }
+    // Handle off
+    .toggle:after {
+      content: "";
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background-color: #F1F1F1;
+      border-radius: 20px;
+      position: relative;
+      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
+      left: -5px;
+      top: -2px;
+      transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+    }
+    // Handle disabled
+    input[type=checkbox][disabled]:first-child + .toggle:after,
+    input[type=checkbox][disabled]:checked:first-child + .toggle:after{
+      background-color: #BDBDBD;
+    }
+    // Ripple on
+    input[type=checkbox]:first-child:checked:active ~ .toggle:after,
+    input[type=checkbox]:first-child:checked ~ .toggle:active:after {
+      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
+    }
+    // Ripple off and disabled
+    input[type=checkbox]:first-child:active ~ .toggle:after,
+    input[type=checkbox]:first-child ~ .toggle:active:after,
+    input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
+      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+    }
+    input[type=checkbox]:first-child:checked + .toggle:after {
+      left: 15px;
+    }
+  }
+}

less/material.less

@@ -33,6 +33,9 @@ h5, h6{
 // Checkboxes
 @import "_checkboxes.less";
 
+// Toggle buttons
+@import "_togglebutton.less";
+
 // Radios
 @import "_radios.less";
 

scripts/material.js

@@ -31,6 +31,7 @@
       ].join(","),
       "inputElements": "input.form-control, textarea.form-control, select.form-control",
       "checkboxElements": ".checkbox > label > input[type=checkbox]",
+      "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
       "radioElements": ".radio > label > input[type=radio]"
     },
     "checkbox": function(selector) {
@@ -40,6 +41,13 @@
       .data("mdproc", true)
       .after("<span class=ripple></span><span class=check></span>");
     },
+    "togglebutton": function(selector) {
+      // Add fake-checkbox to material checkboxes
+      $((selector) ? selector : this.options.togglebuttonElements)
+      .filter(":notmdproc")
+      .data("mdproc", true)
+      .after("<span class=toggle></span>");
+    },
     "radio": function(selector) {
       // Add fake-radio to material radios
       $((selector) ? selector : this.options.radioElements)
@@ -124,6 +132,7 @@
       this.ripples();
       this.input();
       this.checkbox();
+      this.togglebutton();
       this.radio();
 
       if (document.arrive) {