Add Full-Screen size to Modal and Responsive variations for breakpoints

(Works from breakpoint and down)

1 files changed, 16 insertions, 0 deletions

diff --git a/scss/_modal.scss b/scss/_modal.scss
index ed6ab4eb1..b91848d8b 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();
+    }
+  }
+}