diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_modal.scss')
-rw-r--r-- | vendor/twbs/bootstrap/scss/_modal.scss | 42 |
1 files changed, 26 insertions, 16 deletions
diff --git a/vendor/twbs/bootstrap/scss/_modal.scss b/vendor/twbs/bootstrap/scss/_modal.scss index 6b6770b32..9053c173f 100644 --- a/vendor/twbs/bootstrap/scss/_modal.scss +++ b/vendor/twbs/bootstrap/scss/_modal.scss @@ -48,14 +48,19 @@ .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: calc(100% - #{$modal-dialog-margin * 2}); + max-height: subtract(100%, $modal-dialog-margin * 2); .modal-content { - max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11 + max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11 overflow: hidden; } @@ -72,12 +77,12 @@ .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); content: ""; } @@ -138,7 +143,7 @@ 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; @@ -158,7 +163,7 @@ .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; } @@ -166,15 +171,20 @@ // 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); - - // Easily place margin between footer elements - > :not(:first-child) { margin-left: .25rem; } - > :not(:last-child) { margin-right: .25rem; } + @include border-bottom-radius($modal-content-inner-border-radius); + + // 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 + // stylelint-disable-next-line selector-max-universal + > * { + margin: $modal-footer-margin-between / 2; + } } // Measure scrollbar width for padding body during modal show/hide @@ -195,18 +205,18 @@ } .modal-dialog-scrollable { - max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2}); + max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2); .modal-content { - max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2}); + 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); } } |