diff options
| author | Mark Otto <[email protected]> | 2020-09-13 19:21:45 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2020-09-22 16:49:02 -0700 |
| commit | 4778deac023a0e359fe5321eb431f00b5f2b8c83 (patch) | |
| tree | 3c72e5e3edbe3aba4d0651ca8ab926fbc9dda604 | |
| parent | 57fc28a8548c88d7e79224e9f51611c3d5b278e2 (diff) | |
| download | bootstrap-4778deac023a0e359fe5321eb431f00b5f2b8c83.tar.xz bootstrap-4778deac023a0e359fe5321eb431f00b5f2b8c83.zip | |
Tweak sizing and alignment of .btn-close in modal headers
| -rw-r--r-- | scss/_modal.scss | 7 |
1 files changed, 3 insertions, 4 deletions
diff --git a/scss/_modal.scss b/scss/_modal.scss index 9cf3aa89a..06ab5644d 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -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; } } |