Implement Ripple v2 component

[traviskaufman]

Spec reference (sort of): https://material.google.com/what-is-material/material-properties.html

[rfru]

TODO

• If not specified, ripple should default surface to parent container
• Depending on how auto-init will work, the ripple configuration attributes may need to be moved to the root ripple element itself rather than the surface

[rfru]

Preliminary README, subject to whether auto-init for ripple requires ripple DOM to already be constructed or whether it can be used as an attribute on the surface of interest (similar to mdl-js-ripple-effect from MDLv1)

Ink Ripple

The ink ripple implements the main touch interaction feedback component within Material Design.

HTML Attributes

Attribute	Type	Description
bounded	boolean	Whether the ink ripple is constrained to its surface container. Default: true
max-radius	int	A maximum radius for the drawn ripples. Default: 0 (auto)

Usage

The basic ripple markup is as follows:

<div class="mdl-ripple">
  <div class="mdl-ripple__background"></div>
  <div class="mdl-ripple__foreground">
    <div class="mdl-ripple__foreground-circle"></div>
  </div>
  <div class="mdl-ripple__foreground">
    <div class="mdl-ripple__foreground-circle"></div>
  </div>
  <div class="mdl-ripple__foreground">
    <div class="mdl-ripple__foreground-circle"></div>
  </div>
  <div class="mdl-ripple__foreground">
    <div class="mdl-ripple__foreground-circle"></div>
  </div>
</div>

By default, the ripple will automatically attach and draw using the parent element, though an alternative can be specified through the programmatic constructor.
For bounded ripples to function properly, you must set the container element to clip manually:

<div class="surface" style="overflow: hidden">
  <div class="mdl-ripple">
    ...
  </div>
</div>

[traviskaufman]

Codepen - http://codepen.io/traviskaufman/pen/YWRYaX?editors=0110

The approach I'm taking leverages CSS custom properties to set the positions ::before and ::after pseudo-elements in order to provide the ripple styles. This is nice because it means that extra DOM isn't necessary for the ripple to function, as should be the case anyway with styling. It's not nice because older browsers and current IE can't support it. Furthermore, it seems to be whack in Safari currently but hopefully I can fix those issues.