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

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 9cf3aa89a9694d49d9becc34ccb9cdba316d754b..06ab5644d21ce27f445e49a949c6ddcc58893b02 100644 (file)
--- 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;
   }
 }