fix(modals): increase space between modal content and footer (#1658)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Mar 8, 2023 · c73d446 · c73d446
1 parent f83cb2e
commit c73d446
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -31,6 +31,7 @@
   --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
   --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
   --#{$prefix}modal-footer-padding: #{$modal-footer-padding}; // Boosted mod
+  --#{$prefix}modal-footer-margin-top: #{$modal-footer-margin-top}; // Boosted mod
   --#{$prefix}modal-content-padding: #{$modal-content-padding}; // Boosted mod
   --#{$prefix}modal-img-margin: #{$modal-img-margin};
   --#{$prefix}modal-img-btn-close-offset: #{$modal-img-btn-close-offset};
@@ -78,6 +79,7 @@
   // scss-docs-start modal-scrollable-css-vars
   --#{$prefix}modal-scrollable-inner-padding: #{$modal-scrollable-inner-padding}; // Boosted mod
   --#{$prefix}modal-scrollable-inner-margin: #{$modal-scrollable-inner-margin}; // Boosted mod
+  --#{$prefix}modal-footer-margin-top: #{$modal-scrollable-footer-margin-top}; // Boosted mod
   // scss-docs-end modal-scrollable-css-vars
 
   height: calc(100% - var(--#{$prefix}modal-margin) * 2);
@@ -191,6 +193,7 @@
   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: var(--#{$prefix}modal-footer-padding); // Boosted mod
+  margin-top: var(--#{$prefix}modal-footer-margin-top); // Boosted mod
   background-color: var(--#{$prefix}modal-footer-bg);
   border-top: if($modal-footer-border-color == null, null, var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color)); // Boosted mod
   @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
@@ -208,6 +211,7 @@
   .modal {
     --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
     --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
+    --#{$prefix}modal-footer-margin-top: #{$modal-footer-margin-top-sm}; // Boosted mod
   }
 
   // Automatically set modal's width for larger viewports

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1842,11 +1842,14 @@ $modal-header-padding:              $modal-header-padding-y $modal-header-paddin
 $modal-footer-bg:                   null !default;
 $modal-footer-border-color:         null !default; // Boosted mod
 $modal-footer-border-width:         $modal-header-border-width !default;
+$modal-footer-margin-top:           $spacer * .5 !default; // Boosted mod
+$modal-footer-margin-top-sm:        $spacer * .75 !default; // Boosted mod
 
 // Boosted mod
 //// Scrollable modal
-$modal-scrollable-inner-padding:    $spacer !default;
-$modal-scrollable-inner-margin:     $spacer 0 $spacer * .5 !default;
+$modal-scrollable-inner-padding:     $spacer !default;
+$modal-scrollable-inner-margin:      $spacer 0 0 !default;
+$modal-scrollable-footer-margin-top: $spacer * .5 !default;
 
 //// Modal with top image
 $modal-img-margin:                  -$modal-content-padding-y 0 $modal-content-padding-y !default; // Boosted mod

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
@@ -310,6 +310,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
       <li><code>--bs-nav-underline-link-hover-bg</code></li>
       <li><code>--bs-nav-underline-link-hover-color</code></li>
       <li><code>--bs-nav-underline-link-padding-x</code></li>
+      <li><code>--bs-modal-footer-margin-top</code></li>
       <li><code>--bs-offcanvas-transition</code></li>
       <li><code>--bs-primary-bg-subtle</code></li>
       <li><code>--bs-primary-border-subtle</code></li>
@@ -415,6 +416,9 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
       <li><code>$nav-underline-link-border-width</code></li>
       <li><code>$nav-underline-link-hover-color</code></li>
       <li><code>$nav-underline-link-padding-x</code></li>
+      <li><code>$modal-footer-margin-top</code></li>
+      <li><code>$modal-footer-margin-top-sm</code></li>
+      <li><code>$modal-scrollable-footer-margin-top</code></li>
       <li><code>$pre-color-inverted</code></li>
       <li><code>$primary-bg-subtle-dark</code></li>
       <li><code>$primary-bg-subtle</code></li>