moovweb/uranium — pull request #106 by kwliou (2013-10-18 23:25:35+00:00)
Title: add drawer state

This was a flexbox alternative to setting a height/min-height on the body and changing it whenever the window resizes or a toggler inside the drawer is clicked etc.

Example HTML:
````html

...

Menu

...

````

Example Sass:
````scss
html {
overflow-x: hidden; // need this to not break android viewport
}
body {
overflow: hidden; // need this to not break android viewport
position: relative;
}

#wrapper {
display: -webkit-box !important;
display: -webkit-flex !important;
display: flex !important;
width: 150%;
}
#menu, #page {
@include transition(0.3s);
width: 0;
}

#menu {
@include transform(translate3d(-100%, 0, 0));
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
position: relative;
z-index: 1;
&:not([data-ur-state="enabled"]) {
height: 0;
}
}
#page {
@include transform(translate3d(-50%, 0, 0));
-webkit-box-flex: 2;
-webkit-flex: 2;
flex: 2;
}
[data-ur-state="enabled"] {
#menu, #page {
@include transform(translate3d(0, 0, 0));
}
}

#mask {
background: rgba(0, 0, 0, 0.3);
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&:not([data-ur-state="enabled"]) {
display: none;
}
}
````