improved mobile compatibility

dist/css/material-wfont.css

@@ -5418,6 +5418,15 @@ icon-material-lightgrey {
 .modal {
   background: rgba(0, 0, 0, 0.3);
 }
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+*:focus {
+  outline: 0;
+  border: none;
+  color: rgba(0, 0, 0, 0);
+}
 .snackbar {
   background-color: #323232;
   color: rgba(255, 255, 255, 0.84);

dist/css/material.css

@@ -5411,6 +5411,15 @@ icon-material-lightgrey {
 .modal {
   background: rgba(0, 0, 0, 0.3);
 }
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+*:focus {
+  outline: 0;
+  border: none;
+  color: rgba(0, 0, 0, 0);
+}
 .snackbar {
   background-color: #323232;
   color: rgba(255, 255, 255, 0.84);

dist/css/ripples.css

@@ -31,7 +31,7 @@
 .ripple.ripple-on {
   -webkit-transition: opacity 0.15s ease-in 0s, -webkit-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: 0.1;
+  opacity: 0.15;
 }
 .ripple.ripple-out {
   -webkit-transition: opacity 0.1s linear 0s !important;

dist/css/ripples.css.map

@@ -1 +1 @@
-{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA;EACI,kBAAA;;AAEJ;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,sBAAA;;AAEJ;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qCAAA;EACA,WAAW,QAAX;EACA,qBAAA;EACA,UAAA;EACA,oBAAA;;AAEJ,OAAO;EACH,qDAAqD,iCAArD;EACA,YAAA;;AAEJ,OAAO;EACH,6CAAA;EACA,UAAA"}
+{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA;EACI,kBAAA;;AAEJ;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,sBAAA;;AAEJ;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qCAAA;EACA,WAAW,QAAX;EACA,qBAAA;EACA,UAAA;EACA,oBAAA;;AAEJ,OAAO;EACH,qDAAqD,iCAArD;EACA,aAAA;;AAEJ,OAAO;EACH,6CAAA;EACA,UAAA"}

dist/css/ripples.min.css

@@ -1 +1 @@
-.withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(0.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(0.4,0,.2,1) .1s;opacity:.1}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0}
+.withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(0.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(0.4,0,.2,1) .1s;opacity:.15}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0}

dist/js/ripples.js

@@ -1,5 +1,5 @@
 /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
-/* globals jQuery */
+/* globals jQuery, navigator */
 
 (function($) {
   $.ripples = function(options) {
@@ -10,6 +10,11 @@
     };
 
 
+    function isTouch() {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    }
+
+
     // Fade out the ripple and then destroy it
     function rippleOut(ripple) {
 
@@ -31,7 +36,11 @@
 
 
     $(document)
-    .on("mousedown", options.target, function(e) {
+    .on("mousedown touchstart", options.target, function(e) {
+      if (isTouch() && e.type == "mousedown") {
+        return false;
+      }
+
       // If the ripple wrapper does not exists, create it
       if (!$(this).find(".ripple-wrapper").length) {
         $(this).append("<div class=ripple-wrapper></div>");
@@ -39,10 +48,24 @@
 
       var wrapper = $(this).find(".ripple-wrapper");
 
-      // Get the mouse position relative to the ripple wrapper
-      var wrapperOffset = wrapper.offset();
-      var relX = e.pageX - wrapperOffset.left;
-      var relY = e.pageY - wrapperOffset.top;
+
+      var wrapperOffset = wrapper.offset(),
+          relX,
+          relY;
+      if (!isTouch()) {
+        // Get the mouse position relative to the ripple wrapper
+        relX = e.pageX - wrapperOffset.left;
+        relY = e.pageY - wrapperOffset.top;
+      } else {
+        // Make sure the user is using only one finger and then get the touch position relative to the ripple wrapper
+        e = e.originalEvent;
+        if (e.touches.length === 1) {
+          relX = e.touches[0].pageX - wrapperOffset.left;
+          relY = e.touches[0].pageY - wrapperOffset.top;
+        } else {
+          return;
+        }
+      }
 
       // Meet the new ripple
       var ripple = $("<div></div>");

dist/js/ripples.min.js

@@ -1,2 +1,2 @@
-!function(a){a.ripples=function(b){function c(a){a.off(),a.addClass("ripple-out"),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})}var d={target:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"};b=a.extend(d,b),a(document).on("mousedown",b.target,function(b){a(this).find(".ripple-wrapper").length||a(this).append("<div class=ripple-wrapper></div>");var d=a(this).find(".ripple-wrapper"),e=d.offset(),f=b.pageX-e.left,g=b.pageY-e.top,h=a("<div></div>");h.addClass("ripple"),h.css({left:f,top:g}),h.css({"background-color":window.getComputedStyle(a(this)[0]).color}),d.append(h),function(){return window.getComputedStyle(h[0]).opacity}();var i=Math.max(a(this).outerWidth(),a(this).outerHeight())/h.outerWidth()*2.5;h.css({"-ms-transform":"scale("+i+")","-moz-transform":"scale("+i+")","-webkit-transform":"scale("+i+")",transform:"scale("+i+")"}),h.addClass("ripple-on"),h.data("animating","on"),h.data("mousedown","on"),setTimeout(function(){h.data("animating","off"),"off"==h.data("mousedown")&&c(h)},500),d.on("mouseup mouseleave",function(){h.data("mousedown","off"),"off"==h.data("animating")&&c(h)})})},a.fn.ripples=function(){a.ripples({target:a(this)})}}(jQuery);
+!function(a){a.ripples=function(b){function c(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}function d(a){a.off(),a.addClass("ripple-out"),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})}var e={target:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"};b=a.extend(e,b),a(document).on("mousedown touchstart",b.target,function(b){if(c()&&"mousedown"==b.type)return!1;a(this).find(".ripple-wrapper").length||a(this).append("<div class=ripple-wrapper></div>");var e,f,g=a(this).find(".ripple-wrapper"),h=g.offset();if(c()){if(b=b.originalEvent,1!==b.touches.length)return;e=b.touches[0].pageX-h.left,f=b.touches[0].pageY-h.top}else e=b.pageX-h.left,f=b.pageY-h.top;var i=a("<div></div>");i.addClass("ripple"),i.css({left:e,top:f}),i.css({"background-color":window.getComputedStyle(a(this)[0]).color}),g.append(i),function(){return window.getComputedStyle(i[0]).opacity}();var j=Math.max(a(this).outerWidth(),a(this).outerHeight())/i.outerWidth()*2.5;i.css({"-ms-transform":"scale("+j+")","-moz-transform":"scale("+j+")","-webkit-transform":"scale("+j+")",transform:"scale("+j+")"}),i.addClass("ripple-on"),i.data("animating","on"),i.data("mousedown","on"),setTimeout(function(){i.data("animating","off"),"off"==i.data("mousedown")&&d(i)},500),g.on("mouseup mouseleave",function(){i.data("mousedown","off"),"off"==i.data("animating")&&d(i)})})},a.fn.ripples=function(){a.ripples({target:a(this)})}}(jQuery);
 //# sourceMappingURL=ripples.min.js.map

dist/js/ripples.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","ripples","options","rippleOut","ripple","off","addClass","on","remove","defaultOptions","target","extend","document","e","this","find","length","append","wrapper","wrapperOffset","offset","relX","pageX","left","relY","pageY","top","css","background-color","window","getComputedStyle","color","opacity","size","Math","max","outerWidth","outerHeight","-ms-transform","-moz-transform","-webkit-transform","transform","data","setTimeout","fn","jQuery"],"mappings":"CAGA,SAAUA,GACRA,EAAEC,QAAU,SAASC,GASnB,QAASC,GAAUC,GAGjBA,EAAOC,MAGPD,EAAOE,SAAS,cAGhBF,EAAOG,GAAG,mEAAoE,WAC5EH,EAAOI,WAhBX,GAAIC,IACFC,OAAU,gHAqBZR,GAAUF,EAAEW,OAAOF,EAAgBP,GAGnCF,EAAEY,UACDL,GAAG,YAAaL,EAAQQ,OAAQ,SAASG,GAEnCb,EAAEc,MAAMC,KAAK,mBAAmBC,QACnChB,EAAEc,MAAMG,OAAO,mCAGjB,IAAIC,GAAUlB,EAAEc,MAAMC,KAAK,mBAGvBI,EAAgBD,EAAQE,SACxBC,EAAOR,EAAES,MAAQH,EAAcI,KAC/BC,EAAOX,EAAEY,MAAQN,EAAcO,IAG/BtB,EAASJ,EAAE,cAGfI,GAAOE,SAAS,UAGhBF,EAAOuB,KAAKJ,KAAQF,EAAMK,IAAOF,IAGjCpB,EAAOuB,KAAKC,mBAAoBC,OAAOC,iBAAiB9B,EAAEc,MAAM,IAAIiB,QAGpEb,EAAQD,OAAOb,GAGf,WAAc,MAAOyB,QAAOC,iBAAiB1B,EAAO,IAAI4B,UAGxD,IAAIC,GAAQC,KAAKC,IAAInC,EAAEc,MAAMsB,aAAcpC,EAAEc,MAAMuB,eAAiBjC,EAAOgC,aAAgB,GAE3FhC,GAAOuB,KACLW,gBAAiB,SAAWL,EAAO,IACnCM,iBAAkB,SAAWN,EAAO,IACpCO,oBAAqB,SAAWP,EAAO,IACvCQ,UAAa,SAAWR,EAAO,MAIjC7B,EAAOE,SAAS,aAChBF,EAAOsC,KAAK,YAAa,MACzBtC,EAAOsC,KAAK,YAAa,MAGzBC,WAAW,WACTvC,EAAOsC,KAAK,YAAa,OACO,OAA5BtC,EAAOsC,KAAK,cACdvC,EAAUC,IAEX,KAGHc,EAAQX,GAAG,qBAAsB,WAC/BH,EAAOsC,KAAK,YAAa,OAEO,OAA5BtC,EAAOsC,KAAK,cACdvC,EAAUC,QAQlBJ,EAAE4C,GAAG3C,QAAU,WACbD,EAAEC,SAASS,OAAUV,EAAEc,UAGxB+B"}
+{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","ripples","options","isTouch","test","navigator","userAgent","rippleOut","ripple","off","addClass","on","remove","defaultOptions","target","extend","document","e","type","this","find","length","append","relX","relY","wrapper","wrapperOffset","offset","originalEvent","touches","pageX","left","pageY","top","css","background-color","window","getComputedStyle","color","opacity","size","Math","max","outerWidth","outerHeight","-ms-transform","-moz-transform","-webkit-transform","transform","data","setTimeout","fn","jQuery"],"mappings":"CAGA,SAAUA,GACRA,EAAEC,QAAU,SAASC,GAQnB,QAASC,KACP,MAAO,iEAAiEC,KAAKC,UAAUC,WAKzF,QAASC,GAAUC,GAGjBA,EAAOC,MAGPD,EAAOE,SAAS,cAGhBF,EAAOG,GAAG,mEAAoE,WAC5EH,EAAOI,WArBX,GAAIC,IACFC,OAAU,gHA0BZZ,GAAUF,EAAEe,OAAOF,EAAgBX,GAGnCF,EAAEgB,UACDL,GAAG,uBAAwBT,EAAQY,OAAQ,SAASG,GACnD,GAAId,KAAuB,aAAVc,EAAEC,KACjB,OAAO,CAIJlB,GAAEmB,MAAMC,KAAK,mBAAmBC,QACnCrB,EAAEmB,MAAMG,OAAO,mCAGjB,IAIIC,GACAC,EALAC,EAAUzB,EAAEmB,MAAMC,KAAK,mBAGvBM,EAAgBD,EAAQE,QAG5B,IAAKxB,IAIE,CAGL,GADAc,EAAIA,EAAEW,cACmB,IAArBX,EAAEY,QAAQR,OAIZ,MAHAE,GAAON,EAAEY,QAAQ,GAAGC,MAAQJ,EAAcK,KAC1CP,EAAOP,EAAEY,QAAQ,GAAGG,MAAQN,EAAcO,QAP5CV,GAAON,EAAEa,MAAQJ,EAAcK,KAC/BP,EAAOP,EAAEe,MAAQN,EAAcO,GAajC,IAAIzB,GAASR,EAAE,cAGfQ,GAAOE,SAAS,UAGhBF,EAAO0B,KAAKH,KAAQR,EAAMU,IAAOT,IAGjChB,EAAO0B,KAAKC,mBAAoBC,OAAOC,iBAAiBrC,EAAEmB,MAAM,IAAImB,QAGpEb,EAAQH,OAAOd,GAGf,WAAc,MAAO4B,QAAOC,iBAAiB7B,EAAO,IAAI+B,UAGxD,IAAIC,GAAQC,KAAKC,IAAI1C,EAAEmB,MAAMwB,aAAc3C,EAAEmB,MAAMyB,eAAiBpC,EAAOmC,aAAgB,GAE3FnC,GAAO0B,KACLW,gBAAiB,SAAWL,EAAO,IACnCM,iBAAkB,SAAWN,EAAO,IACpCO,oBAAqB,SAAWP,EAAO,IACvCQ,UAAa,SAAWR,EAAO,MAIjChC,EAAOE,SAAS,aAChBF,EAAOyC,KAAK,YAAa,MACzBzC,EAAOyC,KAAK,YAAa,MAGzBC,WAAW,WACT1C,EAAOyC,KAAK,YAAa,OACO,OAA5BzC,EAAOyC,KAAK,cACd1C,EAAUC,IAEX,KAGHiB,EAAQd,GAAG,qBAAsB,WAC/BH,EAAOyC,KAAK,YAAa,OAEO,OAA5BzC,EAAOyC,KAAK,cACd1C,EAAUC,QAQlBR,EAAEmD,GAAGlD,QAAU,WACbD,EAAEC,SAASa,OAAUd,EAAEmB,UAGxBiC"}

less/material.less

@@ -107,6 +107,18 @@ legend {
   background: rgba(0,0,0,0.3);
 }
 
+// Prevent highlight on mobile
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+  &:focus {
+        outline: 0;
+        border:none;
+        color: rgba(0, 0, 0, 0);
+  }
+}
+
+
 // External plugins
 @import "_plugin-snackbarjs.less";
 @import "_plugin-nouislider.less";

less/ripples.less

@@ -26,7 +26,7 @@
 }
 .ripple.ripple-on {
     transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-    opacity: 0.1;
+    opacity: 0.15;
 }
 .ripple.ripple-out {
     transition: opacity 0.1s linear 0s !important;

scripts/ripples.js

@@ -1,5 +1,5 @@
 /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
-/* globals jQuery */
+/* globals jQuery, navigator */
 
 (function($) {
   $.ripples = function(options) {
@@ -10,6 +10,11 @@
     };
 
 
+    function isTouch() {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    }
+
+
     // Fade out the ripple and then destroy it
     function rippleOut(ripple) {
 
@@ -31,7 +36,11 @@
 
 
     $(document)
-    .on("mousedown", options.target, function(e) {
+    .on("mousedown touchstart", options.target, function(e) {
+      if (isTouch() && e.type == "mousedown") {
+        return false;
+      }
+
       // If the ripple wrapper does not exists, create it
       if (!$(this).find(".ripple-wrapper").length) {
         $(this).append("<div class=ripple-wrapper></div>");
@@ -39,10 +48,24 @@
 
       var wrapper = $(this).find(".ripple-wrapper");
 
-      // Get the mouse position relative to the ripple wrapper
-      var wrapperOffset = wrapper.offset();
-      var relX = e.pageX - wrapperOffset.left;
-      var relY = e.pageY - wrapperOffset.top;
+
+      var wrapperOffset = wrapper.offset(),
+          relX,
+          relY;
+      if (!isTouch()) {
+        // Get the mouse position relative to the ripple wrapper
+        relX = e.pageX - wrapperOffset.left;
+        relY = e.pageY - wrapperOffset.top;
+      } else {
+        // Make sure the user is using only one finger and then get the touch position relative to the ripple wrapper
+        e = e.originalEvent;
+        if (e.touches.length === 1) {
+          relX = e.touches[0].pageX - wrapperOffset.left;
+          relY = e.touches[0].pageY - wrapperOffset.top;
+        } else {
+          return;
+        }
+      }
 
       // Meet the new ripple
       var ripple = $("<div></div>");