From: harry <harmanmanchanda182@gmail.com>
Date: Sun, 28 May 2017 08:41:35 +0000 (+0530)
Subject: Closes #10080 - Hollow Button Group and `no-gaps`
X-Git-Tag: v6.6.0~3^2~310^2~13
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=77d9b144e5bbeaf3237e3be94464c7f2941d45f1;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Closes #10080 - Hollow Button Group and `no-gaps`

Changes
- Adds Hollow Button Group
- Adds a class `no-gaps` for no spacing between buttons within a button group
- Update docs!
---

diff --git a/docs/pages/button-group.md b/docs/pages/button-group.md
index e42e8d891..14294c027 100644
--- a/docs/pages/button-group.md
+++ b/docs/pages/button-group.md
@@ -76,7 +76,55 @@ Buttons within a button group can be colored individually with the `.secondary`,
 The entire group can also be colored using the same classes.
 
 ```html_example
-<div class="secondary button-group">
+<div class="primary button-group">
+  <a class="button">Harder</a>
+  <a class="button">Better</a>
+  <a class="button">Faster</a>
+  <a class="button">Stronger</a>
+</div>
+```
+
+## Hollow
+
+Buttons within a button group can be given hollow style individually by adding a class `.hollow` respectively.
+
+```html_example
+<div class="button-group">
+  <a class="secondary button hollow">View</a>
+  <a class="success button hollow">Edit</a>
+  <a class="warning button hollow">Share</a>
+  <a class="alert button hollow">Delete</a>
+</div>
+```
+
+The entire group can also be given hollow style using the same class.
+
+```html_example
+<div class="primary button-group hollow">
+  <a class="button">Harder</a>
+  <a class="button">Better</a>
+  <a class="button">Faster</a>
+  <a class="button">Stronger</a>
+</div>
+```
+
+## No Gaps
+
+When using a single color for the button-group, you might want to remove the `1px` spacing between the buttons. You can use `no-gaps` to just the same.
+
+```html_example
+<div class="primary button-group no-gaps">
+  <a class="button">Harder</a>
+  <a class="button">Better</a>
+  <a class="button">Faster</a>
+  <a class="button">Stronger</a>
+</div>
+```
+
+The class `no-gaps` also works for hollow style.
+
+```html_example
+<div class="primary button-group hollow no-gaps">
   <a class="button">Harder</a>
   <a class="button">Better</a>
   <a class="button">Faster</a>
diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index 6d532c1e8..dd4b77a9e 100644
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -72,7 +72,29 @@ $buttongroup-radius-on-each: true !default;
         border-bottom-#{$global-right}-radius: $button-radius;
       }
     }
+  }
 
+  // Hollow style
+  &.hollow {
+    @each $name, $color in $button-palette {
+      &.#{$name} #{$child-selector},
+      &.#{$name} #{$child-selector}:hover,
+      &.#{$name} #{$child-selector}:focus {
+        @include button-hollow-style($color);
+        background-color: $white;
+      }
+    }
+  }
+  
+  // No Gaps
+  &.no-gaps {
+    #{$child-selector} {
+      margin-#{$global-right}: 0;
+      
+      + #{$child-selector} {
+        border-#{$global-left}: 0;
+      }
+    }
   }
 }