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

[devversion]

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

---

<button matRipple>Button with ripple</button>

<mat-toolbar matRipple>Toolbar with ripple</button>

<mat-card matRipple>Card with ripple</mat-card>

References #7543.

@jelbourn Not sure if this should be either minor or major. Technically the increase of specificity can break people. Although there should be nobody that overwrites the ripple containers.

[crisbeto]

Code-wise LGTM, but I think we should evaluate whether this is a common enough use-case to warrant the increased specificity.

[crisbeto]

Consider nesting this under the .mat-button-toggle selector. Same goes for the other changed child selectors in this PR.

[devversion]

I considered doing that, but went with that approach because I wanted to separate the ripple stuff as much as I can from the actual component styles.

[jelbourn]

LGTM

There's about 89 instances of people overriding mat-something-ripple in Google, so we'll see if it causes any issues

[jelbourn]

Caretaker note: be on the lookout for failures where people are overriding mat-something-ripple

[ngbot]

Hi @devversion! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}