Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
85 lines (72 sloc) 1.93 KB
/*!
* jQuery Box Lid Plugin v0.1
* https://github.com/jimjh/box-lid
*
* Copyright 2013 Jiunn Haur Lim
* Released under the MIT License
*/
// TODO make mixins
@import "compass/css3";
$box-lid-background: #333 !default; // background that appears when lid is open
$box-lid-transition: cubic-bezier(0.75, 0, 0.175, 1) !default;
// Menu Column
$box-lid-menu-width: 200px !default;
$box-lid-menu-color: #fff !default;
// Vertical Bar
$box-lid-bar-width: 40px !default;
$box-lid-bar-background: rgba(0, 0, 0, 0.08) !default;
// Content
$box-lid-content-background: #fff;
.box-lid {
@include perspective(2000px);
@include perspective-origin(50% 50%);
background: $box-lid-background;
.box-lid-content {
@include transition(all 500ms $box-lid-transition);
background: $box-lid-content-background;
}
}
.box-lid-icon {
@include transition(all 250ms $box-lid-transition);
position: absolute; // center the navicon
top: 50%;
left: 25%;
}
.box-lid-icon:before { // create the navicon using shadows
content: '';
position: absolute;
width: 1.1em;
height: 0.15em;
background: black;
box-shadow:
0 0.25em 0 0 black,
0 0.5em 0 0 black;
}
.box-lid-menu {
@include transition(all 250ms $box-lid-transition);
width: $box-lid-bar-width;
background: $box-lid-bar-background;
position: fixed; // create bar that fills up the page
height: 100%;
top: 0;
left: 0;
z-index: 2;
nav { // push nav to the left, beyond the viewport
@include transition(all 500ms $box-lid-transition);
display: block;
height: 100%;
width: $box-lid-menu-width;
position: absolute;
top: 0;
left: -1.2 * $box-lid-menu-width;
color: $box-lid-menu-color;
}
}
.box-lid-open {
.box-lid-content { // skew the content
@include transform(rotateY(-30deg) translateX($box-lid-menu-width));
}
.box-lid-icon { @include opacity(0); }
.box-lid-menu nav { left: 0; }
.box-lid-menu { background: none; }
}