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

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

@import "import/constants.styl"
@import "import/vendor.styl"

section
  position: absolute
  top:  0
  left:  0
  width: 100%
  height: 100%
  z-index: -1
  display: none

  transition-property( opacity, z-index, transform )
  transition-duration( 300ms )
  transition-timing-function( DEFAULT_TRANSITION )
  transform( translateZ(0) )
  backface-visibility( hidden )

  &:first-child, &.show
    z-index: 1
    display: block

  &.hide
    z-index: -1
    display: none

  &[data-transition]
    display: block !important

  /* Transition: POP */
  &[data-transition="pop"]
    opacity: 0
    transform( scale(1.15) )
    &:first-child, &.show
      transform( scale(1) )
      opacity: 1
    &.hide
      transform( scale(0.9) )
      opacity: 0

  /* Transition: SLIDE */
  &[data-transition="slide"]
    transform( translateX(100%) )
    visibility: visible !important
    & > header > *, & > article > *
      opacity: 0
      transition( opacity 400ms DEFAULT_TRANSITION )
    &:first-child, &.show
      transform( translateX(0%) )
      & > header > *, & > article > *
        opacity: 1
    &.hide
      transform( translateX(-100%) )
      & > header > *, & > article > *
        opacity: 0

  /* Transition: COVER */
  &[data-transition="cover"]
    transform( translateY(110%) )
    &:first-child, &.show, &.hide
      transform( translateY(0%) )

  /* Transition: FADE */
  &[data-transition="fade"]
    opacity: 0
    &:first-child, &.show
      opacity: 1
    &:hide
      opacity: 0


header, footer
  position: absolute
  left: 0
  width: 100%
  display: block
  z-index: 2

header
  top: 0
  height: HEADER_FOOTER_HEIGHT
  line-height: HEADER_FOOTER_HEIGHT

  & .title
    margin-left: 4px
    float: left
    z-index: -1
    font-size: 1.2em
    font-weight: bold

    &.with-subtitle
      line-height: 34px
      & .subtitle
        position: relative
        top: -4px
        display: block
        font-size: 0.7em
        line-height: 0.7em


    & img
      height: 24px

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


footer
  bottom: 0
  height: HEADER_FOOTER_HEIGHT