From 5e2d45002918256585b6c0869047fbb71def9806 Mon Sep 17 00:00:00 2001 From: Theodore Brown Date: Wed, 23 Aug 2023 10:24:43 -0500 Subject: [PATCH] Fix missing active state for outline buttons Resolves #39085 --- scss/_buttons.scss | 14 +++++++++++++- scss/mixins/_buttons.scss | 8 ++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index cbc0784a4d9c..aed951a0dad9 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -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 diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index cf087fda7809..04977bc9285d 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -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};