Ripple effect for radio and checkbox with/without formgroup (#996)

* adding ripple support for radio without form group
* adding ripple support for checkbox outside .formgroup
* nesting selectors for better readability and removing unused code

less/_checkboxes.less

@@ -30,6 +30,7 @@ label.checkbox-inline {
     &:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
       display: block;
       position: absolute;
+      top:-5px;
       left: 0;
       content: "";
       background-color: rgba(0, 0, 0, .84);
@@ -69,7 +70,6 @@ label.checkbox-inline {
         0 0 0 0,
         0 0 0 0,
         0 0 0 0 inset;
-      animation: checkbox-off;
     }
   }
 
@@ -78,7 +78,36 @@ label.checkbox-inline {
     &:focus + .checkbox-material .check:after {
       opacity: 0.2;
     }
-
+ 
+    &:focus{
+      
+      &:checked{
+        & + .checkbox-material:before {
+          animation: rippleOn 500ms;
+        }
+        & + .checkbox-material .check:before {
+          animation: checkbox-on @mdb-checkbox-animation-check forwards;
+        }
+        & + .checkbox-material .check:after {
+          animation: rippleOn @mdb-checkbox-animation-ripple forwards; // Ripple effect on check
+        }
+      }
+      
+      &:not(:checked) {
+        & + .checkbox-material:before {
+          animation: rippleOff 500ms;
+        }
+        & + .checkbox-material .check:before {
+          animation: checkbox-off @mdb-checkbox-animation-check forwards;
+        }
+        & + .checkbox-material .check:after {
+          animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
+        }
+      }
+      
+    }
+    
+    
     &:checked {
 
       // FIXME: once working - combine further to reduce code
@@ -96,26 +125,10 @@ label.checkbox-inline {
           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
       }
     }
   }
@@ -134,30 +147,6 @@ label.checkbox-inline {
   }
 }
 
-// Prevent checkbox animation and ripple effect on page load
-.is-focused {
-  .checkbox,
-  label.checkbox-inline {
-    .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;
-        }
-      }
-      &:not(:checked) {
-        & + .checkbox-material:before {
-          animation: rippleOff @mdb-checkbox-animation-ripple;
-        }
-      }
-    }
-  }
-}
-
 @keyframes checkbox-on {
   0% {
     box-shadow:

less/_radios.less

@@ -57,11 +57,12 @@
     margin: 0;
     transform: scale3d(1.5, 1.5, 1);
   }
-  input[type=radio]:not(:checked) ~ .check:after {
+  
+  input[type=radio]:focus:not(:checked) ~ .check:after {
     animation: rippleOff 500ms;
   }
-  input[type=radio]:checked ~ .check:after {
-    animation: rippleOn;
+  input[type=radio]:focus:checked ~ .check:after {
+    animation: rippleOn 500ms;
   }
 
   input[type=radio] {
@@ -90,15 +91,6 @@
   }
 }
 
-// Prevent ripple effect on page load
-.is-focused {
-  .radio, label.radio-inline {
-    input[type=radio]:checked ~ .check:after {
-      animation: rippleOn 500ms;
-    }
-  }
-}
-
 @keyframes rippleOn {
   0% {
     opacity: 0;
@@ -110,7 +102,6 @@
     opacity: 0;
   }
 }
-
 @keyframes rippleOff {
   0% {
     opacity: 0;

scripts/material.js

@@ -165,9 +165,6 @@
       var validate = this.options.validate;
 
       $(document)
-        .on("change", ".checkbox input[type=checkbox]", function () {
-          $(this).blur();
-        })
         .on("keydown paste", ".form-control", function (e) {
           if (_isChar(e)) {
             $(this).closest(".form-group").removeClass("is-empty");