Geek Answers Handbook

Unable to create a paper panel in Polymer 1.0 using custom CSS mixes

I am trying to create a dashboard using Custom CSS Mixins as stated here . The file paper-drawer-panel.css is applied

@apply(--paper-drawer-panel-left-drawer-container);
@apply(--paper-drawer-panel-main-container);

respectively for the box and the main containers. But styles set using mixers don't seem to work. Below is the code to demonstrate the drawer panel.

<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 for https://elements.polymer-project.org/elements/paper-drawer-panel states that this is also true.

Panel for styling paper:

To change the main container: panel-box for documents {- paper-box-panel-main-container: {background-color: gray; }; }

, : -- {- -----: { background-color: white; }; }

, , ?

+4
1

Polymer 1.0. , is="custom-style" .

+7

More articles:


All Articles