refactor(styles): renamed ripple state classes to prevent potential name collisions

Author: robertmesserle

src/components/animate/_effects.scss

@@ -19,16 +19,16 @@
   transform-origin: 50% 50%;
   opacity: 0;
   border-radius: 50%;
-  &.placed {
+  &.md-ripple-placed {
     transition: all 0.65s $swift-ease-out-timing-function;
   }
-  &.centered {
+  &.md-ripple-scaled {
     transform: scale(1);
   }
-  &.full, &.visible {
+  &.md-ripple-full, &.md-ripple-visible {
     opacity: 0.15;
   }
-  &.held {
+  &.md-ripple-held {
     opacity: 0.15;
     transform: scale(0.35);
     transition: none;

src/core/services/ripple/ripple.js

@@ -123,20 +123,20 @@ function InkRippleService($window, $timeout) {
           rippleContainer.addClass('full visible');
           rippleContainer.css({ backgroundColor: css.backgroundColor.replace(')', ', 0.1').replace('(', 'a(') });
         }
-        rippleEl.addClass('placed visible centered full');
+        rippleEl.addClass('md-ripple-placed md-ripple-visible md-ripple-scaled md-ripple-full');
         rippleEl.css({ left: '50%', top: '50%' });
         $timeout(function () {
           if (rippleEl) {
-            rippleEl.removeClass('full');
-            if (!rippleEl.hasClass('visible')) {
+            rippleEl.removeClass('md-ripple-full');
+            if (!rippleEl.hasClass('md-ripple-visible')) {
               removeElement(rippleEl, 650);
               rippleEl = null;
             }
           }
-          rippleEl && rippleEl.removeClass('full');
+          rippleEl && rippleEl.removeClass('md-ripple-full');
           if (rippleContainer && options.dimBackground) {
-            rippleContainer.removeClass('full');
-            if (!rippleContainer.hasClass('visible')) rippleContainer.css({ backgroundColor: '' });
+            rippleContainer.removeClass('md-ripple-full');
+            if (!rippleContainer.hasClass('md-ripple-visible')) rippleContainer.css({ backgroundColor: '' });
           }
         }, 225, false);
       }, 0, false);
@@ -148,13 +148,13 @@ function InkRippleService($window, $timeout) {
         rippleEl = createRipple(ev.center.x, ev.center.y, true);
       } else if (ev.eventType === Hammer.INPUT_END && ev.isFinal) {
         if (rippleEl) {
-          rippleEl.removeClass('visible');
+          rippleEl.removeClass('md-ripple-visible');
           removeElement(rippleEl, 650);
           rippleEl = null;
         }
         if (rippleContainer && options.dimBackground) {
-          rippleContainer.removeClass('visible');
-          if (!rippleContainer.hasClass('full')) rippleContainer.css({ backgroundColor: '' });
+          rippleContainer.removeClass('md-ripple-visible');
+          if (!rippleContainer.hasClass('md-ripple-full')) rippleContainer.css({ backgroundColor: '' });
         }
       }
     }