add button groups

3 files changed, 76 insertions, 8 deletions

diff --git a/demo/index.html b/demo/index.html
index af237e3..9cc38d2 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -179,6 +179,25 @@
                 </div>
             </div>
         </section>
+        <section class="button-groups">
+            <header class="text-center"><h4>button groups</h4></header>
+            <div class="columns">
+                <div class="column">
+                    <div class="btn-group">
+                        <button class="btn">first button</button>
+                        <button class="btn">second button</button>
+                        <button class="btn">third button</button>
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="btn-group">
+                        <button class="btn btn-primary">first button</button>
+                        <button class="btn btn-primary">second button</button>
+                        <button class="btn btn-primary">third button</button>
+                    </div>
+                </div>
+            </div>
+        </section>
         <section class="tooltips">
             <header class="text-center"><h4>tooltips</h4></header>
             <div class="columns">
diff --git a/dist/spectre.css b/dist/spectre.css
index 5299da4..93e1d6a 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -691,7 +691,7 @@ button[disabled] {
 .btn.btn-primary,
 button.btn-primary {
   color: #fff;
-  border-color: #5764C6;
+  border-color: #4452c0;
   background-color: #5764C6;
 }
 .btn.btn-primary:hover,
@@ -699,7 +699,7 @@ button.btn-primary:hover,
 .btn.btn-primary:focus,
 button.btn-primary:focus {
   color: #fff;
-  border-color: #4452c0;
+  border-color: #3b49af;
   background-color: #4452c0;
 }
 .btn.btn-primary:active,
@@ -797,6 +797,36 @@ button.btn-clear::after {
   margin-left: -0.1rem;
   margin-top: -0.4rem;
 }
+.btn-group {
+  display: inline-block;
+  vertical-align: middle;
+}
+.btn-group::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.btn-group::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.btn-group .btn {
+  float: left;
+}
+.btn-group .btn:first-child:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.btn-group .btn:not(:first-child):not(:last-child) {
+  margin-left: -0.1rem;
+  border-radius: 0;
+}
+.btn-group .btn:last-child:not(:first-child) {
+  margin-left: -0.1rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
diff --git a/src/buttons.less b/src/buttons.less
index 43e4e7d..95bd542 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -61,13 +61,13 @@ button {
   // Button Primary
   &.btn-primary {
     color: #fff;
-    border-color: @core-color;
+    border-color: darken(@core-color, 5%);
     background-color: @core-color;
 
     &:hover,
     &:focus {
       color: #fff;
-      border-color: darken(@core-color, 5%);
+      border-color: darken(@core-color, 10%);
       background-color: darken(@core-color, 5%);
     }
     &:active,
@@ -166,10 +166,29 @@ button {
     }
   }
 
-  .btn-groups {
+  // TODO: Button with icons
+}
 
-  }
+.btn-group {
+  display: inline-block;
+  vertical-align: middle;
+  .clearfix();
 
-  // TODO: Button with icons
-  // TODO: Button groups
+  .btn {
+    float: left;
+
+    &:first-child:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      margin-left: -.1rem;
+      border-radius: 0;
+    }
+    &:last-child:not(:first-child) {
+      margin-left: -.1rem;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
 }
\ No newline at end of file