add mixin for list-group

src/client/styles/scss/theme/_apply-colors.scss

@@ -3,10 +3,14 @@
 //
 
 // determine optional variables
+$color-list: $color-global !default;
+$bgcolor-list: $bgcolor-global !default;
+$color-list-hover: $color-reversal !default;
+$color-list-active: $color-reversal !default;
+$bgcolor-list-active: $primary !default;
 $border-image-navbar: linear-gradient(to right, #ccc 0%, #ccc 100%) !default;
 $bgcolor-search-top-dropdown: $secondary !default;
-$bgcolor-sidebar-item-active: darken($bgcolor-sidebar, 10%) !default;
-$text-shadow-sidebar-item-active: 1px 1px 2px $primary !default;
+$bgcolor-sidebar-list-group: $bgcolor-list !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -20,6 +24,7 @@ $input-focus-color: $color-global;
 @import '~bootstrap/scss/mixins';
 @import '../mixins';
 @import 'mixins-for-tables';
+@import 'mixins/list-group';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-toastr-colors';
@@ -50,22 +55,7 @@ $input-focus-color: $color-global;
 }
 
 // List Group
-.list-group {
-  .list-group-item {
-    color: $color-list;
-    background-color: $bgcolor-list;
-
-    &.list-group-item-action {
-      &:hover {
-        background-color: $color-list-hover;
-      }
-      &.active {
-        color: $color-list-active;
-        background-color: $bgcolor-list-active;
-      }
-    }
-  }
-}
+@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $color-list-active, $bgcolor-list-active);
 
 // Form
 .form-control {
@@ -179,6 +169,9 @@ $input-focus-color: $color-global;
       border-right: 1px solid $gray-300;
     }
   }
+
+  // List
+  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $color-list-active, $bgcolor-list-active);
 }
 
 /*

src/client/styles/scss/theme/default.scss

@@ -34,11 +34,11 @@ html[light] {
   $color-inline-code: #c7254e;
 
   // List Group colors
-  $color-list: $color-global;
-  $bgcolor-list: $bgcolor-global;
-  $color-list-active: $color-reversal;
-  $bgcolor-list-active: $primary;
-  $color-list-hover: $color-reversal;
+  // $color-list: $color-global; // optional
+  // $bgcolor-list: $bgcolor-global; // optional
+  // $color-list-hover: $color-reversal; // optional
+  // $color-list-active: $color-reversal; // optional
+  // $bgcolor-list-active: $primary; // optional
 
   // Navbar
   $bgcolor-navbar: #2a2929;
@@ -60,6 +60,8 @@ html[light] {
   $bgcolor-resize-button: #209fd8;
   $color-resize-button-hover: $color-reversal;
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #fafbff; // optional
 
   // Icon colors
   $color-editor-icons: $color-global;
@@ -107,11 +109,11 @@ html[dark] {
   $color-inline-code: #c7254e;
 
   // List Group colors
-  $color-list: $color-global;
-  $bgcolor-list: $bgcolor-global;
-  $color-list-active: $color-global;
-  $bgcolor-list-active: $primary;
-  $color-list-hover: $color-reversal;
+  // $color-list: $color-global; // optional
+  // $bgcolor-list: $bgcolor-global; // optional
+  // $color-list-hover: $color-reversal; // optional
+  $color-list-active: white; // optional
+  // $bgcolor-list-active: $primary; // optional
 
   // Navbar
   $bgcolor-navbar: #2a2929;
@@ -133,6 +135,8 @@ html[dark] {
   $bgcolor-resize-button: $primary;
   $color-resize-button-hover: $color-global;
   $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Icon colors
   $color-editor-icons: $color-global;

src/client/styles/scss/theme/mixins/_list-group.scss

@@ -0,0 +1,18 @@
+@mixin override-list-group-item($color, $bgcolor, $color-hover: $color, $color-active: $color, $bgcolor-active: $bgcolor) {
+  .list-group {
+    .list-group-item {
+      color: $color;
+      background-color: $bgcolor;
+
+      &.list-group-item-action {
+        &:hover {
+          background-color: $color-hover;
+        }
+        &.active {
+          color: $color-active;
+          background-color: $bgcolor-active;
+        }
+      }
+    }
+  }
+}