CODEWITHSUNDEEP
csspolymerpolymer-1.0
Let Me Tink About It
Let Me Tink About It

Reputation: 16102

Polymer 1.0: How to style <paper-ripple> color inside <paper-tab> element?

I have an element, let's call it x-foo. Inside x-foo, I am using <paper-tabs>.

Question

How do I change the <paper-tabs> ripple color from (the default) yellow to white?

Bar color is exposed. But not ripple color.

Here is the documentation I followed to change the bar color. The problem is that the element documentation at the bottom of this page does not explain or expose the ripple color in the same way.

Code

Here is what I have working so far. And what I tried that is not working.

:host {
  --paper-tabs-selection-bar-color: var(--default-primary-color); /* Works */
  --paper-ripple-color: white; /* Does not work */
}

Upvotes: 4

Views: 1759

Answers (3)

Let Me Tink About It
Let Me Tink About It

Reputation: 16102

Here is what worked for me.

<style>
  :host {
    --paper-tab-ink: var(--accent-color);
  }
  paper-tabs {
    --paper-tabs-selection-bar-color: var(--accent-color);
  }
</style>

Upvotes: 5

Yaron Miro
Yaron Miro

Reputation: 111

My tip for you is to always check the source code for that element and then you can see how it was structured :) There you can find the css var for setting the "ripple" effect color. The var name is --paper-tab-ink You can see the reference for that css var here

Upvotes: 4

lcyh
lcyh

Reputation: 94

You can use the /deep/ combinator to pierce the shadow DOM, combined with #ink to select for the ripple color.

Here's an example with a white ripple: https://jsbin.com/jiqebamire/edit?html,output

Upvotes: 0

Related Questions