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

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

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

section.aside {
    &:not(.small) { .transform(translate(@aside-width, 0)); }
    &.small { .transform(translate(@aside-width-small, 0)); }

    &.onright {
        .transform(translate(-@aside-width, 0));
        &.small { .transform(translate(-@aside-width-small, 0)); }
    }
}

aside {
    position: absolute;
    height: auto;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 0;

    width: @aside-width;

    &.onright { right: 0px; }
    &.current {
        display: block;
    }


    & header, & footer {
        position: relative;
        left: none;
        height: @header-height;
    }

    & footer {
        position: absolute;
        bottom: 0;
    }

    &.small {
        width: @aside-width-small;

        & nav {
            width: @aside-width-small;
            & a {
                padding: 0px;
                width: @aside-width-small;
                height: @aside-width-small;
            }
            & .icon {
                font-size: 48px;
                text-align: center;
            }

            & .bubble {
                top: -36px;
                left: -16px;
            }
        }


    }
}

@media handheld, only screen and (min-width: 768px) {
    .autohide[data-target="aside"] {  display: none !important; }

    section.aside {
        width: auto !important;
        left: @aside-width;
        right: 0px !important;
        .transform(translate3d(0px, 0, 0));
        -webkit-transition: none;

        &.small{ left: @aside-width-small; }
    }
}