adds inline checkbox support

less/_checkboxes.less

@@ -1,15 +1,16 @@
 // http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
-.form-group {
+.form-group {}
-}
 
-.checkbox {
+.checkbox label,
-  label {
+label.checkbox-inline {
     cursor: pointer;
     padding-left: 0; // Reset for Bootstrap rule
     color: @mdb-checkbox-label-color;
     .mdb-label-color-toggle-focus();
 }
 
+.checkbox,
+.checkbox-inline {
     // Hide native checkbox
     input[type=checkbox] {
         opacity: 0;
@@ -22,12 +23,12 @@
         left: 0;
         pointer-events: none;
     }
-
     .checkbox-material {
         vertical-align: middle;
         position: relative;
         top: 3px;
-    &:before {  // FIXME: document why this is necessary (doesn't seem to be on chrome)
+        &:before {
+            // FIXME: document why this is necessary (doesn't seem to be on chrome)
             display: block;
             position: absolute;
             left: 0;
@@ -41,7 +42,6 @@
             margin: 0;
             transform: scale3d(2.3, 2.3, 1);
         }
-
         .check {
             position: relative;
             display: inline-block;
@@ -61,64 +61,42 @@
             margin-left: 6px;
             width: 0;
             height: 0;
-      box-shadow:
+            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, 0 0 0 0 inset;
-        0 0 0 0,
-        0 0 0 0,
-        0 0 0 0,
-        0 0 0 0,
-        0 0 0 0,
-        0 0 0 0,
-        0 0 0 0 inset;
             animation: checkbox-off;
         }
     }
-
     input[type=checkbox] {
-
         &:focus + .checkbox-material .check:after {
             opacity: 0.2;
         }
-
         &:checked {
-
             // FIXME: once working - combine further to reduce code
             & + .checkbox-material .check {
                 color: @mdb-checkbox-checked-color;
                 border-color: @mdb-checkbox-checked-color;
             }
-
             & + .checkbox-material .check:before {
                 color: @mdb-checkbox-checked-color;
-        box-shadow: 0 0 0 10px,
+                box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-          10px -10px 0 10px,
-        32px 0 0 20px,
-        0px 32px 0 20px,
-        -5px 5px 0 10px,
-          20px -12px 0 11px;
                 animation: checkbox-on @mdb-checkbox-animation-check forwards;
             }
-
             & + .checkbox-material:before {
                 animation: rippleOn;
             }
-
             & + .checkbox-material .check:after {
                 //background-color: @brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
                 animation: rippleOn @mdb-checkbox-animation-ripple forwards; // Ripple effect on check
             }
         }
-
         &:not(:checked) {
             & + .checkbox-material:before {
                 animation: rippleOff;
             }
-
             & + .checkbox-material .check:after {
                 animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
             }
         }
     }
-
     // Style for disabled inputs
     fieldset[disabled] &,
     fieldset[disabled] & input[type=checkbox],
@@ -135,7 +113,8 @@
 
 // Prevent checkbox animation and ripple effect on page load
 .is-focused {
-  .checkbox {
+    .checkbox,
+    .checkbox-inline {
         .checkbox-material {
             .check:before {
                 animation: checkbox-off @mdb-checkbox-animation-check forwards;
@@ -158,54 +137,22 @@
 
 @keyframes checkbox-on {
     0% {
-    box-shadow:
+        box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
-      0 0 0 10px,
-      10px -10px 0 10px,
-      32px 0 0 20px,
-      0px 32px 0 20px,
-      -5px 5px 0 10px,
-      15px 2px 0 11px;
     }
     50% {
-    box-shadow:
+        box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
-      0 0 0 10px,
-      10px -10px 0 10px,
-      32px 0 0 20px,
-      0px 32px 0 20px,
-      -5px 5px 0 10px,
-      20px 2px 0 11px;
     }
     100% {
-    box-shadow:
+        box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-      0 0 0 10px,
-      10px -10px 0 10px,
-      32px 0 0 20px,
-      0px 32px 0 20px,
-      -5px 5px 0 10px,
-      20px -12px 0 11px;
     }
 }
 
 @keyframes checkbox-off {
     0% {
-    box-shadow:
+        box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
-      0 0 0 10px,
-      10px -10px 0 10px,
-      32px 0 0 20px,
-      0px 32px 0 20px,
-      -5px 5px 0 10px,
-      20px -12px 0 11px,
-      0 0 0 0 inset;
     }
     25% {
-    box-shadow:
+        box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
-      0 0 0 10px,
-      10px -10px 0 10px,
-      32px 0 0 20px,
-      0px 32px 0 20px,
-      -5px 5px 0 10px,
-      20px -12px 0 11px,
-      0 0 0 0 inset;
     }
     50% {
         transform: rotate(45deg);
@@ -213,14 +160,7 @@
         margin-left: 6px;
         width: 0;
         height: 0;
-    box-shadow:
+        box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
-      0 0 0 10px,
-      10px -10px 0 10px,
-      32px 0 0 20px,
-      0px 32px 0 20px,
-      -5px 5px 0 10px,
-      15px 2px 0 11px,
-      0 0 0 0 inset;
     }
     51% {
         transform: rotate(0deg);
@@ -228,14 +168,7 @@
         margin-left: -2px;
         width: 20px;
         height: 20px;
-    box-shadow:
+        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 0 0 10px inset;
-      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 0 0 10px inset;
     }
     100% {
         transform: rotate(0deg);
@@ -243,14 +176,7 @@
         margin-left: -2px;
         width: 20px;
         height: 20px;
-    box-shadow:
+        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 0 0 0 inset;
-      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 0 0 0 inset;
     }
 }
 

scripts/material.js

@@ -14,11 +14,7 @@
     if (typeof evt.which == "undefined") {
       return true;
     } else if (typeof evt.which == "number" && evt.which > 0) {
-      return (
+      return (!evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8 // backspace
-        !evt.ctrlKey
-        && !evt.metaKey
-        && !evt.altKey
-        && evt.which != 8  // backspace
         && evt.which != 9 // tab
         && evt.which != 13 // enter
         && evt.which != 16 // shift
@@ -74,7 +70,7 @@
         ".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"
       ].join(","),
       "inputElements": "input.form-control, textarea.form-control, select.form-control",
-      "checkboxElements": ".checkbox > label > input[type=checkbox]",
+      "checkboxElements": ".checkbox > label > input[type=checkbox], label.checkbox-inline > input[type=checkbox]",
       "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
       "radioElements": ".radio > label > input[type=radio]"
     },
@@ -180,8 +176,7 @@
 
           if ($input.val() === "") {
             $formGroup.addClass("is-empty");
-          }
+          } else {
-          else {
             $formGroup.removeClass("is-empty");
           }
 
@@ -194,8 +189,7 @@
           if (validate) {
             if (isValid) {
               $formGroup.removeClass("has-error");
-            }
+            } else {
-            else {
               $formGroup.addClass("has-error");
             }
           }