react-jam-ui/components/Modal/styles.styl

React JAM UI components

.modal {
    background: #FFFFFF;
    padding: 0;
    z-index: 110;
    position: relative;
    margin: auto;

    &-show {
        overflow: hidden;
    }
    
    &-backface {
        position: fixed;
        left 0;
        top: 0;
        bottom: 0;
        right: 0;
        display: flex;
        /* align-items: center;
        justify-content: center; */
        background: rgba(0,0,0,0.5);
        overflow: auto;
        z-index: 100;
    }
    &-close {
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
    }

    &-header {
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding: 20px;
    }
    &-body {
        padding: 20px;
    }
    &-footer {
        border-top: 1px solid rgba(0,0,0,0.1);
        padding: 20px;
    }
}