Lungo2.0.js/src/stylesheets/Lungo.layout.article.less

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

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


@defaultTrasition : @easeOutSine;
@header_footer_height: 40px;
    @header_extended_height: 75px;
@footer_toolbar_height: 48px;

/* @group <article> */
article {
    //position: absolute;
    position: fixed;
    width: 100% !important;
    height: auto;
    top: 0;
    bottom: 0;

    display: none;
    visibility: hidden;
    z-index: 0;

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

    & .title {
        font-size: 1.1em;
        margin: 0px 0 4px;
        & .icon { margin-right: 4px; }
    }

    & .text {
        margin: 4px 0 8px;
        display: block;
        font-size: 0.9em;
        font-weight: normal;
        line-height: 1.4em;
    }

    & .box {
        &.quarter {
            height: 25%;
        }
        &.third {
            height: 33.3%;
        }
        &.middle {
            height: 50%;
        }
        &.two-thirds {
            height: 66.7%;
        }
    }
}

.prueba li {
    list-style: none;
    float: left;
    width: 48px;
    height: 48px;
    background: #ccc;
    margin: 1px;
}

header:not(.extended) ~ article { top: @header-height; }
    header.extended ~ article { top: @header_extended_height; }
footer:not(.with-labels) ~ article { bottom: @article-bottom; }
    footer.with-labels ~ article { bottom: @article-bottom-with-labels; }

@media handheld, only screen and (min-width: 768px) {
    article.aside { .transform(translate3d(0px, 0, 0)); }
}
/* @end */