benivo-ui-library/navigation.less

Benivo UI library

@nav-text-font-size: 14px;
@sub-nav-width: 267px;
@sub-nav-box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.06);
@sub-sub-nav-box-shadow: 0 1px 4px 0 rgba(79, 90, 101, 0.1);


.nav-menu {
    margin-right: auto;

    ul {
        margin: 0;

        a {
            font-size: @nav-text-font-size;

            &:hover {
                text-decoration: none;
            }
        }
    }

    .nav {
        @media @lg {
            display: flex;
            flex-wrap: nowrap;
        }

        &>li {
            display: block;
            margin-bottom: @spacer * 1.5;

            @media @lg {
                display: flex;
                height: @header-height;
                white-space: nowrap;
                align-items: center;
                position: relative;
                margin: 0 @spacer * 0.75;
            }

            &.opened {
                .sub-nav {
                    display: block;
                }
            }

            &:hover,
            a:hover {
                .sub-nav {
                    display: block;
                }
            }

            &>a {
                color: var(--text-600);
                text-transform: @nav-text-transform;
                font-family: @nav-font-family;
                font-weight: @nav-font-weight;
                font-style: @nav-font-style;
                padding: 0.75rem;

                @media @lg {
                    &:after {
                        content: ' ';
                        display: block;
                        width: 100%;
                        height: 4px;
                        background: transparent;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                    }
                }

                &.active {
                    color: var(--text-600);

                    @media @lg {
                        &:after {
                            background: var(--primary);
                        }
                    }
                }
            }
        }
    }

    .sub-nav {
        position: absolute;
        left: 0;
        top: 100%;
        display: none;
        width: @sub-nav-width;
        padding-bottom: @spacer *0.75;
        padding-top: @spacer *0.75;
        background-color: var(--white);
        .border-radius(0 0 @border-radius @border-radius);
        .box-shadow(@sub-nav-box-shadow);

        li {
            padding: 0.75rem 1.2rem 0.75rem 1.7rem;
            position: relative;

            &.opened {
                &.has-sub-menu {
                    &:after {
                        color: var(--primary);
                    }
                }

                .sub-sub-nav {
                    display: block;
                }
            }

            &:hover,
            a:hover {
                &:after {
                    color: var(--primary);
                }

                .sub-sub-nav {
                    display: block;
                }
            }

            a {
                display: flex;
                align-items: center;
                color: var(--text-600);

                .img-icon {
                    width: 18px;
                    margin-right: @spacer * 1.2;
                }

                &:hover {
                    color: var(--text-600);
                }
            }

            &.has-sub-menu {
                &>a {
                    &:after {
                        font-family: icomoon;
                        content: '\e930';
                        display: block;
                        display: block;
                        font-size: 10px;
                        margin-left: auto;
                    }
                }
            }
        }
    }

    .sub-sub-nav {
        position: absolute;
        display: none;
        right: -@sub-nav-width;
        top: 0;
        background-color: var(--bg-50);
        width: @sub-nav-width;
        padding-bottom: @spacer *1.5;
        .border-radius(0 0 @border-radius @border-radius);
        .box-shadow(@sub-sub-nav-box-shadow);


        li {
            padding: 1.5rem 1.2rem 0 1.7rem;

            a {
                color: var(--text-600);
            }
        }
    }
}