Button group support

dist/framework-with-theme.css

@@ -34,6 +34,9 @@ ul {
   -webkit-transform: translateZ(0px);
   transform: translateZ(0px); }
 
+.content-padded {
+  padding: 10px; }
+
 .bar {
   position: fixed;
   right: 0;
@@ -100,6 +103,52 @@ ul {
   cursor: pointer;
   margin: 0; }
 
+.button-group {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle; }
+  .button-group > .button {
+    position: relative;
+    float: left; }
+    .button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
+      z-index: 2; }
+    .button-group > .button:focus {
+      outline: none; }
+
+.button-group .button + .button,
+.button-group .button + .button-group,
+.button-group .button-group + .button,
+.button-group .button-group + .button-group {
+  margin-left: -1px; }
+
+.button-group > .button:not(:first-child):not(:last-child) {
+  border-radius: 0; }
+
+.button-group > .button:first-child {
+  margin-left: 0; }
+  .button-group > .button:first-child:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0; }
+
+.button-group > .button:last-child:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0; }
+
+.button-group > .button-group {
+  float: left; }
+
+.button-group > .button-group:not(:first-child):not(:last-child) > .button {
+  border-radius: 0; }
+
+.button-group > .button-group:first-child > .button:last-child,
+.button-group > .button-group:first-child > .dropdown-toggle {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0; }
+
+.button-group > .button-group:last-child > .button:first-child {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0; }
+
 .list {
   margin-bottom: 20px;
   padding-left: 0; }

example/buttons.html

@@ -33,7 +33,7 @@
       <h1 class="title">Willkommen!</h1>
     </header>
 
-    <main class="content">
+    <main class="content content-padded">
       <p>
         <a class="button button-default" href="grid.html">Default</a>
         <a class="button button-secondary" href="index.html">Secondary</a>
@@ -44,6 +44,14 @@
         <a class="button button-danger" href="index.html">Danger</a>
         <a class="button button-dark" href="index.html">Dark</a>
       </p>
+      <p>
+        <div class="button-group">
+          <a class="button button-primary" href="index.html">Success</a>
+          <a class="button button-primary" href="index.html">Warning</a>
+          <a class="button button-primary" href="index.html">Danger</a>
+          <a class="button button-primary" href="index.html">Dark</a>
+        </div>
+      </p>
     </main>
 
 

scss/framework/structure/_base.scss

@@ -39,3 +39,7 @@ ul { margin: 0; padding: 0; }
   -webkit-transform: translateZ(0px);
           transform: translateZ(0px);
 }
+
+.content-padded {
+  padding: $contentPadding;
+}

scss/framework/structure/_button-group.scss

@@ -0,0 +1,64 @@
+.button-group {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle; // match .button alignment given font-size hack above
+
+  > .button {
+    position: relative;
+    float: left;
+    // Bring the "active" button to the front
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 2;
+    }
+    &:focus {
+      // Remove focus outline when dropdown JS adds it after closing the menu
+      outline: none;
+    }
+  }
+}
+
+
+.button-group {
+  .button + .button,
+  .button + .button-group,
+  .button-group + .button,
+  .button-group + .button-group {
+    margin-left: -1px;
+  }
+}
+
+.button-group > .button:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+// Set corners individual because sometimes a single button can be in a .button-group and we need :first-child and :last-child to both match
+.button-group > .button:first-child {
+  margin-left: 0;
+  &:not(:last-child) {
+    @include border-right-radius(0);
+  }
+}
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.button-group > .button:last-child:not(:first-child) {
+  @include border-left-radius(0);
+}
+
+// Custom edits for including button-groups within button-groups (useful for including dropdown buttons within a button-group)
+.button-group > .button-group {
+  float: left;
+}
+.button-group > .button-group:not(:first-child):not(:last-child) > .button {
+  border-radius: 0;
+}
+.button-group > .button-group:first-child {
+  > .button:last-child,
+  > .dropdown-toggle {
+    @include border-right-radius(0);
+  }
+}
+.button-group > .button-group:last-child > .button:first-child {
+  @include border-left-radius(0);
+}

scss/framework/structure/_mixins.scss

@@ -18,3 +18,21 @@
     box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
 	}
 }
+
+// Single side border-radius
+@mixin border-top-radius($radius) {
+  border-top-right-radius: $radius;
+   border-top-left-radius: $radius;
+}
+@mixin border-right-radius($radius) {
+  border-bottom-right-radius: $radius;
+     border-top-right-radius: $radius;
+}
+@mixin border-bottom-radius($radius) {
+  border-bottom-right-radius: $radius;
+   border-bottom-left-radius: $radius;
+}
+@mixin border-left-radius($radius) {
+  border-bottom-left-radius: $radius;
+     border-top-left-radius: $radius;
+}

scss/framework/structure/_variables.scss

@@ -10,6 +10,10 @@ $fontSizeLarge: ceil($baseFontSize * 1.25);
 $baseLineHeight:        1.428571429; // 20/14
 $baseLineHeightComputed:    floor($baseFontSize * $baseLineHeight); // ~20px
 
+// Content stuff
+$contentPadding: 10px;
+
+// Bar stuff
 $barHeight: 50px !default;
 $barLineHeight: 50px !default;
 $barTitleFontSize: $fontSizeLarge;
@@ -17,5 +21,7 @@ $barTitleLineHeightComputed: $baseLineHeightComputed;
 $barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2);
 
 
+
 // Lists
 $listItemBorder: 1px solid #ddd;
+