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

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

@import "constants.less";

body {

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

    -webkit-transition-property: opacity, z-index, -webkit-transform;
    -moz-transition-property: opacity, z-index, -moz-transform;
    -ms-transition-property: opacity, z-index, -ms-transform;
    -o-transition-property: opacity, z-index, -o-transform;
    transition-property: opacity, z-index, transform;
    .transition-duration(300ms);
    .transition-timing-function(@easeOutSine);

    .backface-visibility(hidden);
    .transform(translateZ(0));


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

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

    &[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(translateX(100%));

        visibility: visible !important;

        & > header > *, & > article > * {
            opacity: 0;
            .transition(opacity 400ms @defaultTrasition);
        }

        &:first-child, &.show {
            .transform(translateX(0%));
            & > header > *, & > article > * { opacity: 1; }
        }

        &.hide {
            .transform(translateX(-100%));
            & > header > *, & > article > * { opacity: 0; }
        }
    }

    &[data-transition="cover"] {
        .transform(translateY(110%));
        &:first-child, &.show, &.hide {
            .transform(translateY(0%));
        }
    }

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