From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sun, 7 Jan 2018 19:16:58 +0000 (+0100)
Subject: refactor: factorize generation of button & button-group fillings
X-Git-Tag: v6.6.0~3^2~310^2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3f346d3d41e6e3241e05ed850f53f85d6eb4a4f7;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

refactor: factorize generation of button & button-group fillings
---

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index bc675cb4f..fcc88a6ba 100644
--- 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 e0b9b59bd..48756354b 100644
--- 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);
           }
         }
       }