From dff3eec918fda246030659537b6b17d94be91874 Mon Sep 17 00:00:00 2001
From: TJ <tilwinjoy@gmail.com>
Date: Mon, 25 Apr 2016 22:19:23 +0530
Subject: [PATCH] adds inline checkbox support

---
 less/_checkboxes.less | 422 +++++++++++++++++-------------------------
 scripts/material.js   |  22 +--
 2 files changed, 182 insertions(+), 262 deletions(-)

diff --git a/less/_checkboxes.less b/less/_checkboxes.less
index a320dc30..5407fec2 100644
--- a/less/_checkboxes.less
+++ b/less/_checkboxes.less
@@ -1,279 +1,205 @@
 // http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
-.form-group {
-}
+.form-group {}
 
-.checkbox {
-  label {
+.checkbox label,
+label.checkbox-inline {
     cursor: pointer;
     padding-left: 0; // Reset for Bootstrap rule
     color: @mdb-checkbox-label-color;
     .mdb-label-color-toggle-focus();
-  }
+}
 
-  // Hide native checkbox
-  input[type=checkbox] {
-    opacity: 0;
-    position: absolute;
-    margin: 0;
-    z-index: -1;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    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)
-      display: block;
-      position: absolute;
-      left: 0;
-      content: "";
-      background-color: rgba(0,0,0,.84);
-      height: @mdb-checkbox-size;
-      width: @mdb-checkbox-size;
-      border-radius: 100%;
-      z-index: 1;
-      opacity: 0;
-      margin: 0;
-      transform: scale3d(2.3, 2.3, 1);
+.checkbox,
+.checkbox-inline {
+    // Hide native checkbox
+    input[type=checkbox] {
+        opacity: 0;
+        position: absolute;
+        margin: 0;
+        z-index: -1;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        left: 0;
+        pointer-events: none;
     }
-
-    .check {
-      position: relative;
-      display: inline-block;
-      width: @mdb-checkbox-size;
-      height: @mdb-checkbox-size;
-      border: @mdb-checkbox-border-size solid @mdb-checkbox-border-color;
-      border-radius: @border-radius-base;
-      overflow: hidden;
-      z-index: 1;
+    .checkbox-material {
+        vertical-align: middle;
+        position: relative;
+        top: 3px;
+        &:before {
+            // FIXME: document why this is necessary (doesn't seem to be on chrome)
+            display: block;
+            position: absolute;
+            left: 0;
+            content: "";
+            background-color: rgba(0, 0, 0, .84);
+            height: @mdb-checkbox-size;
+            width: @mdb-checkbox-size;
+            border-radius: 100%;
+            z-index: 1;
+            opacity: 0;
+            margin: 0;
+            transform: scale3d(2.3, 2.3, 1);
+        }
+        .check {
+            position: relative;
+            display: inline-block;
+            width: @mdb-checkbox-size;
+            height: @mdb-checkbox-size;
+            border: @mdb-checkbox-border-size solid @mdb-checkbox-border-color;
+            border-radius: @border-radius-base;
+            overflow: hidden;
+            z-index: 1;
+        }
+        .check:before {
+            position: absolute;
+            content: "";
+            transform: rotate(45deg);
+            display: block;
+            margin-top: -4px;
+            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, 0 0 0 0 inset;
+            animation: checkbox-off;
+        }
     }
-    .check:before {
-      position: absolute;
-      content: "";
-      transform: rotate(45deg);
-      display: block;
-      margin-top: -4px;
-      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,
-        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, 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
+            }
+        }
     }
-  }
-
-  input[type=checkbox] {
-
-    &:focus + .checkbox-material .check:after {
-      opacity: 0.2;
+    // Style for disabled inputs
+    fieldset[disabled] &,
+    fieldset[disabled] & input[type=checkbox],
+    input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
+    input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
+    input[type=checkbox][disabled] + .circle {
+        opacity: 0.5;
     }
-
-    &: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,
-          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
-      }
+    input[type=checkbox][disabled] + .checkbox-material .check:after {
+        background-color: @mdb-text-color-primary;
+        transform: rotate(-45deg);
     }
-
-    &: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],
-  input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
-  input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
-  input[type=checkbox][disabled] + .circle {
-    opacity: 0.5;
-  }
-  input[type=checkbox][disabled] + .checkbox-material .check:after {
-    background-color: @mdb-text-color-primary;
-    transform: rotate(-45deg);
-  }
 }
 
 // Prevent checkbox animation and ripple effect on page load
 .is-focused {
-  .checkbox {
-    .checkbox-material {
-      .check:before {
-        animation: checkbox-off @mdb-checkbox-animation-check forwards;
-      }
-    }
-    input[type=checkbox] {
-      &:checked {
-        & + .checkbox-material:before {
-          animation: rippleOn @mdb-checkbox-animation-ripple;
+    .checkbox,
+    .checkbox-inline {
+        .checkbox-material {
+            .check:before {
+                animation: checkbox-off @mdb-checkbox-animation-check forwards;
+            }
         }
-      }
-      &:not(:checked) {
-        & + .checkbox-material:before {
-          animation: rippleOff @mdb-checkbox-animation-ripple;
+        input[type=checkbox] {
+            &:checked {
+                & + .checkbox-material:before {
+                    animation: rippleOn @mdb-checkbox-animation-ripple;
+                }
+            }
+            &:not(:checked) {
+                & + .checkbox-material:before {
+                    animation: rippleOff @mdb-checkbox-animation-ripple;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 @keyframes checkbox-on {
-  0% {
-    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;
-  }
-  50% {
-    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;
-  }
-  100% {
-    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% {
+        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;
+    }
+    50% {
+        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;
+    }
+    100% {
+        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;
+    }
 }
 
 @keyframes checkbox-off {
-  0% {
-    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;
-  }
-  25% {
-    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;
-  }
-  50% {
-    transform: rotate(45deg);
-    margin-top: -4px;
-    margin-left: 6px;
-    width: 0;
-    height: 0;
-    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;
-  }
-  51% {
-    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 0 0 10px inset;
-  }
-  100% {
-    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 0 0 0 inset;
-  }
+    0% {
+        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;
+    }
+    25% {
+        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;
+    }
+    50% {
+        transform: rotate(45deg);
+        margin-top: -4px;
+        margin-left: 6px;
+        width: 0;
+        height: 0;
+        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;
+    }
+    51% {
+        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 0 0 10px inset;
+    }
+    100% {
+        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 0 0 0 inset;
+    }
 }
 
 @keyframes rippleOn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 0.2;
+    }
+    100% {
+        opacity: 0;
+    }
 }
 
 @keyframes rippleOff {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 0.2;
+    }
+    100% {
+        opacity: 0;
+    }
+}
\ No newline at end of file
diff --git a/scripts/material.js b/scripts/material.js
index d0e3cd09..9655f7d9 100644
--- a/scripts/material.js
+++ b/scripts/material.js
@@ -14,12 +14,8 @@
     if (typeof evt.which == "undefined") {
       return true;
     } else if (typeof evt.which == "number" && evt.which > 0) {
-      return (
-        !evt.ctrlKey
-        && !evt.metaKey
-        && !evt.altKey
-        && evt.which != 8  // backspace
-        && evt.which != 9  // tab
+      return (!evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8 // backspace
+        && evt.which != 9 // tab
         && evt.which != 13 // enter
         && evt.which != 16 // shift
         && evt.which != 17 // ctrl
@@ -32,7 +28,7 @@
 
   function _addFormGroupFocus(element) {
     var $element = $(element);
-    if (!$element.prop('disabled')) {  // this is showing as undefined on chrome but works fine on firefox??
+    if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox??
       $element.closest(".form-group").addClass("is-focused");
     }
   }
@@ -41,7 +37,7 @@
     $input.closest('label').hover(function () {
       var $i = $(this).find('input');
       if (!$i.prop('disabled')) { // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
-        _addFormGroupFocus($i);     // need to find the input so we can check disablement
+        _addFormGroupFocus($i); // need to find the input so we can check disablement
       }
     }, function () {
       _removeFormGroupFocus($(this).find('input'));
@@ -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");
             }
           }
@@ -333,4 +327,4 @@
     }
   };
 
-})(jQuery);
+})(jQuery);
\ No newline at end of file