Lungo.js/src/stylesheets/Lungo.layout.less

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

@import "constants.less";
@import "mixins.less";

section {
    // @todo: section position absolute or FIXED
    // position: absolute; /* position: fixed on iOS5 & Android 4 */
    position: fixed;
    left:  0;
    top:  0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: none;
    visibility: hidden;
    .transition(all 250ms @defaultTrasition);
    -webkit-backface-visibility: hidden;

    &:first-child, &.show {
        z-index: 1;
        display: block;
        visibility: visible;
    }

    &.hide {
        z-index: -1;
        display: none;
        visibility: hidden;
    }

    &[data-transition] {
        display: block !important;
    }

    &[data-transition="pop"] {
        opacity: 0;
        .transform(scale(1.15));

        &:first-child, &.show {
            .transform(scale(1));
            opacity: 1;
        }

        &.hide {
            .transform(scale(0.9));
            opacity: 0;
        }
    }

    &[data-transition="slide"] {
        .transform(translate(100%, 0));
        visibility: visible !important;

        &:first-child, &.show { .transform(translate(0%, 0)); }
        &.hide { .transform(translate(-100%, 0)); }
    }
}

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

    overflow: hidden;
}

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;
}