Unable to style paper-drawer-panel in Polymer 1.0 using Custom CSS Mixins -
i trying style paper-drawer-panel using custom css mixins mentioned here. paper-drawer-panel.css file applies
@apply(--paper-drawer-panel-left-drawer-container); @apply(--paper-drawer-panel-main-container);
respectively drawer , main containers. but, styles set using mixins not seem working
below code paper-drawer-panel demo have used.
<html> <head> <title>paper-drawer-panel demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="bower_components/paper-styles/paper-styles.html"> <link rel="stylesheet" href="bower_components/paper-styles/demo.css"> <link rel="import" href="bower_components/paper-button/paper-button.html"> <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html"> <style> #drawerpanel { --paper-drawer-panel-left-drawer-container: { background-color: #eee; }; --paper-drawer-panel-main-container: { background-color: gray; }; } </style> </head> <body class="unresolved fullbleed"> <paper-drawer-panel id="drawerpanel"> <div drawer> <div>drawer content... </div> </div> <div main> <div> <paper-button paper-drawer-toggle raised>toggle drawer</paper-button> </div> </div> </paper-drawer-panel> </body> </html>
the documentation on @ https://elements.polymer-project.org/elements/paper-drawer-panel states valid too.
styling paper-drawer-panel:
to change main container: paper-drawer-panel { --paper-drawer-panel-main-container: { background-color: gray; }; }
to change drawer container when it's in left side: paper-drawer-panel { --paper-drawer-panel-left-drawer-container: { background-color: white; }; }
so, doing wrong in trying simple thing working?
i testing new styling schema of polymer 1.0. seems need add is="custom-style"
style tag.
Comments
Post a Comment