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

@import "constants.styl"


/* ========================================================================= */
/* ============================= HEADER/FOOTER ============================= */
/* ========================================================================= */
header, footer
  height: HEADER_FOOTER_HEIGHT
  line-height: HEADER_FOOTER_HEIGHT

  // display-box()
  // box-pack(justify)
  // box-orient(horizontal)
  // overflow: hidden

  & > nav
    box-flex(0)

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

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

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


/* ========================================================================= */
/* ================================ ARTICLE ================================ */
/* ========================================================================= */
article
  visibility: hidden
  display: none

  .show > &.active, .hide > &.active, .hiding > &.active
    visibility: visible
    display: block
    z-index: 1

    &.pull
      transition-property(transform)
      transition-duration(TRANSITION_TIME)

header
  &:not(.extended) ~ article
    top: HEADER_FOOTER_HEIGHT
  &.extended ~ article
    top: ARTICLE_WITH_HEADER_EXTENDED

footer ~ article
  bottom: HEADER_FOOTER_HEIGHT

@media handheld, only screen and (min-width: 768px)
  article.aside
    transform(translate3d(0px, 0, 0))