Outline active focus (#25145)

* Base the outline button :active color on the background, fixing a contrast issue

* Only apply focus outline to active when it's focused

1 files changed, 6 insertions, 3 deletions

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 252e26ace..23a27f6b9 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -79,11 +79,14 @@
   &:not([disabled]):not(.disabled):active,
   &:not([disabled]):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: color-yiq($color-hover);
+    color: color-yiq($active-background);
     background-color: $active-background;
     border-color: $active-border;
-    // Avoid using mixin so we can pass custom focus shadow properly
-    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+
+    &:focus {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+    }
   }
 }