What is the best way to globally change the color of the ink in all paper elements used on my site?

[Scott Beeson]

I tried simply adding #ink to my custom CSS, but even with the !important attribute it doesn't affect anything.

[Marco Scannadinari]

The #ink elements are within shadow DOM, so I believe:

* /deep/ #ink { .. }

[Rob Dodson]

Answered on SO: http://stackoverflow.com/questions/25995224/what-is-the-best-way-to-globally-change-the-color-of-the-ink-in-all-paper-elemen/25999684#25999684

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/adc3e87e-aa04-470b-850d-2f945b23fdef%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Scott Beeson]

What is the difference between the following solutions?

::shadow #ink { .. }

/deep/ #ink { .. }

[Scott Beeson]

the "deep" solution doesn't work for me.  Possibly because I'm using LESS?  My compiler doesn't seem to like it.  The "shadow" solution does work however.

[Takayoshi Kochi]

::shadow only applies to the shadow roots in the current tree scope, while /deep/ is a combinator

which penetrates any number of shadow root boundaries.  So if you have an element with #ink

in nested shadow roots, only the rule with /deep/ can match.

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/06fb1f72-6d21-4a4a-a0f5-43543a6c61cf%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
Takayoshi Kochi

[Rob Dodson]

I would recommend raising an issue with the LESS team. Both ::shadow and /deep/ have shipped in Chrome (and I believe Opera) so they're valid CSS that need to be supported

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CADP2%3Dhppd4Kf3qjnuLMc4Zr4ATq7V-%3D-i8ffwaJmPYynMcMTtA%40mail.gmail.com.

[Scott Beeson]

Thanks, I did find an existing issue on the subject.  It says they did add support, so it must be something with my implementation.

Thanks for the help though, I have it all working as needed!

[Brian Sturgill]

On Tuesday, September 23, 2014 8:09:45 PM UTC-6, Rob Dodson wrote:

I would recommend raising an issue with the LESS team. Both ::shadow and /deep/ have shipped in Chrome (and I believe Opera) so they're valid CSS that need to be supported

On Tue, Sep 23, 2014 at 6:31 PM, Takayoshi Kochi <ko...@chromium.org> wrote:

::shadow only applies to the shadow roots in the current tree scope, while /deep/ is a combinator

which penetrates any number of shadow root boundaries.  So if you have an element with #ink

in nested shadow roots, only the rule with /deep/ can match.

Just wanted to add feedback to the polymer team that #ink is a very poor choice here. Surely it out to be #paper-ink or #polymer-ink.

As more and more web component sets become available, there are going to be clashes in the global CSS namespace.

 

[Rob Dodson]

That's a good point. I'll open an issue.

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/75a1e42e-4380-48e2-bd38-a9c50b6477d1%40googlegroups.com.

[Rob Dodson]

https://github.com/Polymer/paper-elements/issues/16

[Brian Sturgill]

Wow, fastest resolution of an issue ever!

Probably needs to to make into the documentation.

For example:

http://www.polymer-project.org/docs/elements/material.html

is recommending #ripple and #ink.

Brian

--

Brian