fix: color styling issue with selected collapsed items

josdejong · Jun 30, 2021 · 720946e · 720946e
1 parent 952adb6
commit 720946e
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/src/components/modes/treemode/json-node-selected-mixin.scss b/src/components/modes/treemode/json-node-selected-mixin.scss
@@ -41,12 +41,14 @@
   &.selected-value :global(.collapsed-items) {
     // TODO: this css is copied from CollapsedItems.scss. Figure out how to reuse this smartly with CSS or SASS
     background-color: $selection-background;
+
+    $shape-color: darken($selection-background, 5%);
     background-image:
-            linear-gradient($theme-color-light, $theme-color-light),
-            linear-gradient(to bottom right, transparent 50.5%, $theme-color-light 50.5%),
-            linear-gradient(to bottom left, transparent 50.5%, $theme-color-light 50.5%),
-            linear-gradient(to top right, transparent 50.5%, $theme-color-light 50.5%),
-            linear-gradient(to top left, transparent 50.5%, $theme-color-light 50.5%);
+            linear-gradient($shape-color, $shape-color),
+            linear-gradient(to bottom right, transparent 50.5%, $shape-color 50.5%),
+            linear-gradient(to bottom left, transparent 50.5%, $shape-color 50.5%),
+            linear-gradient(to top right, transparent 50.5%, $shape-color 50.5%),
+            linear-gradient(to top left, transparent 50.5%, $shape-color 50.5%);
   }
 
   // value selected (part 2)