jstree-bootstrap-theme/src/themes/proton/mixins.less

Reponsive jsTree Twitter Bootstrap 3 Compatible Theme

.gradient (@color1;	@color2) {
	background:@color1;
	background: -moz-linear-gradient(top, @color1 0%, @color2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color1), color-stop(100%,@color2));
	background: -webkit-linear-gradient(top, @color1 0%,@color2 100%);
	background: -o-linear-gradient(top, @color1 0%,@color2 100%);
	background: -ms-linear-gradient(top, @color1 0%,@color2 100%);
	background: linear-gradient(to bottom, @color1 0%,@color2 100%);
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=0 );*/
}

.jstree-theme (@base-height, @image, @image-height) {
	@correction: (@image-height - @base-height) / 2;


	.jstree-node {
		min-height:@base-height;
		line-height:@base-height;
		margin-left:@base-height;
		min-width:@base-height;
	}
	.jstree-anchor {
		line-height:@base-height;
		margin: 1px 0 2px;
		height:@base-height;
	}
	.jstree-icon {
		width:@base-height;
		height:@base-height;
		line-height:@base-height;
	}
	.jstree-icon:empty {
		width:@base-height;
		height:@base-height;
		line-height:@base-height;
	}
	&.jstree-rtl .jstree-node {
		margin-right:@base-height;
	}
	.jstree-wholerow {
		height:@base-height;
	}

	.jstree-node,
	.jstree-icon {
		background-size: 320px 96px;
		background-image:url("@{image}.png");
	}
	.jstree-node {
		background-position:-(@image-height * 9 + @correction) -@correction;
		background-repeat:repeat-y;
	}
	.jstree-last {
		background:transparent;
	}

	.jstree-open > .jstree-ocl {
		background-position:-(@image-height * 4 + @correction) -@correction;
	}
	.jstree-closed > .jstree-ocl {
		background-position:-(@image-height * 3 + @correction) -@correction;
	}
	.jstree-leaf > .jstree-ocl {
		background-position:-(@image-height * 2 + @correction) -@correction;
	}
	.jstree-themeicon {
		background-position:-(@image-height * 8 + @correction) -@correction - 2;
	}

	> .jstree-no-dots {
		.jstree-node,
		.jstree-leaf > .jstree-ocl {
			background:transparent;

		}
		.jstree-open > .jstree-ocl {
			background-position:-(@image-height * 1 + @correction) -@correction;

		}
		.jstree-closed > .jstree-ocl {
			background-position:-@correction -@correction;

		}
	}

	.jstree-clicked, .jstree-checked, .jstree-hovered{
		//
	}

	.jstree-disabled {
		background:transparent;
		&.jstree-hovered {
			background:transparent;
		}
		&.jstree-clicked {
			background:#efefef;
		}
	}

	.jstree-checkbox {
		background-position:-(@image-height * 5 + @correction) -@correction;
		&:hover {
			background-position:-(@image-height * 5 + @correction) -(@image-height * 1 + @correction);

		}
	}

	&.jstree-checkbox-selection .jstree-clicked, .jstree-checked {
		> .jstree-checkbox {
			background-position:-(@image-height * 7 + @correction) -@correction;
			&:hover {
				background-position:-(@image-height * 7 + @correction) -(@image-height * 1 + @correction);

			}
		}
	}
	.jstree-anchor {
		> .jstree-undetermined {
			background-position:-(@image-height * 6 + @correction) -@correction;
			&:hover {
				background-position:-(@image-height * 6 + @correction) -(@image-height * 1 + @correction);
			}
		}
	}

	> .jstree-striped {
		background-size:auto (@base-height * 2);
	}

	&.jstree-rtl {
		.jstree-node {
			background-size: 320px 96px;
			background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
			background-position: 100% 1px;
			background-repeat:repeat-y;

		}
		.jstree-last {
			background:transparent;

		}
		.jstree-open > .jstree-ocl {
			background-position:-(@image-height * 4 + @correction) -(@image-height * 1 + @correction);

		}
		.jstree-closed > .jstree-ocl {
			background-position:-(@image-height * 3 + @correction) -(@image-height * 1 + @correction);

		}
		.jstree-leaf > .jstree-ocl {
			background-position:-(@image-height * 2 + @correction) -(@image-height * 1 + @correction);

		}
		> .jstree-no-dots {
			.jstree-node,
			.jstree-leaf > .jstree-ocl {
				background:transparent;

			}
			.jstree-open > .jstree-ocl {
				background-position:-(@image-height * 1 + @correction) -(@image-height * 1 + @correction);

			}
			.jstree-closed > .jstree-ocl {
				background-position:-@correction -(@image-height * 1 + @correction);

			}
		}
	}
	.jstree-themeicon-custom {
		background-color:transparent;
		background-size: 320px 96px;
		background-image:none;
		background-position:0 0;
	}

	> .jstree-container-ul .jstree-loading > .jstree-ocl {
		background:url("@{image-path}throbber.gif") center center no-repeat;
	}

	.jstree-file {
		background:url("@{image}.png") -(@image-height * 3 + @correction) -(@image-height * 2 + @correction) no-repeat;
	}
	.jstree-folder {
		background:url("@{image}.png") -(@image-height * 8 + @correction) -(@correction) no-repeat;
	}

	> .jstree-container-ul > .jstree-node {
		margin-left:0;
		margin-right:0;
	}

	// drag'n'drop
	#jstree-dnd& {
		line-height:@base-height;
		padding:0 4px;
		.jstree-ok,
		.jstree-er {
			background-size: 320px 96px;
			background-image:url("@{image-path}32px.png");
			background-repeat:no-repeat;
			background-color:transparent;

		}
		i {
			background:transparent;
			width:@base-height;
			height:@base-height;
			line-height:@base-height;

		}
		.jstree-ok {
			background-position: -(@correction) -(@image-height * 2 + @correction);

		}
		.jstree-er {
			background-position: -(@image-height * 1 + @correction) -(@image-height * 2 + @correction);

		}
	}
}