angular2-simple-ui/public/css/modal.less

Angular 2 Simple Material Design UI Components customisable with Simple 30 KB CSS with LESS support and full features support , just plugin up and run for clarity look at sample examples

.sui-modal {
    z-index: 3;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.sui-modal-content {
    margin: auto;
    background-color:@bg-color;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px
}

@media @mobile {
    .sui-modal-content {
        margin: 0 10px;
        width: auto!important
    }
    .sui-modal {
        padding-top: 30px
    }
}

@media @tablet {
    .sui-modal-content {
        width: 500px
    }
    .sui-modal {
        padding-top: 50px
    }
}

@media @desktop {
    .sui-modal-content {
        width: 900px
    }
}

@media @desktop-xl {
    .sui-modal-content {
        width: 1100px
    }
}