diff options
| author | Mark Otto <[email protected]> | 2016-12-24 17:27:42 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-25 15:28:44 -0800 |
| commit | eb19def79806f62028bef1b8be92cd2ef196d4d1 (patch) | |
| tree | ebf64ac8f739681b926c71705db0b3a126734ec0 | |
| parent | 33746dc63e9e9c9c0abe60e01f3aeb776a66bc81 (diff) | |
| download | bootstrap-eb19def79806f62028bef1b8be92cd2ef196d4d1.tar.xz bootstrap-eb19def79806f62028bef1b8be92cd2ef196d4d1.zip | |
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
| -rw-r--r-- | scss/_modal.scss | 9 |
1 files changed, 7 insertions, 2 deletions
diff --git a/scss/_modal.scss b/scss/_modal.scss index 12f7a62a7..d9aa102a5 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 |