adds hover state to the button element for background color utiliti…

…es (#24813) * adds a hover state to the button element on the backrgound color utitility * Adjust z-index to fix hover/focus overlaps
twbs · Dec 23, 2017 · aacfcc2 · aacfcc2
1 parent 5621c80
commit aacfcc2
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git 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
@@ -6,7 +6,8 @@
   #{$parent} {
     background-color: $color !important;
   }
-  a#{$parent} {
+  a#{$parent},
+  button#{$parent} {
     @include hover-focus {
       background-color: darken($color, 10%) !important;
     }