paper-icon-button icon indicating copy to clipboard operation
paper-icon-button copied to clipboard

Make paper-ripple selector more specific

Open hcarmona opened this issue 8 years ago • 2 comments

Fixes 130 by making the selector more specific

hcarmona avatar Mar 03 '18 02:03 hcarmona

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 avatar Mar 05 '18 19:03 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 avatar Mar 07 '18 01:03 notwaldorf