Having trouble with changing <core-drawer-panel> default width

Question

I started playing around with Polymer few days ago and so far I understand it quite good, but just now I ran into an problem. I tried to change default width of but I couldn't get the desired result. First I tried to change width in css only with these changes:

  #navheader {
      background-color: #56BA89;
  }
  core-drawer-panel .transition > #main{
      left:100px!important;
  }

  core-drawer-panel .transition > #drawer{
      width:100px!important;
  }

  core-drawer-panel .narrow-layout > #drawer:not(.core-selected){
      width:100px!important;
  }

and here is the html part:

<core-scaffold>

  <core-header-panel navigation flex>
    <core-toolbar id="navheader">
      <span>Menu</span>
    </core-toolbar>
    <core-menu>
      <core-item label="One"></core-item>
      <core-item label="Two"></core-item>
      <core-item label="Three"></core-item>
      <core-item label="Four"></core-item>
      <core-item label="Five"></core-item>
      <core-item label="Six"></core-item>
      <core-item label="Seven"></core-item>

    </core-menu>
  </core-header-panel>

  <span tool>Title</span>

  <div class="content">
      If drawer is hidden, press button to display drawer.
  </div>
</core-scaffold>

It didn't wanted to overwrite the default style without !important. This is what i got: http://screencast.com/t/7AQHblQvk and it looks good until it collapse, like this: http://screencast.com/t/oDg3ptLpp . Then I tried to change default width inside of core-drawer-panel.html so I modified this part of code:

/**
 * Width of the drawer panel.
 *
 * @attribute drawerWidth
 * @type string
 * @default '256px'
 */
 drawerWidth: '100px',

and nothing happened. It didn't changed the width of element, so now I am out of ideas and knowledge about how to achieve this. Can anyone help?

Thanks in advance! :)

Answer 1

There's a drawerWidth attribute for changing the width:

<core-drawer-panel drawerWidth="100px">

https://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel

Answer 2

In addition to ebidel 's answer from the polymer developer guide:

Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName.

If the above answer doesn't work, try this one:

<core-drawer-panel drawer-width="100px">