From 278eebd235d5dca04f5621d3b64e7044b52481b7 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Thu, 6 Sep 2018 12:06:14 +0200
Subject: [PATCH] Style jsTree

---
 src/styles/plugins/_jstree.sass | 54 ++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/styles/plugins/_jstree.sass b/src/styles/plugins/_jstree.sass
index a31a343f..133f2c6d 100644
--- a/src/styles/plugins/_jstree.sass
+++ b/src/styles/plugins/_jstree.sass
@@ -1,8 +1,8 @@
 /* jsTree overrides */
 $tree-color-text: $color-text-dark-primary
 $tree-color-highlight: $color-primary-accent
-$tree-color-highlight-background: $color-primary-accent
-$tree-color-highlight-background-text: $white
+$tree-color-highlight-background: $white
+$tree-color-highlight-background-text: $primary
 
 .jstree-default
 	/* list item */
@@ -62,48 +62,48 @@ $tree-color-highlight-background-text: $white
 		&.jstree-open
 			/* Text of children for an open tree (like a folder) */
 			.jstree-children > .jstree-node
-				padding-left: 15px !important
+				padding-left: 16px !important
 
 				.jstree-icon:empty
 					left: 20px !important
 
 					// Tweaks for specific icons
 					&.pi-file-archive
-						left: 22px !important
+						left: 25px !important
 					&.pi-folder
-						left: 21px !important
+						left: 20px !important
 						font-size: .9em !important
-					&.pi-film-thick
-						left: 22px !important
+					&.pi-splay
+						left: 20px !important
 						font-size: .85em !important
 
 				.jstree-anchor
-					box-shadow: inset 1px 0 0 0 rgba($tree-color-text, .2)
+					// box-shadow: inset 1px 0 0 0 $color-background
 
 		/* Closed Folder */
 		// &.jstree-closed
 
 		&.jstree-open .jstree-icon.jstree-ocl,
 		&.jstree-closed .jstree-icon.jstree-ocl
+			float: left
+			min-width: 30px
+			opacity: 0
 			position: absolute
 			z-index: 1
-			opacity: 0
-			min-width: 30px
-			float: left
 
 		/* The text of the last level item */
 		.jstree-anchor
 			+media-xs
-				width: 98%
 				padding: 0 !important
+				width: 98%
 			border: none
+			font-size: 13px
 			height: inherit
-			line-height: 26px
+			line-height: 24px
 			overflow: hidden
 			padding-left: 28px
 			padding-right: 10px
 			text-overflow: ellipsis
-			transition: background-color 100ms ease-in-out
 			white-space: nowrap
 			width: 100%
 
@@ -111,7 +111,7 @@ $tree-color-highlight-background-text: $white
 			&:after
 				content: '\e83a' !important
 				font-family: 'pillar-font'
-				color: white
+				color: $tree-color-highlight-background-text
 				display: none
 				position: absolute
 				right: 7px
@@ -119,31 +119,31 @@ $tree-color-highlight-background-text: $white
 
 			// Icon, not selected
 			.jstree-icon
-				color: $color-text-dark-secondary
-				font-size: 95% !important
+				color: $tree-color-text
 				margin: 0 !important
 
 			/* Selected item */
 			&.jstree-clicked
 				background-color: $tree-color-highlight-background !important
-				color: white !important
+				color: $tree-color-highlight-background-text !important
+				font-weight: bold
 
 				&:after
 					display: block
-					color: white !important
+					color: $tree-color-highlight-background-text !important
 
 				.jstree-ocl,
 				.jstree-icon
-					color: white
+					color: $tree-color-highlight-background-text
 
 				/* hover an active item */
 				&.jstree-hovered
 					background-color: lighten($tree-color-highlight-background, 10%) !important
 					box-shadow: none
-					color: white !important
+					color: $tree-color-highlight-background-text !important
 
 				&.jstree-hovered .jstree-icon
-					color: white !important
+					color: $tree-color-highlight-background-text !important
 
 			.jstree-hovered
 				background-color: rgba($tree-color-highlight, .1) !important
@@ -182,8 +182,8 @@ $tree-color-highlight-background-text: $white
 		position: absolute
 
 		&:empty
-			line-height: 26px
-			left: 5px
+			line-height: 24px
+			left: 3px
 
 	&.is_subscriber
 		.jstree-node
@@ -267,7 +267,7 @@ $tree-color-highlight-background-text: $white
 
 .jstree-default .jstree-node.jstree-closed .jstree-icon.jstree-ocl + .jstree-anchor,
 .jstree-default .jstree-node.jstree-open .jstree-icon.jstree-ocl + .jstree-anchor
-	padding-left: 28px !important
+	padding-left: 24px !important
 
 /* hovered text */
 .jstree-default .jstree-hovered,
@@ -278,11 +278,11 @@ $tree-color-highlight-background-text: $white
 
 a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
 	background-color: rgba($tree-color-highlight-background, .8) !important
-	color: white !important
+	color: $tree-color-highlight-background-text !important
 
 a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
 	background-color: rgba($tree-color-highlight-background, .8) !important
-	color: white !important
+	color: $tree-color-highlight-background-text !important
 
 i.jstree-icon.jstree-ocl
 	color: rgba($tree-color-text, .5) !important