adds hover state to the `button` element for background color utilities (#24813)

* adds a hover state to the button element on the backrgound color utitility

* Adjust z-index to fix hover/focus overlaps

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index d771364cb09a433eb5671115a25f74f7e274cb2c..9f145c1d30fc5ad43ecf62c19b85af2d138410bb 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -59,6 +59,7 @@
   }
 
   @include hover-focus {
+    z-index: 1; // Place hover/active items above their siblings for proper border styling
     text-decoration: none;
   }
 
@@ -70,7 +71,7 @@
 
   // Include both here for `<a>`s and `<button>`s
   &.active {
-    z-index: 1; // Place active items above their siblings for proper border styling
+    z-index: 2; // Place active items above their siblings for proper border styling
     color: $list-group-active-color;
     background-color: $list-group-active-bg;
     border-color: $list-group-active-border-color;

diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
index 7d1bc975c1f207b37266af53ae0381d8d9f26677..494439d2b45fd21205a9cc4880dc83501c63d5f3 100644 (file)
--- a/scss/mixins/_background-variant.scss
+++ b/scss/mixins/_background-variant.scss
@@ -6,7 +6,8 @@
   #{$parent} {
     background-color: $color !important;
   }
-  a#{$parent} {
+  a#{$parent},
+  button#{$parent} {
     @include hover-focus {
       background-color: darken($color, 10%) !important;
     }