From aacfcc248dc2e7168dc85d742292bd4e521f6929 Mon Sep 17 00:00:00 2001
From: Andres Galante <agalante@gmail.com>
Date: Sat, 23 Dec 2017 00:41:13 -0300
Subject: [PATCH] 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
---
 scss/_list-group.scss                | 3 ++-
 scss/mixins/_background-variant.scss | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index d771364cb0..9f145c1d30 100644
--- 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 7d1bc975c1..494439d2b4 100644
--- 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;
     }