Skip to content

Commit

Permalink
Fix missing active state for outline buttons
Browse files Browse the repository at this point in the history
Resolves #39085
  • Loading branch information
theodorejb committed Sep 13, 2023
1 parent 8816177 commit 93e5cc0
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 5 deletions.
14 changes: 13 additions & 1 deletion scss/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,19 @@

@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value);
@if $color == "light" {
@include button-outline-variant(
$value,
$active-background: shade-color($value, $btn-active-bg-shade-amount)
);
} @else if $color == "dark" {
@include button-outline-variant(
$value,
$active-background: tint-color($value, $btn-active-bg-tint-amount)
);
} @else {
@include button-outline-variant($value);
}
}
}
// scss-docs-end btn-variant-loops
Expand Down
8 changes: 4 additions & 4 deletions scss/mixins/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,15 @@
@mixin button-outline-variant(
$color,
$color-hover: color-contrast($color),
$active-background: $color,
$active-border: $color,
$active-background: if($color-hover == $color-contrast-light, shade-color($color, $btn-active-bg-shade-amount), tint-color($color, $btn-active-bg-tint-amount)),
$active-border: $active-background,
$active-color: color-contrast($active-background)
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-border-color: #{$color};
--#{$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-hover-bg: #{$active-background};
--#{$prefix}btn-hover-border-color: #{$active-border};
--#{$prefix}btn-hover-bg: #{$color};
--#{$prefix}btn-hover-border-color: #{$color};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
Expand Down

0 comments on commit 93e5cc0

Please sign in to comment.