adds button group flex docs

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 708b6743e62f9dc4efcc6b39dfde8247abe4e3cb..6ac2f8316d02c49a619c342ff7cfa177c717d431 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -19,6 +19,7 @@
 @include motion-ui-transitions;
 
 @import 'foundation-docs';
+@import 'examples/buttons';
 @import 'examples/grid';
 @import 'examples/motion-ui';
 @import 'examples/off-canvas';

diff --git a/docs/assets/scss/examples/_buttons.scss b/docs/assets/scss/examples/_buttons.scss
new file mode 100644 (file)
index 0000000..bbb8319
--- /dev/null
+++ b/docs/assets/scss/examples/_buttons.scss
@@ -0,0 +1,4 @@
+// Flex Grid
+[id^="docs-flexbox-buttongroup"].docs-component {
+  @include foundation-button-group;
+}

diff --git a/docs/pages/button-group.md b/docs/pages/button-group.md
index 315f9a33441a5f92d7679b55d4a14de4e8e50b6f..e048771ce773e19e0c6e3ecc379f61c8bc51d4c5 100644 (file)
--- a/docs/pages/button-group.md
+++ b/docs/pages/button-group.md
@@ -105,3 +105,61 @@ To create a button with only an arrow, add the class `.arrow-only`. Note that th
   </a>
 </div>
 ```
+
+---
+
+## Flexbox Button Group
+
+The buttons in a button group can be positioned using the [Flexbox Utility](http://localhost:3000/flexbox.html#helper-classes) classes in Foundation. You can use `.align-center`, `.align-right`, `.align-spaced`, or `.align-justify`.
+
+```html_example
+<div class="button-group align-center">
+  <a class="button">One</a>
+  <a class="button">Two</a>
+  <a class="button">Three</a>
+</div>
+
+<div class="button-group align-right">
+  <a class="button">One</a>
+  <a class="button">Two</a>
+  <a class="button">Three</a>
+</div>
+
+<div class="button-group align-spaced">
+  <a class="button">One</a>
+  <a class="button">Two</a>
+  <a class="button">Three</a>
+</div>
+
+<div class="button-group align-justify">
+  <a class="button">One</a>
+  <a class="button">Two</a>
+  <a class="button">Three</a>
+</div>
+```
+
+<article class="docs-component" id="docs-flexbox-buttongroup">
+<div class="button-group align-center">
+  <a class="button">One</a>
+  <a class="button">Two</a>
+  <a class="button">Three</a>
+</div>
+
+<div class="button-group align-right">
+  <a class="button">One</a>
+  <a class="button">Two</a>
+  <a class="button">Three</a>
+</div>
+
+<div class="button-group align-spaced">
+  <a class="button">One</a>
+  <a class="button">Two</a>
+  <a class="button">Three</a>
+</div>
+
+<div class="button-group align-justify">
+  <a class="button">One</a>
+  <a class="button">Two</a>
+  <a class="button">Three</a>
+</div>
+</article>

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index 0ebcedeb5b6cae89dc4adce7facbc4782737c0be..dc08f69c880fd8497cc87b3801241830cad84a50 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -39,9 +39,10 @@ $buttongroup-radius-on-each: true !default;
     flex-wrap: wrap;
     align-items: stretch;
     flex-grow: 1;
+
     &::before,
     &::after {
-      display: none;
+      display: none; // Disable clearfix
     }
   }
   @else {
@@ -90,13 +91,14 @@ $buttongroup-radius-on-each: true !default;
 
     &::before,
     &::after {
-      display: none;
+      display: none; // Disable clearfix
     }
   }
 
   #{$selector} {
     @if $global-flexbox {
       flex: 1 1 0px; // sass-lint:disable-line zero-unit
+      margin-right: 0;
     }
     @else {
       // One child
@@ -143,7 +145,6 @@ $buttongroup-radius-on-each: true !default;
       margin-bottom: 0;
     }
 
-
     @if not $buttongroup-radius-on-each {
       border-radius: 0;
 
@@ -158,7 +159,6 @@ $buttongroup-radius-on-each: true !default;
         border-bottom-#{$global-right}-radius: $global-radius;
       }
     }
-
   }
 }