From: gsoti Date: Tue, 23 Apr 2019 14:03:59 +0000 (+0300) Subject: Add Full-Screen size to Modal and Responsive variations for breakpoints X-Git-Tag: v5.0.0-alpha1~268 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e138decdbb3597813c762995753db52abfbc76fb;p=thirdparty%2Fbootstrap.git Add Full-Screen size to Modal and Responsive variations for breakpoints (Works from breakpoint and down) --- diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 5a04655d54..9ace99c322 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -26,6 +26,7 @@ @import "mixins/pagination"; @import "mixins/lists"; @import "mixins/list-group"; +@import "mixins/modal"; @import "mixins/forms"; @import "mixins/table-row"; diff --git a/scss/_modal.scss b/scss/_modal.scss index ed6ab4eb1f..b91848d8bf 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -85,6 +85,7 @@ flex-direction: column; width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` // counteract the pointer-events: none; in the .modal-dialog + height: 100%; color: $modal-content-color; pointer-events: auto; background-color: $modal-content-bg; @@ -142,6 +143,7 @@ // when there should be a fixed height on `.modal-dialog`. flex: 1 1 auto; padding: $modal-inner-padding; + overflow-y: auto; } // Footer (for actions) @@ -204,3 +206,17 @@ @include media-breakpoint-up(xl) { .modal-xl { max-width: $modal-xl; } } + +.modal-fullscreen { + @include modalFullscreen(); +} + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-down($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .modal-fullscreen#{$infix}-down { + @include modalFullscreen(); + } + } +} diff --git a/scss/mixins/_modal.scss b/scss/mixins/_modal.scss new file mode 100644 index 0000000000..061fb63206 --- /dev/null +++ b/scss/mixins/_modal.scss @@ -0,0 +1,14 @@ +// Modal + +// Maximize modal to cover viewport +@mixin modalFullscreen { + width: 100vw; + max-width: none; + height: 100vh; + margin: 0; + + .modal-content { + border: 0; + @include border-radius(0); + } +} diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md index 6789ccc7c9..a5732c6a0d 100644 --- a/site/content/docs/4.3/components/modal.md +++ b/site/content/docs/4.3/components/modal.md @@ -678,6 +678,162 @@ Our default modal without modifier class constitutes the "medium" size modal. +## Fullscreen Modal + +Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassAvailability
.modal-fullscreenAlways
.modal-fullscreen-xl-downBelow 1200px
.modal-fullscreen-lg-downBelow 992px
.modal-fullscreen-md-downBelow 768px
.modal-fullscreen-sm-downBelow 576px
+ +
+ + + + + +
+ +{{< highlight html >}} + + + + +{{< /highlight >}} + + + + + + + + + + + ## Usage The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.