metro4/source/components/sidenav-m3/sidenav-m3.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-m3 {
    display: block;
    position: relative;
    list-style: none inside;
    height: 100%;
    width: 220px;
    margin: 0;
    padding: 0;
    transition: @transition-base;
    background-color: @light;

    .hideScrollBars();
}

.sidenav-m3 {
    li, a {
        position: relative;
        display: block;
        color: inherit;
    }

    & > li {
        background: transparent;

        &.stick-left, &.stick-right {
            &::before {
                content: "";
                display: block;
                position: absolute;
                width: 6px;
                height: 44px;
                border-radius: @borderRadius 0 0 @borderRadius;
                background-color: inherit;
                top: 0;
                left: 0;
                .translateX(-100%);
            }
        }

        &.stick-right {
            &::before {
                left: 100%;
                border-radius: 0 @borderRadius @borderRadius 0;
                .translateX(0);
            }
        }
    }

    a {
        padding: .625rem 1rem .625rem 3rem;
        text-decoration: none;
        background-color: @light;
        .text-ellipsis();

        &:hover {
            text-decoration: none;
        }

    }

    li + li {
        border-top: 1px solid @borderColor;
    }

    .icon {
        .square(24, px);
        font-size: 22px;
        line-height: 24px;
        vertical-align: middle;
        text-align: center;
        position: absolute;
        left: .625rem;
        bottom: 12px;
    }

    .title {
        padding: 20px 20px 10px 20px;
        font-size: 24px;
        border: 0;
    }
}

.sidenav-m3 {
    .d-menu {
        position: relative;
        box-shadow: none;
        background-color: inherit;
        width: 100%;
        float: none;

        a {
            padding: 0 1rem 0 3rem;
            text-decoration: none;
        }

        li {
            border-top: 1px solid @borderColor;
        }

        .icon {
            .square(24, px);
            font-size: 22px;
            line-height: 24px;
            vertical-align: middle;
            text-align: center;
            position: absolute;
            left: .625rem;
            top: 50%;
        }
    }
}

.sidenav-m3[dir=rtl] {
    a {
        padding-right: 3rem;
        padding-left: 1rem;
    }

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

    .dropdown-toggle {
        padding-left: 1.5rem!important;
        padding-right: 3rem!important;
        &::before {
            left: 1rem;
            margin-left: 0;
        }
    }
}