From: Andy Cochran <acochran@council.nyc.gov>
Date: Thu, 20 Oct 2016 00:13:53 +0000 (-0400)
Subject: add boolean var to enable button radius on whole group
X-Git-Tag: v6.3-rc1~52^2~1^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=23878af827902be2fb82e91b11f2a7ccda1437c8;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 e8dd9f1ed..effcd9fcd 100644
--- 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;
+      }
     }
+
   }
 }