Change color in paper-tabs in Firefox and Safari

369 views
Skip to first unread message

Federico Urban

unread,
Mar 13, 2015, 7:17:37 AM3/13/15
to polym...@googlegroups.com
Is there a way to use a CSS external file to change the color of the selection Bar in paper-tab component that works either in Safari and Firefox?

I've tried with the following settings that work on Chrome but not with the other Browsers

The default paper-tab component for the election Bar is yellow #FFFF8D

Thanks for you precious help.

Federico

 paper-tabs.pink paper-tab::shadow #ink {
     color: #ff4081;
     -moz-column-rule-color: #ff4081;
     -webkit-column-rule-color: #ff4081;
 }

 paper-tabs.pink {
     color: #ff4081;
     -moz-column-rule-color: #ff4081;
     -webkit-column-rule-color: #ff4081;
 }

paper-tabs::shadow paper-ripple#ink paper-tab::shadow #ink {
    background-color: #ff4081;
    -moz-column-rule-color: #ff4081;
    -webkit-column-rule-color: #ff4081;
    
}

paper-tabs::shadow #selectionBar {
    background-color: #ff4081;
    -moz-column-rule-color: #ff4081;
    -webkit-column-rule-color: #ff4081;

}

Arthur Evans

unread,
Mar 13, 2015, 1:42:36 PM3/13/15
to Federico Urban, polymer-dev
Hi Federico,

That should work fine. If you're using an external stylesheet, remember to add the shim-shadowdom attribute -- that will take care of transforming the stylesheet for polyfilled browsers. Try this in Firefox:


Note that stylesheet shimming is done at runtime, so if you have only a few rules that include shadow CSS selectors, like ::shadow, /deep/ or ::content, you're better off putting these in a separate stylesheet and only adding shim-shadowdom to that stylesheet.

-Arthur


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/83ee4b6a-79ce-459d-8b9b-9f48f7038b2f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages