html - How do I use the new css feature in Polymer? -
i trying change css on paper-header-panel. according docs on polymers website can simple change shadow with:
paper-header-panel { --paper-header-panel-shadow: { height: 6px; bottom: -6px; box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); }; }
sadly can't work... tried change color on paper-toolbar, not work.
here code:
<!doctype html> <html> <head> <!-- polymer --> <script src='bower_components/webcomponentsjs/webcomponents.js'></script> <link rel='import' href='bower_components/polymer/polymer.html'> <link rel='import' href='bower_components/paper-header-panel/paper-header-panel.html'> <link rel='import' href='bower_components/paper-toolbar/paper-toolbar.html'> <link rel='import' href='bower_components/paper-icon-button/paper-icon-button.html'> <meta charset='utf-8'> <title>test</title> <style> paper-header-panel { --paper-header-panel-shadow: { height: 6px; bottom: -6px; box-shadow: inset 0px 5px 6px -3px rgba(0, 255, 0, 0.4); }; } paper-toolbar { --paper-toolbar-background: green; --paper-toolbar-color: white; } </style> </head> <body class='fullbleed layout vertical'> <paper-header-panel class='flex'> <paper-toolbar> <div>title</div> </paper-toolbar> </paper-header-panel> </body> </html>
where things go wrong?
i found reason. had set style is='custom-style'
.
<style is='custom-style'> paper-header-panel { --paper-header-panel-shadow: { height: 6px; bottom: -6px; box-shadow: inset 0px 5px 6px -3px rgba(0, 255, 0, 0.4); }; } paper-toolbar { --paper-toolbar-background: green; --paper-toolbar-color: white; } </style>
Comments
Post a Comment