treeview fixes frappe/erpnext#7507 (#2653)

frappe/public/css/tree.css

@@ -43,11 +43,12 @@ ul.tree-children {
 .tree-node:last-child::after {
   content: '';
   position: absolute;
-  top: 17px;
+  top: 16px;
   left: 8px;
   height: calc(100% - 26px);
   width: 1px;
   background: #d1d8dd;
+  z-index: -1;
 }
 .tree:last-child::after,
 .tree-node:last-child::after {
@@ -61,10 +62,11 @@ ul.tree-children {
 .tree-node.opened > .tree-children > .tree-node > .tree-link::before {
   content: '';
   position: absolute;
-  width: 12px;
+  width: 15px;
   height: 1px;
   top: 10px;
   left: -11px;
+  z-index: -1;
   background: #d1d8dd;
 }
 .tree.opened::before {
@@ -72,3 +74,6 @@ ul.tree-children {
   top: 33px;
   height: calc(100% - 67px);
 }
+.tree-link.active ~ .balance-area {
+  color: #36414C !important;
+}

frappe/public/less/tree.less

@@ -51,11 +51,12 @@ ul.tree-children {
 	&.opened::before, &:last-child::after {
 		content: '';
 		position: absolute;
-		top: 17px;
+		top: 16px;
 		left: 8px;
 		height: ~"calc(100% - 26px)";
 		width: 1px;
 		background: @border-color;
+		z-index: -1;
 	}
 
 	&:last-child::after {
@@ -69,10 +70,11 @@ ul.tree-children {
 	&.opened > .tree-children > .tree-node > .tree-link::before {
 		content: '';
 		position: absolute;
-		width: 12px;
+		width: 15px;
 		height: 1px;
 		top: 10px;
 		left: -11px;
+		z-index: -1;
 		background: @border-color;
 	}
 }
@@ -81,4 +83,8 @@ ul.tree-children {
 	left: 23px;
 	top: 33px;
 	height: ~"calc(100% - 67px)";
+}
+
+.tree-link.active ~ .balance-area {
+	color: @text-color !important;
 }