diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_modal.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_modal.scss | 26 |
1 files changed, 16 insertions, 10 deletions
diff --git a/assets/stylesheets/bootstrap/_modal.scss b/assets/stylesheets/bootstrap/_modal.scss index f20bb9d..65b61d9 100644 --- a/assets/stylesheets/bootstrap/_modal.scss +++ b/assets/stylesheets/bootstrap/_modal.scss @@ -18,11 +18,11 @@ .modal { position: fixed; top: 0; - right: 0; - bottom: 0; left: 0; z-index: $zindex-modal; display: none; + width: 100%; + height: 100%; overflow: hidden; // Prevent Chrome on Windows from adding a focus outline. For details, see // https://github.com/twbs/bootstrap/pull/10951. @@ -43,10 +43,10 @@ // When fading in the modal, animate it to slide down .modal.fade & { @include transition($modal-transition); - transform: translate(0, -25%); + transform: $modal-fade-transform; } .modal.show & { - transform: translate(0, 0); + transform: $modal-show-transform; } } @@ -84,10 +84,10 @@ .modal-backdrop { position: fixed; top: 0; - right: 0; - bottom: 0; left: 0; z-index: $zindex-modal-backdrop; + width: 100vw; + height: 100vh; background-color: $modal-backdrop-bg; // Fade for backdrop @@ -108,7 +108,7 @@ .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) (-$modal-header-padding) (-$modal-header-padding) auto; + margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; } } @@ -135,6 +135,7 @@ justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items padding: $modal-inner-padding; 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; } @@ -164,7 +165,6 @@ &::before { height: calc(100vh - (#{$modal-dialog-margin-y-sm-up} * 2)); } - } .modal-content { @@ -172,9 +172,15 @@ } .modal-sm { max-width: $modal-sm; } - } @include media-breakpoint-up(lg) { - .modal-lg { max-width: $modal-lg; } + .modal-lg, + .modal-xl { + max-width: $modal-lg; + } +} + +@include media-breakpoint-up(xl) { + .modal-xl { max-width: $modal-xl; } } |