pillar/src/styles/plugins/_jstree.sass

/* jsTree overrides */

$tree-color-text: $color-text-dark-primary
$tree-color-highlight: hsl(hue($color-background-active), 40%, 50%)
$tree-color-highlight-background: hsl(hue($color-background-active), 40%, 50%)
$tree-color-highlight-background-text: white

.jstree-default

	/* list item */
	.jstree-node
		position: relative
		max-width: 100% // Needed for ellipsis on long names
		margin: 0 !important
		color: $tree-color-text
		background-image: none !important

		transition: color 100ms ease-in-out, background-color 150ms ease-in-out

		+media-xs
			width: 100%

		&[data-node-type="asset"],
		&[data-node-type="texture"],
		&[data-node-type="hdri"]
			&[is_free='true']
				.jstree-anchor
					padding-right: 20px
					&:before
						font-family: 'pillar-font'
						content: '\e84e'
						color: $color-success
						font-size: .8em
						padding: 0 5px
						position: absolute
						right: 5px

					&.jstree-clicked
						padding-right: 30px
						&:before
							color: $tree-color-highlight-background-text !important
							right: 15px

		&[data-node-type="page"],
		&[data-node-type="blog"]
			font-size: 1.15em
			color: darken($tree-color-highlight, 5%)
			border-bottom: 2px solid $tree-color-highlight

			.jstree-anchor
				padding: 3px 8px
			.jstree-icon.jstree-themeicon
				display: none

		/* Brief moment when a node is being loaded */
		&.jstree-loading
			padding: 0

		/* Items at top level */
		&.jstree-leaf
			.jstree-icon.jstree-themeicon
				opacity: 1
				width: 24px !important

				&.pi-image
					font-size: .85em !important

		/* Open Folder */
		&.jstree-open
			/* Text of children for an open tree (like a folder) */
			.jstree-children > .jstree-node
				padding-left: 15px !important

				.jstree-icon:empty
					left: 20px !important

					// Tweaks for specific icons
					&.pi-file-archive
						left: 22px !important
					&.pi-folder
						left: 21px !important
						font-size: .9em !important
					&.pi-film-thick
						left: 22px !important
						font-size: .85em !important

				.jstree-anchor
					border-left: thin solid rgba($tree-color-text, .2)

		/* Closed Folder */
		// &.jstree-closed

		&.jstree-open .jstree-icon.jstree-ocl,
		&.jstree-closed .jstree-icon.jstree-ocl
			position: absolute
			z-index: 1
			opacity: 0
			min-width: 30px
			float: left

		/* The text of the last level item */
		.jstree-anchor
			width: 100%
			padding-left: 28px
			padding-right: 10px
			height: inherit
			line-height: 26px
			white-space: nowrap
			text-overflow: ellipsis
			overflow: hidden
			border-bottom: thin solid transparent
			transition: none

			+media-xs
				width: 98%
				padding: 0 !important

			.jstree-themeicon
				margin: 0 !important
				font-size: 95% !important
				color: $color-text-dark-secondary

			/* Selected item */
			&.jstree-clicked
				background-color: $tree-color-highlight-background !important
				color: $tree-color-highlight-background-text !important

				.jstree-ocl, .jstree-themeicon
					color: $tree-color-highlight-background-text !important

				&:after
					content: '\e83a'
					font-family: 'pillar-font'
					color: $tree-color-highlight-background-text
					position: absolute
					right: 7px
					top: 1px

				li
					a.jstree-anchor:after
						content: ''

				/* hover an active item */
				&.jstree-hovered,
				&.jstree-hovered .jstree-icon.jstree-themeicon
					color: $tree-color-highlight-background-text !important
					box-shadow: none

			.jstree-hovered
				background-color: rgba($tree-color-highlight, .1) !important

	.jstree-leaf .jstree-clicked
		width: 100% !important

	/* active item text + icon */
	.jstree-clicked,
	.jstree-clicked > .jstree-ocl
		color: $tree-color-highlight-background-text !important
		background-color: transparent !important
		border-radius: 0
		box-shadow: none
		border-bottom: thin solid transparent

	.jstree-ocl:before
		+media-xs
			font-weight: bold
			font-size: 100%
			top: 10%
			left: 46%

	.jstree-hovered,
	.jstree-hovered .jstree-ocl
		background-color: transparent !important
		box-shadow: none
		color: $tree-color-highlight-background-text !important

	/* Folder that you click to collapse/expand */
	.jstree-icon
		background-image: none !important
		position: relative
		width: 20px !important
		text-align: left !important
		position: absolute

		&:empty
			line-height: 26px
			left: 5px

.jstree-loading
	padding: 5px
	color: $color-text-light-secondary

.jstree-default-responsive
	.jstree-anchor
		+media-sm
			font-weight: normal !important
			text-shadow: none !important

.ps-active-y
	.jstree-default .jstree-node
		max-width: 97%

.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

/* hovered text */
.jstree-default .jstree-hovered,
.jstree-default .jstree-open .jstree-hovered,
.jstree-default .jstree-hovered .jstree-icon.jstree-themeicon
	color: $tree-color-highlight !important


a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
	background-color: rgba($tree-color-highlight-background, .7) !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

i.jstree-icon.jstree-ocl
	height: 26px !important
	color: rgba($tree-color-text, .5) !important
	+media-xs
		height: 40px !important

.jstree-children .jstree-open i.jstree-icon.jstree-ocl
	height: 26px !important

/* /jsTree overrides */