List group item colors in light and dark modes (#1061)

Co-authored-by: Chris Harris <twoxsquared@gmai.com>
tabler · Feb 26, 2022 · 93984d2 · 93984d2
1 parent 40930a9
commit 93984d2
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/src/scss/layout/_dark.scss b/src/scss/layout/_dark.scss
@@ -158,13 +158,23 @@ body:not(.theme-dark) .hide-theme-light {
     background: transparent;
   }
 
+  .list-group-header {
+    background: $dark-mode-darken;
+  }
+
   .list-group-item {
-    color: $dark-mode-text;
     border-color: $border-color-transparent;
   }
 
-  .list-group-header {
-    background: $dark-mode-darken;
+  .list-group-item:not(.disabled):not(:disabled) {
+    color: $dark-mode-text;
+  }
+
+  .list-group-item {
+    &.disabled,
+    &:disabled {
+      color: $gray-600;
+    }
   }
 
   .apexcharts-radialbar-area {

diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss
@@ -20,6 +20,31 @@
   }
 }
 
+.list-group-item {
+  background-color: rgba(27,125,241,0.02);
+}
+
+.list-group-item.active {
+  background-color: inherit;
+  border-left: 2px solid $yellow !important;
+}
+
+.list-group-item {
+  &:active,
+  &:focus,
+  &:hover{
+    background-color: inherit;
+  }
+}
+
+.list-group-item {
+  &.disabled,
+  &:disabled {
+    color: $gray-500;
+    background-color: rgba(27,125,241,0.02);
+  }
+}
+
 .list-bordered {
   .list-item {
     border-top: 1px solid $border-color;