metro4/source/components/sidenav-simple/sidenav-simple.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.sidenav-simple {
    display: block;
    position: relative;
    list-style: none inside;
    height: 100%;
    width: 52px;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    transition: @transition-base;
    background-color: @light;

    .hideScrollBars();
}

.sidenav-simple {
    li, a {
        display: block;
        position: relative;
        height: 52px;
        line-height: 52px;
        background-color: inherit;
        color: inherit;
        width: 100%;
    }


    a {
        padding: .625rem 0 .625rem 0;
        line-height: .875rem;
        text-decoration: none;

        &:hover {
            text-decoration: none;
        }

    }

    .icon {
        .square(28, px);
        font-size: 26px;
        line-height: 28px;
        vertical-align: middle;
        text-align: center;
        position: absolute;
        left: .625rem;
        top: .635rem;
    }

    .title {
        margin: 0;
        white-space: nowrap;
        font-size: .875rem;
        text-transform: uppercase;
        display: none;
        line-height: 52px;
    }

    li:hover {
        background-color: @hoverBackground;
    }

    li:active {
        background-color: @darkCyan;
        color: @white;
    }

    .active, li.active:hover {
        background-color: @cyan;
        color: @white;
    }
}

.sidenav-simple[dir=rtl] {
    .icon {
        left: .725rem;
    }
}

.sidenav-simple-expand() {
    width: 220px;

    a {
        padding: 0 1rem 0 3.75rem;
    }

    .title {
        display: block;
    }
}

each(@mediaBreakpointListMobile, {
    @media screen and (min-width: @@value) {
        .sidenav-simple-expand-@{value} {
            .sidenav-simple-expand();
        }
        &.sidenav-simple-expand-@{value}[dir=rtl] {
            a {
                padding: .625rem 3.75rem .625rem 1rem;
            }

            .icon {
                left: auto;
                right: .625rem;
            }
        }
    }
})