Sass restructure: tried some variants, this should be a reindeer structure that should work w/o overlay-container

31 files changed, 712 insertions, 712 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
index c0778e68dc..5d9b4a660f 100644
--- a/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
+++ b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
@@ -1,16 +1,16 @@
-@mixin reindeer-accordion {
+@mixin reindeer-accordion($name : v-accordion) {
 
-.v-accordion {
+.#{$name} {
 	border: 1px solid #bebebe;
 	border-radius: 2px;
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
 	overflow: hidden;
 }
-.v-accordion-item {
+.#{$name}-item {
 	background-color: #fff;
 }
-.v-accordion-item-caption {
+.#{$name}-item-caption {
 	height: 19px;
 	background: #e4e4e4 repeat-x;
 	background-image: url(../tabsheet/img/tabbar-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
@@ -20,31 +20,31 @@
 	text-shadow: #fff 0 1px 0;
 }
 
-.v-accordion-item-caption .v-captiontext{
+.#{$name}-item-caption .v-captiontext{
 	vertical-align:baseline;
 }
 
-.v-accordion-item-first .v-accordion-item-caption {
+.#{$name}-item-first .#{$name}-item-caption {
 	border-top: none;
 }
-.v-accordion-item-caption .v-caption {
+.#{$name}-item-caption .v-caption {
 	padding: 3px 0 5px 10px;
 }
-.v-ie .v-accordion-item-caption .v-caption {
+.v-ie .#{$name}-item-caption .v-caption {
 	padding: 2px 0 6px 10px;
 }
-.v-accordion-item-open .v-accordion-item-caption {
+.#{$name}-item-open .#{$name}-item-caption {
 	background-image: url(../tabsheet/img/tabbar-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	border-bottom: 1px solid #bbb;
 }
-.v-accordion-item-caption .v-icon {
+.#{$name}-item-caption .v-icon {
 	margin-top: -1px;
 }
-.v-ie .v-accordion-item-caption .v-icon {
+.v-ie .#{$name}-item-caption .v-icon {
 	vertical-align: top;
 }
 /* Borderless style */
-.v-accordion-borderless {
+.#{$name}-borderless {
 	border: none;
 	border-radius: 0;
 	-webkit-border-radius: 0;
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-ie.scss b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
index 5bf38c4442..db39bf5677 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
@@ -1,6 +1,6 @@
-@mixin reindeer-button-ie {
+@mixin reindeer-button-ie($name : v-nativebutton) {
 
-.v-ie8 .v-nativebutton-link {
+.v-ie8 .#{$name}-link {
 	padding: 0;
 	text-align: left;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
index aebda24cd4..a5ec4422eb 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
@@ -1,15 +1,15 @@
-@mixin reindeer-button-link-style {
+@mixin reindeer-button-link-style($name : v-button) {
 
-.v-button.v-button-link,
-.v-button.v-button-link:focus,
-.v-button.v-button-link:active,
-.v-button-link.v-pressed,
-.v-disabled.v-button.v-button-link,
-.v-button.v-button-link .v-button-wrap,
-.v-button.v-button-link:focus .v-button-wrap,
-.v-button.v-button-link:active .v-button-wrap,
-.v-button-link.v-pressed .v-button-wrap,
-.v-disabled.v-button.v-button-link .v-button-wrap {
+.#{$name}.#{$name}-link,
+.#{$name}.#{$name}-link:focus,
+.#{$name}.#{$name}-link:active,
+.#{$name}-link.v-pressed,
+.v-disabled.#{$name}.#{$name}-link,
+.#{$name}.#{$name}-link .#{$name}-wrap,
+.#{$name}.#{$name}-link:focus .#{$name}-wrap,
+.#{$name}.#{$name}-link:active .#{$name}-wrap,
+.#{$name}-link.v-pressed .#{$name}-wrap,
+.v-disabled.#{$name}.#{$name}-link .#{$name}-wrap {
 	background: transparent;
 	height: auto;
 	padding: 0;
@@ -17,12 +17,12 @@
 	line-height: inherit;
 	}
 
-.v-button.v-button-link.v-disabled,
-.v-button.v-button-link.v-disabled .v-button-wrap {
+.#{$name}.#{$name}-link.v-disabled,
+.#{$name}.#{$name}-link.v-disabled .#{$name}-wrap {
 	cursor: default;
 	}
 	
-.v-button-link .v-button-caption,
+.#{$name}-link .#{$name}-caption,
 .v-nativebutton-link .v-nativebutton-caption {
 	line-height: inherit;
 	font-weight: normal;
@@ -31,7 +31,7 @@
 	text-shadow: none;
 	}
 	
-.v-button-link:focus .v-button-caption,
+.#{$name}-link:focus .#{$name}-caption,
 .v-nativebutton-link:focus .v-nativebutton-caption {
 	outline: 1px dotted #1b699f;
 	}
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss
index ffb4d250d3..f4cd726412 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss
@@ -1,30 +1,30 @@
-@mixin reindeer-button-primary-style {
+@mixin reindeer-button-primary-style($name : v-button) {
 
-.v-button-primary:focus {
+.#{$name}-primary:focus {
 	background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */
 	}
 	
-.v-button-primary:focus .v-button-wrap {
+.#{$name}-primary:focus .#{$name}-wrap {
 	background-image: url(img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
 	}
 	
-.v-button-primary:active,
-.v-button-primary.v-pressed {
+.#{$name}-primary:active,
+.#{$name}-primary.v-pressed {
 	background-image: url(img/primary-left-pressed.png); /** sprite-ref: buttons */
 	}
 
-.v-button-primary:active .v-button-wrap,
-.v-button-primary.v-pressed .v-button-wrap {
+.#{$name}-primary:active .#{$name}-wrap,
+.#{$name}-primary.v-pressed .#{$name}-wrap {
 	background-image: url(img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
 	}
 
-.v-button-primary,
-.v-disabled.v-button-primary {
+.#{$name}-primary,
+.v-disabled.#{$name}-primary {
 	background-image: url(img/primary-left.png); /** sprite-ref: buttons */
 	}
 	
-.v-button-primary .v-button-wrap,
-.v-disabled.v-button-primary .v-button-wrap {
+.#{$name}-primary .#{$name}-wrap,
+.v-disabled.#{$name}-primary .#{$name}-wrap {
 	background-image: url(img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */
 	}
 	
@@ -34,32 +34,32 @@
 /* Black style */
 
 
-.black .v-button-primary:focus {
+.black .#{$name}-primary:focus {
 	background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .v-button-primary:focus .v-button-wrap {
+.black .#{$name}-primary:focus .#{$name}-wrap {
 	background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	color: #eaf4fb;
 	}
 	
-.black .v-button-primary:active,
-.black .v-button-primary.v-pressed {
+.black .#{$name}-primary:active,
+.black .#{$name}-primary.v-pressed {
 	background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .v-button-primary:active .v-button-wrap,
-.black .v-button-primary.v-pressed .v-button-wrap {
+.black .#{$name}-primary:active .#{$name}-wrap,
+.black .#{$name}-primary.v-pressed .#{$name}-wrap {
 	background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 
-.black .v-button-primary,
-.black .v-disabled.v-button-primary {
+.black .#{$name}-primary,
+.black .v-disabled.#{$name}-primary {
 	background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .v-button-primary .v-button-wrap,
-.black .v-disabled.v-button-primary .v-button-wrap {
+.black .#{$name}-primary .#{$name}-wrap,
+.black .v-disabled.#{$name}-primary .#{$name}-wrap {
 	background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss
index 0ec33e330c..b141156ac8 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss
@@ -1,37 +1,37 @@
-@mixin reindeer-button-small-style {
+@mixin reindeer-button-small-style($name : v-button) {
 
-.v-button-small:focus {
+.#{$name}-small:focus {
 	background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */
 	}
 	
-.v-button-small:focus .v-button-wrap {
+.#{$name}-small:focus .#{$name}-wrap {
 	background-image: url(img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
 	}
 	
-.v-button-small:active,
-.v-button-small.v-pressed {
+.#{$name}-small:active,
+.#{$name}-small.v-pressed {
 	background-image: url(img/small-left-pressed.png); /** sprite-ref: buttons */
 	}
 
-.v-button-small:active .v-button-wrap,
-.v-button-small.v-pressed .v-button-wrap {
+.#{$name}-small:active .#{$name}-wrap,
+.#{$name}-small.v-pressed .#{$name}-wrap {
 	background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
 	}
 
-.v-button-small,
-.v-disabled.v-button-small {
+.#{$name}-small,
+.v-disabled.#{$name}-small {
 	background-image: url(img/small-left.png); /** sprite-ref: buttons */
 	height: 20px;
 	}
 	
-.v-button-small .v-button-wrap,
-.v-disabled.v-button-small .v-button-wrap {
+.#{$name}-small .#{$name}-wrap,
+.v-disabled.#{$name}-small .#{$name}-wrap {
 	background-image: url(img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */
 	height: 19px;
 	padding: 1px 14px 0 8px;
 	}
 
-.v-button-small .v-button-caption {
+.#{$name}-small .#{$name}-caption {
 	font-weight: normal;
 	}
 	
@@ -40,31 +40,31 @@
 
 /* Black style */
 
-.black .v-button-small:focus {
+.black .#{$name}-small:focus {
 	background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .v-button-small:focus .v-button-wrap {
+.black .#{$name}-small:focus .#{$name}-wrap {
 	background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 	
-.black .v-button-small:active,
-.black .v-button-small.v-pressed {
+.black .#{$name}-small:active,
+.black .#{$name}-small.v-pressed {
 	background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .v-button-small:active .v-button-wrap,
-.black .v-button-small.v-pressed .v-button-wrap {
+.black .#{$name}-small:active .#{$name}-wrap,
+.black .#{$name}-small.v-pressed .#{$name}-wrap {
 	background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 
-.black .v-button-small,
-.black .v-disabled.v-button-small {
+.black .#{$name}-small,
+.black .v-disabled.#{$name}-small {
 	background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .v-button-small .v-button-wrap,
-.black .v-disabled.v-button-small .v-button-wrap {
+.black .#{$name}-small .#{$name}-wrap,
+.black .v-disabled.#{$name}-small .#{$name}-wrap {
 	background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-standard.scss b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
index 4df09bc1bd..f950060d4a 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
@@ -1,29 +1,29 @@
-@mixin reindeer-button-standard {
+@mixin reindeer-button-standard($name : v-button) {
 
-.v-button:focus {
+.#{$name}:focus {
 	background-image: url(img/left-focus.png); /** sprite-ref: buttons */
 	outline: none;
 	}
 
-.v-button:focus .v-button-wrap {
+.#{$name}:focus .#{$name}-wrap {
 	background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
 	outline: none;
 	}
 
-.v-button:active,
-.v-button.v-pressed {
+.#{$name}:active,
+.#{$name}.v-pressed {
 	background-image: url(img/left-pressed.png); /** sprite-ref: buttons */
 	outline: none;
 	}
 
-.v-button:active .v-button-wrap,
-.v-button.v-pressed .v-button-wrap {
+.#{$name}:active .#{$name}-wrap,
+.#{$name}.v-pressed .#{$name}-wrap {
 	background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
 	outline: none;
 	}
 
-.v-button,
-.v-disabled.v-button {
+.#{$name},
+.v-disabled.#{$name} {
 	height: 26px;
 	padding: 0 0 0 6px;
 	background-color: transparent;
@@ -33,8 +33,8 @@
 	cursor: default;
 	}
 
-.v-button-wrap,
-.v-disabled.v-button .v-button-wrap {
+.#{$name}-wrap,
+.v-disabled.#{$name} .#{$name}-wrap {
 	display: block;
 	height: 22px;
 	padding: 4px 15px 0 9px;
@@ -44,7 +44,7 @@
 	background-image: url(img/right.png);  /** sprite-ref: buttons; sprite-alignment: right */
 	}
 
-.v-button-caption {
+.#{$name}-caption {
 	color: #222;
 	text-shadow: #fff 0 1px 0;
 	font-weight: bold;
@@ -58,35 +58,35 @@
 /**************************
  * Black style
  **************************/
-.black .v-button:focus {
+.black .#{$name}:focus {
 	background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .v-button:focus .v-button-wrap {
+.black .#{$name}:focus .#{$name}-wrap {
 	background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 	
-.black .v-button:active,
-.black .v-button.v-pressed {
+.black .#{$name}:active,
+.black .#{$name}.v-pressed {
 	background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .v-button:active .v-button-wrap,
-.black .v-button.v-pressed .v-button-wrap {
+.black .#{$name}:active .#{$name}-wrap,
+.black .#{$name}.v-pressed .#{$name}-wrap {
 	background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 
-.black .v-button,
-.black .v-disabled.v-button {
+.black .#{$name},
+.black .v-disabled.#{$name} {
 	background-image: url(img/black/left.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .v-button-wrap,
-.black .v-disabled.v-button .v-button-wrap {
+.black .#{$name}-wrap,
+.black .v-disabled.#{$name} .#{$name}-wrap {
 	background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 	
-.black .v-button-caption {
+.black .#{$name}-caption {
 	color: #c9ccce;
 	text-shadow: #121314 0 -1px 0;
 	}
diff --git a/WebContent/VAADIN/themes/reindeer/button/button.scss b/WebContent/VAADIN/themes/reindeer/button/button.scss
index 34a4efda04..9f7e761a1b 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button.scss
@@ -10,7 +10,7 @@
 @import "button-ie.scss";
 
 @mixin reindeer-button {
-
+	// TODO use $exclude 
 	@include reindeer-button-standard;
 	@include reindeer-button-primary-style;
 	@include reindeer-button-small-style;
diff --git a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
index 17b9d42cdb..c890f259ad 100644
--- a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
+++ b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
@@ -1,30 +1,30 @@
-@mixin reindeer-datefield {
+@mixin reindeer-datefield($name : v-datefield) {
 
-.v-datefield {
+.#{$name} {
 	overflow: hidden;
 }
 input.v-textfield-readonly:focus{
 	background-color: transparent;	
 }
-.v-datefield-calendarpanel {
+.#{$name}-calendarpanel {
 	border-collapse: collapse;
 	margin: 0;
 	padding: 0;
 	height: auto !important;
 }
-.v-datefield-year .v-datefield-calendarpanel-prevmonth,
-.v-datefield-year .v-datefield-calendarpanel-nextmonth {
+.#{$name}-year .#{$name}-calendarpanel-prevmonth,
+.#{$name}-year .#{$name}-calendarpanel-nextmonth {
 	display: none;
 }
-.v-datefield-calendarpanel td {
+.#{$name}-calendarpanel td {
 	vertical-align: top;
 }
-td.v-datefield-calendarpanel-month {
+td.#{$name}-calendarpanel-month {
 	height: 23px;
 	background-repeat: repeat-x;
 	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-span.v-datefield-calendarpanel-month {
+span.#{$name}-calendarpanel-month {
 	display: block;
 	text-align: center;
 	height: 16px;
@@ -35,36 +35,36 @@ span.v-datefield-calendarpanel-month {
 	overflow: hidden;
 	margin-top: 1px;
 }
-.v-datefield-year .v-datefield-calendarpanel-month {
+.#{$name}-year .#{$name}-calendarpanel-month {
 	width: 35px;
 }
-.v-datefield-month .v-datefield-calendarpanel-month,
-.v-datefield-day .v-datefield-calendarpanel-month,
-.v-datefield-full .v-datefield-calendarpanel-month {
+.#{$name}-month .#{$name}-calendarpanel-month,
+.#{$name}-day .#{$name}-calendarpanel-month,
+.#{$name}-full .#{$name}-calendarpanel-month {
 	width: 124px;
 }
-.v-datefield-month,
-.v-datefield-day,
-.v-datefield-full {
+.#{$name}-month,
+.#{$name}-day,
+.#{$name}-full {
 	min-width: 240px;
 }
-.v-datefield-popupcalendar {
+.#{$name}-popupcalendar {
 	min-width: 0;
 	padding-right: 24px;
 }
-.v-datefield-year .v-datefield-calendarpanel {
+.#{$name}-year .#{$name}-calendarpanel {
 	width: 100px;
 }
-td.v-datefield-calendarpanel-prevyear {
+td.#{$name}-calendarpanel-prevyear {
 	text-align: right;
 }
-td.v-datefield-calendarpanel-nextyear {
+td.#{$name}-calendarpanel-nextyear {
 	text-align: left;
 }
-.v-datefield-calendarpanel-prevyear button,
-.v-datefield-calendarpanel-nextyear button,
-.v-datefield-calendarpanel-prevmonth button,
-.v-datefield-calendarpanel-nextmonth button {
+.#{$name}-calendarpanel-prevyear button,
+.#{$name}-calendarpanel-nextyear button,
+.#{$name}-calendarpanel-prevmonth button,
+.#{$name}-calendarpanel-nextmonth button {
 	width: 24px;
 	height: 23px;
 	border: none;
@@ -79,33 +79,33 @@ td.v-datefield-calendarpanel-nextyear {
 	-moz-border-radius: 0;
 	border-radius: 0;
 }
-.v-ie .v-datefield-calendarpanel-prevyear button,
-.v-ie .v-datefield-calendarpanel-nextyear button,
-.v-ie .v-datefield-calendarpanel-prevmonth button,
-.v-ie .v-datefield-calendarpanel-nextmonth button {
+.v-ie .#{$name}-calendarpanel-prevyear button,
+.v-ie .#{$name}-calendarpanel-nextyear button,
+.v-ie .#{$name}-calendarpanel-prevmonth button,
+.v-ie .#{$name}-calendarpanel-nextmonth button {
 	text-indent: 0;
 	font-size: 1px;
 }
-.v-datefield-calendarpanel-nextyear button {
+.#{$name}-calendarpanel-nextyear button {
 	background-position: left top;
 	background-image: url(img/year-next.png); /** sprite-ref: verticals */
 }
-.v-datefield-calendarpanel-prevyear button:active,
-.v-ie .v-datefield-calendarpanel-prevyear button.v-pressed {
+.#{$name}-calendarpanel-prevyear button:active,
+.v-ie .#{$name}-calendarpanel-prevyear button.v-pressed {
 	background-image: url(img/year-prev-pressed.png); /** sprite-ref: verticals */
 }
-.v-datefield-calendarpanel-nextyear button:active,
-.v-ie .v-datefield-calendarpanel-nextyear button.v-pressed  {
+.#{$name}-calendarpanel-nextyear button:active,
+.v-ie .#{$name}-calendarpanel-nextyear button.v-pressed  {
 	background-image: url(img/year-next-pressed.png); /** sprite-ref: verticals */
 }
-.v-datefield-calendarpanel-prevmonth,
-.v-datefield-calendarpanel-nextmonth {
+.#{$name}-calendarpanel-prevmonth,
+.#{$name}-calendarpanel-nextmonth {
 	width: 24px;
 	background-repeat: repeat-x;
 	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-datefield-calendarpanel-prevmonth button,
-.v-datefield-calendarpanel-nextmonth button {
+.#{$name}-calendarpanel-prevmonth button,
+.#{$name}-calendarpanel-nextmonth button {
 	width: 100%;
 	height: 21px;
 	border-left: 1px solid #efefef;
@@ -116,36 +116,36 @@ td.v-datefield-calendarpanel-nextyear {
 	min-width: 24px;
 	margin-top: 1px;
 }
-.v-ie .v-datefield-calendarpanel-prevmonth button,
-.v-ie .v-datefield-calendarpanel-nextmonth button {
+.v-ie .#{$name}-calendarpanel-prevmonth button,
+.v-ie .#{$name}-calendarpanel-nextmonth button {
 	border: none;
 }
-.v-datefield-calendarpanel-nextmonth button {
+.#{$name}-calendarpanel-nextmonth button {
 	background-image: url(img/month-next.png); /** sprite-ref: verticals; sprite-alignment: center */
 }
-.v-datefield-calendarpanel-prevmonth button:active,
-.v-ie .v-datefield-calendarpanel-prevmonth button.v-pressed {
+.#{$name}-calendarpanel-prevmonth button:active,
+.v-ie .#{$name}-calendarpanel-prevmonth button.v-pressed {
 	background-position: center top;
 	background-image: url(img/month-prev-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
 }
-.v-datefield-calendarpanel-nextmonth button:active,
-.v-ie .v-datefield-calendarpanel-nextmonth button.v-pressed {
+.#{$name}-calendarpanel-nextmonth button:active,
+.v-ie .#{$name}-calendarpanel-nextmonth button.v-pressed {
 	background-position: center top;
 	background-image: url(img/month-next-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
 }
-.v-datefield-calendarpanel-body,
-.v-datefield-calendarpanel-time {
+.#{$name}-calendarpanel-body,
+.#{$name}-calendarpanel-time {
 	text-align: center;
 	vertical-align: top;
 }
-.v-datefield-calendarpanel-body table {
+.#{$name}-calendarpanel-body table {
 	border-collapse: collapse;
 	margin: 0;
 	padding: 0;
 	width: 220px;
 	margin: 0 auto;
 }
-.v-datefield-calendarpanel-weekdays td {
+.#{$name}-calendarpanel-weekdays td {
 	width: 14.2%;
 	overflow: hidden;
 	background-repeat: repeat-x;
@@ -157,57 +157,57 @@ td.v-datefield-calendarpanel-nextyear {
 	text-shadow: #3b4651 0 -1px 0;
 	vertical-align: top;
 }
-.v-datefield-calendarpanel-weeknumbers td {
+.#{$name}-calendarpanel-weeknumbers td {
 	width: 12.4%;
 }
-.v-datefield-calendarpanel-weekdays strong {
+.#{$name}-calendarpanel-weekdays strong {
 	display: block;
 	text-align: right;
 	padding: 1px 5px 0 0;
 	height: 14px;
 	border-top: 1px solid #596775;
 }
-.v-datefield-calendarpanel-weekdays .v-first {
+.#{$name}-calendarpanel-weekdays .v-first {
 	background-repeat: no-repeat;
 	background-image: url(img/weekday-first.png); /** sprite-ref: verticals; sprite-margin-bottom: 3px */
 }
-.v-datefield-calendarpanel-weekdays .v-last {
+.#{$name}-calendarpanel-weekdays .v-last {
 	background-repeat: no-repeat;
 	background-position: right top;
 	background-image: url(img/weekday-last.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-bottom: 3px */
 }
 /* IE fails to position backgrounds inside table element */
-.v-ie .v-datefield-calendarpanel-weekdays td {
+.v-ie .#{$name}-calendarpanel-weekdays td {
 	background: url(img/weekday-bg.png) repeat-x;
 	background-position: left top;
 }
-.v-ie .v-datefield-calendarpanel .v-first {
+.v-ie .#{$name}-calendarpanel .v-first {
 	background: url(img/weekday-first.png) no-repeat;
 }
-.v-ie .v-datefield-calendarpanel .v-last {
+.v-ie .#{$name}-calendarpanel .v-last {
 	background: url(img/weekday-last.png) no-repeat right top;
 }
-.v-datefield-calendarpanel-body td {
+.#{$name}-calendarpanel-body td {
 	text-align: right;
 	height: 19px;
 }
-.v-datefield-calendarpanel-day,
-.v-datefield-calendarpanel-weeknumber,
-.v-datefield-calendarpanel-day-today {
+.#{$name}-calendarpanel-day,
+.#{$name}-calendarpanel-weeknumber,
+.#{$name}-calendarpanel-day-today {
 	padding: 2px 5px 2px 0;
 	display: block;
 	margin: 1px 0 0 5px;
 }
-.v-datefield-calendarpanel-weeknumber {
+.#{$name}-calendarpanel-weeknumber {
 	margin: 0;
 	padding-top: 4px;
 	padding-bottom: 3px;
 }
-.v-datefield-calendarpanel-day-today {
+.#{$name}-calendarpanel-day-today {
 	color: #4095d1;
 	border: none;
 }
-.v-datefield-calendarpanel-day-selected {
+.#{$name}-calendarpanel-day-selected {
 	background: #507ba3;
 	color: #fff;
 	text-shadow: #3b5b79 0 1px 0;
@@ -215,37 +215,37 @@ td.v-datefield-calendarpanel-nextyear {
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
 }
-.v-datefield-calendarpanel-time select {
+.#{$name}-calendarpanel-time select {
 	padding: 0;
 	font-size: 11px;
 }
-.v-datefield-popup {
+.#{$name}-popup {
 	background: #f8f8f9;
 	padding: 8px 4px;
 	border-radius: 3px;
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 }
-.v-sa .v-datefield-popup,
-.v-op .v-datefield-popup {
+.v-sa .#{$name}-popup,
+.v-op .#{$name}-popup {
 	background: rgba(255,255,255,.95);
 }
-.v-has-width > input.v-datefield-textfield {
+.v-has-width > input.#{$name}-textfield {
 	width: 100%;
 }
-.v-datefield-year > .v-datefield-textfield {
+.#{$name}-year > .#{$name}-textfield {
 	width: 4.5em;
 }
-.v-datefield-month > .v-datefield-textfield {
+.#{$name}-month > .#{$name}-textfield {
 	width: 5.5em;
 }
-.v-datefield-day > .v-datefield-textfield {
+.#{$name}-day > .#{$name}-textfield {
 	width: 6em;
 }
-.v-datefield-full >.v-datefield-textfield {
+.#{$name}-full >.#{$name}-textfield {
 	width: 12.5em;
 }
-.v-datefield-popupcalendar input.v-datefield-textfield {
+.#{$name}-popupcalendar input.#{$name}-textfield {
 	border-right-width: 0;
 	-moz-border-radius-topright: 0;
 	-moz-border-radius-bottomright: 0;
@@ -256,17 +256,17 @@ td.v-datefield-calendarpanel-nextyear {
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.v-datefield.v-readonly input.v-datefield-textfield {
+.#{$name}.v-readonly input.#{$name}-textfield {
 	border-right-width: 1px;
 	border-radius: 3px;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 }
-.v-datefield-prompt .v-datefield-textfield {
+.#{$name}-prompt .#{$name}-textfield {
 	color: #999;
 	font-style: normal;
 }
-.v-datefield-popupcalendar .v-datefield-button {
+.#{$name}-popupcalendar .#{$name}-button {
 	width: 24px;
 	margin-right: -24px;
 	height: 23px;
@@ -279,15 +279,15 @@ td.v-datefield-calendarpanel-nextyear {
 	-moz-border-radius: 0;
 	border-radius: 0;
 }
-.v-datefield-popupcalendar .v-datefield-button:active {
+.#{$name}-popupcalendar .#{$name}-button:active {
 	background-image: url(img/popup-btn-pressed.png); /** sprite-ref: verticals */
 }
 
 /* over black background */
-.black .v-datefield-popupcalendar .v-datefield-button {
+.black .#{$name}-popupcalendar .#{$name}-button {
 	background-image: url(img/popup-btn-black.png); /** sprite-ref: black-verticals */
 }
-.black .v-datefield-popupcalendar .v-datefield-button:active {
+.black .#{$name}-popupcalendar .#{$name}-button:active {
 	background-image: url(img/popup-btn-black-pressed.png); /** sprite-ref: black-verticals */
 }
 
@@ -296,11 +296,11 @@ td.v-datefield-calendarpanel-nextyear {
 * on black background
 */
 
-.black td.v-datefield-calendarpanel-month {
+.black td.#{$name}-calendarpanel-month {
 	background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
 	height: 21px;
 }
-.black span.v-datefield-calendarpanel-month {
+.black span.#{$name}-calendarpanel-month {
 	border-left: 1px solid #333638;
 	border-right: 1px solid #232527;
 	color: #c9ccce;
@@ -308,65 +308,65 @@ td.v-datefield-calendarpanel-nextyear {
 	padding: 4px 10px 1px 10px;
 	margin-top: 0;
 }
-.black .v-datefield-calendarpanel-prevyear button,
-.black .v-datefield-calendarpanel-nextyear button,
-.black .v-datefield-calendarpanel-prevmonth button,
-.black .v-datefield-calendarpanel-nextmonth button {
+.black .#{$name}-calendarpanel-prevyear button,
+.black .#{$name}-calendarpanel-nextyear button,
+.black .#{$name}-calendarpanel-prevmonth button,
+.black .#{$name}-calendarpanel-nextmonth button {
 	background-image: url(img/year-prev-black.png); /** sprite-ref: black-verticals */
 	height: 21px;
 }
-.black .v-datefield-calendarpanel-nextyear button {
+.black .#{$name}-calendarpanel-nextyear button {
 	background-image: url(img/year-next-black.png); /** sprite-ref: black-verticals */
 }
-.black .v-datefield-calendarpanel-prevyear button:active,
-.v-ie .black .v-datefield-calendarpanel-prevyear button.v-pressed {
+.black .#{$name}-calendarpanel-prevyear button:active,
+.v-ie .black .#{$name}-calendarpanel-prevyear button.v-pressed {
 	background-image: url(img/year-prev-black-pressed.png); /** sprite-ref: black-verticals */
 }
-.black .v-datefield-calendarpanel-nextyear button:active,
-.v-ie .black .v-datefield-calendarpanel-nextyear button.v-pressed  {
+.black .#{$name}-calendarpanel-nextyear button:active,
+.v-ie .black .#{$name}-calendarpanel-nextyear button.v-pressed  {
 	background-image: url(img/year-next-black-pressed.png); /** sprite-ref: black-verticals */
 }
-.black .v-datefield-calendarpanel-prevmonth,
-.black .v-datefield-calendarpanel-nextmonth {
+.black .#{$name}-calendarpanel-prevmonth,
+.black .#{$name}-calendarpanel-nextmonth {
 	background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
 }
-.black .v-datefield-calendarpanel-prevmonth button,
-.black .v-datefield-calendarpanel-nextmonth button {
+.black .#{$name}-calendarpanel-prevmonth button,
+.black .#{$name}-calendarpanel-nextmonth button {
 	border-left: 1px solid #333638;
 	border-right: 1px solid #232527;
 	background-image: url(img/month-prev-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */
 	margin-top: 0;
 }
-.black .v-datefield-calendarpanel-nextmonth button {
+.black .#{$name}-calendarpanel-nextmonth button {
 	background-image: url(img/month-next-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */
 }
-.black .v-datefield-calendarpanel-prevmonth button:active,
-.v-ie .black .v-datefield-calendarpanel-prevmonth button.v-pressed {
+.black .#{$name}-calendarpanel-prevmonth button:active,
+.v-ie .black .#{$name}-calendarpanel-prevmonth button.v-pressed {
 	background-image: url(img/month-prev-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
 }
-.black .v-datefield-calendarpanel-nextmonth button:active,
-.v-ie .black .v-datefield-calendarpanel-nextmonth button.v-pressed {
+.black .#{$name}-calendarpanel-nextmonth button:active,
+.v-ie .black .#{$name}-calendarpanel-nextmonth button.v-pressed {
 	background-image: url(img/month-next-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
 }
-.v-ie .black .v-datefield-calendarpanel-prevmonth button,
-.v-ie .black .v-datefield-calendarpanel-nextmonth button {
+.v-ie .black .#{$name}-calendarpanel-prevmonth button,
+.v-ie .black .#{$name}-calendarpanel-nextmonth button {
 	border: none;
 }
-.black .v-datefield-calendarpanel-weekdays td {
+.black .#{$name}-calendarpanel-weekdays td {
 	background-image: url(img/weekday-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 3px */
 	color: #0a0b0b;
 	text-shadow: #5a5c5e 0 1px 0;
 }
-.black .v-datefield-calendarpanel-weekdays strong {
+.black .#{$name}-calendarpanel-weekdays strong {
 	border-top-color: #1b1c1d;
 }
-.black .v-datefield-calendarpanel .v-first {
+.black .#{$name}-calendarpanel .v-first {
 	background-image: url(img/weekday-first-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 3px */
 }
-.black .v-datefield-calendarpanel .v-last {
+.black .#{$name}-calendarpanel .v-last {
 	background-image: url(img/weekday-last-black.png); /** sprite-ref: black-verticals; sprite-alignment: right */
 }
-.black .v-datefield-prompt .v-datefield-textfield {
+.black .#{$name}-prompt .#{$name}-textfield {
 	color: #5f6366;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
index ab47767dcf..010d6e7db2 100644
--- a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
+++ b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
@@ -1,36 +1,36 @@
-@mixin reindeer-formlayout {
+@mixin reindeer-formlayout($name : v-formlayout) {
 
-.v-formlayout-errorcell {
+.#{$name}-errorcell {
 	width: 13px;
 }
-.v-formlayout-cell .v-errorindicator {
+.#{$name}-cell .v-errorindicator {
 	width: 13px;
 	height: 16px;
 	background: transparent url(../common/icons/error.png) no-repeat 50%;
 }
-.v-formlayout-captioncell {
+.#{$name}-captioncell {
 	text-align: right;
 	white-space: nowrap;
 }
-.v-formlayout-spacing .v-formlayout-row .v-formlayout-captioncell, 
-.v-formlayout-spacing .v-formlayout-row .v-formlayout-contentcell,
-.v-formlayout-spacing .v-formlayout-row .v-formlayout-errorcell {
+.#{$name}-spacing .#{$name}-row .#{$name}-captioncell, 
+.#{$name}-spacing .#{$name}-row .#{$name}-contentcell,
+.#{$name}-spacing .#{$name}-row .#{$name}-errorcell {
 	padding-top: 8px;
 }
-.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-captioncell, 
-.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-contentcell,
-.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-errorcell {
+.#{$name}-margin-top .#{$name}-firstrow .#{$name}-captioncell, 
+.#{$name}-margin-top .#{$name}-firstrow .#{$name}-contentcell,
+.#{$name}-margin-top .#{$name}-firstrow .#{$name}-errorcell {
 	padding-top: 15px;
 }
-.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-captioncell,
-.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-contentcell,
-.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-errorcell {
+.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-captioncell,
+.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-contentcell,
+.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-errorcell {
 	padding-bottom: 15px;
 }
-.v-formlayout-margin-left .v-formlayout-captioncell {
+.#{$name}-margin-left .#{$name}-captioncell {
 	padding-left: 18px;
 } 
-.v-formlayout-margin-right .v-formlayout-contentcell {
+.#{$name}-margin-right .#{$name}-contentcell {
 	padding-right: 18px;
 }
 /* form */
diff --git a/WebContent/VAADIN/themes/reindeer/label/label.scss b/WebContent/VAADIN/themes/reindeer/label/label.scss
index a8418718e0..24337e2ff5 100644
--- a/WebContent/VAADIN/themes/reindeer/label/label.scss
+++ b/WebContent/VAADIN/themes/reindeer/label/label.scss
@@ -1,6 +1,6 @@
-@mixin reindeer-label {
+@mixin reindeer-label($name : v-label) {
 
-.v-label {
+.#{$name} {
 	line-height: 18px;
 }
 
@@ -12,27 +12,27 @@
 	color: #C9CCCE;
 	text-shadow: 0 0 1px #000;
 }
-.black .v-label-h1,
-.black .v-label-h2,
+.black .#{$name}-h1,
+.black .#{$name}-h2,
 .black .v-caption-h1,
 .black .v-caption-h2,
-.white .black .v-label-h1,
-.white .black .v-label-h2,
+.white .black .#{$name}-h1,
+.white .black .#{$name}-h2,
 .white .black .v-caption-h1,
 .white .black .v-caption-h2,
-.blue .black .v-label-h1,
-.blue .black .v-label-h2,
+.blue .black .#{$name}-h1,
+.blue .black .#{$name}-h2,
 .blue .black .v-caption-h1,
 .blue .black .v-caption-h2 {
 	color: #fff;
 	text-shadow: rgba(0,0,0,.8) 0 2px 2px;
 }
-.black .v-label-light,
-.white .black .v-label-light {
+.black .#{$name}-light,
+.white .black .#{$name}-light {
 	color: #72787c;
 }
-.black .v-label hr,
-.white .black .v-label hr {
+.black .#{$name} hr,
+.white .black .#{$name} hr {
 	background: #0c0d0e;
 	color: #0c0d0e;
 	border-bottom-color: #292b2e;
@@ -48,23 +48,23 @@
 	color: #222;
 	text-shadow: none;
 }
-.blue .v-label-h1,
-.blue .v-label-h2,
+.blue .#{$name}-h1,
+.blue .#{$name}-h2,
 .blue .v-caption-h1,
 .blue .v-caption-h2,
-.white .blue .v-label-h1,
-.white .blue .v-label-h2,
+.white .blue .#{$name}-h1,
+.white .blue .#{$name}-h2,
 .white .blue .v-caption-h1,
 .white .blue .v-caption-h2 {
 	color: #fff;
 	text-shadow: rgba(0,0,0,.3) 0 1px 1px;
 }
-.blue .v-label-light,
-.white .blue .v-label-light {
+.blue .#{$name}-light,
+.white .blue .#{$name}-light {
 	color: #6e7c83;
 }
-.blue .v-label hr,
-.white .blue .v-label hr {
+.blue .#{$name} hr,
+.white .blue .#{$name} hr {
 	background: #a3bcc9;
 	color: #a3bcc9;
 	border-bottom-color: #cfe2eb;
@@ -73,12 +73,12 @@
 /**********************
  * Default & white styles
  **********************/
-.v-label-h1,
-.v-label-h2,
+.#{$name}-h1,
+.#{$name}-h2,
 .v-caption-h1,
 .v-caption-h2,
-.white .v-label-h1,
-.white .v-label-h2,
+.white .#{$name}-h1,
+.white .#{$name}-h2,
 .white .v-caption-h1,
 .white .v-caption-h2 {
 	font-family: Helvetica, Arial, "Lucida Grande", Geneva, Tahoma, Verdana, sans-serif;
@@ -89,22 +89,22 @@
 	letter-spacing: -0.02em;
 	text-shadow: #fff 0 -1px 1px;
 }
-.v-label-h2,
+.#{$name}-h2,
 .v-caption-h2,
-.white .v-label-h2,
+.white .#{$name}-h2,
 .white .v-caption-h2 {
 	font-size: 16px;
 	line-height: 22px;
 }
-.v-label-light,
-.white .v-label-light {
+.#{$name}-light,
+.white .#{$name}-light {
 	font-size: 11px;
 	line-height: 13px;
 	color: #707070;
 }
 
-.v-label hr,
-.white .v-label hr {
+.#{$name} hr,
+.white .#{$name} hr {
 	height: 2px;
 	overflow: hidden;
 	background: #dcdcdc;
@@ -113,13 +113,13 @@
 	border-bottom: 1px solid #fff;
 }
 
-.v-sa .v-label hr,
-.v-ie8 .v-label hr {
+.v-sa .#{$name} hr,
+.v-ie8 .#{$name} hr {
 	height: 1px;
 }
 
 /* Labels inside Table don't need a line-height */
-.v-table .v-label {
+.v-table .#{$name} {
 	line-height: normal;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/link/link.scss b/WebContent/VAADIN/themes/reindeer/link/link.scss
index 291479b2d1..99233dfe39 100644
--- a/WebContent/VAADIN/themes/reindeer/link/link.scss
+++ b/WebContent/VAADIN/themes/reindeer/link/link.scss
@@ -1,12 +1,12 @@
-@mixin reindeer-link {
+@mixin reindeer-link($name : v-link) {
 
-.v-link a:link span {
+.#{$name} a:link span {
 	color: #1b699f;
 }
-.v-link a:visited span {
+.#{$name} a:visited span {
 	color: #5c7485;
 }
-.v-link a:hover span {
+.#{$name} a:hover span {
 	color: #2483c4;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
index 78f4a9fa45..8d81a12a5b 100644
--- a/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
+++ b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
@@ -1,6 +1,6 @@
-@mixin reindeer-menubar {
+@mixin reindeer-menubar($name : v-menubar) {
 
-.v-menubar {
+.#{$name} {
 	height: 23px;
 	background: #323336 repeat-x;
 	background-image: url(img/bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
@@ -8,15 +8,15 @@
 	text-shadow: rgba(0,0,0,.9) 0 1px 0;
 	padding: 0 8px;
 }
-.v-menubar .v-menubar-menuitem {
+.#{$name} .#{$name}-menuitem {
 	padding: 3px 8px;
 	height: 17px;
 	line-height: 16px;
 }
-.v-menubar .v-menubar-menuitem:hover {
+.#{$name} .#{$name}-menuitem:hover {
 	color: #fff;
 }
-.v-menubar-submenu {
+.#{$name}-submenu {
 	background: #f8f8f9;
 	border: none;
 	border-radius: 3px;
@@ -26,50 +26,50 @@
 	overflow: hidden;
 	padding: 4px 0;
 }
-.v-menubar-submenu .v-menubar-menuitem {
+.#{$name}-submenu .#{$name}-menuitem {
 	padding: 1px 26px 1px 10px;
 	line-height: 16px;
 }
-.v-menubar-submenu .v-menubar-menuitem-caption .v-icon { 
+.#{$name}-submenu .#{$name}-menuitem-caption .v-icon { 
 	vertical-align: middle;
 }
-.v-menubar .v-menubar-menuitem-selected,
-.v-menubar-submenu .v-menubar-menuitem-selected {
+.#{$name} .#{$name}-menuitem-selected,
+.#{$name}-submenu .#{$name}-menuitem-selected {
 	background: #4d749f repeat-x;
 	background-image: url(../common/img/sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #fff;
 	text-shadow: 0 1px 0 #3b5a7a;
 }
-.v-menubar .v-menubar-menuitem-selected {
+.#{$name} .#{$name}-menuitem-selected {
 	background-image: url(img/menu-sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px  */
 }
-.v-menubar-submenu .v-menubar-submenu-indicator {
+.#{$name}-submenu .#{$name}-submenu-indicator {
 	background: transparent url(img/submenu-icon.png) no-repeat right 70%;
 	width: 26px;
 	height: 16px;
 	text-indent: -9999px;
 }
-.v-menubar-submenu .v-menubar-menuitem-selected .v-menubar-submenu-indicator {
+.#{$name}-submenu .#{$name}-menuitem-selected .#{$name}-submenu-indicator {
 	background-image: url(img/submenu-icon-hover.png);
 }
 
 /* Checkboxes for checkable/checked menu items */
-.v-menubar-submenu-check-column .v-menubar-menuitem {
+.#{$name}-submenu-check-column .#{$name}-menuitem {
 	padding-left: 6px;
 }
-.v-menubar-submenu-check-column .v-menubar-menuitem-caption {
+.#{$name}-submenu-check-column .#{$name}-menuitem-caption {
 	padding-left: 18px;
 }
-.v-menubar-submenu .v-menubar-menuitem-checked .v-menubar-menuitem-caption { 
+.#{$name}-submenu .#{$name}-menuitem-checked .#{$name}-menuitem-caption { 
 	background: transparent url(img/checked.png) no-repeat left;
 }
-.v-menubar-submenu .v-menubar-menuitem-unchecked .v-menubar-menuitem-caption {
+.#{$name}-submenu .#{$name}-menuitem-unchecked .#{$name}-menuitem-caption {
 	background: transparent url(img/unchecked.png) no-repeat left;
 }
-.v-menubar-submenu .v-menubar-menuitem-selected-checked .v-menubar-menuitem-caption { 
+.#{$name}-submenu .#{$name}-menuitem-selected-checked .#{$name}-menuitem-caption { 
 	background: transparent url(img/checked-selected.png) no-repeat left;
 }
-.v-menubar-submenu .v-menubar-menuitem-selected-unchecked .v-menubar-menuitem-caption {
+.#{$name}-submenu .#{$name}-menuitem-selected-unchecked .#{$name}-menuitem-caption {
 	background: transparent url(img/unchecked-selected.png) no-repeat left;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/notification/notification.scss b/WebContent/VAADIN/themes/reindeer/notification/notification.scss
index d9ddd4da27..464faa8aab 100644
--- a/WebContent/VAADIN/themes/reindeer/notification/notification.scss
+++ b/WebContent/VAADIN/themes/reindeer/notification/notification.scss
@@ -1,6 +1,6 @@
-@mixin reindeer-notification {
+@mixin reindeer-notification($name : v-Notification) {
 
-.v-Notification {
+.#{$name} {
 	color: #fff;
 	border-radius: 4px;
 	-moz-border-radius: 4px;
@@ -10,38 +10,38 @@
 	font-weight: bold;
 }
 
-.v-ie9 .v-Notification H1 {
+.v-ie9 .#{$name} H1 {
 	/* Fix for #6793 */
 	font-weight: bold;
 }
 	
-.v-Notification p {
+.#{$name} p {
 	line-height: 1.3;
 }
-.v-Notification-warning {
+.#{$name}-warning {
 	background: #fdf3b5;
 	color: #ca9a61;
 	border: 3px solid #fee3af;
 }
-.v-Notification-error {
+.#{$name}-error {
 	background: #b40000 url(img/error-close.png) no-repeat right top;
 	border: 3px solid #ca3030;
 }
-.v-Notification-tray {
+.#{$name}-tray {
 	margin: 0 5px 5px 0;
 	background: #3b3c3e;
 	border: 2px solid #585b5c;
 	padding: 0.8em 0.9em;
 }
-.v-Notification-tray h1 {
+.#{$name}-tray h1 {
 	font-size: 14px;
 	line-height: 18px;
 }
-.v-Notification-tray p {
+.#{$name}-tray p {
 	font-size: 12px;
 	font-weight: normal;
 }
-.v-Notification-system {
+.#{$name}-system {
 	background-color: #b40000;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/panel/panel.scss b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
index 00483c5546..e692ba90a9 100644
--- a/WebContent/VAADIN/themes/reindeer/panel/panel.scss
+++ b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
@@ -1,58 +1,58 @@
-@mixin reindeer-panel {
+@mixin reindeer-panel($name : v-panel) {
 
-.blue .v-panel-caption,
-.blue .v-panel-nocaption,
-.blue .v-panel-content {
+.blue .#{$name}-caption,
+.blue .#{$name}-nocaption,
+.blue .#{$name}-content {
 	border-color: #a8bcc5;
 }
-.v-panel-caption,
-.v-panel-nocaption,
-.white .v-panel-caption,
-.white .v-panel-nocaption {
+.#{$name}-caption,
+.#{$name}-nocaption,
+.white .#{$name}-caption,
+.white .#{$name}-nocaption {
 	border-bottom: 1px solid #e5e5e5;
 	line-height: 16px; /* accommodate minimum icon size */
 }
-.v-webkit .v-panel-caption,
-.v-webkit .v-panel-nocaption,
-.v-gecko .v-panel-caption,
-.v-gecko .v-panel-nocaption,
-.v-ie9 .v-panel-caption,
-.v-ie9 .v-panel-nocaption {
+.v-webkit .#{$name}-caption,
+.v-webkit .#{$name}-nocaption,
+.v-gecko .#{$name}-caption,
+.v-gecko .#{$name}-nocaption,
+.v-ie9 .#{$name}-caption,
+.v-ie9 .#{$name}-nocaption {
 	border-bottom-color: rgba(0,0,0,.08);
 }
-.v-panel-caption {
+.#{$name}-caption {
 	padding-bottom: 2px;
 }
-.v-panel-content,
-.white .v-panel-content {
+.#{$name}-content,
+.white .#{$name}-content {
 	background: #fff;
 	border: 1px solid #dcdcdc;
 	border-bottom: none;
 	border-top: none;
 }
-.v-webkit .v-panel-content,
-.v-gecko .v-panel-content,
-.v-ie9 .v-panel-content {
+.v-webkit .#{$name}-content,
+.v-gecko .#{$name}-content,
+.v-ie9 .#{$name}-content {
 	border-top-color: rgba(0,0,0,.07);
 }
-.blue .v-panel-deco {
+.blue .#{$name}-deco {
 	border-color: #92a3ac;
 	background: #adc2cd;
 }
-.v-panel-deco,
-.white .v-panel-deco {
+.#{$name}-deco,
+.white .#{$name}-deco {
 	height: 1px;
 	border-top: 1px solid #bebebe;
 	background: #e2e2e2;
 	overflow: hidden;
 }
-.v-webkit .v-panel-deco,
-.v-gecko .v-panel-deco,
-.v-ie9 .v-panel-deco {
+.v-webkit .#{$name}-deco,
+.v-gecko .#{$name}-deco,
+.v-ie9 .#{$name}-deco {
 	border-top-color: rgba(0,0,0,.1);
 	background: rgba(0,0,0,.08);
 }
-.v-panel-caption .v-errorindicator {
+.#{$name}-caption .v-errorindicator {
 	height: 16px;
 	width: 13px;
 	background: url(../common/icons/error.png) no-repeat 50%;
@@ -62,15 +62,15 @@
 }
 
 /* Light style */
-.v-panel-light .v-panel-caption-light,
-.v-panel-light .v-panel-nocaption-light {
+.#{$name}-light .#{$name}-caption-light,
+.#{$name}-light .#{$name}-nocaption-light {
 	border: none;
 }
-.v-panel-light .v-panel-content-light {
+.#{$name}-light .#{$name}-content-light {
 	border: none;
 	background: transparent;
 }
-.v-panel-light .v-panel-deco-light {
+.#{$name}-light .#{$name}-deco-light {
 	height: 0;
 	border: none;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss b/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss
index 7e7f55fda5..f30f059bef 100644
--- a/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss
+++ b/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss
@@ -1,12 +1,12 @@
-@mixin reindeer-popupview {
+@mixin reindeer-popupview($name : v-popupview) {
 
-.v-popupview {
+.#{$name} {
 	color: #1b699f;
 }
-.v-popupview:hover {
+.#{$name}:hover {
 	color: #2483c4;
 }
-.v-popupview-popup {
+.#{$name}-popup {
 	background: #fff;
 	padding: 3px;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
index f3f3a59afb..62be029670 100644
--- a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
+++ b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
@@ -1,13 +1,13 @@
-@mixin reindeer-progressindicator {
+@mixin reindeer-progressindicator($name : v-progressindicator) {
 
-.v-progressindicator-wrapper {
+.#{$name}-wrapper {
 	background: #dfe2e4 url(img/base.gif) repeat-x;
 	border: 1px solid #bfbfbf;
 }
-.v-disabled .v-progressindicator-wrapper {
+.v-disabled .#{$name}-wrapper {
 	background-image: url(img/disabled.gif);
 }
-.v-progressindicator-indicator {
+.#{$name}-indicator {
 	background: #f7f9f9 url(img/progress.png);
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/select/select.scss b/WebContent/VAADIN/themes/reindeer/select/select.scss
index 240f88aebb..1510896fb9 100644
--- a/WebContent/VAADIN/themes/reindeer/select/select.scss
+++ b/WebContent/VAADIN/themes/reindeer/select/select.scss
@@ -1,42 +1,42 @@
-@mixin reindeer-select {
+@mixin reindeer-select($name : v-filterselect) {
 
-.v-filterselect {
+.#{$name} {
 	height: 24px;
 	background-repeat: no-repeat;
 	background-image: url(img/left.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
 	padding-left: 2px;
 	padding-right: 25px; /* Space for the button */
 }
-.v-app .v-filterselect-input,
-.v-window .v-filterselect-input,
-.v-popupview-popup .v-filterselect-input {
+.v-app .#{$name}-input,
+.v-window .#{$name}-input,
+.v-popupview-popup .#{$name}-input {
 	background: transparent repeat-x;
 	background-image: url(img/center.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
 	border: none;
 	height: 24px;
 }
 /* More specific selector to override padding */
-.v-app input.v-filterselect-input,
-.v-window input.v-filterselect-input,
-.v-popupview-popup input.v-filterselect-input {
+.v-app input.#{$name}-input,
+.v-window input.#{$name}-input,
+.v-popupview-popup input.#{$name}-input {
 	padding: 4px 0 4px 2px;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.v-filterselect-prompt .v-filterselect-input {
+.#{$name}-prompt .#{$name}-input {
 	font-style: normal;
 }
-.v-filterselect-input:focus {
+.#{$name}-input:focus {
 	outline: none;
 }
-.v-filterselect-focus {
+.#{$name}-focus {
 	background-image: url(img/left-focus.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
 }
-.v-filterselect-focus .v-filterselect-input {
+.#{$name}-focus .#{$name}-input {
 	background-image: url(img/center-focus.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-filterselect-button {
+.#{$name}-button {
 	overflow: hidden;
 	width: 25px;
 	height: 24px;
@@ -45,26 +45,26 @@
 	cursor: default;
 	margin-right: -25px;
 }
-.v-filterselect-button:hover {
+.#{$name}-button:hover {
 	background-image: url(img/right-hover.png); /** sprite-ref: verticals */
 }
-.v-filterselect-button:active {
+.#{$name}-button:active {
 	background-image: url(img/right-pressed.png); /** sprite-ref: verticals */
 }
-.v-filterselect-focus .v-filterselect-button {
+.#{$name}-focus .#{$name}-button {
 	background-image: url(img/right-focus.png); /** sprite-ref: verticals */
 }
-.v-filterselect-focus .v-filterselect-button:hover {
+.#{$name}-focus .#{$name}-button:hover {
 	background-image: url(img/right-focus-hover.png); /** sprite-ref: verticals */
 }
-.v-filterselect-focus .v-filterselect-button:active {
+.#{$name}-focus .#{$name}-button:active {
 	background-image: url(img/right-focus-pressed.png); /** sprite-ref: verticals */
 }
-.v-disabled .v-filterselect-button:hover,
-.v-readonly .v-filterselect-button:hover {
+.v-disabled .#{$name}-button:hover,
+.v-readonly .#{$name}-button:hover {
 	background-image: url(img/right.png); /** sprite-ref: verticals */
 }
-.v-filterselect-suggestpopup {
+.#{$name}-suggestpopup {
 	background: #f8f8f9;
 	border: none;
 	border-radius: 3px;
@@ -73,10 +73,10 @@
 	-o-border-radius: 3px;
 	overflow: hidden;
 }
-.v-filterselect-suggestmenu {
+.#{$name}-suggestmenu {
 	margin: 4px 0;
 }
-.v-filterselect-suggestmenu .gwt-MenuItem {
+.#{$name}-suggestmenu .gwt-MenuItem {
 	padding: 1px 8px;
 	height: 16px;
 	user-select: none;
@@ -84,53 +84,53 @@
 	-webkit-user-select: none;
 	cursor: default;
 }
-.v-ff .v-filterselect-suggestmenu .gwt-MenuItem {
+.v-ff .#{$name}-suggestmenu .gwt-MenuItem {
 	height: 18px;
 }
-.v-filterselect-suggestmenu .gwt-MenuItem .v-icon {
+.#{$name}-suggestmenu .gwt-MenuItem .v-icon {
 	margin-right: 3px;
 }
-.v-filterselect-suggestmenu .gwt-MenuItem-selected {
+.#{$name}-suggestmenu .gwt-MenuItem-selected {
 	background: transparent repeat-x;
 	background-image: url(../common/img/sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #fff;
 	text-shadow: #3b5a7a 0 1px 0;
 }
-.v-filterselect-nextpage,
-.v-filterselect-nextpage-off,
-.v-filterselect-prevpage-off,
-.v-filterselect-prevpage {
+.#{$name}-nextpage,
+.#{$name}-nextpage-off,
+.#{$name}-prevpage-off,
+.#{$name}-prevpage {
 	height: 11px;
 	width: 100%;
 	background: transparent;
 	margin-bottom: -4px;
 }
-.v-filterselect-nextpage,
-.v-filterselect-nextpage-off {
+.#{$name}-nextpage,
+.#{$name}-nextpage-off {
 	margin: -4px 0 0;
 }
-.v-filterselect-nextpage:hover {
+.#{$name}-nextpage:hover {
 	background-repeat: repeat-x;
 	background-image: url(img/page-down-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-filterselect-prevpage:hover {
+.#{$name}-prevpage:hover {
 	background-repeat: repeat-x;
 	background-image: url(img/page-up-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-filterselect-nextpage:active {
+.#{$name}-nextpage:active {
 	background-repeat: repeat-x;
 	background-image: url(img/page-down-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-filterselect-prevpage:active {
+.#{$name}-prevpage:active {
 	background-repeat: repeat-x;
 	background-image: url(img/page-up-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-filterselect-nextpage-off span,
-.v-filterselect-prevpage-off span {
+.#{$name}-nextpage-off span,
+.#{$name}-prevpage-off span {
 	display: none;
 }
-.v-filterselect-nextpage span,
-.v-filterselect-prevpage span {
+.#{$name}-nextpage span,
+.#{$name}-prevpage span {
 	display: block;
 	height: 11px;
 	width: 100%;
@@ -142,16 +142,16 @@
 	-moz-user-select: none;
 	-webkit-user-select: none;
 }
-.v-filterselect-prevpage span {
+.#{$name}-prevpage span {
 	background-image: url(img/arrow-up.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */
 }
-.v-filterselect-nextpage:hover span {
+.#{$name}-nextpage:hover span {
 	background-image: url(img/arrow-down-hover.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */
 }
-.v-filterselect-prevpage:hover span {
+.#{$name}-prevpage:hover span {
 	background-image: url(img/arrow-up-hover.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */
 }
-.v-filterselect-status {
+.#{$name}-status {
 	text-shadow: #e9eaeb 0 1px 0;
 	font-size: 11px;
 	line-height: normal;
@@ -170,36 +170,36 @@
 	-webkit-user-select: none;
 }
 /* IE fails to position background images properly inside table elements */
-.v-ie .v-filterselect-suggestmenu .gwt-MenuItem-selected {
+.v-ie .#{$name}-suggestmenu .gwt-MenuItem-selected {
 	background: transparent url(../common/img/sel-bg.png) repeat-x;
 }
-.v-ie .v-filterselect-nextpage:hover {
+.v-ie .#{$name}-nextpage:hover {
 	background: transparent url(img/page-down-hover.png) repeat-x;
 }
-.v-ie .v-filterselect-prevpage:hover {
+.v-ie .#{$name}-prevpage:hover {
 	background: transparent url(img/page-up-hover.png) repeat-x;
 }
-.v-ie .v-filterselect-prevpage span {
+.v-ie .#{$name}-prevpage span {
 	background: transparent url(img/arrow-up.png) no-repeat center 3px;
 }
-.v-ie .v-filterselect-nextpage span {
+.v-ie .#{$name}-nextpage span {
 	background: transparent url(img/arrow-down.png) no-repeat center 3px;
 }
-.v-ie .v-filterselect-prevpage:hover span {
+.v-ie .#{$name}-prevpage:hover span {
 	background: transparent url(img/arrow-up-hover.png) no-repeat center 3px;
 }
-.v-ie .v-filterselect-nextpage:hover span {
+.v-ie .#{$name}-nextpage:hover span {
 	background: transparent url(img/arrow-down-hover.png) no-repeat center 3px;
 }
-.v-ie .v-filterselect-status {
+.v-ie .#{$name}-status {
 	background: transparent url(img/status-bg.png) repeat-x;
 }
 /* Filterselect with icon needs a similar fix than in buttons */
-.v-filterselect .v-icon {
+.#{$name} .v-icon {
 	width: 16px;
 	position: relative;
 }
-.v-filterselect .v-icon + .v-filterselect-input {
+.#{$name} .v-icon + .#{$name}-input {
 	margin-left: -16px;
 	padding-left: 18px;
 }
@@ -208,45 +208,45 @@
 
 
 /* Combobox on black background */
-.black .v-filterselect {
+.black .#{$name} {
 	background-image: url(img/black/left-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.v-app .black .v-filterselect-input,
-.v-window .black .v-filterselect-input,
-.v-window-black .v-filterselect-input,
-.v-popupview-popup .black .v-filterselect-input {
+.v-app .black .#{$name}-input,
+.v-window .black .#{$name}-input,
+.v-window-black .#{$name}-input,
+.v-popupview-popup .black .#{$name}-input {
 	color: #c9ccce;
 	background-image: url(img/black/center-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
 }
-.black .v-filterselect-focus {
+.black .#{$name}-focus {
 	background-image: url(img/black/left-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .v-filterselect-focus .v-filterselect-input {
+.black .#{$name}-focus .#{$name}-input {
 	background-image: url(img/black/center-black-focus.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
 }
-.black .v-filterselect-button {
+.black .#{$name}-button {
 	background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .v-filterselect-button:hover {
+.black .#{$name}-button:hover {
 	background-image: url(img/black/right-black-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .v-filterselect-button:active {
+.black .#{$name}-button:active {
 	background-image: url(img/black/right-black-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .v-filterselect-focus .v-filterselect-button {
+.black .#{$name}-focus .#{$name}-button {
 	background-image: url(img/black/right-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .v-filterselect-focus .v-filterselect-button:hover {
+.black .#{$name}-focus .#{$name}-button:hover {
 	background-image: url(img/black/right-black-focus-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .v-filterselect-focus .v-filterselect-button:active {
+.black .#{$name}-focus .#{$name}-button:active {
 	background-image: url(img/black/right-black-focus-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .v-disabled .v-filterselect-button:hover,
-.black .v-readonly .v-filterselect-button:hover {
+.black .v-disabled .#{$name}-button:hover,
+.black .v-readonly .#{$name}-button:hover {
 	background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .v-filterselect-prompt .v-filterselect-input {
+.black .#{$name}-prompt .#{$name}-input {
 	color: #5f6366;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/slider/slider.scss b/WebContent/VAADIN/themes/reindeer/slider/slider.scss
index 047237d262..725f717543 100644
--- a/WebContent/VAADIN/themes/reindeer/slider/slider.scss
+++ b/WebContent/VAADIN/themes/reindeer/slider/slider.scss
@@ -1,42 +1,42 @@
-@mixin reindeer-slider {
+@mixin reindeer-slider($name : v-slider) {
 
-.v-slider {
+.#{$name} {
 	border-top: 1px solid #9a9c9e;
 	border-bottom: 1px solid #bdbfc1;
 	margin: 4px 0;
 }
-.v-slider-base {
+.#{$name}-base {
 	height: 1px;
 	background: #e0e2e2;
 	border-top: 1px solid #adb0b1;
 	border-left: 1px solid #a0a3a6;
 	border-right: 1px solid #a0a3a6;
 }
-.v-slider-handle {
+.#{$name}-handle {
 	background: transparent;
 	background-image: url(img/knob.png); /** sprite-ref: verticals */
 	width: 10px;
 	height: 10px;
 	margin-top: -5px;
 }
-.v-slider-handle-active {
+.#{$name}-handle-active {
 	background-image: url(img/knob-pressed.png); /** sprite-ref: verticals */
 }
-.v-slider-vertical {
+.#{$name}-vertical {
 	width: 2px;
 	margin: 0 5px;
 	border: none;
 	border-left: 1px solid #9a9c9e;
 	border-right: 1px solid #bdbfc1;
 }
-.v-slider-vertical .v-slider-base {
+.#{$name}-vertical .#{$name}-base {
 	width: 2px;
 	border-left: 1px solid #adb0b1;
 	border-right: none;
 	border-top: 1px solid #adb0b1;
 	border-bottom: 1px solid #adb0b1;	
 }
-.v-slider-vertical .v-slider-handle {
+.#{$name}-vertical .#{$name}-handle {
 	width: 10px;
 	height: 10px;
 	margin-left: -5px;
diff --git a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
index 07a38891f5..c837688387 100644
--- a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
+++ b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
@@ -1,12 +1,12 @@
-@mixin reindeer-splitpanel {
+@mixin reindeer-splitpanel($name : v-splitpanel) {
 
-.v-splitpanel-hsplitter,
-.v-splitpanel-hsplitter-locked {
+.#{$name}-hsplitter,
+.#{$name}-hsplitter-locked {
 	width: 7px;
 	background-repeat: repeat-y;
 	background-image: url(img/hor-bg.png); /** sprite-ref: horizontals; sprite-alignment: repeat */
 }
-.v-splitpanel-hsplitter div {
+.#{$name}-hsplitter div {
 	width: 7px;
 	height: 100%; /* for Opera */
 	background: transparent;
@@ -14,13 +14,13 @@
 	background-position: 50%;
 	background-image: url(img/hor-handle.png); /** sprite-ref: horizontals; sprite-alignment: center */
 }
-.v-splitpanel-vsplitter,
-.v-splitpanel-vsplitter-locked {
+.#{$name}-vsplitter,
+.#{$name}-vsplitter-locked {
 	height: 7px;
 	background-repeat: repeat-x;
 	background-image: url(img/ver-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-splitpanel-vsplitter div {
+.#{$name}-vsplitter div {
 	height: 7px;
 	background: transparent;
 	background-repeat: no-repeat;
@@ -30,38 +30,38 @@
 
 
 /* Splitpanels on blue background */
-.blue .v-splitpanel-hsplitter-small,
-.blue .v-splitpanel-hsplitter-small-locked {
+.blue .#{$name}-hsplitter-small,
+.blue .#{$name}-hsplitter-small-locked {
 	background: #7c8a91;
 }
 
 /* Splitpanels on black background */
-.black .v-splitpanel-hsplitter-small,
-.black .v-splitpanel-hsplitter-small-locked {
+.black .#{$name}-hsplitter-small,
+.black .#{$name}-hsplitter-small-locked {
 	background: #4e5253;
 }
 
 /* Small style */
-.v-splitpanel-hsplitter-small,
-.v-splitpanel-hsplitter-small-locked,
-.white .v-splitpanel-hsplitter-small,
-.white .v-splitpanel-hsplitter-small-locked {
+.#{$name}-hsplitter-small,
+.#{$name}-hsplitter-small-locked,
+.white .#{$name}-hsplitter-small,
+.white .#{$name}-hsplitter-small-locked {
 	width: 1px;
 	background: #949698;
 }
-.v-splitpanel-vsplitter-small,
-.v-splitpanel-vsplitter-small-locked,
-.white .v-splitpanel-vsplitter-small,
-.white .v-splitpanel-vsplitter-small-locked {
+.#{$name}-vsplitter-small,
+.#{$name}-vsplitter-small-locked,
+.white .#{$name}-vsplitter-small,
+.white .#{$name}-vsplitter-small-locked {
 	height: 1px;
 	background: #949698;
 }
-.v-splitpanel-hsplitter-small div {
+.#{$name}-hsplitter-small div {
 	width: 5px;
 	margin-left: -2px;
 	background: transparent;
 }
-.v-splitpanel-vsplitter-small div {
+.#{$name}-vsplitter-small div {
 	height: 5px;
 	margin-top: -2px;
 	background: transparent;
diff --git a/WebContent/VAADIN/themes/reindeer/table/table.scss b/WebContent/VAADIN/themes/reindeer/table/table.scss
index cb190e1f30..a26b4f616b 100644
--- a/WebContent/VAADIN/themes/reindeer/table/table.scss
+++ b/WebContent/VAADIN/themes/reindeer/table/table.scss
@@ -1,20 +1,20 @@
-@mixin reindeer-table {
+@mixin reindeer-table($name : v-table) {
 
 /* Table on blue background */
-.blue .v-table-header-wrap {
+.blue .#{$name}-header-wrap {
 	border-color: #92a2aa;
 }
-.blue .v-table-body {
+.blue .#{$name}-body {
 	border-color: #92a2aa;
 	border-top-color: #c2c3c4;
 }
 
 /* Default & white style */
-.v-table-header-wrap,
-.white .v-table-header-wrap,
-.v-table-footer-wrap,
-.white .v-table-footer-wrap,
-.v-table-header-drag {
+.#{$name}-header-wrap,
+.white .#{$name}-header-wrap,
+.#{$name}-footer-wrap,
+.white .#{$name}-footer-wrap,
+.#{$name}-header-drag {
 	border-color: #c2c3c4;
 	background: transparent repeat-x;
 	background-image: url(img/header-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
@@ -27,85 +27,85 @@
 	line-height: normal;
 }
 
-.v-table-footer-wrap,
-.white .v-table-footer-wrap {
+.#{$name}-footer-wrap,
+.white .#{$name}-footer-wrap {
 	text-transform: none;
 	font-size: 12px;
 	font-weight: normal;
 }
 
-.v-table-footer td,
-.white .v-table-footer td {
+.#{$name}-footer td,
+.white .#{$name}-footer td {
 	border-color: #c2c3c4;
 }
 
-.v-table-footer-container {
+.#{$name}-footer-container {
 	padding-right: 7px;
 }
 
 
-.v-table-header,
-.v-table-footer,
-.v-table-footer table {
+.#{$name}-header,
+.#{$name}-footer,
+.#{$name}-footer table {
 	height: 20px;
 }
 
-.v-table-caption-container,
-.v-table-header-drag {
+.#{$name}-caption-container,
+.#{$name}-header-drag {
 	padding-top: 4px;
 	padding-right: 4px;
 }
-.v-table-caption-container .v-icon,
-.v-table-header-drag .v-icon {
+.#{$name}-caption-container .v-icon,
+.#{$name}-header-drag .v-icon {
 	height: 16px;
 	margin: -4px 3px 0 0;
 	vertical-align: middle;
 }
-.v-ie .v-table-caption-container .v-icon,
-.v-ie .v-table-header-drag .v-icon {
+.v-ie .#{$name}-caption-container .v-icon,
+.v-ie .#{$name}-header-drag .v-icon {
 	margin-top: -3px;
 }
-.v-table-resizer {
+.#{$name}-resizer {
 	height: 20px;
 	width: 2px;
 	background: transparent;
 	border-right: 1px solid #c2c3c4;
 }
 
-.v-table-sort-indicator {
+.#{$name}-sort-indicator {
 	background: transparent;
 	width: 0px;
 	height: 20px;
 }
 
-.v-table-header-cell-asc .v-table-sort-indicator {
+.#{$name}-header-cell-asc .#{$name}-sort-indicator {
 	background: transparent no-repeat right 7px;
 	background-image: url(img/asc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 	width: 16px;
 }
-.v-table-header-cell-desc .v-table-sort-indicator {
+.#{$name}-header-cell-desc .#{$name}-sort-indicator {
 	background: transparent no-repeat right 7px;
 	background-image: url(img/desc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 	width: 16px;
 }
-.v-table-body,
-.white .v-table-body {
+.#{$name}-body,
+.white .#{$name}-body {
 	border-color: #c2c3c4;
 	background: #fff;
 }
-.v-table-cell-content {
+.#{$name}-cell-content {
 	padding-top: 0;
 	border-right-color: #d3d4d5;
 	vertical-align: top;
 }
-.v-table-cell-wrapper {
+.#{$name}-cell-wrapper {
 	padding-top: 3px;
 	padding-bottom: 3px;
 }
-.v-table-row-odd {
+.#{$name}-row-odd {
 	background: #eff0f1;
 }
-.v-table-generated-row {
+.#{$name}-generated-row {
     background: #dcdee0;
     text-transform: uppercase;
     font-size: 10px;
@@ -114,55 +114,55 @@
     text-shadow: #f3f5f8 0 1px 0;
     line-height: normal;
 }
-.v-table-generated-row .v-table-cell-wrapper {
+.#{$name}-generated-row .#{$name}-cell-wrapper {
     padding-top: 4px;
     padding-bottom: 5px;
 }
-.v-table-cell-content:last-child {
+.#{$name}-cell-content:last-child {
 	border-right-color: transparent;
 }
-.v-table .v-selected,
-.black .v-table .v-selected {
+.#{$name} .v-selected,
+.black .#{$name} .v-selected {
 	background: #4d749f url(../common/img/sel-bg.png) repeat-x; /* We can't include this in the sprite, since we don't know the row height */
 	color: #fff;
 	text-shadow: #3b5a7a 0 1px 0;
 }
-.v-table .v-selected .v-table-cell-content {
+.#{$name} .v-selected .#{$name}-cell-content {
 	border-right-color: #466c90;
 }
-.v-table-column-selector {
+.#{$name}-column-selector {
 	width: 16px;
 	height: 20px;
 	margin-top: -20px;
 	background: transparent no-repeat;
 	background-image: url(img/col-sel-light.png); /** sprite-ref: verticals */
 }
-.v-table-column-selector:active {
+.#{$name}-column-selector:active {
 	background-image: url(img/col-sel-light-pressed.png); /** sprite-ref: verticals */
 }
-.v-table-focus-slot-left {
+.#{$name}-focus-slot-left {
 	border-left: 1px solid #222;
 	margin-bottom: -20px;
 	width: auto;
 }
-.v-table-focus-slot-right {
+.#{$name}-focus-slot-right {
 	border-right-color: #222;
 	margin-right: 0;
 }
-.v-table-header-drag {
+.#{$name}-header-drag {
 	padding-left: 6px;
 	height: 16px;
 }
-.v-table-header-drag img {
+.#{$name}-header-drag img {
 	height: 16px;
 	margin: -3px 3px 0 0;
 }
-.v-table-scrollposition {
+.#{$name}-scrollposition {
 	width: auto;
 	background: transparent;
 	border: none;
 }
-.v-table-scrollposition span {
+.#{$name}-scrollposition span {
 	background: transparent repeat-x;
 	background-image: url(img/scroll-indic-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	border: 1px solid #939494;
@@ -183,7 +183,7 @@
 	-webkit-box-shadow: rgba(0,0,0,.5) 0 1px 2px;
 	-moz-box-shadow: rgba(0,0,0,.5) 0 1px 2px;
 }
-.v-table-borderless .v-table-scrollposition span {
+.#{$name}-borderless .#{$name}-scrollposition span {
 	top: 0;
 }
 /* row in column selector */
@@ -206,87 +206,87 @@
 
 
 /* Strong style */
-.v-table-strong .v-table-header-wrap,
-.v-table-strong .v-table-header-drag {
+.#{$name}-strong .#{$name}-header-wrap,
+.#{$name}-strong .#{$name}-header-drag {
 	border-color: #2b3033;
 	border-top-color: #2b3033;
 	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #e7e9ea;
 	text-shadow: #000 0 -1px 0;
 }
-.v-table-strong .v-table-body {
+.#{$name}-strong .#{$name}-body {
 	border-top-color: #2b3033;
 }
-.v-table-strong .v-table-resizer {
+.#{$name}-strong .#{$name}-resizer {
 	border-right-color: #1c1f21;
 }
-.v-table-strong .v-table-header-cell-asc .v-table-sort-indicator {
+.#{$name}-strong .#{$name}-header-cell-asc .#{$name}-sort-indicator {
 	background-image: url(img/asc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.v-table-strong .v-table-header-cell-desc .v-table-sort-indicator {
+.#{$name}-strong .#{$name}-header-cell-desc .#{$name}-sort-indicator {
 	background-image: url(img/desc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.v-table-strong .v-table-column-selector {
+.#{$name}-strong .#{$name}-column-selector {
 	background-image: url(img/col-sel.png); /** sprite-ref: verticals */
 }
-.v-table-strong .v-table-column-selector:active {
+.#{$name}-strong .#{$name}-column-selector:active {
 	background-image: url(img/col-sel-pressed.png); /** sprite-ref: verticals */
 }
-.v-table-strong .v-table-focus-slot-left,
-.v-table-strong .v-table-focus-slot-right {
+.#{$name}-strong .#{$name}-focus-slot-left,
+.#{$name}-strong .#{$name}-focus-slot-right {
 	border-color: #9ca1a5;
 }
 
 
 /* Table on black background (normal style) */
-.black .v-table-header-wrap,
-.black .v-table-header-drag {
+.black .#{$name}-header-wrap,
+.black .#{$name}-header-drag {
 	border-color: #252729;
 	background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
 	color: #e7eaee;
 	text-shadow: #000 0 -1px 0;
 }
-.black .v-table-resizer {
+.black .#{$name}-resizer {
 	border-right-color: #252729;
 }
-.black .v-table-header-cell-asc .v-table-sort-indicator {
+.black .#{$name}-header-cell-asc .#{$name}-sort-indicator {
 	background-image: url(img/asc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.black .v-table-header-cell-desc .v-table-sort-indicator {
+.black .#{$name}-header-cell-desc .#{$name}-sort-indicator {
 	background-image: url(img/desc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.black .v-table-column-selector {
+.black .#{$name}-column-selector {
 	background-image: url(img/col-sel-black.png); /** sprite-ref: black-verticals */
 }
-.black .v-table-column-selector:active {
+.black .#{$name}-column-selector:active {
 	background-image: url(img/col-sel-black-pressed.png); /** sprite-ref: black-verticals */
 }
-.black .v-table-focus-slot-left,
-.black .v-table-focus-slot-right {
+.black .#{$name}-focus-slot-left,
+.black .#{$name}-focus-slot-right {
 	border-color: #9ca1a5;
 }
-.black .v-table-body {
+.black .#{$name}-body {
 	border-color: #252729;
 	background: transparent;
 }
-.black .v-table-cell-content {
+.black .#{$name}-cell-content {
 	border-right-color: #252729;
 	border-bottom: 1px solid #252729;
 }
-.black .v-table-cell-wrapper {
+.black .#{$name}-cell-wrapper {
 	padding-bottom: 2px;
 }
-.black .v-table-row-odd {
+.black .#{$name}-row-odd {
 	background: transparent;
 }
 /* Selection background-color combined with the default (white) style selector, so we don't have to duplicate the sprite image in the final sprite collection */
-.black .v-table .v-selected .v-table-cell-content {
+.black .#{$name} .v-selected .#{$name}-cell-content {
 	border-bottom: 1px solid #4d749f;
 }
 
 /* Borderless style */
-.v-table-borderless .v-table-header-wrap,
-.v-table-borderless .v-table-body {
+.#{$name}-borderless .#{$name}-header-wrap,
+.#{$name}-borderless .#{$name}-body {
 	border: none;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
index 1efdab68af..40c6713bcd 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
@@ -1,22 +1,22 @@
-@mixin reindeer-tabsheet-borderless-style {
+@mixin reindeer-tabsheet-borderless-style($name : v-tabsheet-borderless) {
 
-.v-tabsheet-borderless .v-tabsheet-tabitemcell-first {
+.#{$name} .v-tabsheet-tabitemcell-first {
 	padding-left: 7px;
 	background: url(img/framed/tab-first-left.png) no-repeat -3px 0;
 }
-.v-tabsheet-borderless .v-tabsheet-tabitemcell-selected-first {
+.#{$name} .v-tabsheet-tabitemcell-selected-first {
 	background: url(img/framed/tab-first-left-sel.png) no-repeat -3px 0;
 }
-.v-tabsheet-borderless .v-tabsheet-spacertd div {
+.#{$name} .v-tabsheet-spacertd div {
 	margin-right: 0;
 }
-.v-tabsheet-borderless .v-tabsheet-spacertd {
+.#{$name} .v-tabsheet-spacertd {
 	background: transparent;
 }
-.v-tabsheet-borderless .v-tabsheet-content {
+.#{$name} .v-tabsheet-content {
 	border: none;
 }
-.v-tabsheet-borderless .v-tabsheet-deco {
+.#{$name} .v-tabsheet-deco {
 	height: 0;
 	border-top: none;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
index dda381b1b0..f8e1a16335 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
@@ -1,9 +1,9 @@
-@mixin reindeer-tabsheet-hover-closable-style {
+@mixin reindeer-tabsheet-hover-closable-style($name : v-tabsheet) {
 
-.v-tabsheet-tabs-hover-closable .v-tabsheet-caption-close {
+.#{$name}-tabs-hover-closable .#{$name}-caption-close {
 	visibility: hidden;
 }
-.v-tabsheet-tabs-hover-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
+.#{$name}-tabs-hover-closable .#{$name}-tabitem:hover .#{$name}-caption-close {
 	visibility: visible;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
index 608aae55cb..7d21b3b2a8 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
@@ -1,41 +1,41 @@
-@mixin reindeer-tabsheet-minimal-style {
+@mixin reindeer-tabsheet-minimal-style($name : v-tabsheet) {
 
 /**
  * Tabsheet "minimal" style --------------
  */
 
 /* Minimal tabsheet on blue background */
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div,
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-tabitem,
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected  {
+.blue .#{$name}-tabs-minimal .#{$name}-spacertd div,
+.blue .#{$name}-tabs-minimal .#{$name}-tabitem,
+.blue .#{$name}-tabs-minimal .#{$name}-tabitem-selected  {
 	border-color: #7c8a91;
 }
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.blue .#{$name}-tabs-minimal .#{$name}-caption-close {
 	color: #7c8a91;
 }
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover {
+.blue .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
 	color: #BCD3DE;
 	background: #778d98;
 }
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.blue .#{$name}-tabs-minimal .#{$name}-caption-close:active {
 	background: #4f6874;
 }
 
 /* Default & white styles */
-.v-tabsheet-tabs-minimal .v-tabsheet-spacertd div,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div {
+.#{$name}-tabs-minimal .#{$name}-spacertd div,
+.white .#{$name}-tabs-minimal .#{$name}-spacertd div {
 	border-bottom: 1px solid #bfbfbf;
 	height: auto;
 	background: transparent;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitemcell,
-.v-tabsheet-tabs-minimal .v-tabsheet-spacertd {
+.#{$name}-tabs-minimal .#{$name}-tabitemcell,
+.#{$name}-tabs-minimal .#{$name}-spacertd {
 	height: auto;
 	background: transparent;
 	padding-left: 0;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-tabitem {
+.#{$name}-tabs-minimal .#{$name}-tabitem,
+.white .#{$name}-tabs-minimal .#{$name}-tabitem {
 	border: none;
 	border-bottom: 1px solid #bfbfbf;
 	color: #4d748f;
@@ -44,54 +44,54 @@
 	background: transparent;
 	text-shadow: none;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem .v-caption {
+.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption {
 	padding: 5px 16px;
 	height: auto;
 	background: transparent;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitemcell-selected {
+.#{$name}-tabs-minimal .#{$name}-tabitemcell-selected {
 	background: transparent;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected {
+.#{$name}-tabs-minimal .#{$name}-tabitem-selected,
+.white .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
 	background: transparent;
 	border: 1px solid #bfbfbf;
 	border-bottom: none;
 	color: #222;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected .v-caption {
+.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption {
 	background: transparent;
 	padding: 4px 15px 6px 15px;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem .v-caption-closable,
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected .v-caption-closable {
+.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption-closable,
+.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption-closable {
 	padding-right: 6px;
 }
-.v-tabsheet-content-minimal,
-.white .v-tabsheet-content-minimal {
+.#{$name}-content-minimal,
+.white .#{$name}-content-minimal {
 	border: none;
 }
-.v-tabsheet-content-minimal .v-tabsheet-tabsheetpanel {
+.#{$name}-content-minimal .#{$name}-tabsheetpanel {
 	background: transparent;
 }
-.v-tabsheet-deco-minimal,
-.white .v-tabsheet-deco-minimal {
+.#{$name}-deco-minimal,
+.white .#{$name}-deco-minimal {
 	height: 0;
 	border: none;
 }
-.v-tabsheet-tabcontainer-minimal .v-tabsheet-scroller {
+.#{$name}-tabcontainer-minimal .#{$name}-scroller {
 	margin-top: -20px;
 	height: 17px;
 	padding: 0;
 	border: none;
 	background: transparent;
 }
-.v-tabsheet-tabcontainer-minimal .v-tabsheet-scroller button {
+.#{$name}-tabcontainer-minimal .#{$name}-scroller button {
 	margin-top: 0;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close,
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover,
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.#{$name}-tabs-minimal .#{$name}-caption-close,
+.#{$name}-tabs-minimal .#{$name}-caption-close:hover,
+.#{$name}-tabs-minimal .#{$name}-caption-close:active {
 	text-indent: 0;
 	background: transparent;
 	margin-left: 3px;
@@ -104,45 +104,45 @@
 	-webkit-border-radius: 7px;
 	-moz-border-radius: 7px;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.#{$name}-tabs-minimal .#{$name}-caption-close {
 	margin-top: 1px;
 }
-.v-ff .v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.v-ff .#{$name}-tabs-minimal .#{$name}-caption-close {
 	margin-top: -15px;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover {
+.#{$name}-tabs-minimal .#{$name}-caption-close:hover,
+.white .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
 	color: #fff;
 	background: #aaa;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.#{$name}-tabs-minimal .#{$name}-caption-close:active,
+.white .#{$name}-tabs-minimal .#{$name}-caption-close:active {
 	background: #777;
 }
 
 /* Minimal tabsheet on black background */
-.black .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div,
-.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem,
-.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected  {
+.black .#{$name}-tabs-minimal .#{$name}-spacertd div,
+.black .#{$name}-tabs-minimal .#{$name}-tabitem,
+.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected  {
 	border-color: #3e4044;
 	color: #6a7f89;
 }
-.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected {
+.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
 	color: #c9ccce;
 }
-.black .v-tabsheet-content-minimal,
-.black .v-tabsheet-content-bar {
+.black .#{$name}-content-minimal,
+.black .#{$name}-content-bar {
 	color: #c9ccce;
 	text-shadow: #000 0 0 1px;
 }
-.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.black .#{$name}-tabs-minimal .#{$name}-caption-close {
 	color: #72787c;
 }
-.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover {
+.black .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
 	color: #1d2021;
 	background: #4d5154;
 }
-.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.black .#{$name}-tabs-minimal .#{$name}-caption-close:active {
 	background: #626669;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
index 176d35eea8..5147f608ab 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
@@ -1,22 +1,22 @@
-@mixin reindeer-tabsheet-normal-style {
+@mixin reindeer-tabsheet-normal-style($name : v-tabsheet) {
 
 /* Default Tabsheet styles */
 
-.v-tabsheet-tabitemcell,
-.v-tabsheet-spacertd {
+.#{$name}-tabitemcell,
+.#{$name}-spacertd {
 	height: 32px;
 }
-.v-tabsheet-tabitemcell {
+.#{$name}-tabitemcell {
 	background: no-repeat;
 	background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */
 	padding-left: 3px;
 }
-.v-tabsheet-tabitemcell-first {
+.#{$name}-tabitemcell-first {
 	padding-left: 10px;
 	background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitem,
-.v-tabsheet-spacertd div {
+.#{$name}-tabitem,
+.#{$name}-spacertd div {
 	border: none;
 	height: 32px;
 	background: transparent repeat-x;
@@ -25,23 +25,23 @@
 	color: #222;
 	text-shadow: #fff 0 1px 0;
 }
-.v-tabsheet-tabitem .v-caption {
+.#{$name}-tabitem .v-caption {
 	border: none;
 	height: 23px;
 	background: no-repeat right top;
 	background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
 	padding: 9px 8px 0 6px;
 }
-.v-tabsheet-tabitem .v-caption-closable {
+.#{$name}-tabitem .v-caption-closable {
 	padding-right: 0;
 	padding-left: 17px;
 }
-.v-tabsheet-tabitem .v-captiontext {
+.#{$name}-tabitem .v-captiontext {
 	height: 16px;
 	line-height: 16px;
 	vertical-align:baseline;
 }
-.v-tabsheet-caption-close {
+.#{$name}-caption-close {
 	float: right;
 	width: 19px;
 	height: 18px;
@@ -55,70 +55,70 @@
 	font-size: 14px;
 	font-weight: normal;
 }
-.v-tabsheet-caption-close:hover {
+.#{$name}-caption-close:hover {
 	background-image: url(img/close-btn-hover.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-caption-close:active {
+.#{$name}-caption-close:active {
 	background-image: url(img/close-btn-pressed.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+.#{$name}-tabitem-selected .#{$name}-caption-close {
 	background-image: url(img/close-btn-sel.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+.#{$name}-tabitem-selected .#{$name}-caption-close:hover {
 	background-image: url(img/close-btn-sel-hover.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+.#{$name}-tabitem-selected .#{$name}-caption-close:active {
 	background-image: url(img/close-btn-sel-pressed.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitemcell-selected {
+.#{$name}-tabitemcell-selected {
 	background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitemcell-selected-first {
+.#{$name}-tabitemcell-selected-first {
 	background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitem-selected {
+.#{$name}-tabitem-selected {
 	background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #232930;
 }
-.v-tabsheet-tabitem-selected .v-caption {
+.#{$name}-tabitem-selected .v-caption {
 	background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
 }
-.v-tabsheet-spacertd div {
+.#{$name}-spacertd div {
 	margin-right: 4px;
 }
-.v-tabsheet-spacertd {
+.#{$name}-spacertd {
 	background: transparent no-repeat right top;
 	background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */
 }
-.blue .v-tabsheet-content {
+.blue .#{$name}-content {
 	border-color: #a8bcc5;
 }
-.v-tabsheet-content,
-.white .v-tabsheet-content {
+.#{$name}-content,
+.white .#{$name}-content {
 	border: 1px solid #dcdcdc;
 	border-bottom: none;
 	border-top: none;
 	color: #222;
 	text-shadow: none;
 }
-.v-tabsheet-tabsheetpanel {
+.#{$name}-tabsheetpanel {
 	background: #fff;
 }
-.v-sa .v-tabsheet-content {
+.v-sa .#{$name}-content {
 	border-color: rgba(0,0,0,.1);
 }
-.blue .v-tabsheet-deco {
+.blue .#{$name}-deco {
 	border-color: #92a3ac;
 	background: #adc2cd;
 }
-.v-tabsheet-deco,
-.white .v-tabsheet-deco {
+.#{$name}-deco,
+.white .#{$name}-deco {
 	height: 1px;
 	border-top: 1px solid #bebebe;
 	background: #e2e2e2;
 	overflow: hidden;
 }
-.v-sa .v-tabsheet-deco {
+.v-sa .#{$name}-deco {
 	border-top-color: rgba(0,0,0,.1);
 	background: rgba(0,0,0,.08);
 }
@@ -126,31 +126,31 @@
 
 /* Icons & error indicators */
 
-.v-tabsheet-tabs .v-icon,
-.v-tabsheet-tabs .v-captiontext,
-.v-tabsheet-tabs .v-errorindicator {
+.#{$name}-tabs .v-icon,
+.#{$name}-tabs .v-captiontext,
+.#{$name}-tabs .v-errorindicator {
 	display: inline;
 	float: none;
 }
-.v-sa .v-tabsheet-tabs .v-captiontext {
+.v-sa .#{$name}-tabs .v-captiontext {
 	display: inline-block;
 }
-.v-tabsheet-tabs .v-icon {
+.#{$name}-tabs .v-icon {
 	width: 16px !important;
 	height: 16px !important;
 }
-.v-tabsheet-tabs .v-errorindicator {
+.#{$name}-tabs .v-errorindicator {
 	display: inline-block;
 	width: 13px;
 	height: 16px;
 	background: transparent url(../common/icons/error.png) no-repeat 50%;
 }
-.v-ie .v-tabsheet-tabs .v-errorindicator {
+.v-ie .#{$name}-tabs .v-errorindicator {
 	zoom: 1;
 	display: inline;
 }
-.v-ie8 .v-tabsheet-tabs .v-errorindicator,
-.v-ie9 .v-tabsheet-tabs .v-errorindicator {
+.v-ie8 .#{$name}-tabs .v-errorindicator,
+.v-ie9 .#{$name}-tabs .v-errorindicator {
 	display: inline-block;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
index 8f176e2150..b3f98098ef 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
@@ -1,8 +1,8 @@
-@mixin reindeer-tabsheet-scroller {
+@mixin reindeer-tabsheet-scroller($name : v-tabsheet) {
 
 /* Tabsheet scroller styles */
 
-.v-tabsheet-scroller {
+.#{$name}-scroller {
 	height: 31px;
 	margin-top: -31px;
 	padding: 0 3px 0 4px;
@@ -13,13 +13,13 @@
 	background: transparent url(img/framed/tab-bg.png) repeat-x left -1px;
 	width: 36px;
 }
-.v-tabsheet-scroller button {
+.#{$name}-scroller button {
 	margin-top: 7px;
 }
-.v-tabsheet-scrollerPrev,
-.v-tabsheet-scrollerNext,
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled {
+.#{$name}-scrollerPrev,
+.#{$name}-scrollerNext,
+.#{$name}-scrollerPrev-disabled,
+.#{$name}-scrollerNext-disabled {
 	border: none;
 	background: transparent;
 	background-image: url(img/tab-prev.png); /** sprite-ref: verticals */
@@ -27,26 +27,26 @@
 	height: 17px;
 	overflow: hidden;
 }
-.v-tabsheet-scroller button::-moz-focus-inner {
+.#{$name}-scroller button::-moz-focus-inner {
 	border: none;
 }
-.v-tabsheet-scrollerNext {
+.#{$name}-scrollerNext {
 	background-image: url(img/tab-next.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-scrollerPrev:active {
+.#{$name}-scrollerPrev:active {
 	background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-scrollerNext:active {
+.#{$name}-scrollerNext:active {
 	background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerPrev-disabled:active {
+.#{$name}-scrollerPrev-disabled,
+.#{$name}-scrollerPrev-disabled:active {
 	background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */
 	opacity: 1;
 	filter: none;
 }
-.v-tabsheet-scrollerNext-disabled,
-.v-tabsheet-scrollerNext-disabled:active {
+.#{$name}-scrollerNext-disabled,
+.#{$name}-scrollerNext-disabled:active {
 	background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
 	opacity: 1;
 	filter: none;
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
index d26a569c25..75ac111ec7 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
@@ -1,11 +1,11 @@
-@mixin reindeer-tabsheet-selected-closable-style {
+@mixin reindeer-tabsheet-selected-closable-style($name : v-tabsheet) {
 
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem .v-tabsheet-caption-close,
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
+.#{$name}-tabs-selected-closable .#{$name}-tabitem .#{$name}-caption-close,
+.#{$name}-tabs-selected-closable .#{$name}-tabitem:hover .#{$name}-caption-close {
 	visibility: hidden;
 }
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected .v-tabsheet-caption-close,
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected:hover .v-tabsheet-caption-close {
+.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected .#{$name}-caption-close,
+.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected:hover .#{$name}-caption-close {
 	visibility: visible;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
index e4f098046c..61358b3723 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
@@ -1,42 +1,42 @@
-@mixin reindeer-tabsheet-small-style {
+@mixin reindeer-tabsheet-small-style($name : v-tabsheet) {
 
 /**
  * Tabsheet bar style ---------------
  */
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell,
-.v-tabsheet-tabs-bar .v-tabsheet-spacertd {
+.#{$name}-tabs-bar .#{$name}-tabitemcell,
+.#{$name}-tabs-bar .#{$name}-spacertd {
 	height: 20px;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-spacertd {
+.#{$name}-tabs-bar .#{$name}-spacertd {
 	background: transparent;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell {
+.#{$name}-tabs-bar .#{$name}-tabitemcell {
 	background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-first {
+.#{$name}-tabs-bar .#{$name}-tabitemcell-first {
 	padding-left: 6px;
 	background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem,
-.v-tabsheet-tabs-bar .v-tabsheet-spacertd div {
+.#{$name}-tabs-bar .#{$name}-tabitem,
+.#{$name}-tabs-bar .#{$name}-spacertd div {
 	height: 20px;
 	background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	font-size: 11px;
 	margin: 0;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem .v-caption {
+.#{$name}-tabs-bar .#{$name}-tabitem .v-caption {
 	height: 18px;
 	background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
 	padding: 2px 12px 0 10px;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem .v-caption-closable,
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-caption-closable {
+.#{$name}-tabs-bar .#{$name}-tabitem .v-caption-closable,
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption-closable {
 	padding-right: 8px;
 	padding-left: 14px;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close,
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:hover,
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:active {
+.#{$name}-tabs-bar .#{$name}-caption-close,
+.#{$name}-tabs-bar .#{$name}-caption-close:hover,
+.#{$name}-tabs-bar .#{$name}-caption-close:active {
 	text-indent: 0;
 	background: transparent;
 	margin-left: 3px;
@@ -49,62 +49,62 @@
 	-webkit-border-radius: 7px;
 	-moz-border-radius: 7px;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close {
+.#{$name}-tabs-bar .#{$name}-caption-close {
 	margin-top: 1px;
 }
-.v-ff .v-tabsheet-tabs-bar .v-tabsheet-caption-close {
+.v-ff .#{$name}-tabs-bar .#{$name}-caption-close {
 	margin-top: -14px;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:hover {
+.#{$name}-tabs-bar .#{$name}-caption-close:hover {
 	background: #bfbfbf;
 	-webkit-box-shadow: 0 1px 0 #fff;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:active {
+.#{$name}-tabs-bar .#{$name}-caption-close:active {
 	background: #a9a9a9;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close {
 	color: #404142;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:hover {
 	background: #5e666e;
 	color: #fff;
 	text-shadow: 0 -1px 0 #222;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:active {
 	background: #404142;
 }
 
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-selected {
+.#{$name}-tabs-bar .#{$name}-tabitemcell-selected {
 	background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-selected-first {
+.#{$name}-tabs-bar .#{$name}-tabitemcell-selected-first {
 	background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected {
 	background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #232930;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-caption {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption {
 	background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
 }
-.v-tabsheet-tabcontainer-bar .v-tabsheet-scroller {
+.#{$name}-tabcontainer-bar .#{$name}-scroller {
 	margin-top: -20px;
 	height: 19px;
 	border-right: none;
 	background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-tabsheet-tabcontainer-bar .v-tabsheet-scroller button {
+.#{$name}-tabcontainer-bar .#{$name}-scroller button {
 	margin-top: 1px;
 }
-.v-tabsheet-content-bar,
-.white .v-tabsheet-content-bar {
+.#{$name}-content-bar,
+.white .#{$name}-content-bar {
 	border: none;
 }
-.v-tabsheet-content-bar .v-tabsheet-tabsheetpanel {
+.#{$name}-content-bar .#{$name}-tabsheetpanel {
 	background: transparent;
 }
-.v-tabsheet-deco-bar,
-.white .v-tabsheet-deco-bar {
+.#{$name}-deco-bar,
+.white .#{$name}-deco-bar {
 	height: 0;
 	border: none;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss
index 8b9252cf68..35001daf4d 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss
@@ -8,7 +8,7 @@
 @import "tabsheet-hover-closable-style.scss";
 
 @mixin reindeer-tabsheet {
-
+	// TODO use $exclude
 	@include reindeer-tabsheet-normal-style;
 	@include reindeer-tabsheet-scroller;
 	@include reindeer-tabsheet-borderless-style;
diff --git a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
index 7350f699f9..7cd8166aa6 100644
--- a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
+++ b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
@@ -1,16 +1,16 @@
-@mixin reindeer-textfield {
+@mixin reindeer-textfield($name : v-textfield) {
 
 /* Textfield on blue background */
-.blue .v-textfield,
+.blue .#{$name},
 .blue .v-textarea {
 	border-color: #92a2aa;
 	border-top-color: #7c8a90;
 	border-bottom-color: #a1b3bc;
 }
 /* Default & white background */
-.v-textfield,
+.#{$name},
 .v-textarea,
-.white .v-textfield,
+.white .#{$name},
 .white .v-textarea {
 	border: 1px solid #bcbdbe;
 	border-top-color: #a2a3a4;
@@ -31,19 +31,19 @@
 	height: auto;
 }
 /* Need more specific selector because of #2384 fixes in base/common/common.css */
-.v-app input.v-textfield,
-.v-window input.v-textfield,
+.v-app input.#{$name},
+.v-window input.#{$name},
 .v-app textarea.v-textarea,
 .v-window textarea.v-textarea  {
 	padding: 3px 3px 4px;
 }
-.v-app input.v-textfield.v-widget,
-.v-window input.v-textfield.v-widget {
+.v-app input.#{$name}.v-widget,
+.v-window input.#{$name}.v-widget {
 	height: 24px;
 }
-.v-app .v-textfield-focus,
-.v-window .v-textfield-focus,
-.v-popupview-popup .v-textfield-focus,
+.v-app .#{$name}-focus,
+.v-window .#{$name}-focus,
+.v-popupview-popup .#{$name}-focus,
 .v-app .v-textarea-focus,
 .v-window .v-textarea-focus,
 .v-popupview-popup .v-textarea-focus {
@@ -53,13 +53,13 @@
 	outline: none;
 	background-color: #fff;
 }
-input.v-textfield-prompt,
+input.#{$name}-prompt,
 textarea.v-textarea-prompt {
 	font-style: normal;
 	color: #999;
 }
 /* Small style textfield */
-.v-app input.v-textfield-small {
+.v-app input.#{$name}-small {
 	font-size: 11px;
 	line-height: normal;
 	height: auto;
@@ -68,18 +68,18 @@ textarea.v-textarea-prompt {
 .v-app textarea.v-textarea-small {
 	font-size: 11px;
 }
-.v-app .v-table  input.v-textfield.v-widget,
-.v-window .v-table input.v-textfield.v-widget {
+.v-app .v-table  input.#{$name}.v-widget,
+.v-window .v-table input.#{$name}.v-widget {
 	padding: 1px 2px;
 	height: auto;
 	line-height: normal;
 }
-.v-table-cell-wrapper > input.v-textfield {
+.v-table-cell-wrapper > input.#{$name} {
 	margin-top: -2px;
 	margin-bottom: -2px;
 }
 /* Textfield on black background */
-.black .v-textfield,
+.black .#{$name},
 .black .v-textarea {
 	border-color: #38393a;
 	border-top-color: #2c2d2e;
@@ -92,10 +92,10 @@ textarea.v-textarea-prompt {
 .black .v-textarea {
 	background-image: none;
 }
-.v-app .black .v-textfield-focus,
-.v-window-black .v-textfield-focus,
-.v-window .black .v-textfield-focus,
-.v-popupview-popup .black .v-textfield-focus,
+.v-app .black .#{$name}-focus,
+.v-window-black .#{$name}-focus,
+.v-window .black .#{$name}-focus,
+.v-popupview-popup .black .#{$name}-focus,
 .v-app .black .v-textarea-focus,
 .v-window-black .v-textarea-focus,
 .v-window .black .v-textarea-focus,
@@ -105,12 +105,12 @@ textarea.v-textarea-prompt {
 	border-bottom-color: #507596;
 	background-color: #151717;
 }
-.black input.v-textfield-prompt {
+.black input.#{$name}-prompt {
 	color: #5f6366;
 }
 /* Readonly */
-input.v-textfield-readonly,
-.black input.v-textfield-readonly,
+input.#{$name}-readonly,
+.black input.#{$name}-readonly,
 textarea.v-textarea-readonly,
 .black textarea.v-textarea-readonly {
 	border: none;
diff --git a/WebContent/VAADIN/themes/reindeer/tree/tree.scss b/WebContent/VAADIN/themes/reindeer/tree/tree.scss
index 3a1ad35c81..da3b46dc65 100644
--- a/WebContent/VAADIN/themes/reindeer/tree/tree.scss
+++ b/WebContent/VAADIN/themes/reindeer/tree/tree.scss
@@ -1,20 +1,20 @@
-@mixin reindeer-tree {
+@mixin reindeer-tree($name : v-tree) {
 
-.v-tree-node {
+.#{$name}-node {
 	background: transparent url(img/arrows.png) no-repeat 6px -10px;
 }
-.v-tree-node-expanded {
+.#{$name}-node-expanded {
 	background-position: -7px 5px;
 }
-.v-tree-node-caption {
+.#{$name}-node-caption {
 	margin-left: 16px;
 	padding-bottom: 1px;
 }
-.v-tree-node span {
+.#{$name}-node span {
 	padding: 1px 2px;
 	display: inline-block;
 }
-.v-tree-node-selected span {
+.#{$name}-node-selected span {
 	background: #4d749f repeat-x;
 	background-image: url(../common/img/sel-bg.png); /* sprite-ref: verticals; sprite-alignment: repeat */
 	color: #fff;
@@ -24,31 +24,31 @@
 	text-shadow: #2b425a 0 1px 0;
 	display: inline-block;
 }
-.v-tree-node-children {
+.#{$name}-node-children {
 	padding-left: 16px;
 }
-.v-tree-node-caption.v-tree-node-focused span{
+.#{$name}-node-caption.#{$name}-node-focused span{
 	padding-left: 1px;
 	padding-top: 0px;
 	padding-bottom: 0px;
 }
-.v-tree-node-focused span{
+.#{$name}-node-focused span{
 	border: 1px dotted black;	
 }
 /***************************************
  * Drag'n'drop styles
  ***************************************/
-.v-tree .v-tree-node-drag-top {
+.#{$name} .#{$name}-node-drag-top {
 	background-position: 6px -11px;
 }
-.v-tree .v-tree-node-drag-top.v-tree-node-expanded {
+.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded {
 	background-position: -7px 4px;
 }
-.v-tree-connectors .v-tree-node-drag-top,
-.v-tree-connectors .v-tree-node-expanded.v-tree-node-drag-top {
+.#{$name}-connectors .#{$name}-node-drag-top,
+.#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-drag-top {
 	background-position: 2px -53px;
 }
-.v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf {
+.#{$name}-connectors .#{$name}-node-drag-top.#{$name}-node-leaf {
 	background-position: 2px 50%;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/window/window.scss b/WebContent/VAADIN/themes/reindeer/window/window.scss
index ac8fa9c2c9..c3ad0fc9be 100644
--- a/WebContent/VAADIN/themes/reindeer/window/window.scss
+++ b/WebContent/VAADIN/themes/reindeer/window/window.scss
@@ -1,25 +1,25 @@
-@mixin reindeer-window {
+@mixin reindeer-window($name : v-window) {
 
-.v-window {
+.#{$name} {
 	background: transparent;
 }
-.v-window-wrap {
+.#{$name}-wrap {
 	border: 1px solid #808386;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.v-sa .v-window-wrap,
-.v-op .v-window-wrap {
+.v-sa .#{$name}-wrap,
+.v-op .#{$name}-wrap {
 	border-color: rgba(0,0,0,.2);
 }
-.v-window-outerheader {
+.#{$name}-outerheader {
 	padding: 12px 32px 0 14px;
 	height: 37px;
 	background: black repeat-x;
 	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-window-header {
+.#{$name}-header {
 	font-weight: bold;
 	font-size: 12px;
 	line-height: normal;
@@ -30,24 +30,24 @@
 	text-overflow: ellipsis;
 	-ms-text-overflow: ellipsis;
 }
-.v-window-error .v-window-header {
+.#{$name}-error .#{$name}-header {
 	padding-left: 13px;
 	background: transparent url(../common/icons/error.png) no-repeat 0 50%;
 }
-.v-window-resizebox {
+.#{$name}-resizebox {
 	width: 15px;
 	height: 15px;
 	cursor: se-resize;
 	background: transparent;
 	background-image: url(img/resize.png); /** sprite-ref: verticals */
 }
-.v-window-footer {
+.#{$name}-footer {
 	background-color:white;
 	background-repeat: repeat-x;
 	background-image: url(img/footer-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	height: 15px;
 }
-.v-window-closebox {
+.#{$name}-closebox {
 	top: 12px;
 	right: 10px;
 	width: 15px;
@@ -55,16 +55,16 @@
 	background: transparent;
 	background-image: url(img/close.png); /** sprite-ref: verticals */
 }
-.v-window-closebox:hover {
+.#{$name}-closebox:hover {
 	background-image: url(img/close-hover.png); /** sprite-ref: verticals */
 }
-.v-window-closebox:active {
+.#{$name}-closebox:active {
 	background-image: url(img/close-pressed.png); /** sprite-ref: verticals */
 }
-.v-window-contents {
+.#{$name}-contents {
 	background: #fff;
 }
-.v-window-modalitycurtain {
+.#{$name}-modalitycurtain {
 	background: #56595b;
 }
 
@@ -77,43 +77,43 @@
  Light style window -----------------------------
 **/
 
-.v-window-light .v-window-outerheader {
+.#{$name}-light .#{$name}-outerheader {
 	background: transparent;
 	padding: 15px 32px 0 18px;
 	height: 23px;
 }
-.v-window-light .v-window-header {
+.#{$name}-light .#{$name}-header {
 	font-size: 16px;
 	color: #292e34;
 	text-shadow: none;
 }
-.v-window-light .v-window-resizebox {
+.#{$name}-light .#{$name}-resizebox {
 	width: 12px;
 	height: 12px;
 	background-image: url(img/resize-light.png); /** sprite-ref: verticals */
 }
-.v-window-light .v-window-footer {
+.#{$name}-light .#{$name}-footer {
 	background: transparent;
 	height: 12px;
 }
-.v-window-light .v-window-closebox {
+.#{$name}-light .#{$name}-closebox {
 	right: 1px;
 	top: 17px;
 	width: 19px;
 	height: 15px;
 	background-image: url(img/close-light.png); /** sprite-ref: verticals */
 }
-.v-window-light .v-window-closebox:hover {
+.#{$name}-light .#{$name}-closebox:hover {
 	background-image: url(img/close-light-hover.png); /** sprite-ref: verticals */
 }
-.v-window-light .v-window-closebox:active {
+.#{$name}-light .#{$name}-closebox:active {
 	background-image: url(img/close-light-pressed.png); /** sprite-ref: verticals */
 }
-.v-window-light .v-window-contents {
+.#{$name}-light .#{$name}-contents {
 	background: transparent;
 }
 /* This must be the last sprite added to the verticals-sprite image */
-.v-window-light .v-window-wrap2 {
+.#{$name}-light .#{$name}-wrap2 {
 	background: #f7f7f8 repeat-x;
 	background-image: url(img/content-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
@@ -123,27 +123,27 @@
  Black style window -----------------------------
 **/
 
-.v-window-black .v-window-wrap {
+.#{$name}-black .#{$name}-wrap {
 	border-color: #2e3030;
 	border-radius: 8px;
 	-webkit-border-radius: 8px;
 	-moz-border-radius: 8px;
 	overflow: hidden;
 }
-.v-sa .v-window-black .v-window-wrap,
-.v-op .v-window-black .v-window-wrap {
+.v-sa .#{$name}-black .#{$name}-wrap,
+.v-op .#{$name}-black .#{$name}-wrap {
 	border-color: rgba(0,0,0,.8);
 }
-.v-window-black .v-window-wrap2 {
+.#{$name}-black .#{$name}-wrap2 {
 	background-color: #1d2021;
 	-moz-border-radius: 7px;
 	-webkit-border-radius: 7px;
 }
-.v-sa .v-window-black .v-window-wrap2,
-.v-op .v-window-black .v-window-wrap2 {
+.v-sa .#{$name}-black .#{$name}-wrap2,
+.v-op .#{$name}-black .#{$name}-wrap2 {
 	background-color: rgba(29,32,33,.9);
 }
-.v-window-black .v-window-outerheader {
+.#{$name}-black .#{$name}-outerheader {
 	height: auto;
 	padding: 7px 14px;
 	height: 15px;
@@ -157,27 +157,27 @@
 	overflow: hidden;
 	border: none;
 }
-.v-window-black .v-window-header {
+.#{$name}-black .#{$name}-header {
 	font-size: 12px;
 	font-weight: normal;
 	color: #dddfe1;
 }
-.v-window-black .v-window-closebox {
+.#{$name}-black .#{$name}-closebox {
 	top: 8px;
 }
-.v-window-black .v-window-footer {
+.#{$name}-black .#{$name}-footer {
 	background: transparent;
 	border: none;
 	height: 14px;
 }
-.v-window-black .v-window-resizebox {
+.#{$name}-black .#{$name}-resizebox {
 	background: transparent no-repeat;
 	background-image: url(img/black/resize.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 4px */
 	width: 14px;
 	height: 14px;
 }
 /* Must be last to make this image last in the sprites */
-.v-window-black .v-window-contents {
+.#{$name}-black .#{$name}-contents {
 	border: none;
 	background: transparent repeat-x;
 	background-image: url(img/black/content-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */