Skip to content

Commit

Permalink
Add border color and hover color as params
Browse files Browse the repository at this point in the history
per comment from pull request #5340
  • Loading branch information
Richard LaFranchi committed Jun 21, 2014
1 parent fbbe774 commit 993645c
Showing 1 changed file with 7 additions and 3 deletions.
10 changes: 7 additions & 3 deletions scss/foundation/components/_buttons.scss
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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% {
Expand Down

1 comment on commit 993645c

@mikekocik
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change breaks hover background color for secondary, alert, etc button classes. All buttons are highlighted with same color. Spent 2 hours to find it out and roll back.

Please sign in to comment.