CODEWITHSUNDEEP
javascripthtmlcsspolymer
user899604
user899604

Reputation:

Polymer Change Ink ripple Colors

I'm pretty new to polymer and webdev in general. I went through the polymer tutorial and one thing I wanted to do was to change the ink ripple color in paper-tabs. In the documentation it says

paper-tabs.pink paper-tab::shadow #ink { color: #ff4081; }

But I don't know where I should put this, I tried looking at the paper-tabs.html source and the associated css file putting that line in either doesn't seem to work. I also created a separate .css file for my index.html with this line in it but that didn't work either.

I know this is probably something really easy but I've spent a bunch of time trying to figure it out. Thanks for the help.

Upvotes: 3

Views: 990

Answers (1)

robdodson
robdodson

Reputation: 6786

You can put the style in your own CSS file if you wish. The ::shadow and /deep/ selectors let you pierce the shadow boundary for the element so you can style its internals.

For example:

<style shim-shadowdom>
  paper-tabs /deep/ #ink {
    color: red;
  }
</style>

Here it is on jsbin

Because my CSS appears outside of a polymer element, I need to include the shim-shadowdom attribute to tell the polyfills to take affect in browsers that don't support Shadow DOM.

Upvotes: 3

Related Questions