1 files changed, 91 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/buttons/button-group.scss b/assets/sass/@primer/css/buttons/button-group.scss
new file mode 100644
index 0000000..429fad9
--- /dev/null
+++ b/assets/sass/@primer/css/buttons/button-group.scss
@@ -0,0 +1,91 @@
+// Button group
+//
+// A button group is a series of buttons laid out next to each other, all part
+// of one visual button, but separated by rules to be separate.
+
+.BtnGroup {
+  display: inline-block;
+  vertical-align: middle;
+  @include clearfix();
+
+  // Proper spacing for multiple button groups (a la, gollum editor)
+  + .BtnGroup,
+  + .btn {
+    margin-left: $spacer-1;
+  }
+}
+
+.BtnGroup-item {
+  position: relative;
+  float: left;
+  border-right-width: 0;
+  border-radius: 0;
+
+  &:first-child {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child {
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  &.selected,
+  &[aria-selected=true],
+  &:focus,
+  &:active,
+  &:hover {
+    border-right-width: $border-width;
+
+    + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+.BtnGroup-parent {
+  float: left;
+
+  &:first-child .BtnGroup-item {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child .BtnGroup-item {
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  .BtnGroup-item {
+    border-right-width: 0;
+    border-radius: 0;
+  }
+
+  &.selected,
+  &[aria-selected=true],
+  &:focus,
+  &:active,
+  &:hover {
+    .BtnGroup-item {
+      border-right-width: $border-width;
+    }
+
+    + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+// ensure that the focus ring sits above the adjacent buttons
+.BtnGroup-item,
+.BtnGroup-parent {
+  &:focus,
+  &:active {
+    z-index: 1;
+  }
+}