_button-group.scss in foundation-rails-6.3.0.0

- old
+ new

@@ -20,10 +20,14 @@
 
 /// Maximum number of buttons that can be in an even-width button group.
 /// @type Number
 $buttongroup-expand-max: 6 !default;
 
+/// Determines if $button-radius is applied to each button or the button group as a whole. Use $global-radius in _settings.scss to change radius.
+/// @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(
   $child-selector: $buttongroup-child-selector
 ) {
@@ -50,10 +54,25 @@
     }
 
     &:last-child {
       margin-#{$global-right}: 0;
     }
+
+    @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;
+      }
+    }
+
   }
 }
 
 /// Creates a full-width button group, making each button equal width.
 /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
@@ -68,14 +87,13 @@
     &::after {
       display: none;
     }
   }
 
-  // scss-lint:disable ZeroUnit
   #{$selector} {
     @if $global-flexbox {
-      flex: 1 1 0px;
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
     }
     @else {
       @for $i from 2 through $buttongroup-expand-max {
         &:first-child:nth-last-child(#{$i}) {
           &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
@@ -111,27 +129,58 @@
     }
 
     &:last-child {
       margin-bottom: 0;
     }
+
+
+    @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;
+      }
+    }
+
   }
 }
 
 /// Un-stacks the buttons in a button group.
 /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
 @mixin button-group-unstack(
   $selector: $buttongroup-child-selector
 ) {
-  // scss-lint:disable ZeroUnit
   #{$selector} {
     @if $global-flexbox {
-      flex: 1 1 0px;
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
     }
     @else {
       width: auto;
     }
     margin-bottom: 0;
+
+    @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;
+      }
+    }
+
   }
 }
 
 @mixin foundation-button-group {
   .button-group {
@@ -178,11 +227,10 @@
       @include breakpoint(large) {
         @include button-group-unstack;
       }
     }
 
-    // scss-lint:disable MergeableSelector
-    &.stacked-for-small.expanded {
+    &.stacked-for-small.expanded { // sass-lint:disable-line force-element-nesting
       @include breakpoint(small only) {
         display: block;
 
         #{$buttongroup-child-selector} {
           display: block;