add boolean var to enable button radius on whole group

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index e8dd9f1edbbb09b1d6a063f1949e51380bdc86fb..effcd9fcdd19241e4c1ddc9c4175ef1ecdcbc35f 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -22,6 +22,10 @@ $buttongroup-child-selector: '.button' !default;
 /// @type Number
 $buttongroup-expand-max: 6 !default;
 
+/// Determines if $button-radius is applied to each button or the button group as a whole.
+/// @type Boolean
+$buttongroup-radius-on-each: true !default;
+
 /// Add styles for a button group container.
 /// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
 @mixin button-group(
@@ -44,22 +48,29 @@ $buttongroup-expand-max: 6 !default;
     margin-#{$global-right}: $buttongroup-spacing;
     margin-bottom: $buttongroup-spacing;
     font-size: map-get($button-sizes, default);
-    border-radius: 0;
 
     @if $global-flexbox {
       flex: 0 0 auto;
     }
 
-    &:first-child {
-      border-top-#{$global-left}-radius: $global-radius;
-      border-bottom-#{$global-left}-radius: $global-radius; 
-    }
-
     &:last-child {
       margin-#{$global-right}: 0;
-      border-top-#{$global-right}-radius: $global-radius;
-      border-bottom-#{$global-right}-radius: $global-radius;
     }
+
+    @if not $buttongroup-radius-on-each {
+      border-radius: 0;
+
+      &:first-child {
+        border-top-#{$global-left}-radius: $global-radius;
+        border-bottom-#{$global-left}-radius: $global-radius;
+      }
+
+      &:last-child {
+        border-top-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+      }
+    }
+
   }
 }
 
@@ -111,8 +122,6 @@ $buttongroup-expand-max: 6 !default;
   }
 
   #{$selector} {
-    border-radius: 0;
-
     @if $global-flexbox {
       flex: 0 0 100%;
     }
@@ -120,16 +129,26 @@ $buttongroup-expand-max: 6 !default;
       width: 100%;
     }
 
-    &:first-child{
-      border-top-#{$global-left}-radius: $global-radius;
-      border-top-#{$global-right}-radius: $global-radius; 
-    }
-
     &:last-child {
       margin-bottom: 0;
-      border-bottom-#{$global-left}-radius: $global-radius;
-      border-bottom-#{$global-right}-radius: $global-radius;
     }
+
+
+    @if not $buttongroup-radius-on-each {
+      border-radius: 0;
+
+      &:first-child{
+        border-top-#{$global-left}-radius: $global-radius;
+        border-top-#{$global-right}-radius: $global-radius;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom-#{$global-left}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+      }
+    }
+
   }
 }
 
@@ -148,17 +167,20 @@ $buttongroup-expand-max: 6 !default;
     }
     margin-bottom: 0;
 
-    &:first-child {
-      border-top-#{$global-left}-radius: $global-radius;
-      border-top-#{$global-right}-radius: 0;
-      border-bottom-#{$global-left}-radius: $global-radius; 
-    }
+    @if not $buttongroup-radius-on-each {
+      &:first-child {
+        border-top-#{$global-left}-radius: $global-radius;
+        border-top-#{$global-right}-radius: 0;
+        border-bottom-#{$global-left}-radius: $global-radius;
+      }
 
-    &:last-child {
-      border-top-#{$global-right}-radius: $global-radius;
-      border-bottom-#{$global-right}-radius: $global-radius;
-      border-bottom-#{$global-left}-radius: 0;
+      &:last-child {
+        border-top-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-left}-radius: 0;
+      }
     }
+
   }
 }