react-ui-component/css/menu.less

some component build with ReactJs

@import url('meta.less');

.menu {
    @basic_motion: max-height .3s, opacity .3s, height .3s, overflow .3s, visibility .3s, transform .15s, border-color .3s;
    .__transition {
        -webkit-transition: @basic_motion;
        -o-transition: @basic_motion;
        transition: @basic_motion;
    }

    &.fluid {
        width: 100%;
    }
    
    display: inline-block;
    width: 220px;
    list-style-type: none;
    position: relative;
    border: 1px solid @gray_b;
    background: @white;

    ._item, ._title {
        padding: 0 16px;
        line-height: 32px;
        cursor: pointer;
        list-style-type: none;
        color: @black_c;
    }

    ._item {
        &._active {
            background: @gray_c;
        }
        >a {
            display: block;
        }
    }

    ._group {
        list-style-type: none;
        ._title {
            cursor: default;
            color: @gray_b;
        }
    }

    ._submenu {
        list-style-type: none;
        position: relative;
        >._content {
            .__transition;
            visibility: hidden;
            opacity: 0;
            max-height: 0;
            overflow: hidden;
        }
        &._open {
            >._title {
                color: @black;
            }
            >._content {
                .__transition;
                visibility: visible;
                opacity: 1;
                overflow: initial;
                max-height: 800px;
            }
        }
    }


    .__popuped() {
        ._submenu {
            >._content {
                position: absolute;
                z-index: 100;
                border: 1px solid @gray_b;
                width: 200px;
                left: 100%;
                background: @white;
                top: 0;
                transform-origin: 0 0;
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                -o-transform: scale(0);
                transform: scale(0);
            }
            &._active>._title {
                background: @gray_b;
            }
            &._open {
                >._content {
                    -webkit-transform: scale(1);
                    -ms-transform: scale(1);
                    -o-transform: scale(1);
                    transform: scale(1);
                }
            }
        }
    }
    

    &._horizontal {
        .__popuped();
        width: 100%;
        padding: 0 10px;
        border: 0;
        border-bottom: 1px solid @gray_b;
        /*first level item and submenu*/
        >._item, >._submenu {
            display: inline-block;
        }
        >._item {
            border-bottom: 2px solid transparent;
            .__transition;
            &._active {
                background: initial;
                border-color: @blue;
            }
        }
        
        /*fist level submenu title active and content no effect*/
        >._submenu {
            >._title {
                .__transition;
                border-bottom: 2px solid transparent;
            }
            &._active>._title {
                border-color: @blue;
                background: none;
            }
            >._content {
                left: 0;
                -webkit-transform: none;
                -ms-transform: none;
                -o-transform: none;
                transform: none;
                top: initial;
            }
        }
    }

    &._popup {
        .__popuped();
    }
}