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

acdvorak · web-flow · commit 751dabd40204 · 2018-02-06T14:35:49.000-08:00
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.
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)

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@`
`41`	`41`
`42`	`42`	`&::before {`
`43`	`43`	`transition: opacity $mdc-states-wash-duration linear;`
	`44`	`+ z-index: 1; // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements`
`44`	`45`	`}`
`45`	`46`
`46`	`47`	`// Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)`