Lungo.js/src/stylesheets/lungo.layout.styl

/**
 * Stylesheet
 *
 * @namespace Lungo
 * @class Layout
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

body, html
  height: 100%
  width: 100%
  margin: 0
  padding: 0
  overflow: hidden

body
  /* ========================================================================= */
  /* ============================= ASIDE/SECTION ============================= */
  /* ========================================================================= */
  & > aside, & > section
    display-box()
    box-orient(vertical)
    height: inherit
    webkit-transform: translate3d(0,0,0)

    & > header, > footer
      box-flex(0)
      z-index: 3
      position: relative
    & > header
      ordinal-group(1)
    & > article
      box-flex(1)
      ordinal-group(2)
      z-index: -1
    & > footer
      ordinal-group(3)

    /* ============================= HEADER/FOOTER ============================= */
    & > header, > footer
      height: HEADER_HEIGHT
      line-height: HEADER_HEIGHT

      & > nav
        box-flex(0)

      & > .title
        z-index: -1
        margin: 0 4px
        float: left
        font-size: FONT_SIZE_LARGE
        box-flex(1)

        &.centered
          position: absolute
          left: 32px
          right: 32px
          text-align: center
          display: inline-block

      & > img.title
        PAD = 18px
        height: (HEADER_HEIGHT - PAD)
        margin: (PAD / 2) auto

    /* ================================ ARTICLE ================================ */
    & > article
      visibility: hidden
      display: none
    &.show > article.active, &.hide > article.active, &.hiding > article.active
      visibility: visible
      display: block
      z-index: 1
      height: inherit
      &.pull
        transition-property transform
        transition-duration TRANSITION_TIME
    & [data-article].hide
      display: none

  /* ========================================================================= */
  /* ================================ SECTION ================================ */
  /* ========================================================================= */
  & > section
    z-index: 2
    width: inherit
    &:not(.show)
      z-index: 1

  /* ========================================================================= */
  /* ================================= ASIDE ================================= */
  /* ========================================================================= */
  & > aside
    width: ASIDE_WIDTH
    display: none
    z-index: -1
    &.active, &.show
      display-box()
    &.show
      z-index: 0
    &.right
      right: 0px

  /* ========================================================================= */
  /* =============================== EXCLUDE OS ============================== */
  /* ========================================================================= */
  &[data-os=ios]
    & [data-os=android], [data-os=blackerry], [data-os=firefoxos]
      display: none
  &[data-os=android]
    & [data-os=ios], [data-os=blackerry], [data-os=firefoxos]
      display: none
  &[data-os=blackberry]
    & [data-os=android], [data-os=ios], [data-os=firefoxos]
      display: none
  &[data-os=firefoxos]
    & [data-os=android], [data-os=ios], [data-os=blackberry]
      display: none