react-ui-component/css/modal.less

some component build with ReactJs

@import url('meta.less');

.modal {
    &._show {
        overflow: auto;
        z-index: 999;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        visibility: hidden;
        visibility: visible;
    }
    .__transition {
        -webkit-transition: background-color .3s, opacity .3s, transform .3s, visibility .3s;
        -o-transition: background-color .3s, opacity .3s, transform .3s, visibility .3s;
        transition: background-color .3s, opacity .3s, transform .3s, visibility .3s;
    }
    ._body {
        -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        z-index: 1000;
        min-width: 400px;
        max-width: 600px;
        position: fixed;
        top: 50%;
        left: 50%;
        visibility: hidden;
        >._wrap {
            .__transition;
            max-height: 500px;
            overflow: auto;
            background-color: @white;
            border: 1px solid @gray_b;
            opacity: 0;
            -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
            -o-transform: scale(1.1);
            transform: scale(1.1);
        }

        ._title {
            padding: 10px;
        }

        ._content {
            overflow: hidden;
            padding: 10px;
            ._actions {
                font-size: 90%;
                overflow: hidden;
                float: right;
                ._action-btn {
                    cursor: pointer;
                    display: inline-block;
                    &:last-child {
                        margin-left: 5px;
                    }
                }
            }
        }
        ._close {
            cursor: pointer;
            position: absolute;
            right: 5px;
            top: 5px;
        }
    }
    ._overlay {
        .__transition;
        visibility: hidden;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        opacity: 0;
        background-color: rgba(0,0,0,.7);
    }
    &._show {
        ._body {
            visibility: visible;
            >._wrap {
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }
        }
        ._overlay {
            opacity: 1;
            visibility: visible;
        }
    }
    &._force {
        ._body {
            ._wrap {
                border: none;
            }
        }
        ._overlay {
            background-color: rgba(255,255,255,.9);
        }
    }
}