From eb19def79806f62028bef1b8be92cd2ef196d4d1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 24 Dec 2016 17:27:42 -0800 Subject: [PATCH] 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 --- scss/_modal.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) 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