diff options
| author | Martijn Cuppens <[email protected]> | 2019-08-16 11:49:06 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-08-16 12:49:06 +0300 |
| commit | bbbda681ccf5c699e7d8ef89e837258087f307e5 (patch) | |
| tree | c77d35071eda2850b44ffe25e700535f235a90cf | |
| parent | ceddca71a24e9ee4c741289e4d5e896c7d9ae53e (diff) | |
| download | bootstrap-bbbda681ccf5c699e7d8ef89e837258087f307e5.tar.xz bootstrap-bbbda681ccf5c699e7d8ef89e837258087f307e5.zip | |
Enable wrapping for elements in .modal-footer (#25103)
| -rw-r--r-- | scss/_modal.scss | 13 | ||||
| -rw-r--r-- | scss/_variables.scss | 3 |
2 files changed, 12 insertions, 4 deletions
diff --git a/scss/_modal.scss b/scss/_modal.scss index 9942678ae..bc08617c9 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 cd8997e75..5a271b08a 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; |