Add border color and hover color as params

per comment from pull request #5340

diff --git a/scss/foundation/components/_buttons.scss b/scss/foundation/components/_buttons.scss
index b40b89895f8e47561ca8e4f3bf3a611ac3679ef5..de8bbf162d53219d6e61370355395a466b591c18 100644 (file)
--- a/scss/foundation/components/_buttons.scss
+++ b/scss/foundation/components/_buttons.scss
@@ -38,6 +38,8 @@ $button-border-width: 0px !default;
 $button-border-style: solid !default;
 $button-bg: $primary-color !default;
 $button-border-color: scale-color($button-bg, $lightness: $button-function-factor) !default;
+$button-hover-color: scale-color($button-bg, $lightness: $button-function-factor) !default;
+
 
 // We use this to set the default radius used throughout the core.
 $button-radius: $global-radius !default;
@@ -118,9 +120,11 @@ $button-disabled-opacity: 0.7 !default;
 // We use this mixin to add button color styles
 //
 // $bg - Primary color set in settings file. Default: $button-bg.
+// $bc - Button Border Color. Default: $button-border-color
+// $bh - Button Hover Color. Default: $button-hover-color
 // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
 // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
-@mixin button-style($bg:$button-bg, $radius:false, $disabled:false) {
+@mixin button-style($bg:$button-bg, $bc:$button-border-color, $bh:$button-hover-color, $radius:false, $disabled:false) {
 
   // We control which background styles are used,
   // these can be removed by setting $bg:false
@@ -129,9 +133,9 @@ $button-disabled-opacity: 0.7 !default;
     $bg-lightness: lightness($bg);
 
     background-color: $bg;
-    border-color: $button-border-color;
+    border-color: $bc;
     &:hover,
-    &:focus { background-color: scale-color($bg, $lightness: $button-function-factor); }
+    &:focus { background-color: $bh; }
 
     // We control the text color for you based on the background color.
     @if $bg-lightness > 70% {