diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_modal.scss')
-rw-r--r-- | vendor/twbs/bootstrap/scss/_modal.scss | 111 |
1 files changed, 45 insertions, 66 deletions
diff --git a/vendor/twbs/bootstrap/scss/_modal.scss b/vendor/twbs/bootstrap/scss/_modal.scss index e43c70fbb..4a0e3b861 100644 --- a/vendor/twbs/bootstrap/scss/_modal.scss +++ b/vendor/twbs/bootstrap/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; @@ -56,19 +47,13 @@ } .modal-dialog-scrollable { - display: flex; // IE10/11 - max-height: subtract(100%, $modal-dialog-margin * 2); + height: subtract(100%, $modal-dialog-margin * 2); .modal-content { - max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11 + max-height: 100%; overflow: hidden; } - .modal-header, - .modal-footer { - flex-shrink: 0; - } - .modal-body { overflow-y: auto; } @@ -78,29 +63,6 @@ display: flex; align-items: center; 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: 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 @@ -140,16 +102,16 @@ // Top section of the modal w/ title and dismiss .modal-header { display: flex; - align-items: flex-start; // so the close btn always stays on the upper right corner + flex-shrink: 0; + align-items: center; 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-inner-border-radius); - .close { - padding: $modal-header-padding; - // auto on the left force icon to the right even when there is no .modal-title - margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; + .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; } } @@ -173,6 +135,7 @@ .modal-footer { display: flex; flex-wrap: wrap; + 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; @@ -187,15 +150,6 @@ } } -// 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 @@ -205,20 +159,11 @@ } .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); - } + height: subtract(100%, $modal-dialog-margin-y-sm-up * 2); } .modal-dialog-centered { min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2); - - &::before { - height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2); - height: min-content; - } } .modal-content { @@ -238,3 +183,37 @@ @include media-breakpoint-up(xl) { .modal-xl { max-width: $modal-xl; } } + +// scss-docs-start modal-fullscreen-loop +@each $breakpoint in map-keys($grid-breakpoints) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + $postfix: if($infix != "", $infix + "-down", ""); + + @include media-breakpoint-down($breakpoint) { + .modal-fullscreen#{$postfix} { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + + .modal-content { + height: 100%; + border: 0; + @include border-radius(0); + } + + .modal-header { + @include border-radius(0); + } + + .modal-body { + overflow-y: auto; + } + + .modal-footer { + @include border-radius(0); + } + } + } +} +// scss-docs-end modal-fullscreen-loop |