vaadin-framework/themes/src/main/resources/VAADIN/themes/base/tree/tree.scss

@mixin base-tree($primaryStyleName : v-tree) {

// tree-default.css

.#{$primaryStyleName} {
	text-align: left; /* Force default alignment */
	padding: 1px 0;
	outline: none;
}
.#{$primaryStyleName}-node {
	background: transparent url(../common/img/sprites.png) no-repeat 5px -37px;
	padding: 1px 0;
}
.#{$primaryStyleName}-node-caption:focus {
	outline: none;
}
div.#{$primaryStyleName}-node-leaf {
	background: transparent;
}
.#{$primaryStyleName}-node-expanded {
	background: transparent url(../common/img/sprites.png) no-repeat -5px -10px;
}
.#{$primaryStyleName}-node-caption {
	margin-left: 1em;
}
.#{$primaryStyleName}-node span {
	cursor: pointer;
}
.#{$primaryStyleName}-node-caption div {
	white-space: nowrap;
}
.#{$primaryStyleName}-node-caption span,
.#{$primaryStyleName}-node-caption .v-icon {
	vertical-align: middle;
}
.#{$primaryStyleName}-node-selected span {
	background: #999;
	color: #fff;
}
.#{$primaryStyleName}-node-children {
	padding-left: 1em;
}

// Drag'n'drop styles

.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top {
	border-top: 2px solid #1d9dff;
	margin-top: -1px;
	padding-top: 0;
}
.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom {
	border-bottom: 2px solid #1d9dff;
	margin-bottom: -1px;
	padding-bottom: 0;
}
.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top:before,
.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom:after,
.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after {
	display: block;
	
	position: absolute;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	background: transparent url(../common/img/drag-slot-dot.png);
}
.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom:after {
	margin-top: -2px;
}
.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after {
	margin-left: 14px;
}
.v-ff & .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after,
.v-ie & .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after {
	margin-top: -2px;
}
.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top {
	background-position: 5px -38px;
}
.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-expanded {
	background-position: -5px -11px;
}
.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div {
	border: 2px solid #1d9dff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin: -2px 2px -2px -2px;
	background-color: #bcdcff;
}
.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div {
	background-color: rgba(169,209,255,.6);
}
.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div,
.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top,
.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom {
	border-color: rgba(0,109,232,.6);
}

// tree-connectors.css
// This could be (and was) wrapped in a nested block instead of prefixing each 
// row, but #10309 prevents us from doing that right now.

	// Make item caption height an even number (so that the connector dots overlap nicely)
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-caption {
		padding-top: 1px;
	}
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node {
		background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
	}
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded {
		background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
	}
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-last {
		background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
	}
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-last {
		background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
	}
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-leaf {
		background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
	}
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-leaf-last {
		background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
	}
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-children {
		background: transparent url(img/connector.png) repeat-y 2px 0;
	}
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-children-last {
		background: transparent;
	}
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top,
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-drag-top {
		background-position: 2px -53px;
	}
	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-leaf {
		background-position: 2px 50%;
	}


}