Make paper-ripple selector more specific

[hcarmona]

Fixes 130 by making the selector more specific

[notwaldorf]

I don't think this works; you can't target children of the distributed element (so nothing after the slotted( ). I've tried this patch locally, and I don't see the styles being applied.

While I'm trying to find a better fix, I think for now you have to style the paper-ripple at the point where you're distributing the button, so something like:

<custom-style>
  <style>
        paper-ripple {
          opacity: 0.6;
          color: red;
       }
  </style>
</custom-style>

<paper-icon-button-light>
  <button title="heart">
    <iron-icon icon="favorite"></iron-icon>
  </button>
</paper-icon-button-light>

/cc @kevinpschaaf

[notwaldorf]

I think there are only 2 choices available:

• if all you need to style is the opacity and color, we can inline style (on the paper-ripple) something like this, and you'd style the wrapping paper-icon-container-light (and give it the default of opacity 0.6 in the :host

opacity: inherit;
color: inherit;

• always require you (the user) to style the paper-ripple from the point you're distributing the button.

I'm leaning towards doing the default inherit, since that's probably what you need in 90% of cases.

WDYT?

[notwaldorf]

(see comments above)