_button-group.scss in foundation-rails-6.9.0.0

- old
+ new

@@ -31,11 +31,10 @@
 /// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
 @mixin button-group(
   $child-selector: $buttongroup-child-selector,
   $spacing: $buttongroup-spacing
 ) {
-  @include clearfix;
   margin-bottom: $buttongroup-margin;
 
   @if $global-flexbox {
     display: flex;
     flex-wrap: wrap;
@@ -49,10 +48,12 @@
   }
   @else {
     font-size: 0;
   }
 
+  @include clearfix;
+
   #{$child-selector} {
     margin: 0;
     margin-#{$global-right}: $spacing;
     margin-bottom: $spacing;
     font-size: map-get($button-sizes, default);
@@ -114,11 +115,10 @@
   }
 
   #{$selector} {
     @if $global-flexbox {
       flex: 1 1 0px; // sass-lint:disable-line zero-unit
-      margin-right: 0;
     }
     @else {
       // One child
       &:first-child {
         &:last-child {
@@ -129,11 +129,11 @@
       // Two or more childreen
       @for $i from 2 through $buttongroup-expand-max {
         &:first-child:nth-last-child(#{$i}) {
           &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
             display: inline-block;
-            width: calc(#{percentage(1 / $i)} - #{$spacing});
+            width: calc(#{percentage(divide(1, $i))} - #{$spacing});
             margin-#{$global-right}: $spacing;
 
             &:last-child {
               margin-#{$global-right}: $spacing * -$buttongroup-expand-max;
             }
@@ -172,11 +172,10 @@
         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;
       }
     }
   }
@@ -241,13 +240,19 @@
             @include button-fill-style($filling);
           }
         }
 
         @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);
+          @if($button-fill != $filling) {
+            $individual-selector: ' #{$buttongroup-child-selector}.#{"" + $name}';
+            &.#{"" + $name} #{$buttongroup-child-selector}, &#{$individual-selector} {
+              @include button-fill-style($filling, $color, auto, auto);
+            }
+          }
+          @else {
+            &.#{"" + $name} #{$buttongroup-child-selector} {
+              @include button-fill-style($filling, $color, auto, auto);
+            }
           }
         }
       }
 
     }