metro4/less/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;
    }

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

.generate-sidenav-media-options(@mediaBreakpointListMobileLength);
.generate-sidenav-media-options(@name, @i: 1) when (@i <= @mediaBreakpointListMobileLength) {
    @m: extract(@mediaBreakpointListMobile, @i);

    @media screen and (min-width: @@m) {

        .sidenav-simple {
            &.sidenav-simple-expand-@{m} {
                .sidenav-simple-expand();
            }
            &.sidenav-simple-expand-@{m}[dir=rtl] {
                a {
                    padding: .625rem 3.75rem .625rem 1rem;
                }

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

    .generate-sidenav-media-options(@name, @i + 1);
}