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 e42e8d891dc012df7cf211048e072a605fa8ebcb..14294c027866e530dbb92d1bbd0f3acba7e91396 100644 (file)
--- 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 6d532c1e80532cf5d00151f187c4a04bec8a084b..dd4b77a9e743f72204953947840999e362bb8526 100644 (file)
--- 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;
+      }
+    }
   }
 }