1 files changed, 65 insertions, 0 deletions
diff --git a/lib/button-groups.less b/lib/button-groups.less
new file mode 100644
index 000000000..3024ecd65
--- /dev/null
+++ b/lib/button-groups.less
@@ -0,0 +1,65 @@
+// BUTTON GROUPS
+// -------------
+
+// Group multiple button groups together for a toolbar
+.btn-toolbar {
+  .clearfix();
+  .btn-group {
+    float: left;
+    margin-right: 10px;
+  }
+}
+
+// Clear the float
+.btn-group {
+  .clearfix();
+}
+// Float them, remove border radius, then re-add to first and last elements
+.btn-group .btn {
+  position: relative;
+  float: left;
+  margin-left: -1px;
+  .border-radius(0);
+  // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+  &:first-child {
+    margin-left: 0;
+       -webkit-border-top-left-radius: 4px;
+           -moz-border-radius-topleft: 4px;
+               border-top-left-radius: 4px;
+    -webkit-border-bottom-left-radius: 4px;
+        -moz-border-radius-bottomleft: 4px;
+            border-bottom-left-radius: 4px;
+  }
+  &:last-child {
+       -webkit-border-top-right-radius: 4px;
+           -moz-border-radius-topright: 4px;
+               border-top-right-radius: 4px;
+    -webkit-border-bottom-right-radius: 4px;
+        -moz-border-radius-bottomright: 4px;
+            border-bottom-right-radius: 4px;
+  }
+  // Reset corners for large buttons
+  &.large:first-child {
+    margin-left: 0;
+       -webkit-border-top-left-radius: 6px;
+           -moz-border-radius-topleft: 6px;
+               border-top-left-radius: 6px;
+    -webkit-border-bottom-left-radius: 6px;
+        -moz-border-radius-bottomleft: 6px;
+            border-bottom-left-radius: 6px;
+  }
+  &.large:last-child {
+       -webkit-border-top-right-radius: 6px;
+           -moz-border-radius-topright: 6px;
+               border-top-right-radius: 6px;
+    -webkit-border-bottom-right-radius: 6px;
+        -moz-border-radius-bottomright: 6px;
+            border-bottom-right-radius: 6px;
+  }
+}
+// On hover/focus/active, bring the proper btn to front
+.btn-group .btn:hover,
+.btn-group .btn:focus,
+.btn-group .btn:active {
+  z-index: 2;
+}