fix(ripple): Ensure hover/focus states have proper z-index (#2204)

Previously, if the ripple surface had a non-statically-positioned child element (e.g., `position: relative`), the hover/focus wash was displayed _below_ the child instead of _above_ it.
material-components · Feb 6, 2018 · 751dabd · 751dabd
1 parent 3ba2dc8
commit 751dabd
Showing 1 changed file with 1 addition and 0 deletions.
diff --git a/packages/mdc-ripple/_mixins.scss b/packages/mdc-ripple/_mixins.scss
@@ -41,6 +41,7 @@
 
   &::before {
     transition: opacity $mdc-states-wash-duration linear;
+    z-index: 1; // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements
   }
 
   // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)