.modal {
transition: .3s opacity; opacity: .1; display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; overflow-y: scroll; -webkit-overflow-scrolling: touch; background-color: rgba(82, 95, 127, .25); .modal-dialog { transition: .2s transform; transform: scale(.1); border-radius: 4px; box-shadow: 0 7px 14px 0 rgba(60, 66, 87, .12), 0 3px 6px 0 rgba(0, 0, 0, .12); background-color: #fff; margin: 20px auto 0; max-width: 600px; &.modal-sm { max-width: 400px; } &.modal-lg { max-width: 900px; } &.modal-xl { max-width: 1140px; } @media (max-width: $screen-sm) { max-width: 90%; &.modal-sm, &.modal-lg, &.modal-xl { max-width: 90%; } } } &.js-active { opacity: 1; .modal-dialog { transform: scale(1); } } .modal-header { position: relative; font-size: 20px; color: #1a1f36; .modal-title { padding: 20px; } .btn-close { display: block; position: absolute; right: 0; top: 0; background-color: transparent; border: 0; @include size(68px); .icon { background-size: 16px 16px; @include size(16px); } } } .modal-body { font-size: 14px; color: #1a1f36; padding: 20px; } .modal-footer { padding: 18px 20px; text-align: right; .btn { padding: 6px 12px; font-size: 14px; font-weight: 400; } .btn.btn-danger, .btn.btn-primary { margin-left: 10px; } }
}
.modal.static {
overflow-y: initial; background-color: transparent; opacity: 1; position: static; display: block; .modal-dialog { transform: scale(1); margin: 0 auto; }
}