box-lid.scss

/*!
 * 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; }
}