fixes #8835: make it so active list group items aren't dependent on an <a> tag

1 files changed, 30 insertions, 31 deletions

diff --git a/less/list-group.less b/less/list-group.less
index 16bf457d7..a09d4e33c 100644
--- a/less/list-group.less
+++ b/less/list-group.less
@@ -39,42 +39,29 @@
   > .badge + .badge {
     margin-right: 5px;
   }
-}
 
-// Custom content options
-// -------------------------
-
-.list-group-item-heading {
-  margin-top: 0;
-  margin-bottom: 5px;
-}
-.list-group-item-text {
-  margin-bottom: 0;
-  line-height: 1.3;
-}
-
-// Linked list items
-// -------------------------
-
-// Custom content within linked items
-a.list-group-item {
-  // Colorize content accordingly
-  .list-group-item-heading {
-    color: @list-group-link-heading-color;
-  }
-  .list-group-item-text {
-    color: @list-group-link-color;
-  }
+  // Linked list items
+  a& {
+    // Colorize content accordingly
+    .list-group-item-heading {
+      color: @list-group-link-heading-color;
+    }
+    .list-group-item-text {
+      color: @list-group-link-color;
+    }
 
-  // Hover state
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    background-color: @list-group-hover-bg;
+    // Hover state
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      background-color: @list-group-hover-bg;
+    }
   }
 
   // Active class on item itself, not parent
-  &.active {
+  &.active,
+  &.active:hover,
+  &.active:focus {
     z-index: 2; // Place active items above their siblings for proper border styling
     color: @list-group-active-color;
     background-color: @list-group-active-bg;
@@ -89,3 +76,15 @@ a.list-group-item {
     }
   }
 }
+
+// Custom content options
+// -------------------------
+
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}