.modal.show & {
transform: $modal-show-transform;
}
+
+ // When trying to close, animate focus to scale
+ .modal.modal-static & {
+ transform: $modal-scale-transform;
+ }
+}
+
+.modal-dialog-scrollable {
+ display: flex; // IE10/11
+ max-height: subtract(100%, $modal-dialog-margin * 2);
+
+ .modal-content {
+ max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
+ overflow: hidden;
+ }
+
+ .modal-header,
+ .modal-footer {
+ flex-shrink: 0;
+ }
+
+ .modal-body {
+ overflow-y: auto;
+ }
}
.modal-dialog-centered {
display: flex;
align-items: center;
- min-height: calc(100% - (#{$modal-dialog-margin} * 2));
+ min-height: subtract(100%, $modal-dialog-margin * 2);
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
&::before {
display: block; // IE10
- height: calc(100vh - (#{$modal-dialog-margin} * 2));
+ height: subtract(100vh, $modal-dialog-margin * 2);
+ height: min-content; // Reset height to 0 except on IE
content: "";
}
+
+ // Ensure `.modal-body` shows scrollbar (IE10/11)
+ &.modal-dialog-scrollable {
+ flex-direction: column;
+ justify-content: center;
+ height: 100%;
+
+ .modal-content {
+ max-height: none;
+ }
+
+ &::before {
+ content: none;
+ }
+ }
}
// Actual modal
flex-direction: column;
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
// counteract the pointer-events: none; in the .modal-dialog
+ color: $modal-content-color;
pointer-events: auto;
background-color: $modal-content-bg;
background-clip: padding-box;
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
- @include border-top-radius($modal-content-border-radius);
+ @include border-top-radius($modal-content-inner-border-radius);
.close {
padding: $modal-header-padding;
.modal-body {
position: relative;
// Enable `flex-grow: 1` so that the body take up as much space as possible
- // when should there be a fixed height on `.modal-dialog`.
+ // when there should be a fixed height on `.modal-dialog`.
flex: 1 1 auto;
padding: $modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
display: flex;
+ flex-wrap: wrap;
align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
- padding: $modal-inner-padding;
+ padding: $modal-inner-padding - $modal-footer-margin-between / 2;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
- @include border-bottom-radius($modal-content-border-radius);
+ @include border-bottom-radius($modal-content-inner-border-radius);
- // Easily place margin between footer elements
- > :not(:first-child) { margin-left: .25rem; }
- > :not(:last-child) { margin-right: .25rem; }
+ // Place margin between footer elements
+ // This solution is far from ideal because of the universal selector usage,
+ // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
+ > * {
+ margin: $modal-footer-margin-between / 2;
+ }
}
// Measure scrollbar width for padding body during modal show/hide
margin: $modal-dialog-margin-y-sm-up auto;
}
+ .modal-dialog-scrollable {
+ max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
+
+ .modal-content {
+ max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
+ }
+ }
+
.modal-dialog-centered {
- min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
+ min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
&::before {
- height: calc(100vh - (#{$modal-dialog-margin-y-sm-up} * 2));
+ height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
+ height: min-content;
}
}