refactor: factorize button hollow/clear styles into their own mixins

Add mixins:
- button-clear
- button-clear-style
- button-fill
- button-fill-style

Update mixins:
- button-hollow
- button-hollow-style

Use these mixins in `foundation-button` and `foundation-button-group` to generate button modifiers.

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index 2cf4d477470147fc99096da2c35fe3864801e05b..c01b77b649eaf26b755bc4846b85bf1a1d50e343 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -73,19 +73,8 @@ $buttongroup-radius-on-each: true !default;
       }
     }
   }
+}
 
-  // Hollow style
-  &.hollow {
-    @each $name, $color in $button-palette {
-      &.#{$name} #{$child-selector},
-      &.#{$name} #{$child-selector}:hover,
-      &.#{$name} #{$child-selector}:focus {
-        @include button-hollow-style($color);
-        background-color: $white;
-      }
-    }
-  }
-  
   // No Gaps
   &.no-gaps {
     #{$child-selector} {
@@ -230,17 +219,28 @@ $buttongroup-radius-on-each: true !default;
       @include button-group-expand;
     }
 
-    // Colors
+    // Default style (according to $button-fill)
     @each $name, $color in $button-palette {
-      @if $button-fill != hollow {
-        &.#{$name} #{$buttongroup-child-selector} {
-          @include button-style($color, auto, auto);
-        }
+      &.#{$name} #{$buttongroup-child-selector} {
+        @include button-fill-style($button-fill, $color, auto, auto);
       }
-      @else {
-        &.#{$name} #{$buttongroup-child-selector} {
+    }
+
+    // Hollow style
+    @if $button-fill != hollow {
+      &.hollow {
+        #{$buttongroup-child-selector} {
           @include button-hollow;
-          @include button-hollow-style($color);
+          @include button-hollow-style;
+        }
+
+        @each $name, $color in $button-palette {
+          &.#{$name} #{$buttongroup-child-selector} {
+            @include button-hollow-style($color);
+          }
+        }
+      }
+    }
         }
       }
     }

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index c10a6e32c0cace29d15a32bbdd242e37d05f3c65..d4770bea375d8fd56a046138dc4de681aa16413c 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -135,6 +135,46 @@ $button-responsive-expanded: false !default;
   }
 }
 
+/// Sets the base styles of a hollow or clear button filling according to `$fill`.
+/// See mixin `button-fill-style` for the filling styles.
+/// @param {Keyword} $fill [$button-fill] - Type of filling between `hollow` and `clear`. `solid` has no effects.
+@mixin button-fill(
+  $fill: $button-fill
+) {
+  @if $fill == solid {
+    // No base style is required for solid buttons, do nothing
+  }
+  @else if $fill == hollow {
+    @include button-hollow;
+  }
+  @else if $fill == clear {
+    @include button-clear;
+  }
+}
+
+/// Sets the visual styles of a solid/hollow/clear button filling according to `$fill`.
+/// See mixins `button-style`, `button-hollow-style` and `button-clear-style` for effects of visual styling parameters.
+/// @param {Keyword} $fill [$button-fill] - Type of filling between `hollow` and `clear`.
+/// @param {Color} $background [$button-background] - -
+/// @param {Color} $background-hover [$button-background-hover] - -
+/// @param {Color} $color [$button-color] - -
+@mixin button-fill-style(
+  $fill: $button-fill,
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color
+) {
+  @if $fill == solid {
+    @include button-style($background, $background-hover, $color);
+  }
+  @else if $fill == hollow {
+    @include button-hollow-style($background);
+  }
+  @else if $fill == clear {
+    @include button-clear-style($background);
+  }
+}
+
 /// Sets the visual style of a button.
 /// @param {Color} $background [$button-background] - Background color of the button.
 /// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
@@ -162,18 +202,11 @@ $button-responsive-expanded: false !default;
   }
 }
 
-/// Removes background fill on hover and focus for hollow buttons.
+/// Sets the base styles of a hollow button.
+/// See mixin `button-hollow-style` for the filling styles.
 @mixin button-hollow {
-  &,
-  &:hover,
-  &:focus {
-    background-color: transparent;
-  }
-
-  &.disabled,
-  &[disabled] {
-    &,
-    &:hover, &:focus {
+  &, &.disabled, &[disabled] {
+    &, &:hover, &:focus {
       background-color: transparent;
     }
   }
@@ -192,14 +225,47 @@ $button-responsive-expanded: false !default;
   &:hover, &:focus {
     border-color: $color-hover;
     color: $color-hover;
-    &.disabled,
-    &[disabled] {
+  }
+  &, &:hover, &:focus {
+    &.disabled, &[disabled] {
       border: $border-width solid $color;
       color: $color;
     }
   }
 }
 
+/// Sets the base styles of a clear button.
+/// See mixin `button-clear-style` for the filling styles.
+@mixin button-clear {
+  &, &.disabled, &[disabled] {
+    &, &:hover, &:focus {
+      border-color: transparent;
+      background-color: transparent;
+    }
+  }
+}
+
+/// Sets the visual style of a clear button.
+/// @param {Color} $color [$button-background] - Text color of the button.
+/// @param {Color} $hover-lightness [$button-hollow-hover-lightness] - Color lightness on hover.
+@mixin button-clear-style(
+  $color: $button-background,
+  $hover-lightness: $button-hollow-hover-lightness
+) {
+  $color-hover: scale-color($color, $lightness: $hover-lightness);
+
+  color: $color;
+
+  &:hover, &:focus {
+    color: $color-hover;
+  }
+  &, &:hover, &:focus {
+    &.disabled, &[disabled] {
+      color: $color;
+    }
+  }
+}
+
 /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
 /// @param {Color} $background [$button-background] - Background color of the disabled button.
 /// @param {Color} $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
@@ -254,14 +320,8 @@ $button-responsive-expanded: false !default;
   $style: $button-fill
 ) {
   @include button-base;
-
-  @if $style == solid {
-    @include button-style($background, $background-hover, $color);
-  }
-  @else if $style == hollow {
-    @include button-hollow;
-    @include button-hollow-style($background);
-  }
+  @include button-fill($style);
+  @include button-fill-style($style, $background, $background-hover, $color);
 
   @if $expand {
     @include button-expand;
@@ -304,21 +364,10 @@ $button-responsive-expanded: false !default;
       }
     }
 
-    // Colors
+    // Default styles (according to $button-fill)
     @each $name, $color in $button-palette {
-      @if $button-fill != hollow {
-        &.#{$name} {
-          @include button-style($color, auto, auto);
-        }
-      }
-      @else {
-        &.#{$name} {
-          @include button-hollow-style($color);
-        }
-
-        &.#{$name}.dropdown::after {
-          border-top-color: $color;
-        }
+      &.#{$name} {
+        @include button-fill-style($button-fill, $color, auto, auto);
       }
     }
 
@@ -334,7 +383,7 @@ $button-responsive-expanded: false !default;
       }
     }
 
-    // Hollow style
+    // Hollow styles
     @if $button-fill != hollow {
       &.hollow {
         @include button-hollow;
@@ -348,30 +397,15 @@ $button-responsive-expanded: false !default;
       }
     }
 
-    // Clear style
+    // Clear styles
     @if $button-fill != clear {
       &.clear {
-        @include button-hollow;
-        @include button-hollow-style;
-
-        &, &:hover, &:focus {
-          &, &.disabled, &[disabled] {
-            border-color: transparent;
-          }
-        }
+        @include button-clear;
+        @include button-clear-style;
 
         @each $name, $color in $button-palette {
           &.#{$name} {
-            @include button-hollow-style($color);
-
-            &, &:hover,
-            &:focus {
-              &,
-              &.disabled,
-              &[disabled] {
-                border-color: transparent;
-              }
-            }
+            @include button-clear-style($color);
           }
         }
       }