From: Mark Otto <markdotto@gmail.com>
Date: Sun, 25 Dec 2016 01:27:42 +0000 (-0800)
Subject: flex the footer and include some margin magic
X-Git-Tag: v4.0.0-alpha.6~178
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=eb19def79806f62028bef1b8be92cd2ef196d4d1;p=thirdparty%2Fbootstrap.git

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 12f7a62a78..d9aa102a59 100644
--- 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