feat(ripple): no longer require additional setup when using MatRipple directive

Currently if a developer wants to use the `matRipple` directive, he needs to set the position of the element to either `absolute` or `relative`. This makes the `matRipple` directive kind of not intuitive. Developers should be just able to place the `matRipple` directive, and everything works.

Developers should not ask themselves at some point: _Why do my ripples don't display at all? ... Ahh I need to apply `position: relative` to the host element_

```html
<button matRipple>Button with ripple</button>
<mat-toolbar matRipple>Toolbar with ripple</button>
<mat-card matRipple>Card with ripple</mat-card>
```

Author: devversion

src/demo-app/ripple/ripple-demo.html

@@ -56,4 +56,18 @@
       Click me
     </div>
   </section>
+
+  <h3>MatRipple without options</h3>
+
+  <p>
+    <mat-card matRipple>Just a normal card.</mat-card>
+  </p>
+
+  <p>
+    <mat-toolbar matRipple>Just a normal toolbar</mat-toolbar>
+  </p>
+
+  <p>
+    <button matRipple>Just a normal button</button>
+  </p>
 </div>

src/demo-app/ripple/ripple-demo.scss

@@ -12,7 +12,6 @@
     font-size: 24px;
     height: 150px;
     line-height: 150px;
-    position: relative;
     text-align: center;
     transition: all 200ms linear;
     width: 200px;
@@ -27,7 +26,6 @@
 
     &.demo-ripple-rounded {
       border-radius: 50%;
-      overflow: hidden;
       // z-index needed to make clipping to border-radius work correctly.
       // http://stackoverflow.com/questions/20001515/
       z-index: 1;

src/lib/button-toggle/button-toggle.scss

@@ -92,7 +92,9 @@ $mat-button-toggle-border-radius: 2px !default;
   }
 }
 
-.mat-button-toggle-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-button-toggle .mat-button-toggle-ripple {
   @include mat-fill;
 
   // Disable pointer events for the ripple container, because the container will overlay the user

src/lib/button/button.scss

@@ -65,8 +65,11 @@
   }
 }
 
-// The ripple container should match the bounds of the entire button.
-.mat-button-ripple, .mat-button-focus-overlay {
+// The ripple container and focus overlay should match the bounds of the entire button.
+// Increase specificity for the ripple container because ripple styles are part of
+// the `mat-core` mixin and can potentially overwrite the absolute position of the container.
+.mat-button-ripple.mat-ripple,
+.mat-button-focus-overlay {
   @include mat-fill;
 
   // Disable pointer events for the ripple container and focus overlay because the container

src/lib/checkbox/checkbox.scss

@@ -431,7 +431,9 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   left: 50%;
 }
 
-.mat-checkbox-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-checkbox .mat-checkbox-ripple {
   position: absolute;
   left: calc(50% - #{$_mat-checkbox-ripple-radius});
   top: calc(50% - #{$_mat-checkbox-ripple-radius});

src/lib/core/option/option.scss

@@ -57,7 +57,9 @@
   text-overflow: ellipsis;
 }
 
-.mat-option-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-option .mat-option-ripple {
   @include mat-fill;
 
   // Disable pointer events for the ripple container because the container will overlay the

src/lib/core/ripple/_ripple.scss

@@ -4,11 +4,16 @@
 $mat-ripple-color-opacity: 0.1;
 
 @mixin mat-ripple() {
+
   // The host element of an mat-ripple directive should always have a position of "absolute" or
-  // "relative" so that the ripple divs it creates inside itself are correctly positioned.
+  // "relative" so that the ripples inside are correctly positioned relatively to the container.
   .mat-ripple {
     overflow: hidden;
 
+    // By default, every ripple container should have position: relative in favor of creating an
+    // easy API for developers using the MatRipple directive.
+    position: relative;
+
     // In high contrast mode the ripple is opaque, causing it to obstruct the content.
     @include cdk-high-contrast {
       display: none;

src/lib/menu/menu.scss

@@ -75,7 +75,9 @@ button.mat-menu-item {
   width: 100%;
 }
 
-.mat-menu-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-menu-item .mat-menu-ripple {
   @include mat-fill;
 
   // Prevent any pointer events on the ripple container for a menu item. The ripple container is

src/lib/radio/radio.scss

@@ -115,7 +115,9 @@ $mat-radio-ripple-radius: 25px;
   cursor: default;
 }
 
-.mat-radio-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-radio-button .mat-radio-ripple {
   position: absolute;
   left: calc(50% - #{$mat-radio-ripple-radius});
   top: calc(50% - #{$mat-radio-ripple-radius});

src/lib/slide-toggle/slide-toggle.scss

@@ -172,7 +172,9 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 }
 
 // Ripple positioning for the slide-toggle. Moves the ripple container into the center of the thumb.
-.mat-slide-toggle-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-slide-toggle .mat-slide-toggle-ripple {
   position: absolute;
   top: calc(50% - #{$mat-slide-toggle-ripple-radius});
   left: calc(50% - #{$mat-slide-toggle-ripple-radius});

src/lib/stepper/step-header.scss

@@ -51,7 +51,9 @@ $mat-step-header-icon-size: 16px !default;
   overflow: hidden;
 }
 
-.mat-step-header-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-step-header .mat-step-header-ripple {
   @include mat-fill;
   pointer-events: none;
 }