How to override default Polymer CSS
core-toolbar has an
indent class that indents the title to the right by
60px, while material design dictates that the margin should actually be
80px (as a matter of fact the number
60 never shows throughout the documentation).
So I could easily go and edit it in
bower_components/core-toolbar/core-toolbar.css but the problem is that, once I move the project somewhere else, I'd have to make the same edit once I've done my bower installs etc..
Mind you that if I was to extend
core-toolbar say, I'd have a problem with
core-header-panel etc.. because it would be looking for either
<core-toolbar> or something with the class
"core-header" which is a bit of an annoyance, but it's something I can live with.
What's the best way to do something like this?
One approach might be to globally override core-toolbar's style using something like http://jsbin.com/soveyo/12/edit Note that I've only got native shadow dom support there.
Or you could do that in a particular instance if you'd prefer & remove the html /deep/ bit.
Or you might add your own class to the element you're giving as content to the toolbar & give it the indentation you want.