Menu
I am trying to style the paper-drawer-panel using the Custom CSS Mixins as mentioned here. The paper-drawer-panel.css file applies
@apply(--paper-drawer-panel-left-drawer-container);
@apply(--paper-drawer-panel-main-container);
respectively for the drawer and the main containers. But, the styles set using the mixins do not seem to be working
The below is the code for paper-drawer-panel demo I 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 over at https://elements.polymer-project.org/elements/paper-drawer-panel states that this is valid too.
Styling paper-drawer-panel:
To change the main container: paper-drawer-panel { --paper-drawer-panel-main-container: { background-color: gray; }; }
To change the drawer container when it's in the left side: paper-drawer-panel { --paper-drawer-panel-left-drawer-container: { background-color: white; }; }
So, what am I doing wrong in trying to get this simple thing working?
983
I am also testing the new styling schema of Polymer 1.0. It seems that you need to add is="custom-style" to the style tag.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
