refactor: factorize generation of button & button-group fillings

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index bc675cb4f7377198637882d0884311ca446abcb8..fcc88a6ba65ab0adc2c1c94961cde309a4262512 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -221,45 +221,28 @@ $buttongroup-radius-on-each: true !default;
       @include button-group-expand;
     }
 
-    // Default style (according to $button-fill)
-    @each $name, $color in $button-palette {
-      &.#{$name} #{$buttongroup-child-selector} {
-        @include button-fill-style($button-fill, $color, auto, auto);
-      }
-    }
-
-    // Hollow style
-    @if $button-fill != hollow {
-      &.hollow {
-        #{$buttongroup-child-selector} {
-          @include button-hollow;
-          @include button-hollow-style;
-        }
-
-        @each $name, $color in $button-palette {
-          &.#{$name} #{$buttongroup-child-selector},
-          #{$buttongroup-child-selector}.#{$name} {
-            @include button-hollow-style($color);
+    // 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);
           }
         }
-      }
-    }
-
-    // Clear style
-    @if $button-fill != clear {
-      &.clear {
-        #{$buttongroup-child-selector} {
-          @include button-clear;
-          @include button-clear-style;
-        }
 
         @each $name, $color in $button-palette {
-          &.#{$name} #{$buttongroup-child-selector},
-          #{$buttongroup-child-selector}.#{$name} {
-            @include button-clear-style($color);
+          $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 {

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index e0b9b59bd446a2e9115efdda792e7a85eaae6cf4..48756354b751a173027ad0c42afd4eafa8acd7ca 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -330,7 +330,7 @@ $button-responsive-expanded: false !default;
 
 @mixin foundation-button {
   .button {
-    @include button;
+    @include button($style: none);
 
     // Sizes
     @each $size, $value in map-remove($button-sizes, default) {
@@ -364,36 +364,17 @@ $button-responsive-expanded: false !default;
       }
     }
 
-    // Default styles (according to $button-fill)
-    @each $name, $color in $button-palette {
-      &.#{$name} {
-        @include button-fill-style($button-fill, $color, auto, auto);
-      }
-    }
-
-    // Hollow styles
-    @if $button-fill != hollow {
-      &.hollow {
-        @include button-hollow;
-        @include button-hollow-style;
-
-        @each $name, $color in $button-palette {
-          &.#{$name} {
-            @include button-hollow-style($color);
-          }
-        }
-      }
-    }
+    // Solid, hollow & clear styles
+    @each $filling in (solid hollow clear) {
+      $selector: if($button-fill == $filling, null, '.#{$filling}');
 
-    // Clear styles
-    @if $button-fill != clear {
-      &.clear {
-        @include button-clear;
-        @include button-clear-style;
+      &#{$selector} {
+        @include button-fill($filling);
+        @include button-fill-style($filling);
 
         @each $name, $color in $button-palette {
           &.#{$name} {
-            @include button-clear-style($color);
+            @include button-fill-style($filling, $color, auto, auto);
           }
         }
       }