How to override default Polymer CSS


Tags: css,polymer,web-component,shadow-dom

Problem :

Right now 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?



Solution :

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.


    CSS Howto..

    How to place a
    to the right of an input field

    How to pass to next line that cutted elements in a list?

    How to prevent html div from expanding when text size is changed

    How to put a footer in the bottom (but not fixed or stick!) with css [duplicate]

    How to flip which side a progress bar begins at with CSS

    Liferay: how to avoid rebuilding/redeploying CSS files

    How to turn on Visual Studio 2010 .css Intellisense on .less file

    How to prevent “jerking” of page in browser

    Chrome showing target link after event has been prevented

    How to do proportionate image gallery supporting both horizontal and vertical aspects?

    How to do Background Image horizontal slide

    How do I remove the padding between the content of the cell and the cell borders in a table? [duplicate]

    How to change a div top margin without leaving a white space?

    How to have different input text styles in same html form?

    Show/hide rows based on class in HTML

    How to tilt inner element forward when tilting outer back with css 3d transforms

    how do I give a div a responsive height

    How to create a table with fixed layout?

    CSS Hover Events, How to Trigger a Parent's Effect

    How can I turn off hardware acceleration for certain HTML elements via CSS?

    How can I apply a style to element if the user came to website using a link with an anchor/hash [closed]

    Javascript slide showing the last image 5 times

    how to make comment div active on hover

    How can I display a list in an x by y fashion?

    How to keep image position despite window/device size?

    How to convert a css only megamenu to jquery based

    How to override default styles in GWT 2.3?

    How to compare two css files and copy just the differences?

    How can i dynamically change title of input type file?

    CSS: How to make background of an element stretch across the entire page?