From 8f9ffe9f8ca410ea6ce133650f733e0de0895100 Mon Sep 17 00:00:00 2001
From: Federico Zivolo <zivolof@p2000.it>
Date: Tue, 19 Aug 2014 10:11:29 +0200
Subject: [PATCH] Added support for ripple effect to IE

Not sure which versions of IE are now supported, tested successfully in IE11, now I don't use SVG anymore for the ripple effect but just two nested DIV.
---
 material.js | 14 ++++++++++----
 ripple.less | 14 ++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/material.js b/material.js
index 484a4c13..19fa6eac 100644
--- a/material.js
+++ b/material.js
@@ -3,7 +3,7 @@ $(function (){
     var withRipple = ".btn:not('.btn-link'), .navbar a, .nav-tabs a";
 
     // Add ripple elements to material buttons
-    $(withRipple).append("<svg class=ripple-wrapper><defs></defs><g><ellipse rx=20 ry=20 class=ripple></ellipse></g></svg>");
+    $(withRipple).append("<div class=ripple-wrapper><div class=ripple></div></div>");
 
     // Add fake-checkbox to material checkboxes
     $(".checkbox label input").after("<span class=\"bubble\"></span><span class=\"check\"></span><span class=\"box\"></span>");
@@ -12,7 +12,7 @@ $(function (){
     $(".radio label input").after("<span class=\"bubble\"></span><span class=\"circle\"></span><span class=\"check\"></span>");
 
     // Add elements for material inputs
-    $("input.form-control, textarea.form-control").each( function() {
+    $("input.form-control, textarea.form-control, select.form-control").each( function() {
         $(this).wrap("<div class=form-control-wrapper></div>");
         $(this).after("<span class=material-input></span>");
         if ($(this).hasClass("floating-label")) {
@@ -50,11 +50,17 @@ $(function (){
         var relY = e.pageY - parentOffset.top;
 
         // Move ripple to the click position
-        $ripple.attr({"cy":relY, "cx": relX});
+        $ripple.attr({"style": "top: " + relY + "px; left:" + relX + "px"});
 
         // Start the animation
         $rippleWrapper.attr("class", "ripple-wrapper").data("animating", true);
-        $ripple.attr("class", "ripple ripple-on").css("transform", "scale(" + $rippleWrapper.width() / 20 + ")");
+        var scaleVal = "scale(" + Math.round($rippleWrapper.width() / 10) + ")";
+        $ripple.attr("class", "ripple ripple-on").css({
+            "-ms-transform": scaleVal,
+            "-moz-transform": scaleVal,
+            "-webkit-transform": scaleVal,
+            "transform": scaleVal
+        });
         setTimeout(function() {
             $rippleWrapper.attr("class", "ripple-wrapper").data("animating", false).trigger("rippleEnd");
         }, 500);
diff --git a/ripple.less b/ripple.less
index d6e0b048..623afb8f 100644
--- a/ripple.less
+++ b/ripple.less
@@ -11,9 +11,13 @@
     border-radius: 2px;
 }
 .ripple {
-    fill: black;
-    fill-opacity: 0.05;
-    stroke: none;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    margin-left: -10px;
+    margin-top: -10px;
+    border-radius: 100%;
+    background-color: rgba(0,0,0,0.05);
     -webkit-transform: scale(1);
     -ms-transform: scale(1);
     transform: scale(1);
@@ -23,8 +27,10 @@
     opacity: 0;
 }
 .ripple.ripple-on {
-  transition: opacity 0.15s ease-in 0s -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
   -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+  -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+  -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+  transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
   opacity: 1;
 }
 .ripple.ripple-out {