// // Modal // —————————————-
// Kill the scroll on the body .modal-open {
overflow: hidden;
}
.modal {
display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: $z-index-modal; -webkit-overflow-scrolling: touch; &:empty { display: none; } outline: 0; // When fading in the modal, animate it to slide down &.fade .modal-dialog { @include vendor-prefix('transform', 'translate(0, -25%)'); @include vendor-prefix('transition', 'transform 0.3s ease-out'); } &.in .modal-dialog { @include vendor-prefix('transform', 'translate(0, 0)'); }
}
.modal-open .modal {
overflow-x: hidden; overflow-y: auto;
}
.modal-dialog {
position: relative; width: auto; margin: $modal-margin;
}
.modal-content {
position: relative; background-color: $modal-content-bgr; border-radius: $modal-border-radius; padding: $modal-padding; @include box-shadow(0 1px 3px rgba(0, 0, 0, .75)); background-clip: padding-box; outline: 0;
}
.modal-content .close {
margin-top: 10px; // + 2px font gap = 1bu margin-right: 10px; // + 2px font gap = 1bu
}
.modal-backdrop {
position: absolute; top: 0; right: 0; left: 0; background-color: $modal-backdrop-bgr; &.fade { opacity: 0; } &.in { opacity: $modal-backdrop-opacity; }
}
.modal-header {
padding: $modal-header-padding; border-bottom: 1px solid $modal-header-border-color;
}
.modal-title {
text-align: center;
}
.modal-body {
position: relative; padding: $modal-body-padding;
}
.modal-footer {
text-align: right; padding: $modal-footer-padding; border-top: 1px solid $modal-footer-border-color;
}
// Measure scrollbar width for padding body during modal show/hide .modal-scrollbar-measure {
position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll;
}
// Scale up the modal @media (min-width: #{$grid-medium-min}px) {
// Automatically set modal's width for larger viewports .modal-dialog { width: $modal-regular-width; margin: $modal-regular-margin; } // Modal sizes .modal-small { width: $modal-small-width; }
}
@media (min-width: #{$grid-large-min}px) {
.modal-large { width: $modal-large-width; }
}