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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -