rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages 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 {
display: flex;
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
padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include border-top-radius($modal-content-inner-border-radius);
.btn-close {
padding: $modal-header-padding;
// auto on the left force icon to the right even when there is no .modal-title
margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
}
}