diff options
author | Shohei Yoshida <fellows3@gmail.com> | 2019-01-21 00:28:16 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-01-21 00:28:16 +0300 |
commit | de0bb1e0522d14bcdef70746da277992f992f83c (patch) | |
tree | b48397d9cd7f0e1f695a9b7beb56abf728e65bf8 /scss/_modal.scss | |
parent | 41f85b64bf6dd7aae13c1b9e5ca6ed310bfa1bbf (diff) |
Scrollable modal (#27769)
Diffstat (limited to 'scss/_modal.scss')
-rw-r--r-- | scss/_modal.scss | 50 |
1 files changed, 46 insertions, 4 deletions
diff --git a/scss/_modal.scss b/scss/_modal.scss index 65b61d90c2..0c4a68d0be 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -50,17 +50,51 @@ } } +.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 @@ -159,11 +193,19 @@ 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}); } } |