metro4/less/navview.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";

@navviewPaneWidth: 280px;
@navviewPaneWidthCompact: 48px;
@navviewPaneItemHeight: 40px;

@navviewPaneBackground: #e5e5e5;
@navviewPaneItemHover: #cecece;
@navviewPaneItemActive: #b7b7b7;
@navviewPaneItemFocus: #0a0a0a;
@navviewPaneItemDisabled: #9c9c9c;


.navview {
    display: block;
    position: relative;
    background-color: @white;
    color: @dark;
    overflow: hidden;
    height: 100%;
    min-height: 100%;
}

.navview {

    .navview-pane, .navview-content {
        display: block;
        transition: all .1s linear;
        min-height: 100%;
    }

    .navview-pane {
        width: @navviewPaneWidth;
        background-color: @navviewPaneBackground;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        .translate3d(-100%);
        z-index: 1;

        &.open {
            .translate3d(0);
        }
    }

    .navview-content {
        position: relative;
    }
}

.navview {
    .pull-button, .holder {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        background-color: transparent;
        margin-bottom: 8px;
        border: 2px solid transparent;
        outline: none;
        cursor: pointer;
    }

    .holder {
        height: 40px;
        display: none;
    }

    .navview-menu {
        display: block;
        position: relative;
        list-style: none inside;
        margin: 0;
        padding: 0;
        width: 100%;
        overflow: hidden;
        overflow-y: auto;

        .hideScrollBars();

        li {
            display: block;
            position: relative;
        }

        li {
            a {
                display: flex;
                align-items: center;
                position: relative;
                line-height: @navviewPaneItemHeight;
                text-decoration: none;
                color: inherit;
                white-space: nowrap;
                border: 2px solid transparent;
                height: @navviewPaneItemHeight;
            }
        }

        .icon {
            width: 48px;
            height: 40px;
            display: block;
            text-align: center;
        }

        .caption {
            padding-left: 48px;
            white-space: nowrap;
            display: block;
        }

        .icon + .caption {
            padding-left: 0;
        }

        .item-header {
            font-size: 22px;
            height: 32px;
            line-height: 32px;
            padding-left: 16px;
            cursor: default;
            background-color: transparent;
            white-space: nowrap;
            display: block;
        }

        li {
            &.active {
                &::before {
                    content: "";
                    display: block;
                    position: absolute;
                    height: 24px;
                    top: 8px;
                    left: 0;
                    width: 4px;
                    background-color: @cyan;
                    z-index: 1;
                }
            }

            &.disabled {
                color: @navviewPaneItemDisabled!important;

                img {
                    opacity: .5;
                }
            }
        }
    }

    .pull-button, .navview-menu .icon, .suggest-box .holder {
        & > * {
            width: 16px;
            height: 16px;
            line-height: 16px;
            font-size: 16px;
            vertical-align: initial;
        }
    }

    .pull-button, .holder, .navview-menu li a {

        &:hover {
            background-color: @navviewPaneItemHover;
        }

        &:active {
            background-color: @navviewPaneItemActive;
        }

        &:focus {
            border: 2px solid @navviewPaneItemFocus;
        }
    }

    .suggest-box {
        display: block;

        .input, .select, .textarea {
            display: flex;
            width: ~"calc(100% - 24px)"!important;
            margin: 0 12px;
        }
    }

    .item-separator {
        height: 16px!important;
        width: 100%;
        display: block;
        background-color: transparent;
        cursor: default;
    }

    .navview-menu .dropdown-toggle {
        padding-right: 0!important;
        &::before {
            display: none;
        }
        &::after {
            content: "";
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 8px 8px;
            border-color: transparent transparent @dark  transparent;
            z-index: 1;
        }
    }
}

.navview {
    &.expand {
        .navview-pane {
            width: @navviewPaneWidth!important;

            .navview-menu .caption, .item-header {
                display: block!important;
            }

            .suggest-box {
                > *:not(.holder) {
                    display: flex!important;
                }
            }

            .holder {
                display: none!important;
            }
        }
    }

    &.compacted {
        .navview-pane {
            width: @navviewPaneWidthCompact!important;
            .translate3d(0);

            .navview-menu .caption,
            .item-header {
                display: none!important;
            }

            .suggest-box {
                > *:not(.holder) {
                    display: none!important;
                }
            }

            .holder {
                display: block!important;
            }
        }
        .navview-content {
            margin-left: @navviewPaneWidthCompact!important;
        }
    }
}

.navview-compact(){
    .navview-pane {
        width: @navviewPaneWidthCompact;
        .translate3d(0);

        .navview-menu .caption, .item-header {
            display: none;
        }

        .suggest-box {
            > *:not(.holder) {
                display: none;
            }
        }

        .holder {
            display: block;
        }
    }
    .navview-content {
        margin-left: @navviewPaneWidthCompact;
    }
}

.navview-expanded(){
    .navview-pane {
        width: @navviewPaneWidth;
        .translate3d(0);

        .navview-menu .caption, .item-header {
            display: block;
        }

        .suggest-box {
            > *:not(.holder) {
                display: flex;
            }
        }

        .holder {
            display: none;
        }
    }
    .navview-content {
        margin-left: @navviewPaneWidth;
    }
}

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

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

        .navview-margin-@{m} {margin-left: @navviewPaneWidth;}
        .navview-margin-compact-@{m} {margin-left: @navviewPaneWidthCompact;}

        .navview {
            &.compact-@{m} {
                .navview-compact();
            }
            &.expanded-@{m} {
                .navview-expanded();
            }
        }
    }

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