From bbbda681ccf5c699e7d8ef89e837258087f307e5 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Fri, 16 Aug 2019 11:49:06 +0200
Subject: [PATCH] Enable wrapping for elements in .modal-footer (#25103)
---
scss/_modal.scss | 13 +++++++++----
scss/_variables.scss | 3 +++
2 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 9942678ae8..bc08617c95 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -166,15 +166,20 @@
// Footer (for actions)
.modal-footer {
display: flex;
+ flex-wrap: wrap;
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: $modal-inner-padding;
+ padding: $modal-inner-padding - $modal-footer-margin-between / 2;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-inner-border-radius);
- // Easily place margin between footer elements
- > :not(:first-child) { margin-left: .25rem; }
- > :not(:last-child) { margin-right: .25rem; }
+ // Place margin between footer elements
+ // This solution is far from ideal because of the universal selector usage,
+ // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
+ // stylelint-disable-next-line selector-max-universal
+ > * {
+ margin: $modal-footer-margin-between / 2;
+ }
}
// Measure scrollbar width for padding body during modal show/hide
diff --git a/scss/_variables.scss b/scss/_variables.scss
index cd8997e755..5a271b08a9 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -933,6 +933,9 @@ $badge-border-radius: $border-radius !default;
// Padding applied to the modal body
$modal-inner-padding: 1rem !default;
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between: .5rem !default;
+
$modal-dialog-margin: .5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
--
GitLab