Lungo2.0.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"

body
  &[data-position="absolute"] > section
    position: absolute

  &[data-position="fixed"] > section
    position: fixed
    &[data-transition]
      transition-property( opacity, z-index, transform )
      transition-duration( TRANSITION_TIME )
      transition-timing-function( DEFAULT_TRANSITION )
      backface-visibility( hidden )

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



  &.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) )
    &.show
      transform( scale(1) )
      opacity: 1
    &.hide
      transform( scale(0.9) )
      opacity: 0

  /* Transition: SLIDE */
  &[data-transition="slide"]
    transform( translateX(100%) )
    visibility: visible !important
    &.show
      transform( translateX(0%) )
    &.hide
      transform( translateX(-100%) )

  /* Transition: COVER */
  &[data-transition="cover"]
    transform( translateY(110%) )
    &.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: (FONT_SIZE_BIG * 1.2)

    & img
      height: 24px

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


footer
  bottom: 0
  height: HEADER_FOOTER_HEIGHT