_button-group.scss in foundation-rails-6.6.1.0

- old
+ new

@@ -70,11 +70,25 @@
       &:last-child {
         border-top-#{$global-right}-radius: $button-radius;
         border-bottom-#{$global-right}-radius: $button-radius;
       }
     }
+  }
+}
 
+/// Make buttons bonded without gap between them. Borders between buttons are merged
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+@mixin button-group-no-gaps(
+  $selector: $buttongroup-child-selector,
+  $border-width: $button-hollow-border-width
+) {
+  #{$selector} {
+    margin-#{$global-right}: rem-calc(-$border-width);
+
+    + #{$selector} {
+      border-#{$global-left}-color: transparent;
+    }
   }
 }
 
 /// 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.
@@ -208,22 +222,35 @@
     // Even-width Group
     &.expanded {
       @include button-group-expand;
     }
 
-    // Colors
-    @each $name, $color in $button-palette {
-      @if $button-fill != hollow {
-        &.#{$name} #{$buttongroup-child-selector} {
-          @include button-style($color, auto, auto);
+    // Solid, hollow & clear styles
+    @each $filling in (solid hollow clear) {
+      $base-selector: if($button-fill == $filling, null, '.#{$filling}');
+
+      &#{$base-selector} {
+        // Do not generate button base styles for the default filling
+        @if($button-fill != $filling) {
+          #{$buttongroup-child-selector} {
+            @include button-fill($filling);
+            @include button-fill-style($filling);
+          }
         }
-      }
-      @else {
-        &.#{$name} #{$buttongroup-child-selector} {
-          @include button-hollow;
-          @include button-hollow-style($color);
+
+        @each $name, $color in $button-palette {
+          $individual-selector: if($button-fill == $filling, null, ' #{$buttongroup-child-selector}.#{$name}');
+
+          &.#{$name} #{$buttongroup-child-selector}, #{$individual-selector} {
+            @include button-fill-style($filling, $color, auto, auto);
+          }
         }
       }
+
+    }
+
+    &.no-gaps {
+      @include button-group-no-gaps;
     }
 
     &.stacked,
     &.stacked-for-small,
     &.stacked-for-medium {