Modal: fix margin between text and buttons

.bundlewatch.config.json

@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "38.25 kB"
+      "maxSize": "38.50 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

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};
@@ -191,6 +192,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 +210,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

scss/_variables.scss

@@ -1833,6 +1833,8 @@ $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

site/content/docs/5.3/migration.md

@@ -72,6 +72,9 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
 
   - <span class="badge text-warning-emphasis bg-warning">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/list-group#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
 
+- **Modals**
+  - Added new variables for `$modal-footer-margin-top` and `$modal-footer-margin-top-sm`.
+
 - **Navs and tabs**
   - <span class="badge bg-danger">Breaking</span> Based on Bootstrap, we've replaced "Tabs light" variant by "Underline" variant. It means that `.nav-tabs-light` is deprecated and doesn't exist anymore and so that the following modification must be done in your websites:
 
@@ -286,6 +289,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>
@@ -389,6 +393,8 @@ 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>$pre-color-inverted</code></li>
       <li><code>$primary-bg-subtle-dark</code></li>
       <li><code>$primary-bg-subtle</code></li>