kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Enable wrapping for elements in .modal-footer (#25103)

Browse source
This commit is contained in:
Martijn Cuppens 2019-08-16 11:49:06 +02:00 committed by XhmikosR
parent ceddca71a2
commit bbbda681cc
2 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
scss/_modal.scss
View file

@ -166,15 +166,20 @@
// Footer (for actions) // Footer (for actions)
.modal-footer { .modal-footer {
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; // vertically center align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items 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; border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-inner-border-radius); @include border-bottom-radius($modal-content-inner-border-radius);
// Easily place margin between footer elements // Place margin between footer elements
> :not(:first-child) { margin-left: .25rem; } // This solution is far from ideal because of the universal selector usage,
> :not(:last-child) { margin-right: .25rem; } // 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 // Measure scrollbar width for padding body during modal show/hide

3
scss/_variables.scss
View file

@ -933,6 +933,9 @@ $badge-border-radius: $border-radius !default;
// Padding applied to the modal body // Padding applied to the modal body
$modal-inner-padding: 1rem !default; $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: .5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default; $modal-dialog-margin-y-sm-up: 1.75rem !default;