react-ui-component/css/notice.less

some component build with ReactJs

@import url('meta');

.notice {
    @_width: 300px;
    &-center {
        position:fixed;
        width: @_width;
        overflow: hidden;
        top: 10px;
        right: 10px;
        z-index: 100;
        >.notice {
            position: relative;
            display: block;
            width: @_width;
            background: @gray_c;
            border: 1px solid @gray_b;
            padding: 5px 10px;
            margin-bottom: 10px;
            ._title {
                font-weight: bold;
                margin-bottom: 10px;
            }
            ._close {
                position: absolute;
                right: 5px;
                top: 5px;
                cursor: pointer;
            }
        }
    }

    &-enter {
        transform: translate3d(@_width,0,0);
        opacity: 0.01;
    }

    &-enter&-enter-active {
        opacity: 1;
        transform: translate3d(0,0,0);
        transition: all .3s;
    }

    &-leave {
        opacity: 1;
        transform: translate3d(0,0,0);
    }

    &-leave&-leave-active {
        opacity: 0.01;
        transform: translate3d(@_width,0,0);
        transition: all .3s;
    }
}