react-ui-component/css/slide-menu.less

some component build with ReactJs

@import url('meta');


.slide-menu {
    @basic_transition: background .3s 0s, visibility .3s 0s, opacity .3s 0s;
    ._content {
        -webkit-transition: transform 0.3s;
        -o-transition: transform 0.3s;
        transition: transform 0.3s;
        position: fixed;
        z-index: 1000;
        width: 100%;
        height: 100%;
        background: @white;
    }

    ._overlay {
        opacity: 0;
        position: fixed;
        visibility: hidden;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: -1;
        -webkit-transition: @basic_transition, z-index .3s .3s;
        -o-transition: @basic_transition, z-index .3s .3s;
        transition: @basic_transition, z-index .3s .3s;
    }

    &._display {
        ._overlay {
            opacity: 1;
            visibility: visible;
            z-index: 999;
            background: rgba(0,0,0,.5);
            -webkit-transition: @basic_transition;
            -o-transition: @basic_transition;
            transition: @basic_transition;
        }
    }
}