assets/stylesheets/bootstrap/_modal.scss in bootstrap-4.2.1 vs assets/stylesheets/bootstrap/_modal.scss in bootstrap-4.3.0
- old
+ new
@@ -48,30 +48,65 @@
.modal.show & {
transform: $modal-show-transform;
}
}
+.modal-dialog-scrollable {
+ display: flex; // IE10/11
+ max-height: calc(100% - #{$modal-dialog-margin * 2});
+
+ .modal-content {
+ max-height: calc(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: calc(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: calc(100vh - #{$modal-dialog-margin * 2});
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
.modal-content {
position: relative;
display: flex;
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;
border: $modal-content-border-width solid $modal-content-border-color;
@include border-radius($modal-content-border-radius);
@@ -157,14 +192,22 @@
.modal-dialog {
max-width: $modal-md;
margin: $modal-dialog-margin-y-sm-up auto;
}
+ .modal-dialog-scrollable {
+ max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
+
+ .modal-content {
+ max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
+ }
+ }
+
.modal-dialog-centered {
- min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
+ min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
&::before {
- height: calc(100vh - (#{$modal-dialog-margin-y-sm-up} * 2));
+ height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
}
}
.modal-content {
@include box-shadow($modal-content-box-shadow-sm-up);