From 761c4ff2353a42cbf325a3e1910921ced758e059 Mon Sep 17 00:00:00 2001
From: Anton <info@ensostudio.ru>
Date: Tue, 1 Feb 2022 00:54:39 +0300
Subject: [PATCH] Fix overriding styles of `.list-group-item-action`

~~~html
<style>
.list-group-item-action {color: blue;}
.list-group-item {color: red;}
</style>
<p class="list-group-item">red text!</p>
<p class="list-group-item list-group-item-action">still red text!</p>
~~~
because `.list-group-item` declared after `.list-group-item-action` (order in attribute `class` no effect)
---
 scss/_list-group.scss | 51 ++++++++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index dcd61d2b5e..fbc8a3d364 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -23,33 +23,6 @@
   }
 }
 
-
-// Interactive list items
-//
-// Use anchor or button elements instead of `li`s or `div`s to create interactive
-// list items. Includes an extra `.active` modifier class for selected items.
-
-.list-group-item-action {
-  width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: $list-group-action-color;
-  text-align: inherit; // For `<button>`s (anchors inherit)
-
-  // Hover state
-  &:hover,
-  &:focus {
-    z-index: 1; // Place hover/focus items above their siblings for proper border styling
-    color: $list-group-action-hover-color;
-    text-decoration: none;
-    background-color: $list-group-hover-bg;
-  }
-
-  &:active {
-    color: $list-group-action-active-color;
-    background-color: $list-group-action-active-bg;
-  }
-}
-
-
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
@@ -96,6 +69,30 @@
   }
 }
 
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive
+// list items. Includes an extra `.active` modifier class for selected items.
+
+.list-group-item-action {
+  width: 100%; // For `<button>`s (anchors become 100% by default though)
+  color: $list-group-action-color;
+  text-align: inherit; // For `<button>`s (anchors inherit)
+
+  // Hover state
+  &:hover,
+  &:focus {
+    z-index: 1; // Place hover/focus items above their siblings for proper border styling
+    color: $list-group-action-hover-color;
+    text-decoration: none;
+    background-color: $list-group-hover-bg;
+  }
+
+  &:active {
+    color: $list-group-action-active-color;
+    background-color: $list-group-action-active-bg;
+  }
+}
 
 // Horizontal
 //