/**
 * 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: fixed;
    height: auto;
    top: 0;
    bottom: 0;
    visibility: hidden;
    z-index: 0;

    width: @aside-width;

    &.onright { right: 0px; }
    &.current { visibility: visible;}

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

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

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

            & .bubble {
                left: -24px;
            }
        }


    }
}

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