feat(ripple): Implement improved graceful degradation for ripple

Resolves #189
material-components · Feb 22, 2017 · bc73a22 · bc73a22
1 parent d51022b
commit bc73a22
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 52 deletions.
diff --git a/demos/button.html b/demos/button.html
@@ -308,11 +308,9 @@ <h2>Dark theme</h2>
           }
         }, 250);
         function init() {
-          var btns = document.querySelectorAll('.mdc-button');
+          var btns = document.querySelectorAll('.mdc-button:not([data-demo-no-js]');
           for (var i = 0, btn; btn = btns[i]; i++) {
-            if (!btn.hasAttribute('data-demo-no-js')) {
-              mdc.ripple.MDCRipple.attachTo(btn);
-            }
+            mdc.ripple.MDCRipple.attachTo(btn);
           }
         }
       })();

diff --git a/demos/fab.html b/demos/fab.html
@@ -78,6 +78,29 @@ <h1>MDC FAB</h1>
             </span>
           </button>
         </fieldset>
+        <fieldset>
+          <legend>CSS Only FABs</legend>
+          <button class="mdc-fab material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+          <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+          <button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+          <button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+        </fieldset>
         <fieldset disabled>
           <legend>Disabled FABs</legend>
           <button class="mdc-fab material-icons" aria-label="Favorite">
@@ -118,7 +141,7 @@ <h1>MDC FAB</h1>
           }
         }, 250);
         function init() {
-          var fabs = document.querySelectorAll('.mdc-fab');
+          var fabs = document.querySelectorAll('.mdc-fab:not([data-demo-no-js])');
           for (var i = 0, fab; fab = fabs[i]; i++) {
             mdc.ripple.MDCRipple.attachTo(fab);
           }

diff --git a/demos/ripple.html b/demos/ripple.html
@@ -187,10 +187,8 @@ <h2>Applied to <code>&lt;button&gt; element - CSS Only</h2>
     <script src="assets/material-components-web.js" charset="utf-8"></script>
     <script>
       (function(global) {
-        [].forEach.call(document.querySelectorAll('.mdc-ripple-surface'), function(surface) {
-          if (!surface.hasAttribute('data-demo-no-js')) {
-            mdc.ripple.MDCRipple.attachTo(surface);
-          }
+        [].forEach.call(document.querySelectorAll('.mdc-ripple-surface:not([data-demo-no-js]'), function(surface) {
+          mdc.ripple.MDCRipple.attachTo(surface);
         });
       })(this);
     </script>

diff --git a/packages/mdc-fab/mdc-fab.scss b/packages/mdc-fab/mdc-fab.scss
@@ -67,6 +67,7 @@
     height: 100%;
     transition: mdc-animation-exit(opacity, 120ms);
     border-radius: inherit;
+    background: rgba(0, 0, 0, .2);
     content: "";
     opacity: 0;
   }

diff --git a/packages/mdc-ripple/_mixins.scss b/packages/mdc-ripple/_mixins.scss
@@ -43,11 +43,13 @@
   will-change: transform, opacity;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  &:hover::before,
-  &:focus::before,
-  &:active::after {
-    transition-duration: 85ms;
-    opacity: .6;
+  &:not(.mdc-ripple-upgraded) {
+    &:hover::before,
+    &:focus::before,
+    &:active::after {
+      transition-duration: 85ms;
+      opacity: .6;
+    }
   }
 }
 
@@ -109,29 +111,12 @@
   }
   // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 
-  &.mdc-ripple-upgraded {
-    &#{$pseudo} {
-      top: calc(50% - #{$radius});
-      left: calc(50% - #{$radius});
-      width: $radius * 2;
-      height: $radius * 2;
-      transform: scale(var(--mdc-ripple-fg-scale, 0));
-      transition-duration: 0ms;
-    }
-
-    &:active#{$pseudo},
-    &:focus#{$pseudo} {
-      opacity: 0;
-    }
-
-    &:active:hover#{$pseudo},
-    &:focus:hover#{$pseudo} {
-      opacity: .6;
-    }
-
-    &.mdc-ripple-upgraded--background-active#{$pseudo} {
-      opacity: .99999;
-    }
+  &.mdc-ripple-upgraded#{$pseudo} {
+    top: calc(50% - #{$radius});
+    left: calc(50% - #{$radius});
+    width: $radius * 2;
+    height: $radius * 2;
+    transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
 
   &.mdc-ripple-upgraded--background-active#{$pseudo} {
@@ -157,16 +142,6 @@
     height: var(--mdc-ripple-fg-size, $radius);
     transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
-
-  &.mdc-ripple-upgraded--unbounded {
-    &:active#{$pseudo},
-    &:hover#{$pseudo},
-    &:focus#{$pseudo},
-    &:active:hover#{$pseudo},
-    &:focus:hover#{$pseudo} {
-      opacity: 0;
-    }
-  }
 }
 
 @mixin mdc-ripple-fg-base_($config) {
@@ -208,12 +183,8 @@
       left: 0;
       width: var(--mdc-ripple-fg-size, $radius);
       height: var(--mdc-ripple-fg-size, $radius);
-      transform: scale(var(--mdc-ripple-fg-scale, 1));
+      transform: scale(0);
       transform-origin: center center;
-      transition: none;
-    }
-
-    &:active#{$pseudo} {
       opacity: 0;
     }
   }