Skip to content

Commit

Permalink
fix(sass): made variables for button-default-border and button-defaul…
Browse files Browse the repository at this point in the history 
…t-active-border

made variables for button-default-border and button-default-active-bordermade variables

#5576
  • Loading branch information
@danbucholtz
danbucholtz committed May 9, 2016
1 parent c7e61e4 commit 7da8739
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 11 deletions.
18 changes: 9 additions & 9 deletions scss/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,55 +72,55 @@
}

&.button-light {
@include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text);
@include button-style($button-light-bg, $button-default-border, $button-light-active-bg, $button-default-active-border, $button-light-text);
@include button-clear($button-light-border);
@include button-outline($button-light-border);
}

&.button-stable {
@include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
@include button-style($button-stable-bg, $button-default-border, $button-stable-active-bg, $button-default-active-border, $button-stable-text);
@include button-clear($button-stable-border);
@include button-outline($button-stable-border);
}

&.button-positive {
@include button-style($button-positive-bg, $button-positive-border, $button-positive-active-bg, $button-positive-active-border, $button-positive-text);
@include button-style($button-positive-bg, $button-default-border, $button-positive-active-bg, $button-default-active-border, $button-positive-text);
@include button-clear($button-positive-bg);
@include button-outline($button-positive-bg);
}

&.button-calm {
@include button-style($button-calm-bg, $button-calm-border, $button-calm-active-bg, $button-calm-active-border, $button-calm-text);
@include button-style($button-calm-bg, $button-default-border, $button-calm-active-bg, $button-default-active-border, $button-calm-text);
@include button-clear($button-calm-bg);
@include button-outline($button-calm-bg);
}

&.button-assertive {
@include button-style($button-assertive-bg, $button-assertive-border, $button-assertive-active-bg, $button-assertive-active-border, $button-assertive-text);
@include button-style($button-assertive-bg, $button-default-border, $button-assertive-active-bg, $button-default-active-border, $button-assertive-text);
@include button-clear($button-assertive-bg);
@include button-outline($button-assertive-bg);
}

&.button-balanced {
@include button-style($button-balanced-bg, $button-balanced-border, $button-balanced-active-bg, $button-balanced-active-border, $button-balanced-text);
@include button-style($button-balanced-bg, $button-default-border, $button-balanced-active-bg, $button-default-active-border, $button-balanced-text);
@include button-clear($button-balanced-bg);
@include button-outline($button-balanced-bg);
}

&.button-energized {
@include button-style($button-energized-bg, $button-energized-border, $button-energized-active-bg, $button-energized-active-border, $button-energized-text);
@include button-style($button-energized-bg, $button-default-border, $button-energized-active-bg, $button-default-active-border, $button-energized-text);
@include button-clear($button-energized-bg);
@include button-outline($button-energized-bg);
}

&.button-royal {
@include button-style($button-royal-bg, $button-royal-border, $button-royal-active-bg, $button-royal-active-border, $button-royal-text);
@include button-style($button-royal-bg, $button-default-border, $button-royal-active-bg, $button-default-active-border, $button-royal-text);
@include button-clear($button-royal-bg);
@include button-outline($button-royal-bg);
}

&.button-dark {
@include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text);
@include button-style($button-dark-bg, $button-default-border, $button-dark-active-bg, $button-default-active-border, $button-dark-text);
@include button-clear($button-dark-bg);
@include button-outline($button-dark-bg);
}
Expand Down
6 changes: 4 additions & 2 deletions scss/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// --------------------------------------------------

@mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
border-color: transparent;//$border-color;
border-color: $border-color;
background-color: $bg-color;
color: $color;

Expand All @@ -14,7 +14,9 @@
}
&.active,
&.activated {
//border-color: transparent;//$active-border-color;
@if $active-border-color != ""{
border-color: $active-border-color;
}
background-color: $active-bg-color;
//box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
}
Expand Down
3 changes: 3 additions & 0 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,9 @@ $button-bar-button-height: 32px !default;
$button-bar-button-padding: 8px !default;
$button-bar-button-icon-size: 20px !default;

$button-default-border: transparent;
$button-default-active-border:null;

This comment has been minimized.

Sign in to view

Copy link
@andischerer

andischerer May 13, 2016

@danbucholtz I think the !default flag is missing. So without the default flag there is no chance to set a user defined value to these variables.
$button-light-bg: $light !default;
$button-light-text: #444 !default;
$button-light-border: #ddd !default;
Expand Down

0 comments on commit 7da8739

Please sign in to comment.