Merge pull request #983 from tilwinjoy/inline-radio-checkbox

Adding support for inline checkbox and radio

less/_checkboxes.less

@@ -2,14 +2,16 @@
 .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();
-  }
+}
 
+.checkbox,
+label.checkbox-inline {
   // Hide native checkbox
   input[type=checkbox] {
     opacity: 0;
@@ -135,7 +137,8 @@
 
 // Prevent checkbox animation and ripple effect on page load
 .is-focused {
-  .checkbox {
+  .checkbox,
+  label.checkbox-inline {
     .checkbox-material {
       .check:before {
         animation: checkbox-off @mdb-checkbox-animation-check forwards;

less/_radios.less

@@ -13,14 +13,15 @@
   }
 }
 
-.radio {
-  label {
+.radio label, label.radio-inline {
     cursor: pointer;
     padding-left: 45px;
     position: relative;
     color: @mdb-radio-label-color;
     .mdb-label-color-toggle-focus();
+}
 
+.radio, label.radio-inline {
   span {
     display: block;
     position: absolute;
@@ -62,7 +63,6 @@
   input[type=radio]:checked ~ .check:after {
     animation: rippleOn;
   }
-  }
 
   input[type=radio] {
     opacity: 0;
@@ -92,7 +92,7 @@
 
 // Prevent ripple effect on page load
 .is-focused {
-  .radio {
+  .radio, label.radio-inline {
     input[type=radio]:checked ~ .check:after {
       animation: rippleOn 500ms;
     }

scripts/material.js

@@ -74,9 +74,9 @@
         ".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]"
+      "radioElements": ".radio > label > input[type=radio], label.radio-inline > input[type=radio]"
     },
     "checkbox": function (selector) {
       // Add fake-checkbox to material checkboxes