1 files changed, 42 insertions, 42 deletions

diff --git a/WebContent/VAADIN/themes/base/tree/tree.scss b/WebContent/VAADIN/themes/base/tree/tree.scss
index 2e34053ad5..2eb2c5908b 100644
--- a/WebContent/VAADIN/themes/base/tree/tree.scss
+++ b/WebContent/VAADIN/themes/base/tree/tree.scss
@@ -1,62 +1,62 @@
-@mixin base-tree {
+@mixin base-tree($name : v-tree) {
 
 // tree-default.css
 
-.v-tree {
+.#{$name} {
 	text-align: left; /* Force default alignment */
 	overflow: hidden;
 	padding: 1px 0;
 	outline: none;
 }
-.v-tree-node {
+.#{$name}-node {
 	background: transparent url(../common/img/sprites.png) no-repeat 5px -37px;
 	padding: 1px 0;
 }
-.v-tree-node-caption:focus {
+.#{$name}-node-caption:focus {
 	outline: none;
 }
-div.v-tree-node-leaf {
+div.#{$name}-node-leaf {
 	background: transparent;
 }
-.v-tree-node-expanded {
+.#{$name}-node-expanded {
 	background: transparent url(../common/img/sprites.png) no-repeat -5px -10px;
 }
-.v-tree-node-caption {
+.#{$name}-node-caption {
 	margin-left: 1em;
 }
-.v-tree-node span {
+.#{$name}-node span {
 	cursor: pointer;
 }
-.v-tree-node-caption div {
+.#{$name}-node-caption div {
 	white-space: nowrap;
 }
-.v-tree-node-caption span,
-.v-tree-node-caption .v-icon {
+.#{$name}-node-caption span,
+.#{$name}-node-caption .v-icon {
 	vertical-align: middle;
 }
-.v-tree-node-selected span {
+.#{$name}-node-selected span {
 	background: #999;
 	color: #fff;
 }
-.v-tree-node-children {
+.#{$name}-node-children {
 	padding-left: 1em;
 }
 
 // Drag'n'drop styles
 
-.v-tree .v-tree-node-drag-top {
+.#{$name} .#{$name}-node-drag-top {
 	border-top: 2px solid #1d9dff;
 	margin-top: -1px;
 	padding-top: 0;
 }
-.v-tree .v-tree-node-drag-bottom {
+.#{$name} .#{$name}-node-drag-bottom {
 	border-bottom: 2px solid #1d9dff;
 	margin-bottom: -1px;
 	padding-bottom: 0;
 }
-.v-tree .v-tree-node-drag-top:before,
-.v-tree .v-tree-node-drag-bottom:after,
-.v-tree .v-tree-node-caption-drag-center:after {
+.#{$name} .#{$name}-node-drag-top:before,
+.#{$name} .#{$name}-node-drag-bottom:after,
+.#{$name} .#{$name}-node-caption-drag-center:after {
 	display: block;
 	
 	position: absolute;
@@ -65,23 +65,23 @@ div.v-tree-node-leaf {
 	margin-top: -4px;
 	background: transparent url(../common/img/drag-slot-dot.png);
 }
-.v-tree .v-tree-node-drag-bottom:after {
+.#{$name} .#{$name}-node-drag-bottom:after {
 	margin-top: -2px;
 }
-.v-tree .v-tree-node-caption-drag-center:after {
+.#{$name} .#{$name}-node-caption-drag-center:after {
 	margin-left: 14px;
 }
-.v-ff .v-tree .v-tree-node-caption-drag-center:after,
-.v-ie .v-tree .v-tree-node-caption-drag-center:after {
+.v-ff .#{$name} .#{$name}-node-caption-drag-center:after,
+.v-ie .#{$name} .#{$name}-node-caption-drag-center:after {
 	margin-top: -2px;
 }
-.v-tree .v-tree-node-drag-top {
+.#{$name} .#{$name}-node-drag-top {
 	background-position: 5px -38px;
 }
-.v-tree .v-tree-node-drag-top.v-tree-node-expanded {
+.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded {
 	background-position: -5px -11px;
 }
-.v-tree .v-tree-node-caption-drag-center div {
+.#{$name} .#{$name}-node-caption-drag-center div {
 	border: 2px solid #1d9dff;
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
@@ -89,51 +89,51 @@ div.v-tree-node-leaf {
 	margin: -2px 2px -2px -2px;
 	background-color: #bcdcff;
 }
-.v-tree .v-tree-node-caption-drag-center div {
+.#{$name} .#{$name}-node-caption-drag-center div {
 	background-color: rgba(169,209,255,.6);
 }
-.v-tree .v-tree-node-caption-drag-center div,
-.v-tree .v-tree-node-drag-top,
-.v-tree .v-tree-node-drag-bottom {
+.#{$name} .#{$name}-node-caption-drag-center div,
+.#{$name} .#{$name}-node-drag-top,
+.#{$name} .#{$name}-node-drag-bottom {
 	border-color: rgba(0,109,232,.6);
 }
 
 // tree-connectors.css
 
-.v-tree-connectors {
+.#{$name}-connectors {
 	// Make item caption height an even number (so that the connector dots overlap nicely)
-	.v-tree-node-caption {
+	.#{$name}-node-caption {
 		padding-top: 1px;
 	}
-	.v-tree-node {
+	.#{$name}-node {
 		background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
 	}
-	.v-tree-node-expanded {
+	.#{$name}-node-expanded {
 		background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
 	}
-	.v-tree-node-last {
+	.#{$name}-node-last {
 		background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
 	}
-	.v-tree-node-expanded.v-tree-node-last {
+	.#{$name}-node-expanded.#{$name}-node-last {
 		background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
 	}
-	.v-tree-node-leaf {
+	.#{$name}-node-leaf {
 		background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
 	}
-	.v-tree-node-leaf-last {
+	.#{$name}-node-leaf-last {
 		background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
 	}
-	.v-tree-node-children {
+	.#{$name}-node-children {
 		background: transparent url(img/connector.png) repeat-y 2px 0;
 	}
-	.v-tree-node-children-last {
+	.#{$name}-node-children-last {
 		background: transparent;
 	}
-	.v-tree-node-drag-top,
-	.v-tree-node-expanded.v-tree-node-drag-top {
+	.#{$name}-node-drag-top,
+	.#{$name}-node-expanded.#{$name}-node-drag-top {
 		background-position: 2px -53px;
 	}
-	.v-tree-node-drag-top.v-tree-node-leaf {
+	.#{$name}-node-drag-top.#{$name}-node-leaf {
 		background-position: 2px 50%;
 	}
 }