angular2-boiler-plate/public/css/modal.less

Angular 2 Boiler plate that integrated with WebPack, TypeScript, DatePicker, RxJs for Reactive Extensions in Java Script , Karma , Jasmine for unit testing , WebKit ,protractor e2e testing

@import 'variables.less';


.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
    }
}