checkboxes now use only one element

css-compiled/material.css

@@ -437,10 +437,13 @@ h6,
 .checkbox label span {
   display: block;
   position: absolute;
-  left: 10px;
+  left: 0px;
   transition-duration: 0.2s;
 }
-.checkbox label .ripple {
+.checkbox label .check:after {
+  display: block;
+  position: absolute;
+  content: "";
   background-color: rgba(0, 0, 0, 0.84);
   left: -5px;
   top: -15px;
@@ -451,7 +454,9 @@ h6,
   opacity: 0;
   margin: 0;
 }
-.checkbox label .check {
+.checkbox label .check:before {
+  display: block;
+  content: "";
   border: 2px solid rgba(0, 0, 0, 0.84);
   height: 20px;
   width: 20px;
@@ -534,7 +539,7 @@ h6,
 .checkbox input[type=checkbox] {
   display: none;
 }
-.checkbox input[type=checkbox] ~ .check {
+.checkbox input[type=checkbox] ~ .check:before {
   position: absolute;
   top: 2px;
   left: 11px;
@@ -548,101 +553,102 @@ h6,
   -o-animation: uncheck 300ms ease-out forwards;
   animation: uncheck 300ms ease-out forwards;
 }
-.checkbox input[type=checkbox]:checked ~ .check {
+.checkbox input[type=checkbox]:checked ~ .check:before {
   -webkit-animation: check 300ms ease-out forwards;
   -moz-animation: check 300ms ease-out forwards;
   -ms-animation: check 300ms ease-out forwards;
   -o-animation: check 300ms ease-out forwards;
   animation: check 300ms ease-out forwards;
 }
-.checkbox input[type=checkbox]:not(:checked) ~ .ripple {
+.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
   -webkit-animation: rippleOff 500ms;
   -moz-animation: rippleOff 500ms;
   -ms-animation: rippleOff 500ms;
   -o-animation: rippleOff 500ms;
   animation: rippleOff 500ms;
 }
-.checkbox input[type=checkbox]:checked ~ .ripple {
+.checkbox input[type=checkbox]:checked ~ .check:after {
   -webkit-animation: rippleOn 500ms;
   -moz-animation: rippleOn 500ms;
   -ms-animation: rippleOn 500ms;
   -o-animation: rippleOn 500ms;
   animation: rippleOn 500ms;
 }
-.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check {
+.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before {
   opacity: 0.5;
 }
-.checkbox input[type=checkbox][disabled] ~ .ripple {
+.checkbox input[type=checkbox][disabled] ~ .check:after {
   background-color: rgba(0, 0, 0, 0.84);
+  transform: rotate(-45deg);
 }
-.checkbox input[type=checkbox]:checked ~ .ripple,
-.checkbox-default input[type=checkbox]:checked ~ .ripple {
+.checkbox input[type=checkbox]:checked ~ .check:after,
+.checkbox-default input[type=checkbox]:checked ~ .check:after {
   background-color: #0f9d58;
 }
-.checkbox-primary input[type=checkbox]:checked ~ .ripple {
+.checkbox-primary input[type=checkbox]:checked ~ .check:after {
   background-color: #4285f4;
 }
-.checkbox-success input[type=checkbox]:checked ~ .ripple {
+.checkbox-success input[type=checkbox]:checked ~ .check:after {
   background-color: #0f9d58;
 }
-.checkbox-info input[type=checkbox]:checked ~ .ripple {
+.checkbox-info input[type=checkbox]:checked ~ .check:after {
   background-color: #03a9f4;
 }
-.checkbox-warning input[type=checkbox]:checked ~ .ripple {
+.checkbox-warning input[type=checkbox]:checked ~ .check:after {
   background-color: #ff5722;
 }
-.checkbox-danger input[type=checkbox]:checked ~ .ripple {
+.checkbox-danger input[type=checkbox]:checked ~ .check:after {
   background-color: #f44336;
 }
-.checkbox-material-red input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-red input[type=checkbox]:checked ~ .check:after {
   background-color: #f44336;
 }
-.checkbox-material-pink input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-pink input[type=checkbox]:checked ~ .check:after {
   background-color: #e91e63;
 }
-.checkbox-material-purple input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-purple input[type=checkbox]:checked ~ .check:after {
   background-color: #9c27b0;
 }
-.checkbox-material-deeppurple input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:after {
   background-color: #673ab7;
 }
-.checkbox-material-indigo input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-indigo input[type=checkbox]:checked ~ .check:after {
   background-color: #3f51b5;
 }
-.checkbox-material-lightblue input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:after {
   background-color: #03a9f4;
 }
-.checkbox-material-cyan input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-cyan input[type=checkbox]:checked ~ .check:after {
   background-color: #00bcd4;
 }
-.checkbox-material-teal input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-teal input[type=checkbox]:checked ~ .check:after {
   background-color: #009688;
 }
-.checkbox-material-lightgreen input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:after {
   background-color: #8bc34a;
 }
-.checkbox-material-lime input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-lime input[type=checkbox]:checked ~ .check:after {
   background-color: #cddc39;
 }
-.checkbox-material-lightyellow input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:after {
   background-color: #ffeb3b;
 }
-.checkbox-material-orange input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-orange input[type=checkbox]:checked ~ .check:after {
   background-color: #ff9800;
 }
-.checkbox-material-deeporange input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:after {
   background-color: #ff5722;
 }
-.checkbox-material-grey input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-grey input[type=checkbox]:checked ~ .check:after {
   background-color: #9e9e9e;
 }
-.checkbox-material-bluegrey input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:after {
   background-color: #607d8b;
 }
-.checkbox-material-brown input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-brown input[type=checkbox]:checked ~ .check:after {
   background-color: #795548;
 }
-.checkbox-material-lightgrey input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
   background-color: #ececec;
 }
 @-webkit-keyframes uncheck {

less/checkboxes.less

@@ -11,10 +11,13 @@
         span {
             display: block;
             position: absolute;
-            left: 10px;
+            left: 0px;
             transition-duration: 0.2s;
         }
-        .ripple {
+        .check:after {
+            display: block;
+            position: absolute;
+            content: "";
             background-color: @lightbg-text;
             left: -5px;
             top: -15px;
@@ -25,7 +28,9 @@
             opacity: 0;
             margin: 0;
         }
-        .check {
+        .check:before {
+            display: block;
+            content: "";
             border: 2px solid @lightbg-text;
             height: 20px;
             width: 20px;
@@ -39,7 +44,7 @@
     // Hide native checkbox
     input[type=checkbox] { display: none; }
 
-    input[type=checkbox] ~ .check {
+    input[type=checkbox] ~ .check:before {
         position: absolute;
         top: 2px;
         left: 11px;
@@ -50,27 +55,28 @@
         .animation(uncheck 300ms ease-out forwards);
     }
 
-    input[type=checkbox]:checked ~ .check {
+    input[type=checkbox]:checked ~ .check:before {
         .animation(check 300ms ease-out forwards);
     }
 
     // Ripple effect on click
-    input[type=checkbox]:not(:checked) ~ .ripple {
+    input[type=checkbox]:not(:checked) ~ .check:after {
         .animation(rippleOff 500ms);
     }
-    input[type=checkbox]:checked ~ .ripple {
+    input[type=checkbox]:checked ~ .check:after {
         .animation(rippleOn 500ms);
     }
 
     // Style for disabled inputs
-    input[type=checkbox][disabled]:not(:checked) ~ .check {
+    input[type=checkbox][disabled]:not(:checked) ~ .check:before {
         opacity: 0.5;
     }
-    input[type=checkbox][disabled] ~ .ripple {
+    input[type=checkbox][disabled] ~ .check:after {
         background-color: @lightbg-text;
+        transform: rotate(-45deg);
     }
 
-    .variations(~" input[type=checkbox]:checked ~ .ripple", background-color, @success);
+    .variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success);
 }
 
 

scripts/material.js

@@ -5,7 +5,7 @@ $(function (){
     ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .withripple");
 
     // Add fake-checkbox to material checkboxes
-    $(".checkbox > label > input").after("<span class=ripple></span><span class=check></span>");
+    $(".checkbox > label > input").after("<span class=check></span>");
 
     // Add fake-radio to material radios
     $(".radio > label > input").after("<span class=ripple></span><span class=circle></span><span class=check></span>");