Off-canvas layout for Susy/Compass (full demo coming later)

off-canvas.sass

html, body
  height: 100%

#outer-wrap, #inner-wrap
  position: relative
  width: 100%
  min-height: 100%

#outer-wrap
  overflow: hidden
  @media screen and (max-width: (space($break-tablet, $style: static) - 1px))
    .js-ready.csstransforms3d.csstransitions &
      @include translate3d(0, 0, 0)
      @include backface-visibility(hidden)

.header
  .close-button, .nav-button, .search-button
    display: none
    @media screen and (max-width: (space($break-tablet, $style: static) - 1px))
      display: inline

#main-nav, #search
  @media screen and (max-width: (space($break-tablet, $style: static) - 1px))
    position: absolute
    top: 0
    overflow: hidden
    color: #fff
    &:not(:target)
      height: 0
      z-index: 1
    .js-ready &
      height: 10000%
      width: 80%
      background-color: #333
    .js-ready.csstransforms3d.csstransitions &
      @include backface-visibility(hidden)
    a
      color: #fff
      text-decoration: none
      display: block
      padding: 10px 15px
    .offcanvas-wrap
      position: relative
      z-index: 200
      .js-ready &
        background: transparent
      .js-ready.csstransforms3d.csstransitions &
        @include opacity(0.7)
        @include transition(opacity 300ms 100ms ease, transform 400ms ease)
        @include transform-origin(50%, 0)
        @include backface-visibility(hidden)

@media screen and (max-width: (space($break-tablet, $style: static) - 1px))
  #inner-wrap
    .js-ready &
      left: 0
      right: 0
    .js-nav &
      left: 80%
    .js-search &
      right: 80%
    .js-ready.csstransforms3d.csstransitions &
      left: 0 !important
      right: 0 !important
      @include translate3d(0, 0, 0)
      @include transition(400ms ease)
      @include backface-visibility(hidden)
    .js-nav.csstransforms3d.csstransitions &
      @include transform3d(translate3d(80%, 0, 0) scale3d(1, 1, 1))
    .js-search.csstransforms3d.csstransitions &
      @include transform3d(translate3d(-80%, 0, 0) scale3d(1, 1, 1))
  .header-oc-buttons
    overflow: hidden
    padding: 10px 0
    .nav-button
      float: left
    .search-button
      float: right

  #main-nav
    .js-ready &
      left: -80%
      @include box-shadow(inset -0.3em -0.3em 0.5em rgba(0,0,0,0.45))
    .js-ready.csstransforms3d.csstransitions &
      left: 0
      @include translate3d(-100%, 0, 0)
    .nav-wrap
      .js-ready.csstransforms3d.csstransitions &
        @include transform3d(translate3d(80%, 0, 0) scale3d(0.9, 0.9, 1))
      .js-nav.csstransforms3d.csstransitions &
        @include opacity(1)
        @include transform3d(translate3d(0, 0, 0) scale3d(1, 1, 1))
    .nav-list
      @include unstyled-list
      li
        border-bottom: 1px solid #666
        a:hover
          background-color: #444

  #search
    .js-ready &
      right: -80%
      @include box-shadow(inset 0.3em -0.3em 0.5em rgba(0,0,0,0.45))
    .js-ready.csstransforms3d.csstransitions &
      right: 0
      @include translate3d(100%, 0, 0)
    .search-wrap
      .js-ready.csstransforms3d.csstransitions &
        @include transform3d(translate3d(-80%, 0, 0) scale3d(0.9, 0.9, 1))
      .js-search.csstransforms3d.csstransitions &
        @include opacity(1)
        @include transform3d(translate3d(0, 0, 0) scale3d(1, 1, 1))
    .close-button
      float: right
    .search-form
      padding: 15px

@include at-breakpoint($break-tablet)
  .nav-list
    @include unstyled-list
    li
      float: left
      a
        padding: 6px 10px
  #search
    float: right