From 2671c73cea0aa230045b4778630d78c2d654cdbe Mon Sep 17 00:00:00 2001
From: tilwinjoy <tilwinjoy@gmail.com>
Date: Mon, 9 May 2016 20:26:11 +0530
Subject: [PATCH] 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 | 73 ++++++++++++++++++-------------------------
 less/_radios.less     | 17 +++-------
 scripts/material.js   |  3 --
 3 files changed, 35 insertions(+), 58 deletions(-)

diff --git a/less/_checkboxes.less b/less/_checkboxes.less
index c401ed51..9c45fc3e 100644
--- a/less/_checkboxes.less
+++ b/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:
diff --git a/less/_radios.less b/less/_radios.less
index 53acad66..1d4b96c8 100644
--- a/less/_radios.less
+++ b/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;
diff --git a/scripts/material.js b/scripts/material.js
index e2334b35..b0466f03 100644
--- a/scripts/material.js
+++ b/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");