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


.d-menu, .v-menu {
    position: absolute;
    display: none;
    float: left;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none inside none;
    background-color: @white;
    color: @dark;

    &.open {
        display: block!important;
    }

    &.place-right {
        left: auto;
        right: 0;
    }
}

.d-menu {
    z-index: @zindex-dropdown;
}

.d-menu, .v-menu {
    li, a {
        display: block;
        float: none;
        position: relative;
        cursor: pointer;
        color: inherit;
        background-color: inherit;
        height: auto;
    }

    li {
        a {
            font-size: .875rem;
            padding: 0 2rem 0 2.5rem;
            line-height: 45px;
            height: 45px;
            text-decoration: none;
            vertical-align: middle;
            white-space: nowrap;
            border: none;

            img, .icon {
                display: block;
                position: absolute;
                vertical-align: middle;
                text-align: center;
                text-decoration: none;
                font-size: 1.2rem;
                left: .5rem;
                top: 50%;
                margin-top: -.6rem;
                width: 1.2rem;
                height: 1.2rem;
                color: inherit;

                &::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    line-height: 1.2rem;
                }
            }
        }

        &.active {
            border-left: 2px solid;
            border-color: darken(@light, 10%);

            & > a {
                background-color: @lightCyan;
                color: @white;
                font-weight: bold;
            }
        }


        &:hover {
            text-decoration: none;
            background-color: @hoverBackground;

            & > a, .icon {
                color: inherit;
            }
        }

        a[data-hotkey] {
            padding-right: 4rem;
            &::after {
                content: attr(data-hotkey);
                position: absolute;
                right: 1.2rem;
                width: auto;
                font-size: .8em;
            }
        }

        a {
            &.dropdown-toggle {
                &::before {
                    transform: rotate(-135deg);
                }

                &.active-toggle {
                    &::before {
                        transform: rotate(45deg);
                    }
                }
            }
        }
    }

    .divider {
        padding: 0;
        height: 1px;
        margin: 0 1px;
        overflow: hidden;
        background-color: lighten(#e5e5e5, 5%);
        cursor: default;
        pointer-events: none;
        &:hover {
            background-color: lighten(#e5e5e5, 5%);
        }
    }

    &.disabled {
        cursor: default;
        pointer-events: none;
        a {
            color: @lightGray;
        }
    }

}

.d-menu {
    .default-shadow();
}

.d-menu {
    &.context {
        li {
            a {
                height: 32px;
                line-height: 32px;
                font-size: .75rem;
                padding: 0 2rem 0 2.5rem;

                .icon {
                    width: .92rem;
                    height: .92rem;
                    font-size: .92rem;
                }
            }
        }
    }
}

.v-menu {
    display: block;
    position: relative;
    width: 100%;
    float: none;

    &.for-dropdown {
        width: auto;
        float: left;
        display: none;
    }

    .v-menu {
        display: none;
        min-width: 0;
        position: relative;
        width: 100%;
        left: 0 ;
        right: 0 ;
        top: 100%;
        box-shadow: none;
        float: none;
    }

    .menu-title {
        background-color: #f6f7f8;
        font-size: 12px;
        line-height: 22px;
        height: 22px;
        padding: 0 8px;
        border: 0;
        color: #646464;
        font-weight: bold;
        pointer-events: none;

        &:first-child {
            margin: 0;
            border-top-width: 0;
            &:hover {
                border-top-width: 0;
            }
        }
        &:hover {
            background-color: #f6f7f8;
            cursor: default;
            border: 0;
        }
    }

    &.dropdown {
        position: absolute;
        float: left;
        width: auto;
        top: 100%;
        border: 1px solid @borderColor;
    }
}

.d-menu {
    .d-menu {
        left: 100%;
        top: -.5rem;
    }
}

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

    @media screen and (min-width: @@m) {
        .d-menu, .v-menu {
            &.place-right-@{m} {
                left: auto;
                right: 0;
            }
        }
    }

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