1 files changed, 18 insertions, 51 deletions

diff --git a/assets/stylesheets/bootstrap/_button-group.scss b/assets/stylesheets/bootstrap/_button-group.scss
index 0e63ecc..584ed15 100644
--- a/assets/stylesheets/bootstrap/_button-group.scss
+++ b/assets/stylesheets/bootstrap/_button-group.scss
@@ -4,28 +4,26 @@
 .btn-group,
 .btn-group-vertical {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   vertical-align: middle; // match .btn alignment given font-size hack above
 
   > .btn {
     position: relative;
-    float: left;
-    margin-bottom: 0;
+    flex: 0 1 auto;
 
-    // Bring the "active" button to the front
+    // Bring the hover, focused, and "active" buttons to the fron to overlay
+    // the borders properly
+    @include hover {
+      z-index: 2;
+    }
     &:focus,
     &:active,
     &.active {
       z-index: 2;
     }
-    @include hover {
-      z-index: 2;
-    }
   }
-}
 
-// Prevent double borders when buttons are next to each other
-.btn-group {
+  // Prevent double borders when buttons are next to each other
   .btn + .btn,
   .btn + .btn-group,
   .btn-group + .btn,
@@ -36,18 +34,11 @@
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
-  margin-left: -$btn-toolbar-margin; // Offset the first child's margin
-  @include clearfix();
+  display: flex;
+  justify-content: flex-start;
 
-  .btn-group,
   .input-group {
-    float: left;
-  }
-
-  > .btn,
-  > .btn-group,
-  > .input-group {
-    margin-left: $btn-toolbar-margin;
+    width: auto;
   }
 }
 
@@ -137,43 +128,19 @@
 }
 
 
-// Reposition the caret
-.btn .caret {
-  margin-left: 0;
-}
-// Carets in other button sizes
-.btn-lg .caret {
-  border-width: $caret-width-lg $caret-width-lg 0;
-  border-bottom-width: 0;
-}
-// Upside down carets for .dropup
-.dropup .btn-lg .caret {
-  border-width: 0 $caret-width-lg $caret-width-lg;
-}
-
-
-
 //
 // Vertical button groups
 //
 
 .btn-group-vertical {
-  > .btn,
-  > .btn-group,
-  > .btn-group > .btn {
-    display: block;
-    float: none;
-    width: 100%;
-    max-width: 100%;
-  }
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
 
-  // Clear floats so dropdown menus can be properly placed
-  > .btn-group {
-    @include clearfix();
-
-    > .btn {
-      float: none;
-    }
+  .btn,
+  .btn-group {
+    width: 100%;
   }
 
   > .btn + .btn,