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

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">