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)

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index dcd61d2b5ef4bf7c8172423159faebf0715888a8..fbc8a3d364e8cf5653196310270bc7e02b91d9ec 100644 (file)
--- 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
 //