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

Tweak sizing and alignment of .btn-close in modal headers

Browse source
This commit is contained in:
Mark Otto 2020-09-13 19:21:45 -07:00 committed by Mark Otto
parent 57fc28a854
commit 4778deac02
1 changed files with 3 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
scss/_modal.scss
View file

@ -112,16 +112,15 @@
.modal-header { .modal-header {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
align-items: flex-start; // so the close btn always stays on the upper right corner align-items: center;
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding; padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color; border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include border-top-radius($modal-content-inner-border-radius); @include border-top-radius($modal-content-inner-border-radius);
.btn-close { .btn-close {
padding: $modal-header-padding; padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
// auto on the left force icon to the right even when there is no .modal-title margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
} }
} }