flex the footer and include some margin magic

- we need to set margin for space between footer buttons as flexbox doesn't render HTML spaces like inline-block does

- flexbox doesn't have collapsing margins or anything, so we hack it with some :not(:first-child) and :not(:last-child) action

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 12f7a62a781fb89311df9f05704b99fa3bbb824d..d9aa102a595fd8a1632277bb113b931d803d5867 100644 (file)
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -102,10 +102,15 @@
 
 // Footer (for actions)
 .modal-footer {
+  display: flex;
+  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
+  align-items: center; // vertically center
   padding: $modal-inner-padding;
-  text-align: right; // right align buttons
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
-  @include clearfix(); // clear it in case folks use .float-* classes on buttons
+
+  // Easily place margin between footer elements
+  > :not(:first-child) { margin-left: .25rem; }
+  > :not(:last-child) { margin-right: .25rem; }
 }
 
 // Measure scrollbar width for padding body during modal show/hide