// Container that the modal scrolls within
.modal {
display: none;
- overflow: auto;
- overflow-y: scroll;
+ overflow: hidden;
position: fixed;
top: 0;
right: 0;
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");
}
- &.in .modal-dialog { .translate(0, 0)}
+ &.in .modal-dialog { .translate(0, 0) }
+}
+.modal-open .modal {
+ overflow-x: hidden;
+ overflow-y: auto;
}
// Shell div to position the modal with bottom padding
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
- outline: none;
+ outline: 0;
}
// Modal background
// Footer (for actions)
.modal-footer {
- margin-top: 15px;
- padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
+ padding: @modal-inner-padding;
text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color;
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
}
}
+// 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: @screen-sm-min) {
-
// Automatically set modal's width for larger viewports
.modal-dialog {
width: @modal-md;
// Modal sizes
.modal-sm { width: @modal-sm; }
- .modal-lg { width: @modal-lg; }
+}
+@media (min-width: @screen-md-min) {
+ .modal-lg { width: @modal-lg; }
}