diff options
Diffstat (limited to 'scss/_modal.scss')
| -rw-r--r-- | scss/_modal.scss | 42 |
1 files changed, 7 insertions, 35 deletions
diff --git a/scss/_modal.scss b/scss/_modal.scss index 6dd4dd329..21e1258f5 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -4,16 +4,6 @@ // .modal-content - actual modal w/ bg and corners and stuff -.modal-open { - // Kill the scroll on the body - overflow: hidden; - - .modal { - overflow-x: hidden; - overflow-y: auto; - } -} - // Container that the modal scrolls within .modal { position: fixed; @@ -23,7 +13,8 @@ display: none; width: 100%; height: 100%; - overflow: hidden; + overflow-x: hidden; + overflow-y: auto; // Prevent Chrome on Windows from adding a focus outline. For details, see // https://github.com/twbs/bootstrap/pull/10951. outline: 0; @@ -94,17 +85,7 @@ // Modal background .modal-backdrop { - position: fixed; - top: 0; - left: 0; - z-index: $zindex-modal-backdrop; - width: 100vw; - height: 100vh; - background-color: $modal-backdrop-bg; - - // Fade for backdrop - &.fade { opacity: 0; } - &.show { opacity: $modal-backdrop-opacity; } + @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity); } // Modal header @@ -119,8 +100,8 @@ @include border-top-radius($modal-content-inner-border-radius); .btn-close { - padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2); - margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto; + padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5); + margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto; } } @@ -147,7 +128,7 @@ flex-shrink: 0; 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 - $modal-footer-margin-between / 2; + padding: $modal-inner-padding - $modal-footer-margin-between * .5; border-top: $modal-footer-border-width solid $modal-footer-border-color; @include border-bottom-radius($modal-content-inner-border-radius); @@ -155,19 +136,10 @@ // 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; + margin: $modal-footer-margin-between * .5; } } -// 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 @include media-breakpoint-up(sm) { // Automatically set modal's width for larger viewports |