Merge remote-tracking branch 'origin/develop'

Conflicts:
	dist/css/material-wfont.min.css
	dist/css/material.min.css
	template/material/css/material-wfont.min.css
	template/material/css/material.min.css

dist/css/material-wfont.css

@@ -2230,16 +2230,11 @@ body .jumbotron-material-lightgrey,
   font-size: 15px;
 }
 .form-horizontal .checkbox {
-  padding-top: 15px;
+  padding-top: 20px;
-}
-.checkbox {
-  -webkit-transform: rotate(0deg);
-      -ms-transform: rotate(0deg);
-          transform: rotate(0deg);
 }
 .checkbox label {
+  padding-left: 10px;
   cursor: pointer;
-  padding-left: 45px;
   position: relative;
 }
 .checkbox label span {
@@ -2249,6 +2244,17 @@ body .jumbotron-material-lightgrey,
   -webkit-transition-duration: 0.2s;
           transition-duration: 0.2s;
 }
+.checkbox label .check {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid;
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+  top: 5px;
+  left: -3px;
+}
 .checkbox label .check:after {
   display: block;
   position: absolute;
@@ -2264,104 +2270,36 @@ body .jumbotron-material-lightgrey,
   margin: 0;
 }
 .checkbox label .check:before {
-  display: block;
+  position: absolute;
   content: "";
-  border: 2px solid rgba(0, 0, 0, 0.84);
+  -webkit-transform: rotate(45deg);
-  height: 20px;
+      -ms-transform: rotate(45deg);
-  width: 20px;
+          transform: rotate(45deg);
-  -webkit-transition-delay: 0.2s;
+  display: block;
-          transition-delay: 0.2s;
+  margin-top: -4px;
-}
+  margin-left: 6px;
-.checkbox .check,
+  width: 0;
-.checkbox-default .check {
+  height: 0;
-  color: #0f9d58;
+  box-shadow: 0 0 0 0,
-}
+                0 0 0 0,
-.checkbox-primary .check {
+                0 0 0 0,
-  color: #4285f4;
+                0 0 0 0,
-}
+                0 0 0 0,
-.checkbox-success .check {
+                0 0 0 0,
-  color: #0f9d58;
+                0px 0px 0 0px inset;
-}
+  -webkit-animation: checkbox-off 0.3s linear forwards;
-.checkbox-info .check {
+          animation: checkbox-off 0.3s linear forwards;
-  color: #03a9f4;
-}
-.checkbox-warning .check {
-  color: #ff5722;
-}
-.checkbox-danger .check {
-  color: #f44336;
-}
-.checkbox-material-red .check {
-  color: #f44336;
-}
-.checkbox-material-pink .check {
-  color: #e91e63;
-}
-.checkbox-material-purple .check {
-  color: #9c27b0;
-}
-.checkbox-material-deeppurple .check {
-  color: #673ab7;
-}
-.checkbox-material-indigo .check {
-  color: #3f51b5;
-}
-.checkbox-material-lightblue .check {
-  color: #03a9f4;
-}
-.checkbox-material-cyan .check {
-  color: #00bcd4;
-}
-.checkbox-material-teal .check {
-  color: #009688;
-}
-.checkbox-material-lightgreen .check {
-  color: #8bc34a;
-}
-.checkbox-material-lime .check {
-  color: #cddc39;
-}
-.checkbox-material-lightyellow .check {
-  color: #ffeb3b;
-}
-.checkbox-material-orange .check {
-  color: #ff9800;
-}
-.checkbox-material-deeporange .check {
-  color: #ff5722;
-}
-.checkbox-material-grey .check {
-  color: #9e9e9e;
-}
-.checkbox-material-bluegrey .check {
-  color: #607d8b;
-}
-.checkbox-material-brown .check {
-  color: #795548;
-}
-.checkbox-material-lightgrey .check {
-  color: #ececec;
 }
 .checkbox input[type=checkbox] {
   opacity: 0;
 }
-.checkbox input[type=checkbox] ~ .check:before {
-  position: absolute;
-  top: 2px;
-  left: 11px;
-  width: 18px;
-  height: 18px;
-  border: solid 2px;
-  border-color: #5a5a5a;
-  -webkit-animation: uncheck 300ms ease-out forwards;
-          animation: uncheck 300ms ease-out forwards;
-}
 .checkbox input[type=checkbox]:focus ~ .check:after {
   opacity: 0.2;
 }
 .checkbox input[type=checkbox]:checked ~ .check:before {
-  -webkit-animation: check 300ms ease-out forwards;
+  box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-          animation: check 300ms ease-out forwards;
+  -webkit-animation: checkbox-on 0.3s linear forwards;
+          animation: checkbox-on 0.3s linear forwards;
 }
 .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
   -webkit-animation: rippleOff 500ms linear forwards;
@@ -2455,206 +2393,260 @@ body .jumbotron-material-lightgrey,
 .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
   background-color: #ececec;
 }
-@-webkit-keyframes uncheck {
+.checkbox input[type=checkbox]:checked ~ .check:before,
+.checkbox-default input[type=checkbox]:checked ~ .check:before {
+  color: #4caf50;
+}
+.checkbox-primary input[type=checkbox]:checked ~ .check:before {
+  color: #4285f4;
+}
+.checkbox-success input[type=checkbox]:checked ~ .check:before {
+  color: #0f9d58;
+}
+.checkbox-info input[type=checkbox]:checked ~ .check:before {
+  color: #03a9f4;
+}
+.checkbox-warning input[type=checkbox]:checked ~ .check:before {
+  color: #ff5722;
+}
+.checkbox-danger input[type=checkbox]:checked ~ .check:before {
+  color: #f44336;
+}
+.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
+  color: #f44336;
+}
+.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
+  color: #e91e63;
+}
+.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
+  color: #9c27b0;
+}
+.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
+  color: #673ab7;
+}
+.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
+  color: #3f51b5;
+}
+.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
+  color: #03a9f4;
+}
+.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
+  color: #00bcd4;
+}
+.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
+  color: #009688;
+}
+.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
+  color: #8bc34a;
+}
+.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
+  color: #cddc39;
+}
+.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
+  color: #ffeb3b;
+}
+.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
+  color: #ff9800;
+}
+.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
+  color: #ff5722;
+}
+.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
+  color: #9e9e9e;
+}
+.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
+  color: #607d8b;
+}
+.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
+  color: #795548;
+}
+.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
+  color: #ececec;
+}
+.checkbox input[type=checkbox]:checked ~ .check,
+.checkbox-default input[type=checkbox]:checked ~ .check {
+  color: #4caf50;
+}
+.checkbox-primary input[type=checkbox]:checked ~ .check {
+  color: #4285f4;
+}
+.checkbox-success input[type=checkbox]:checked ~ .check {
+  color: #0f9d58;
+}
+.checkbox-info input[type=checkbox]:checked ~ .check {
+  color: #03a9f4;
+}
+.checkbox-warning input[type=checkbox]:checked ~ .check {
+  color: #ff5722;
+}
+.checkbox-danger input[type=checkbox]:checked ~ .check {
+  color: #f44336;
+}
+.checkbox-material-red input[type=checkbox]:checked ~ .check {
+  color: #f44336;
+}
+.checkbox-material-pink input[type=checkbox]:checked ~ .check {
+  color: #e91e63;
+}
+.checkbox-material-purple input[type=checkbox]:checked ~ .check {
+  color: #9c27b0;
+}
+.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
+  color: #673ab7;
+}
+.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
+  color: #3f51b5;
+}
+.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
+  color: #03a9f4;
+}
+.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
+  color: #00bcd4;
+}
+.checkbox-material-teal input[type=checkbox]:checked ~ .check {
+  color: #009688;
+}
+.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
+  color: #8bc34a;
+}
+.checkbox-material-lime input[type=checkbox]:checked ~ .check {
+  color: #cddc39;
+}
+.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
+  color: #ffeb3b;
+}
+.checkbox-material-orange input[type=checkbox]:checked ~ .check {
+  color: #ff9800;
+}
+.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
+  color: #ff5722;
+}
+.checkbox-material-grey input[type=checkbox]:checked ~ .check {
+  color: #9e9e9e;
+}
+.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
+  color: #607d8b;
+}
+.checkbox-material-brown input[type=checkbox]:checked ~ .check {
+  color: #795548;
+}
+.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
+  color: #ececec;
+}
+@-webkit-keyframes checkbox-on {
   0% {
-    top: -3px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
-    left: 17px;
+  }
-    width: 10px;
+  50% {
-    height: 21px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
-    border-color: #0f9d58;
+  }
-    border-left-color: transparent;
+  100% {
-    border-top-color: transparent;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-    -webkit-transform: rotate(45deg);
+  }
-            transform: rotate(45deg);
+}
+@keyframes checkbox-on {
+  0% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
+  }
+  50% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
+  }
+  100% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
+  }
+}
+@-webkit-keyframes checkbox-off {
+  0% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
+  }
+  25% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
   }
   50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
-    border-color: #0f9d58;
+    margin-top: -4px;
-    border-left-color: transparent;
+    margin-left: 6px;
-    border-top-color: transparent;
+    width: 0px;
+    height: 0px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
   }
   51% {
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  100% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 10px inset;
+  }
+  100% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+    margin-top: -2px;
+    margin-left: -2px;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 0px inset;
   }
 }
-@keyframes uncheck {
+@keyframes checkbox-off {
   0% {
-    top: -3px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
-    left: 17px;
+  }
-    width: 10px;
+  25% {
-    height: 21px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
   }
   50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
-    border-color: #0f9d58;
+    margin-top: -4px;
-    border-left-color: transparent;
+    margin-left: 6px;
-    border-top-color: transparent;
+    width: 0px;
+    height: 0px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
   }
   51% {
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  100% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 10px inset;
   }
-}
-@-webkit-keyframes check {
   100% {
-    top: -3px;
-    left: 17px;
-    width: 10px;
-    height: 21px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-  }
-  51% {
-    border-left: transparent;
-    border-top-color: transparent;
-  }
-  50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  0% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
-  }
+    height: 20px;
-}
+    box-shadow: 0 0 0 0,
-@keyframes check {
+            0 0 0 0,
-  100% {
+            0 0 0 0,
-    top: -3px;
+            0 0 0 0,
-    left: 17px;
+            0 0 0 0,
-    width: 10px;
+            0 0 0 0,
-    height: 21px;
+            0px 0px 0 0px inset;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-  }
-  51% {
-    border-left: transparent;
-    border-top-color: transparent;
-  }
-  50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  0% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-}
-@-webkit-keyframes rippleOn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes rippleOn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@-webkit-keyframes rippleOff {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes rippleOff {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
   }
 }
 .form-horizontal .radio {
@@ -2871,6 +2863,17 @@ body .jumbotron-material-lightgrey,
 .radio input[type=radio][disabled] ~ .check {
   background-color: rgba(0, 0, 0, 0.84);
 }
+@-webkit-keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 @keyframes rippleOn {
   0% {
     opacity: 0;
@@ -2882,6 +2885,17 @@ body .jumbotron-material-lightgrey,
     opacity: 0;
   }
 }
+@-webkit-keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 @keyframes rippleOff {
   0% {
     opacity: 0;

dist/css/material.css

@@ -2229,16 +2229,11 @@ body .jumbotron-material-lightgrey,
   font-size: 15px;
 }
 .form-horizontal .checkbox {
-  padding-top: 15px;
+  padding-top: 20px;
-}
-.checkbox {
-  -webkit-transform: rotate(0deg);
-      -ms-transform: rotate(0deg);
-          transform: rotate(0deg);
 }
 .checkbox label {
+  padding-left: 10px;
   cursor: pointer;
-  padding-left: 45px;
   position: relative;
 }
 .checkbox label span {
@@ -2248,6 +2243,17 @@ body .jumbotron-material-lightgrey,
   -webkit-transition-duration: 0.2s;
           transition-duration: 0.2s;
 }
+.checkbox label .check {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid;
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+  top: 5px;
+  left: -3px;
+}
 .checkbox label .check:after {
   display: block;
   position: absolute;
@@ -2263,104 +2269,36 @@ body .jumbotron-material-lightgrey,
   margin: 0;
 }
 .checkbox label .check:before {
-  display: block;
+  position: absolute;
   content: "";
-  border: 2px solid rgba(0, 0, 0, 0.84);
+  -webkit-transform: rotate(45deg);
-  height: 20px;
+      -ms-transform: rotate(45deg);
-  width: 20px;
+          transform: rotate(45deg);
-  -webkit-transition-delay: 0.2s;
+  display: block;
-          transition-delay: 0.2s;
+  margin-top: -4px;
-}
+  margin-left: 6px;
-.checkbox .check,
+  width: 0;
-.checkbox-default .check {
+  height: 0;
-  color: #0f9d58;
+  box-shadow: 0 0 0 0,
-}
+                0 0 0 0,
-.checkbox-primary .check {
+                0 0 0 0,
-  color: #4285f4;
+                0 0 0 0,
-}
+                0 0 0 0,
-.checkbox-success .check {
+                0 0 0 0,
-  color: #0f9d58;
+                0px 0px 0 0px inset;
-}
+  -webkit-animation: checkbox-off 0.3s linear forwards;
-.checkbox-info .check {
+          animation: checkbox-off 0.3s linear forwards;
-  color: #03a9f4;
-}
-.checkbox-warning .check {
-  color: #ff5722;
-}
-.checkbox-danger .check {
-  color: #f44336;
-}
-.checkbox-material-red .check {
-  color: #f44336;
-}
-.checkbox-material-pink .check {
-  color: #e91e63;
-}
-.checkbox-material-purple .check {
-  color: #9c27b0;
-}
-.checkbox-material-deeppurple .check {
-  color: #673ab7;
-}
-.checkbox-material-indigo .check {
-  color: #3f51b5;
-}
-.checkbox-material-lightblue .check {
-  color: #03a9f4;
-}
-.checkbox-material-cyan .check {
-  color: #00bcd4;
-}
-.checkbox-material-teal .check {
-  color: #009688;
-}
-.checkbox-material-lightgreen .check {
-  color: #8bc34a;
-}
-.checkbox-material-lime .check {
-  color: #cddc39;
-}
-.checkbox-material-lightyellow .check {
-  color: #ffeb3b;
-}
-.checkbox-material-orange .check {
-  color: #ff9800;
-}
-.checkbox-material-deeporange .check {
-  color: #ff5722;
-}
-.checkbox-material-grey .check {
-  color: #9e9e9e;
-}
-.checkbox-material-bluegrey .check {
-  color: #607d8b;
-}
-.checkbox-material-brown .check {
-  color: #795548;
-}
-.checkbox-material-lightgrey .check {
-  color: #ececec;
 }
 .checkbox input[type=checkbox] {
   opacity: 0;
 }
-.checkbox input[type=checkbox] ~ .check:before {
-  position: absolute;
-  top: 2px;
-  left: 11px;
-  width: 18px;
-  height: 18px;
-  border: solid 2px;
-  border-color: #5a5a5a;
-  -webkit-animation: uncheck 300ms ease-out forwards;
-          animation: uncheck 300ms ease-out forwards;
-}
 .checkbox input[type=checkbox]:focus ~ .check:after {
   opacity: 0.2;
 }
 .checkbox input[type=checkbox]:checked ~ .check:before {
-  -webkit-animation: check 300ms ease-out forwards;
+  box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-          animation: check 300ms ease-out forwards;
+  -webkit-animation: checkbox-on 0.3s linear forwards;
+          animation: checkbox-on 0.3s linear forwards;
 }
 .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
   -webkit-animation: rippleOff 500ms linear forwards;
@@ -2454,206 +2392,260 @@ body .jumbotron-material-lightgrey,
 .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
   background-color: #ececec;
 }
-@-webkit-keyframes uncheck {
+.checkbox input[type=checkbox]:checked ~ .check:before,
+.checkbox-default input[type=checkbox]:checked ~ .check:before {
+  color: #4caf50;
+}
+.checkbox-primary input[type=checkbox]:checked ~ .check:before {
+  color: #4285f4;
+}
+.checkbox-success input[type=checkbox]:checked ~ .check:before {
+  color: #0f9d58;
+}
+.checkbox-info input[type=checkbox]:checked ~ .check:before {
+  color: #03a9f4;
+}
+.checkbox-warning input[type=checkbox]:checked ~ .check:before {
+  color: #ff5722;
+}
+.checkbox-danger input[type=checkbox]:checked ~ .check:before {
+  color: #f44336;
+}
+.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
+  color: #f44336;
+}
+.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
+  color: #e91e63;
+}
+.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
+  color: #9c27b0;
+}
+.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
+  color: #673ab7;
+}
+.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
+  color: #3f51b5;
+}
+.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
+  color: #03a9f4;
+}
+.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
+  color: #00bcd4;
+}
+.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
+  color: #009688;
+}
+.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
+  color: #8bc34a;
+}
+.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
+  color: #cddc39;
+}
+.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
+  color: #ffeb3b;
+}
+.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
+  color: #ff9800;
+}
+.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
+  color: #ff5722;
+}
+.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
+  color: #9e9e9e;
+}
+.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
+  color: #607d8b;
+}
+.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
+  color: #795548;
+}
+.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
+  color: #ececec;
+}
+.checkbox input[type=checkbox]:checked ~ .check,
+.checkbox-default input[type=checkbox]:checked ~ .check {
+  color: #4caf50;
+}
+.checkbox-primary input[type=checkbox]:checked ~ .check {
+  color: #4285f4;
+}
+.checkbox-success input[type=checkbox]:checked ~ .check {
+  color: #0f9d58;
+}
+.checkbox-info input[type=checkbox]:checked ~ .check {
+  color: #03a9f4;
+}
+.checkbox-warning input[type=checkbox]:checked ~ .check {
+  color: #ff5722;
+}
+.checkbox-danger input[type=checkbox]:checked ~ .check {
+  color: #f44336;
+}
+.checkbox-material-red input[type=checkbox]:checked ~ .check {
+  color: #f44336;
+}
+.checkbox-material-pink input[type=checkbox]:checked ~ .check {
+  color: #e91e63;
+}
+.checkbox-material-purple input[type=checkbox]:checked ~ .check {
+  color: #9c27b0;
+}
+.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
+  color: #673ab7;
+}
+.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
+  color: #3f51b5;
+}
+.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
+  color: #03a9f4;
+}
+.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
+  color: #00bcd4;
+}
+.checkbox-material-teal input[type=checkbox]:checked ~ .check {
+  color: #009688;
+}
+.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
+  color: #8bc34a;
+}
+.checkbox-material-lime input[type=checkbox]:checked ~ .check {
+  color: #cddc39;
+}
+.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
+  color: #ffeb3b;
+}
+.checkbox-material-orange input[type=checkbox]:checked ~ .check {
+  color: #ff9800;
+}
+.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
+  color: #ff5722;
+}
+.checkbox-material-grey input[type=checkbox]:checked ~ .check {
+  color: #9e9e9e;
+}
+.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
+  color: #607d8b;
+}
+.checkbox-material-brown input[type=checkbox]:checked ~ .check {
+  color: #795548;
+}
+.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
+  color: #ececec;
+}
+@-webkit-keyframes checkbox-on {
   0% {
-    top: -3px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
-    left: 17px;
+  }
-    width: 10px;
+  50% {
-    height: 21px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
-    border-color: #0f9d58;
+  }
-    border-left-color: transparent;
+  100% {
-    border-top-color: transparent;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-    -webkit-transform: rotate(45deg);
+  }
-            transform: rotate(45deg);
+}
+@keyframes checkbox-on {
+  0% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
+  }
+  50% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
+  }
+  100% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
+  }
+}
+@-webkit-keyframes checkbox-off {
+  0% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
+  }
+  25% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
   }
   50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
-    border-color: #0f9d58;
+    margin-top: -4px;
-    border-left-color: transparent;
+    margin-left: 6px;
-    border-top-color: transparent;
+    width: 0px;
+    height: 0px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
   }
   51% {
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  100% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 10px inset;
+  }
+  100% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+    margin-top: -2px;
+    margin-left: -2px;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 0px inset;
   }
 }
-@keyframes uncheck {
+@keyframes checkbox-off {
   0% {
-    top: -3px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
-    left: 17px;
+  }
-    width: 10px;
+  25% {
-    height: 21px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
   }
   50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
-    border-color: #0f9d58;
+    margin-top: -4px;
-    border-left-color: transparent;
+    margin-left: 6px;
-    border-top-color: transparent;
+    width: 0px;
+    height: 0px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
   }
   51% {
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  100% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 10px inset;
   }
-}
-@-webkit-keyframes check {
   100% {
-    top: -3px;
-    left: 17px;
-    width: 10px;
-    height: 21px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-  }
-  51% {
-    border-left: transparent;
-    border-top-color: transparent;
-  }
-  50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  0% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
-  }
+    height: 20px;
-}
+    box-shadow: 0 0 0 0,
-@keyframes check {
+            0 0 0 0,
-  100% {
+            0 0 0 0,
-    top: -3px;
+            0 0 0 0,
-    left: 17px;
+            0 0 0 0,
-    width: 10px;
+            0 0 0 0,
-    height: 21px;
+            0px 0px 0 0px inset;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-  }
-  51% {
-    border-left: transparent;
-    border-top-color: transparent;
-  }
-  50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  0% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-}
-@-webkit-keyframes rippleOn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes rippleOn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@-webkit-keyframes rippleOff {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes rippleOff {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
   }
 }
 .form-horizontal .radio {
@@ -2870,6 +2862,17 @@ body .jumbotron-material-lightgrey,
 .radio input[type=radio][disabled] ~ .check {
   background-color: rgba(0, 0, 0, 0.84);
 }
+@-webkit-keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 @keyframes rippleOn {
   0% {
     opacity: 0;
@@ -2881,6 +2884,17 @@ body .jumbotron-material-lightgrey,
     opacity: 0;
   }
 }
+@-webkit-keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 @keyframes rippleOff {
   0% {
     opacity: 0;

index.html

@@ -2062,7 +2062,7 @@
                 </div>
             </div>
 
-            <div id="source-modal" class="modal fade">
+            <div id="source-modal" class="modal fade" tabindex="-1">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content">
                         <div class="modal-header">
@@ -2085,7 +2085,6 @@
 
                 var $button = $("<div id='source-button' class='btn btn-primary btn-xs'>&lt; &gt;</div>").click(function(){
                     var index =  $('.bs-component').index( $(this).parent() );
-                    console.log(index);
                     $.get(window.location.href, function(data){
                         var html = $(data).find('.bs-component').eq(index).html();
                         html = cleanSource(html);

less/_checkboxes.less

@@ -1,13 +1,11 @@
-// main: material.less
 
 .form-horizontal .checkbox {
-    padding-top: 15px;
+    padding-top: 20px;
 }
 .checkbox {
-    transform: rotate(0deg);
     label {
+        padding-left: 10px;
         cursor: pointer;
-        padding-left: 45px;
         position: relative;
         span {
             display: block;
@@ -15,6 +13,17 @@
             left: 0px;
             transition-duration: 0.2s;
         }
+        .check {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 2px solid;
+            border-radius: 2px;
+            overflow: hidden;
+            position: relative;
+            top: 5px;
+            left: -3px;
+        }
         .check:after {
             display: block;
             position: absolute;
@@ -30,38 +39,46 @@
             margin: 0;
         }
         .check:before {
-            display: block;
+            position: absolute;
             content: "";
-            border: 2px solid @lightbg-text;
+            transform: rotate(45deg);
-            height: 20px;
+            display: block;
-            width: 20px;
+            margin-top: -4px;
-            transition-delay: 0.2s;
+            margin-left: 6px;
+            width: 0;
+            height: 0;
+            box-shadow:
+                0 0 0 0,
+                0 0 0 0,
+                0 0 0 0,
+                0 0 0 0,
+                0 0 0 0,
+                0 0 0 0,
+                0px 0px 0 0px inset;
+            animation: checkbox-off 0.3s linear forwards;
         }
     }
 
-    // Variations
-    .variations(~" .check", color, @success);
 
     // Hide native checkbox
     input[type=checkbox] { opacity: 0; }
 
-    input[type=checkbox] ~ .check:before {
-        position: absolute;
-        top: 2px;
-        left: 11px;
-        width: 18px;
-        height: 18px;
-        border: solid 2px;
-        border-color: #5a5a5a;
-        animation: uncheck 300ms ease-out forwards;
-    }
 
     input[type=checkbox]:focus ~ .check:after {
         opacity: 0.2;
     }
 
+    input[type=checkbox]:checked ~ .check {
+    }
     input[type=checkbox]:checked ~ .check:before {
-        animation: check 300ms ease-out forwards;
+        box-shadow:
+            0 0 0 10px,
+            10px -10px 0 10px,
+            32px 0px 0 20px,
+            0px 32px 0 20px,
+            -5px 5px 0 10px,
+            20px -12px 0 11px;
+        animation: checkbox-on 0.3s linear forwards;
     }
 
     // Ripple effect on click
@@ -89,103 +106,105 @@
     }
 
     .variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success);
+    .variations(~" input[type=checkbox]:checked ~ .check:before", color, #4caf50);
+    .variations(~" input[type=checkbox]:checked ~ .check", color, #4caf50);
 }
 
-@keyframes uncheck {
+
+@keyframes checkbox-on {
     0% {
-        top: -3px;
+        box-shadow:
-        left: 17px;
+            0 0 0 10px,
-        width: 10px;
+            10px -10px 0 10px,
-        height: 21px;
+            32px 0px 0 20px,
-        border-color: #0f9d58;
+            0px 32px 0 20px,
-        border-left-color: transparent;
+            -5px 5px 0 10px,
-        border-top-color: transparent;
+            15px 2px 0 11px;
-        transform: rotate(45deg);
+    }
+    50% {
+        box-shadow:
+            0 0 0 10px,
+            10px -10px 0 10px,
+            32px 0px 0 20px,
+            0px 32px 0 20px,
+            -5px 5px 0 10px,
+            20px 2px 0 11px;
+    }
+    100% {
+        box-shadow:
+            0 0 0 10px,
+            10px -10px 0 10px,
+            32px 0px 0 20px,
+            0px 32px 0 20px,
+            -5px 5px 0 10px,
+            20px -12px 0 11px;
+    }
+}
+@keyframes checkbox-off {
+    0% {
+        box-shadow:
+            0 0 0 10px,
+            10px -10px 0 10px,
+            32px 0px 0 20px,
+            0px 32px 0 20px,
+            -5px 5px 0 10px,
+            20px -12px 0 11px,
+            0 0 0 0 inset;
+    }
+
+    25% {
+        box-shadow:
+            0 0 0 10px,
+            10px -10px 0 10px,
+            32px 0px 0 20px,
+            0px 32px 0 20px,
+            -5px 5px 0 10px,
+            20px -12px 0 11px,
+            0 0 0 0 inset;
     }
     50% {
-        top: 14px;
-        left: 17px;
-        width: 4px;
-        height: 4px;
         transform: rotate(45deg);
-        border-color: #0f9d58;
+        margin-top: -4px;
-        border-left-color: transparent;
+        margin-left: 6px;
-        border-top-color: transparent;
+        width: 0px;
+        height: 0px;
+        box-shadow:
+            0 0 0 10px,
+            10px -10px 0 10px,
+            32px 0px 0 20px,
+            0px 32px 0 20px,
+            -5px 5px 0 10px,
+            15px 2px 0 11px,
+            0 0 0 0 inset;
     }
     51% {
-        border-color: #5a5a5a;
-        border-left-color: #5a5a5a;
-        border-top-color: #5a5a5a;
-    }
-    100% {
-        top: 1px;
-        left: 12px;
-        width: 18px;
-        height: 18px;
         transform: rotate(0deg);
-        border-color: #5a5a5a;
+        margin-top: -2px;
-        border-left-color: #5a5a5a;
+        margin-left: -2px;
-        border-top-color: #5a5a5a;
+        width: 20px;
+        height: 20px;
+        box-shadow:
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 10px inset;
     }
-}
-
-@keyframes check {
     100% {
-        top: -3px;
-        left: 17px;
-        width: 10px;
-        height: 21px;
-        transform: rotate(45deg);
-        border-color: #0f9d58;
-        border-left-color: transparent;
-        border-top-color: transparent;
-    }
-    51% {
-        border-left: transparent;
-        border-top-color: transparent;
-    }
-    50% {
-        top: 14px;
-        left: 17px;
-        width: 4px;
-        height: 4px;
-        transform: rotate(45deg);
-        border-color: #5a5a5a;
-        border-left-color: #5a5a5a;
-        border-top-color: #5a5a5a;
-    }
-    0% {
-        top: 1px;
-        left: 12px;
-        width: 18px;
-        height: 18px;
         transform: rotate(0deg);
-        border-color: #5a5a5a;
+        margin-top: -2px;
-        border-left-color: #5a5a5a;
+        margin-left: -2px;
-        border-top-color: #5a5a5a;
+        width: 20px;
-    }
+        height: 20px;
-}
+        box-shadow:
-
+            0 0 0 0,
-@keyframes rippleOn {
+            0 0 0 0,
-    0% {
+            0 0 0 0,
-        opacity: 0;
+            0 0 0 0,
-    }
+            0 0 0 0,
-    50% {
+            0 0 0 0,
-        opacity: 0.2;
+            0px 0px 0 0px inset;
-    }
-    100% {
-        opacity: 0;
-    }
-}
-
-@keyframes rippleOff {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 0.2;
-    }
-    100% {
-        opacity: 0;
     }
 }

less/_checkboxes_old.less

@@ -0,0 +1,191 @@
+// main: material.less
+
+.form-horizontal .checkbox {
+    padding-top: 15px;
+}
+.checkbox {
+    transform: rotate(0deg);
+    label {
+        cursor: pointer;
+        padding-left: 45px;
+        position: relative;
+        span {
+            display: block;
+            position: absolute;
+            left: 0px;
+            transition-duration: 0.2s;
+        }
+        .check:after {
+            display: block;
+            position: absolute;
+            content: "";
+            background-color: @lightbg-text;
+            left: -5px;
+            top: -15px;
+            height: 50px;
+            width: 50px;
+            border-radius: 100%;
+            z-index: 1;
+            opacity: 0;
+            margin: 0;
+        }
+        .check:before {
+            display: block;
+            content: "";
+            border: 2px solid @lightbg-text;
+            height: 20px;
+            width: 20px;
+            transition-delay: 0.2s;
+        }
+    }
+
+    // Variations
+    .variations(~" .check", color, @success);
+
+    // Hide native checkbox
+    input[type=checkbox] { opacity: 0; }
+
+    input[type=checkbox] ~ .check:before {
+        position: absolute;
+        top: 2px;
+        left: 11px;
+        width: 18px;
+        height: 18px;
+        border: solid 2px;
+        border-color: #5a5a5a;
+        animation: uncheck 300ms ease-out forwards;
+    }
+
+    input[type=checkbox]:focus ~ .check:after {
+        opacity: 0.2;
+    }
+
+    input[type=checkbox]:checked ~ .check:before {
+        animation: check 300ms ease-out forwards;
+    }
+
+    // Ripple effect on click
+    input[type=checkbox]:not(:checked) ~ .check:after {
+        animation: rippleOff 500ms linear forwards;
+    }
+    input[type=checkbox]:checked ~ .check:after {
+        animation: rippleOn 500ms linear forwards;
+    }
+
+    // Make animate quickly when not hover
+    &:not(:hover) input[type=checkbox] ~ .check {
+        &:before, &:after {
+            animation-duration: 1ms;
+        }
+    }
+
+    // Style for disabled inputs
+    input[type=checkbox][disabled]:not(:checked) ~ .check:before {
+        opacity: 0.5;
+    }
+    input[type=checkbox][disabled] ~ .check:after {
+        background-color: @lightbg-text;
+        transform: rotate(-45deg);
+    }
+
+    .variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success);
+}
+
+@keyframes uncheck {
+    0% {
+        top: -3px;
+        left: 17px;
+        width: 10px;
+        height: 21px;
+        border-color: #0f9d58;
+        border-left-color: transparent;
+        border-top-color: transparent;
+        transform: rotate(45deg);
+    }
+    50% {
+        top: 14px;
+        left: 17px;
+        width: 4px;
+        height: 4px;
+        transform: rotate(45deg);
+        border-color: #0f9d58;
+        border-left-color: transparent;
+        border-top-color: transparent;
+    }
+    51% {
+        border-color: #5a5a5a;
+        border-left-color: #5a5a5a;
+        border-top-color: #5a5a5a;
+    }
+    100% {
+        top: 1px;
+        left: 12px;
+        width: 18px;
+        height: 18px;
+        transform: rotate(0deg);
+        border-color: #5a5a5a;
+        border-left-color: #5a5a5a;
+        border-top-color: #5a5a5a;
+    }
+}
+
+@keyframes check {
+    100% {
+        top: -3px;
+        left: 17px;
+        width: 10px;
+        height: 21px;
+        transform: rotate(45deg);
+        border-color: #0f9d58;
+        border-left-color: transparent;
+        border-top-color: transparent;
+    }
+    51% {
+        border-left: transparent;
+        border-top-color: transparent;
+    }
+    50% {
+        top: 14px;
+        left: 17px;
+        width: 4px;
+        height: 4px;
+        transform: rotate(45deg);
+        border-color: #5a5a5a;
+        border-left-color: #5a5a5a;
+        border-top-color: #5a5a5a;
+    }
+    0% {
+        top: 1px;
+        left: 12px;
+        width: 18px;
+        height: 18px;
+        transform: rotate(0deg);
+        border-color: #5a5a5a;
+        border-left-color: #5a5a5a;
+        border-top-color: #5a5a5a;
+    }
+}
+
+@keyframes rippleOn {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 0.2;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes rippleOff {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 0.2;
+    }
+    100% {
+        opacity: 0;
+    }
+}

template/material/css/material-wfont.css

@@ -2230,16 +2230,11 @@ body .jumbotron-material-lightgrey,
   font-size: 15px;
 }
 .form-horizontal .checkbox {
-  padding-top: 15px;
+  padding-top: 20px;
-}
-.checkbox {
-  -webkit-transform: rotate(0deg);
-      -ms-transform: rotate(0deg);
-          transform: rotate(0deg);
 }
 .checkbox label {
+  padding-left: 10px;
   cursor: pointer;
-  padding-left: 45px;
   position: relative;
 }
 .checkbox label span {
@@ -2249,6 +2244,17 @@ body .jumbotron-material-lightgrey,
   -webkit-transition-duration: 0.2s;
           transition-duration: 0.2s;
 }
+.checkbox label .check {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid;
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+  top: 5px;
+  left: -3px;
+}
 .checkbox label .check:after {
   display: block;
   position: absolute;
@@ -2264,104 +2270,36 @@ body .jumbotron-material-lightgrey,
   margin: 0;
 }
 .checkbox label .check:before {
-  display: block;
+  position: absolute;
   content: "";
-  border: 2px solid rgba(0, 0, 0, 0.84);
+  -webkit-transform: rotate(45deg);
-  height: 20px;
+      -ms-transform: rotate(45deg);
-  width: 20px;
+          transform: rotate(45deg);
-  -webkit-transition-delay: 0.2s;
+  display: block;
-          transition-delay: 0.2s;
+  margin-top: -4px;
-}
+  margin-left: 6px;
-.checkbox .check,
+  width: 0;
-.checkbox-default .check {
+  height: 0;
-  color: #0f9d58;
+  box-shadow: 0 0 0 0,
-}
+                0 0 0 0,
-.checkbox-primary .check {
+                0 0 0 0,
-  color: #4285f4;
+                0 0 0 0,
-}
+                0 0 0 0,
-.checkbox-success .check {
+                0 0 0 0,
-  color: #0f9d58;
+                0px 0px 0 0px inset;
-}
+  -webkit-animation: checkbox-off 0.3s linear forwards;
-.checkbox-info .check {
+          animation: checkbox-off 0.3s linear forwards;
-  color: #03a9f4;
-}
-.checkbox-warning .check {
-  color: #ff5722;
-}
-.checkbox-danger .check {
-  color: #f44336;
-}
-.checkbox-material-red .check {
-  color: #f44336;
-}
-.checkbox-material-pink .check {
-  color: #e91e63;
-}
-.checkbox-material-purple .check {
-  color: #9c27b0;
-}
-.checkbox-material-deeppurple .check {
-  color: #673ab7;
-}
-.checkbox-material-indigo .check {
-  color: #3f51b5;
-}
-.checkbox-material-lightblue .check {
-  color: #03a9f4;
-}
-.checkbox-material-cyan .check {
-  color: #00bcd4;
-}
-.checkbox-material-teal .check {
-  color: #009688;
-}
-.checkbox-material-lightgreen .check {
-  color: #8bc34a;
-}
-.checkbox-material-lime .check {
-  color: #cddc39;
-}
-.checkbox-material-lightyellow .check {
-  color: #ffeb3b;
-}
-.checkbox-material-orange .check {
-  color: #ff9800;
-}
-.checkbox-material-deeporange .check {
-  color: #ff5722;
-}
-.checkbox-material-grey .check {
-  color: #9e9e9e;
-}
-.checkbox-material-bluegrey .check {
-  color: #607d8b;
-}
-.checkbox-material-brown .check {
-  color: #795548;
-}
-.checkbox-material-lightgrey .check {
-  color: #ececec;
 }
 .checkbox input[type=checkbox] {
   opacity: 0;
 }
-.checkbox input[type=checkbox] ~ .check:before {
-  position: absolute;
-  top: 2px;
-  left: 11px;
-  width: 18px;
-  height: 18px;
-  border: solid 2px;
-  border-color: #5a5a5a;
-  -webkit-animation: uncheck 300ms ease-out forwards;
-          animation: uncheck 300ms ease-out forwards;
-}
 .checkbox input[type=checkbox]:focus ~ .check:after {
   opacity: 0.2;
 }
 .checkbox input[type=checkbox]:checked ~ .check:before {
-  -webkit-animation: check 300ms ease-out forwards;
+  box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-          animation: check 300ms ease-out forwards;
+  -webkit-animation: checkbox-on 0.3s linear forwards;
+          animation: checkbox-on 0.3s linear forwards;
 }
 .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
   -webkit-animation: rippleOff 500ms linear forwards;
@@ -2455,206 +2393,260 @@ body .jumbotron-material-lightgrey,
 .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
   background-color: #ececec;
 }
-@-webkit-keyframes uncheck {
+.checkbox input[type=checkbox]:checked ~ .check:before,
+.checkbox-default input[type=checkbox]:checked ~ .check:before {
+  color: #4caf50;
+}
+.checkbox-primary input[type=checkbox]:checked ~ .check:before {
+  color: #4285f4;
+}
+.checkbox-success input[type=checkbox]:checked ~ .check:before {
+  color: #0f9d58;
+}
+.checkbox-info input[type=checkbox]:checked ~ .check:before {
+  color: #03a9f4;
+}
+.checkbox-warning input[type=checkbox]:checked ~ .check:before {
+  color: #ff5722;
+}
+.checkbox-danger input[type=checkbox]:checked ~ .check:before {
+  color: #f44336;
+}
+.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
+  color: #f44336;
+}
+.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
+  color: #e91e63;
+}
+.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
+  color: #9c27b0;
+}
+.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
+  color: #673ab7;
+}
+.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
+  color: #3f51b5;
+}
+.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
+  color: #03a9f4;
+}
+.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
+  color: #00bcd4;
+}
+.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
+  color: #009688;
+}
+.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
+  color: #8bc34a;
+}
+.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
+  color: #cddc39;
+}
+.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
+  color: #ffeb3b;
+}
+.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
+  color: #ff9800;
+}
+.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
+  color: #ff5722;
+}
+.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
+  color: #9e9e9e;
+}
+.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
+  color: #607d8b;
+}
+.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
+  color: #795548;
+}
+.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
+  color: #ececec;
+}
+.checkbox input[type=checkbox]:checked ~ .check,
+.checkbox-default input[type=checkbox]:checked ~ .check {
+  color: #4caf50;
+}
+.checkbox-primary input[type=checkbox]:checked ~ .check {
+  color: #4285f4;
+}
+.checkbox-success input[type=checkbox]:checked ~ .check {
+  color: #0f9d58;
+}
+.checkbox-info input[type=checkbox]:checked ~ .check {
+  color: #03a9f4;
+}
+.checkbox-warning input[type=checkbox]:checked ~ .check {
+  color: #ff5722;
+}
+.checkbox-danger input[type=checkbox]:checked ~ .check {
+  color: #f44336;
+}
+.checkbox-material-red input[type=checkbox]:checked ~ .check {
+  color: #f44336;
+}
+.checkbox-material-pink input[type=checkbox]:checked ~ .check {
+  color: #e91e63;
+}
+.checkbox-material-purple input[type=checkbox]:checked ~ .check {
+  color: #9c27b0;
+}
+.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
+  color: #673ab7;
+}
+.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
+  color: #3f51b5;
+}
+.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
+  color: #03a9f4;
+}
+.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
+  color: #00bcd4;
+}
+.checkbox-material-teal input[type=checkbox]:checked ~ .check {
+  color: #009688;
+}
+.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
+  color: #8bc34a;
+}
+.checkbox-material-lime input[type=checkbox]:checked ~ .check {
+  color: #cddc39;
+}
+.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
+  color: #ffeb3b;
+}
+.checkbox-material-orange input[type=checkbox]:checked ~ .check {
+  color: #ff9800;
+}
+.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
+  color: #ff5722;
+}
+.checkbox-material-grey input[type=checkbox]:checked ~ .check {
+  color: #9e9e9e;
+}
+.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
+  color: #607d8b;
+}
+.checkbox-material-brown input[type=checkbox]:checked ~ .check {
+  color: #795548;
+}
+.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
+  color: #ececec;
+}
+@-webkit-keyframes checkbox-on {
   0% {
-    top: -3px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
-    left: 17px;
+  }
-    width: 10px;
+  50% {
-    height: 21px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
-    border-color: #0f9d58;
+  }
-    border-left-color: transparent;
+  100% {
-    border-top-color: transparent;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-    -webkit-transform: rotate(45deg);
+  }
-            transform: rotate(45deg);
+}
+@keyframes checkbox-on {
+  0% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
+  }
+  50% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
+  }
+  100% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
+  }
+}
+@-webkit-keyframes checkbox-off {
+  0% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
+  }
+  25% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
   }
   50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
-    border-color: #0f9d58;
+    margin-top: -4px;
-    border-left-color: transparent;
+    margin-left: 6px;
-    border-top-color: transparent;
+    width: 0px;
+    height: 0px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
   }
   51% {
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  100% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 10px inset;
+  }
+  100% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+    margin-top: -2px;
+    margin-left: -2px;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 0px inset;
   }
 }
-@keyframes uncheck {
+@keyframes checkbox-off {
   0% {
-    top: -3px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
-    left: 17px;
+  }
-    width: 10px;
+  25% {
-    height: 21px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
   }
   50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
-    border-color: #0f9d58;
+    margin-top: -4px;
-    border-left-color: transparent;
+    margin-left: 6px;
-    border-top-color: transparent;
+    width: 0px;
+    height: 0px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
   }
   51% {
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  100% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 10px inset;
   }
-}
-@-webkit-keyframes check {
   100% {
-    top: -3px;
-    left: 17px;
-    width: 10px;
-    height: 21px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-  }
-  51% {
-    border-left: transparent;
-    border-top-color: transparent;
-  }
-  50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  0% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
-  }
+    height: 20px;
-}
+    box-shadow: 0 0 0 0,
-@keyframes check {
+            0 0 0 0,
-  100% {
+            0 0 0 0,
-    top: -3px;
+            0 0 0 0,
-    left: 17px;
+            0 0 0 0,
-    width: 10px;
+            0 0 0 0,
-    height: 21px;
+            0px 0px 0 0px inset;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-  }
-  51% {
-    border-left: transparent;
-    border-top-color: transparent;
-  }
-  50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  0% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-}
-@-webkit-keyframes rippleOn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes rippleOn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@-webkit-keyframes rippleOff {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes rippleOff {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
   }
 }
 .form-horizontal .radio {
@@ -2871,6 +2863,17 @@ body .jumbotron-material-lightgrey,
 .radio input[type=radio][disabled] ~ .check {
   background-color: rgba(0, 0, 0, 0.84);
 }
+@-webkit-keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 @keyframes rippleOn {
   0% {
     opacity: 0;
@@ -2882,6 +2885,17 @@ body .jumbotron-material-lightgrey,
     opacity: 0;
   }
 }
+@-webkit-keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 @keyframes rippleOff {
   0% {
     opacity: 0;

template/material/css/material.css

@@ -2229,16 +2229,11 @@ body .jumbotron-material-lightgrey,
   font-size: 15px;
 }
 .form-horizontal .checkbox {
-  padding-top: 15px;
+  padding-top: 20px;
-}
-.checkbox {
-  -webkit-transform: rotate(0deg);
-      -ms-transform: rotate(0deg);
-          transform: rotate(0deg);
 }
 .checkbox label {
+  padding-left: 10px;
   cursor: pointer;
-  padding-left: 45px;
   position: relative;
 }
 .checkbox label span {
@@ -2248,6 +2243,17 @@ body .jumbotron-material-lightgrey,
   -webkit-transition-duration: 0.2s;
           transition-duration: 0.2s;
 }
+.checkbox label .check {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid;
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+  top: 5px;
+  left: -3px;
+}
 .checkbox label .check:after {
   display: block;
   position: absolute;
@@ -2263,104 +2269,36 @@ body .jumbotron-material-lightgrey,
   margin: 0;
 }
 .checkbox label .check:before {
-  display: block;
+  position: absolute;
   content: "";
-  border: 2px solid rgba(0, 0, 0, 0.84);
+  -webkit-transform: rotate(45deg);
-  height: 20px;
+      -ms-transform: rotate(45deg);
-  width: 20px;
+          transform: rotate(45deg);
-  -webkit-transition-delay: 0.2s;
+  display: block;
-          transition-delay: 0.2s;
+  margin-top: -4px;
-}
+  margin-left: 6px;
-.checkbox .check,
+  width: 0;
-.checkbox-default .check {
+  height: 0;
-  color: #0f9d58;
+  box-shadow: 0 0 0 0,
-}
+                0 0 0 0,
-.checkbox-primary .check {
+                0 0 0 0,
-  color: #4285f4;
+                0 0 0 0,
-}
+                0 0 0 0,
-.checkbox-success .check {
+                0 0 0 0,
-  color: #0f9d58;
+                0px 0px 0 0px inset;
-}
+  -webkit-animation: checkbox-off 0.3s linear forwards;
-.checkbox-info .check {
+          animation: checkbox-off 0.3s linear forwards;
-  color: #03a9f4;
-}
-.checkbox-warning .check {
-  color: #ff5722;
-}
-.checkbox-danger .check {
-  color: #f44336;
-}
-.checkbox-material-red .check {
-  color: #f44336;
-}
-.checkbox-material-pink .check {
-  color: #e91e63;
-}
-.checkbox-material-purple .check {
-  color: #9c27b0;
-}
-.checkbox-material-deeppurple .check {
-  color: #673ab7;
-}
-.checkbox-material-indigo .check {
-  color: #3f51b5;
-}
-.checkbox-material-lightblue .check {
-  color: #03a9f4;
-}
-.checkbox-material-cyan .check {
-  color: #00bcd4;
-}
-.checkbox-material-teal .check {
-  color: #009688;
-}
-.checkbox-material-lightgreen .check {
-  color: #8bc34a;
-}
-.checkbox-material-lime .check {
-  color: #cddc39;
-}
-.checkbox-material-lightyellow .check {
-  color: #ffeb3b;
-}
-.checkbox-material-orange .check {
-  color: #ff9800;
-}
-.checkbox-material-deeporange .check {
-  color: #ff5722;
-}
-.checkbox-material-grey .check {
-  color: #9e9e9e;
-}
-.checkbox-material-bluegrey .check {
-  color: #607d8b;
-}
-.checkbox-material-brown .check {
-  color: #795548;
-}
-.checkbox-material-lightgrey .check {
-  color: #ececec;
 }
 .checkbox input[type=checkbox] {
   opacity: 0;
 }
-.checkbox input[type=checkbox] ~ .check:before {
-  position: absolute;
-  top: 2px;
-  left: 11px;
-  width: 18px;
-  height: 18px;
-  border: solid 2px;
-  border-color: #5a5a5a;
-  -webkit-animation: uncheck 300ms ease-out forwards;
-          animation: uncheck 300ms ease-out forwards;
-}
 .checkbox input[type=checkbox]:focus ~ .check:after {
   opacity: 0.2;
 }
 .checkbox input[type=checkbox]:checked ~ .check:before {
-  -webkit-animation: check 300ms ease-out forwards;
+  box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-          animation: check 300ms ease-out forwards;
+  -webkit-animation: checkbox-on 0.3s linear forwards;
+          animation: checkbox-on 0.3s linear forwards;
 }
 .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
   -webkit-animation: rippleOff 500ms linear forwards;
@@ -2454,206 +2392,260 @@ body .jumbotron-material-lightgrey,
 .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
   background-color: #ececec;
 }
-@-webkit-keyframes uncheck {
+.checkbox input[type=checkbox]:checked ~ .check:before,
+.checkbox-default input[type=checkbox]:checked ~ .check:before {
+  color: #4caf50;
+}
+.checkbox-primary input[type=checkbox]:checked ~ .check:before {
+  color: #4285f4;
+}
+.checkbox-success input[type=checkbox]:checked ~ .check:before {
+  color: #0f9d58;
+}
+.checkbox-info input[type=checkbox]:checked ~ .check:before {
+  color: #03a9f4;
+}
+.checkbox-warning input[type=checkbox]:checked ~ .check:before {
+  color: #ff5722;
+}
+.checkbox-danger input[type=checkbox]:checked ~ .check:before {
+  color: #f44336;
+}
+.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
+  color: #f44336;
+}
+.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
+  color: #e91e63;
+}
+.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
+  color: #9c27b0;
+}
+.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
+  color: #673ab7;
+}
+.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
+  color: #3f51b5;
+}
+.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
+  color: #03a9f4;
+}
+.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
+  color: #00bcd4;
+}
+.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
+  color: #009688;
+}
+.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
+  color: #8bc34a;
+}
+.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
+  color: #cddc39;
+}
+.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
+  color: #ffeb3b;
+}
+.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
+  color: #ff9800;
+}
+.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
+  color: #ff5722;
+}
+.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
+  color: #9e9e9e;
+}
+.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
+  color: #607d8b;
+}
+.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
+  color: #795548;
+}
+.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
+  color: #ececec;
+}
+.checkbox input[type=checkbox]:checked ~ .check,
+.checkbox-default input[type=checkbox]:checked ~ .check {
+  color: #4caf50;
+}
+.checkbox-primary input[type=checkbox]:checked ~ .check {
+  color: #4285f4;
+}
+.checkbox-success input[type=checkbox]:checked ~ .check {
+  color: #0f9d58;
+}
+.checkbox-info input[type=checkbox]:checked ~ .check {
+  color: #03a9f4;
+}
+.checkbox-warning input[type=checkbox]:checked ~ .check {
+  color: #ff5722;
+}
+.checkbox-danger input[type=checkbox]:checked ~ .check {
+  color: #f44336;
+}
+.checkbox-material-red input[type=checkbox]:checked ~ .check {
+  color: #f44336;
+}
+.checkbox-material-pink input[type=checkbox]:checked ~ .check {
+  color: #e91e63;
+}
+.checkbox-material-purple input[type=checkbox]:checked ~ .check {
+  color: #9c27b0;
+}
+.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
+  color: #673ab7;
+}
+.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
+  color: #3f51b5;
+}
+.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
+  color: #03a9f4;
+}
+.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
+  color: #00bcd4;
+}
+.checkbox-material-teal input[type=checkbox]:checked ~ .check {
+  color: #009688;
+}
+.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
+  color: #8bc34a;
+}
+.checkbox-material-lime input[type=checkbox]:checked ~ .check {
+  color: #cddc39;
+}
+.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
+  color: #ffeb3b;
+}
+.checkbox-material-orange input[type=checkbox]:checked ~ .check {
+  color: #ff9800;
+}
+.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
+  color: #ff5722;
+}
+.checkbox-material-grey input[type=checkbox]:checked ~ .check {
+  color: #9e9e9e;
+}
+.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
+  color: #607d8b;
+}
+.checkbox-material-brown input[type=checkbox]:checked ~ .check {
+  color: #795548;
+}
+.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
+  color: #ececec;
+}
+@-webkit-keyframes checkbox-on {
   0% {
-    top: -3px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
-    left: 17px;
+  }
-    width: 10px;
+  50% {
-    height: 21px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
-    border-color: #0f9d58;
+  }
-    border-left-color: transparent;
+  100% {
-    border-top-color: transparent;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-    -webkit-transform: rotate(45deg);
+  }
-            transform: rotate(45deg);
+}
+@keyframes checkbox-on {
+  0% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
+  }
+  50% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
+  }
+  100% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
+  }
+}
+@-webkit-keyframes checkbox-off {
+  0% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
+  }
+  25% {
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
   }
   50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
-    border-color: #0f9d58;
+    margin-top: -4px;
-    border-left-color: transparent;
+    margin-left: 6px;
-    border-top-color: transparent;
+    width: 0px;
+    height: 0px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
   }
   51% {
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  100% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 10px inset;
+  }
+  100% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+    margin-top: -2px;
+    margin-left: -2px;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 0px inset;
   }
 }
-@keyframes uncheck {
+@keyframes checkbox-off {
   0% {
-    top: -3px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
-    left: 17px;
+  }
-    width: 10px;
+  25% {
-    height: 21px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
   }
   50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
-    border-color: #0f9d58;
+    margin-top: -4px;
-    border-left-color: transparent;
+    margin-left: 6px;
-    border-top-color: transparent;
+    width: 0px;
+    height: 0px;
+    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
   }
   51% {
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  100% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0 0 0 0,
+            0px 0px 0 10px inset;
   }
-}
-@-webkit-keyframes check {
   100% {
-    top: -3px;
-    left: 17px;
-    width: 10px;
-    height: 21px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-  }
-  51% {
-    border-left: transparent;
-    border-top-color: transparent;
-  }
-  50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  0% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
-    border-color: #5a5a5a;
+    margin-top: -2px;
-    border-left-color: #5a5a5a;
+    margin-left: -2px;
-    border-top-color: #5a5a5a;
+    width: 20px;
-  }
+    height: 20px;
-}
+    box-shadow: 0 0 0 0,
-@keyframes check {
+            0 0 0 0,
-  100% {
+            0 0 0 0,
-    top: -3px;
+            0 0 0 0,
-    left: 17px;
+            0 0 0 0,
-    width: 10px;
+            0 0 0 0,
-    height: 21px;
+            0px 0px 0 0px inset;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #0f9d58;
-    border-left-color: transparent;
-    border-top-color: transparent;
-  }
-  51% {
-    border-left: transparent;
-    border-top-color: transparent;
-  }
-  50% {
-    top: 14px;
-    left: 17px;
-    width: 4px;
-    height: 4px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-  0% {
-    top: 1px;
-    left: 12px;
-    width: 18px;
-    height: 18px;
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-    border-color: #5a5a5a;
-    border-left-color: #5a5a5a;
-    border-top-color: #5a5a5a;
-  }
-}
-@-webkit-keyframes rippleOn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes rippleOn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@-webkit-keyframes rippleOff {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes rippleOff {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
   }
 }
 .form-horizontal .radio {
@@ -2870,6 +2862,17 @@ body .jumbotron-material-lightgrey,
 .radio input[type=radio][disabled] ~ .check {
   background-color: rgba(0, 0, 0, 0.84);
 }
+@-webkit-keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 @keyframes rippleOn {
   0% {
     opacity: 0;
@@ -2881,6 +2884,17 @@ body .jumbotron-material-lightgrey,
     opacity: 0;
   }
 }
+@-webkit-keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 @keyframes rippleOff {
   0% {
     opacity: 0;