Sass restructure: base theme with renameable components

31 files changed, 495 insertions, 495 deletions

diff --git a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss
index ddb030c00f..c8bb57365f 100644
--- a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss
+++ b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss
@@ -1,18 +1,18 @@
-@mixin base-absolutelayout {
+@mixin base-absolutelayout($name : v-absolutelayout) {
 
-.v-absolutelayout-wrapper {
+.#{$name}-wrapper {
 	position: absolute;
 	overflow: hidden;
 }
-.v-absolutelayout-margin, .v-absolutelayout-canvas {
+.#{$name}-margin, .#{$name}-canvas {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.v-absolutelayout.v-has-height > div, .v-absolutelayout.v-has-height > div > div {
+.#{$name}.v-has-height > div, .#{$name}.v-has-height > div > div {
 	height: 100%;
 }
-.v-absolutelayout.v-has-width > div, .v-absolutelayout.v-has-width > div > div {
+.#{$name}.v-has-width > div, .#{$name}.v-has-width > div > div {
 	width: 100%;
 }
 
diff --git a/WebContent/VAADIN/themes/base/button/button.scss b/WebContent/VAADIN/themes/base/button/button.scss
index ad4dce4978..e6398219ab 100644
--- a/WebContent/VAADIN/themes/base/button/button.scss
+++ b/WebContent/VAADIN/themes/base/button/button.scss
@@ -1,9 +1,9 @@
-@mixin base-button {
+@mixin base-button($name : v-button) {
 
 /*
  * Default button (more customizable)
  * -------------------------------------- */
-.v-button {
+.#{$name} {
 	display: inline-block;
 	zoom: 1;
 	text-align: center !important;
@@ -26,12 +26,12 @@
 	box-sizing: border-box;
 }
 
-.v-button.v-disabled {
+.#{$name}.v-disabled {
 	cursor: default;
 }
 
-.v-button-wrap,
-.v-button-caption {
+.#{$name}-wrap,
+.#{$name}-caption {
 	vertical-align: baseline;
 	white-space: nowrap;
 	font: inherit;
@@ -39,14 +39,14 @@
 	line-height: normal;
 	}
 
-.v-button .v-icon,
+.#{$name} .v-icon,
 .v-nativebutton .v-icon {
 	vertical-align: middle;
 	margin-right: 3px;
 	border: none;
 	}
 
-.v-button .v-errorindicator,
+.#{$name} .v-errorindicator,
 .v-nativebutton .v-errorindicator {
 	display: inline-block;
 	zoom: 1;
@@ -55,7 +55,7 @@
 }
 
 /* Link style (we really should deprecate this) */
-.v-button-link,
+.#{$name}-link,
 .v-nativebutton-link {
 	border: none;
 	text-align: left !important;
@@ -69,11 +69,11 @@
 }
 
 /* Inset Safari focus outline a bit */
-.v-sa .v-button-link:focus{
+.v-sa .#{$name}-link:focus{
 	outline-offset: -3px;
 	}
 
-.v-button-link .v-button-caption,
+.#{$name}-link .#{$name}-caption,
 .v-nativebutton-link .v-nativebutton-caption {
 	text-decoration: underline;
 	color: inherit;
diff --git a/WebContent/VAADIN/themes/base/caption/caption.scss b/WebContent/VAADIN/themes/base/caption/caption.scss
index c6fd124ad6..d08f682adb 100644
--- a/WebContent/VAADIN/themes/base/caption/caption.scss
+++ b/WebContent/VAADIN/themes/base/caption/caption.scss
@@ -1,26 +1,26 @@
-@mixin base-caption {
+@mixin base-caption($name : v-caption) {
 
-.v-captionwrapper {
+.#{$name}wrapper {
 	text-align: left; /* Force default alignment */
 }
-.v-caption {
+.#{$name} {
 	overflow: hidden;
 	white-space: nowrap;
 }
 .v-errorindicator {
 	display: inline-block;
 }
-.v-caption .v-icon {
+.#{$name} .v-icon {
 	display: inline-block;
 	padding-right: 2px;
 	vertical-align: middle;
 }
-.v-caption .v-captiontext {
+.#{$name} .#{$name}text {
 	display: inline-block;
 	overflow: hidden;
 	vertical-align: middle;
 }
-.v-caption .v-required-field-indicator {
+.#{$name} .v-required-field-indicator {
 	display: inline-block;
 }
 
diff --git a/WebContent/VAADIN/themes/base/csslayout/csslayout.scss b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss
index c2c1b698ad..2356a1689d 100644
--- a/WebContent/VAADIN/themes/base/csslayout/csslayout.scss
+++ b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss
@@ -1,35 +1,35 @@
-@mixin base-csslayout {
+@mixin base-csslayout($name : v-csslayout) {
 
-.v-csslayout {
+.#{$name} {
 	overflow: hidden;
 }
 /* More specific selector to override 'v-connector' */
-div.v-csslayout {
+div.#{$name} {
 	display: block;
 }
-.v-csslayout-margin, .v-csslayout-container {
+.#{$name}-margin, .#{$name}-container {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.v-has-width > .v-csslayout-margin,
-.v-has-width > .v-csslayout-margin > .v-csslayout-container {
+.v-has-width > .#{$name}-margin,
+.v-has-width > .#{$name}-margin > .#{$name}-container {
 	width: 100%;
 }
-.v-has-height > .v-csslayout-margin,
-.v-has-height > .v-csslayout-margin > .v-csslayout-container {
+.v-has-height > .#{$name}-margin,
+.v-has-height > .#{$name}-margin > .#{$name}-container {
 	height: 100%;
 }
-.v-csslayout-margin-top {
+.#{$name}-margin-top {
 	padding-top: 12px;	
 }
-.v-csslayout-margin-bottom {
+.#{$name}-margin-bottom {
 	padding-bottom: 12px;	
 }
-.v-csslayout-margin-left {
+.#{$name}-margin-left {
 	padding-left: 12px;	
 }
-.v-csslayout-margin-right {
+.#{$name}-margin-right {
 	padding-right: 12px;	
 }
 
diff --git a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss
index aaf3e75251..984c31e255 100644
--- a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss
+++ b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss
@@ -1,6 +1,6 @@
-@mixin base-customcomponent {
+@mixin base-customcomponent($name : v-customcomponent) {
 
-.v-customcomponent {
+.#{$name} {
 	overflow: hidden;
 }
 
diff --git a/WebContent/VAADIN/themes/base/customlayout/customlayout.scss b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss
index 26e1538d29..0f5f1230c4 100644
--- a/WebContent/VAADIN/themes/base/customlayout/customlayout.scss
+++ b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss
@@ -1,6 +1,6 @@
-@mixin base-customlayout {
+@mixin base-customlayout($name : v-customlayout) {
 
-.v-customlayout {
+.#{$name} {
 	overflow: hidden;
 }
 
diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.scss b/WebContent/VAADIN/themes/base/datefield/datefield.scss
index bf95baa3e6..a2975a2c06 100644
--- a/WebContent/VAADIN/themes/base/datefield/datefield.scss
+++ b/WebContent/VAADIN/themes/base/datefield/datefield.scss
@@ -1,90 +1,90 @@
-@mixin base-datefield {
+@mixin base-datefield($name : v-datefield) {
 
-.v-datefield {
+.#{$name} {
 	white-space: nowrap;
 	display: inline-block; /* Force minimum width */
 }
-.v-datefield-textfield {
+.#{$name}-textfield {
 	vertical-align: top;
 }
-.v-datefield-button {
+.#{$name}-button {
 	cursor: pointer;
 }
-.v-datefield-prompt .v-datefield-textfield {
+.#{$name}-prompt .#{$name}-textfield {
 	color: #999;
 	font-style: italic;
 }
-.v-datefield .v-datefield-button-readonly {
+.#{$name} .#{$name}-button-readonly {
 	display: none;
 }
-.v-datefield-calendarpanel table {
+.#{$name}-calendarpanel table {
 	width: 100%;
 }
-.v-datefield-calendarpanel td {
+.#{$name}-calendarpanel td {
 	padding: 0;
 	margin: 0;
 }
-.v-datefield-calendarpanel:focus {
+.#{$name}-calendarpanel:focus {
 	outline:none;	
 }
-.v-datefield-calendarpanel-header td {
+.#{$name}-calendarpanel-header td {
 	text-align: center;
 }
-.v-datefield-calendarpanel-month {
+.#{$name}-calendarpanel-month {
 	text-align: center;
 	white-space: nowrap;
 }
-.v-datefield-calendarpanel-weeknumber {
+.#{$name}-calendarpanel-weeknumber {
 	color: #999;
 	border-right: 1px solid #ddd;
 	font-size: 0.9em;
 }
-.v-datefield-calendarpanel-day,
-.v-datefield-calendarpanel-day-today {
+.#{$name}-calendarpanel-day,
+.#{$name}-calendarpanel-day-today {
 	cursor: pointer;
 }
-.v-datefield-calendarpanel-day-today {
+.#{$name}-calendarpanel-day-today {
 	border: 1px solid #ddd;
 }
-.v-disabled .v-datefield-calendarpanel-day,
-.v-disabled .v-datefield-calendarpanel-day-today {
+.v-disabled .#{$name}-calendarpanel-day,
+.v-disabled .#{$name}-calendarpanel-day-today {
 	cursor: default;
 }
-.v-datefield-calendarpanel-day-disabled {
+.#{$name}-calendarpanel-day-disabled {
 	cursor: default;
 	opacity: .5;
 }
-.v-datefield-calendarpanel-day-selected {
+.#{$name}-calendarpanel-day-selected {
 	cursor: default;
 	background: #333;
 	color: #fff;
 }
-.v-datefield-calendarpanel-day-focused {
+.#{$name}-calendarpanel-day-focused {
 	outline: 1px dotted black;
 }
-.v-datefield-calendarpanel-day-offmonth {
+.#{$name}-calendarpanel-day-offmonth {
     color: #666;
 }
 
-.v-datefield-time {
+.#{$name}-time {
 	white-space: nowrap;
 }
-.v-datefield-time .v-label {
+.#{$name}-time .v-label {
 	display: inline;
 }
-.v-datefield-popup {
+.#{$name}-popup {
 	background: #fff;
 }
 /* Disabled by default
-.v-datefield-error .v-textfield,
-.v-datefield-error .v-datefield-calendarpanel {
+.#{$name}-error .v-textfield,
+.#{$name}-error .#{$name}-calendarpanel {
 	background: #ffe0e0;
 }
 */
 
 /* Disabled by default
-.v-datefield-required .v-textfield,
-.v-datefield-required .v-datefield-calendarpanel {
+.#{$name}-required .v-textfield,
+.#{$name}-required .#{$name}-calendarpanel {
 	background:transparent;
 	background-color: #ffe0e0;
 }
diff --git a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
index 9d60bf0618..dae4320131 100644
--- a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
+++ b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
@@ -1,6 +1,6 @@
-@mixin base-dragwrapper {
+@mixin base-dragwrapper($name : v-ddwrapper) {
 
-.v-ddwrapper {
+.#{$name} {
 	padding: 2px;
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
@@ -13,7 +13,7 @@
 	-khtml-user-select: none;
 	-webkit-user-select: none;
 }
-.v-ie .v-ddwrapper a.drag-start {
+.v-ie .#{$name} a.drag-start {
 	display: block;
 	position: absolute;
 	top: 0;
@@ -27,22 +27,22 @@
 	background-color:cyan;
 	filter: alpha(opacity=0);
 }
-.v-ddwrapper-over {
+.#{$name}-over {
 	border: 2px solid #1d9dff;
 	background-color: #bcdcff;
 	padding: 0;
 }
-.v-ddwrapper-over {
+.#{$name}-over {
 	background-color: rgba(169,209,255,.6);
 }
-.no-box-drag-hints .v-ddwrapper-over {
+.no-box-drag-hints .#{$name}-over {
 	border: none;
 	background-color: transparent;
 	padding: 2px;
 }
-.v-app .v-ddwrapper-over-top,
-.v-window .v-ddwrapper-over-top,
-.v-popupview-popup .v-ddwrapper-over-top {
+.v-app .#{$name}-over-top,
+.v-window .#{$name}-over-top,
+.v-popupview-popup .#{$name}-over-top {
 	border: none;
 	border-top: 2px solid #1d9dff;
 	background-color: transparent;
@@ -52,9 +52,9 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .v-ddwrapper-over-bottom,
-.v-window .v-ddwrapper-over-bottom,
-.v-popupview-popup .v-ddwrapper-over-bottom {
+.v-app .#{$name}-over-bottom,
+.v-window .#{$name}-over-bottom,
+.v-popupview-popup .#{$name}-over-bottom {
 	border: none;
 	border-bottom: 2px solid #1d9dff;
 	background-color: transparent;
@@ -64,9 +64,9 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .v-ddwrapper-over-left,
-.v-window .v-ddwrapper-over-left,
-.v-popupview-popup .v-ddwrapper-over-left {
+.v-app .#{$name}-over-left,
+.v-window .#{$name}-over-left,
+.v-popupview-popup .#{$name}-over-left {
 	border: none;
 	border-left: 2px solid #1d9dff;
 	background-color: transparent;
@@ -76,9 +76,9 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .v-ddwrapper-over-right,
-.v-window .v-ddwrapper-over-right,
-.v-popupview-popup .v-ddwrapper-over-right {
+.v-app .#{$name}-over-right,
+.v-window .#{$name}-over-right,
+.v-popupview-popup .#{$name}-over-right {
 	border: none;
 	border-right: 2px solid #1d9dff;
 	background-color: transparent;
@@ -88,27 +88,27 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-ddwrapper,
-.v-ddwrapper-over,
-.v-app .v-ddwrapper-over-top,
-.v-window .v-ddwrapper-over-top,
-.v-popupview-popup .v-ddwrapper-over-top,
-.v-app .v-ddwrapper-over-bottom,
-.v-window .v-ddwrapper-over-bottom,
-.v-popupview-popup .v-ddwrapper-over-bottom,
-.v-app .v-ddwrapper-over-left,
-.v-window .v-ddwrapper-over-left,
-.v-popupview-popup .v-ddwrapper-over-left,
-.v-app .v-ddwrapper-over-right,
-.v-window .v-ddwrapper-over-right,
-.v-popupview-popup .v-ddwrapper-over-right {
+.#{$name},
+.#{$name}-over,
+.v-app .#{$name}-over-top,
+.v-window .#{$name}-over-top,
+.v-popupview-popup .#{$name}-over-top,
+.v-app .#{$name}-over-bottom,
+.v-window .#{$name}-over-bottom,
+.v-popupview-popup .#{$name}-over-bottom,
+.v-app .#{$name}-over-left,
+.v-window .#{$name}-over-left,
+.v-popupview-popup .#{$name}-over-left,
+.v-app .#{$name}-over-right,
+.v-window .#{$name}-over-right,
+.v-popupview-popup .#{$name}-over-right {
 	border-color: rgba(0,109,232,.6);
 }
 
-.v-ddwrapper-over-top:before,
-.v-ddwrapper-over-bottom:after,
-.v-ddwrapper-over-left:before,
-.v-ddwrapper-over-right:before {
+.#{$name}-over-top:before,
+.#{$name}-over-bottom:after,
+.#{$name}-over-left:before,
+.#{$name}-over-right:before {
 	display: block;
 	
 	position: absolute;
@@ -118,16 +118,16 @@
 	margin-left: -2px;
 	background: transparent url(../common/img/drag-slot-dot.png) no-repeat;
 }
-.v-ddwrapper-over-bottom:after {
+.#{$name}-over-bottom:after {
 	margin-top: -2px;
 }
-.v-ddwrapper-over-left:before,
-.v-ddwrapper-over-right:before {
+.#{$name}-over-left:before,
+.#{$name}-over-right:before {
 	background-position: 0 -6px;
 	margin-top: -2px;
 	margin-left: -4px;
 }
-.v-ddwrapper-over-right:before {
+.#{$name}-over-right:before {
 	position: relative;
 	margin-bottom: -4px;
 	margin-right: -4px;
@@ -136,26 +136,26 @@
 	background-position: 100% -6px;
 }
 
-.no-horizontal-drag-hints .v-ddwrapper-over-left {
+.no-horizontal-drag-hints .#{$name}-over-left {
 	padding-left: 2px;
 	border-left: none;
 }
-.no-horizontal-drag-hints .v-ddwrapper-over-right {
+.no-horizontal-drag-hints .#{$name}-over-right {
 	padding-right: 2px;
 	border-right: none;
 }
-.no-vertical-drag-hints .v-ddwrapper-over-top {
+.no-vertical-drag-hints .#{$name}-over-top {
 	padding-top: 2px;
 	border-top: none;
 }
-.no-vertical-drag-hints .v-ddwrapper-over-bottom {
+.no-vertical-drag-hints .#{$name}-over-bottom {
 	padding-bottom: 2px;
 	border-bottom: none;
 }
-.no-horizontal-drag-hints .v-ddwrapper-over-left:before,
-.no-horizontal-drag-hints .v-ddwrapper-over-right:before,
-.no-vertical-drag-hints .v-ddwrapper-over-top:before,
-.no-vertical-drag-hints .v-ddwrapper-over-bottom:after {
+.no-horizontal-drag-hints .#{$name}-over-left:before,
+.no-horizontal-drag-hints .#{$name}-over-right:before,
+.no-vertical-drag-hints .#{$name}-over-top:before,
+.no-vertical-drag-hints .#{$name}-over-bottom:after {
 	display: none;
 }
 
diff --git a/WebContent/VAADIN/themes/base/embedded/embedded.scss b/WebContent/VAADIN/themes/base/embedded/embedded.scss
index 53faaef2e8..965f66ddc3 100644
--- a/WebContent/VAADIN/themes/base/embedded/embedded.scss
+++ b/WebContent/VAADIN/themes/base/embedded/embedded.scss
@@ -1,6 +1,6 @@
-@mixin base-embedded {
+@mixin base-embedded($name : v-embedded) {
 
-.v-table .v-embedded-image {
+.v-table .#{$name}-image() {
     /* make embeddeds be centered in centered table cells. */
 	display: inline-block;
 }
diff --git a/WebContent/VAADIN/themes/base/formlayout/formlayout.scss b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
index a45840ebab..48a1bf0fde 100644
--- a/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
+++ b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
@@ -1,55 +1,55 @@
-@mixin base-formlayout {
+@mixin base-formlayout($name : v-formlayout) {
 
-.v-formlayout.v-has-width > table {
+.#{$name}.v-has-width > table {
 	width: 100%;
 }
-.v-formlayout.v-has-height > table {
+.#{$name}.v-has-height > table {
 	height: 100%;
 }
-.v-formlayout-cell .v-errorindicator {
+.#{$name}-cell .v-errorindicator {
 	display: block;
 }
-.v-formlayout-error-indicator {
+.#{$name}-error-indicator {
 	/* fix width so layout is not jumpy when error disappears */
 	width: 12px;
 }
-.v-formlayout-captioncell {
+.#{$name}-captioncell {
 	text-align:right;
 	white-space: nowrap;
 }
-.v-formlayout-errorcell, .v-formlayout-captioncell {
+.#{$name}-errorcell, .#{$name}-captioncell {
 	width: 1px; /* Don't use any extra space */
 }
-.v-formlayout-captioncell .v-caption {
+.#{$name}-captioncell .v-caption {
 	overflow: visible;
 }
-.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: 6px;
 }
-.v-formlayout-spacing .v-formlayout-firstrow .v-formlayout-captioncell, 
-.v-formlayout-spacing .v-formlayout-firstrow .v-formlayout-contentcell,
-.v-formlayout-spacing .v-formlayout-firstrow .v-formlayout-errorcell {
+.#{$name}-spacing .#{$name}-firstrow .#{$name}-captioncell, 
+.#{$name}-spacing .#{$name}-firstrow .#{$name}-contentcell,
+.#{$name}-spacing .#{$name}-firstrow .#{$name}-errorcell {
 	padding-top: 0;
 }
-.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: 12px;
 }
-.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: 12px;
 }
-.v-formlayout-margin-left .v-formlayout-captioncell {
+.#{$name}-margin-left .#{$name}-captioncell {
 	padding-left: 12px;
 } 
-.v-formlayout-margin-right .v-formlayout-contentcell {
+.#{$name}-margin-right .#{$name}-contentcell {
 	padding-right: 12px;
 }
-.v-formlayout-captioncell .v-caption .v-required-field-indicator {
+.#{$name}-captioncell .v-caption .v-required-field-indicator {
 	float: none;
 }
 
diff --git a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss
index 72f7437e6e..45b02316ae 100644
--- a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss
+++ b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss
@@ -1,34 +1,34 @@
-@mixin base-gridlayout {
+@mixin base-gridlayout($name : v-gridlayout) {
 
-.v-gridlayout {
+.#{$name} {
 	position: relative;
 }
-.v-gridlayout-slot {
+.#{$name}-slot {
 	position: absolute;
 }
-.v-gridlayout-margin-top {
+.#{$name}-margin-top {
 	padding-top: 12px;
 }
-.v-gridlayout-margin-bottom {
+.#{$name}-margin-bottom {
 	padding-bottom: 12px;
 }
-.v-gridlayout-margin-left {
+.#{$name}-margin-left {
 	padding-left: 12px;
 } 
-.v-gridlayout-margin-right {
+.#{$name}-margin-right {
 	padding-right: 12px;
 }
-.v-gridlayout-spacing-on {
+.#{$name}-spacing-on {
 	padding-left: 6px;
 	padding-top: 6px;
 	overflow: hidden;
 }
-.v-gridlayout-spacing,
-.v-gridlayout-spacing-off {
+.#{$name}-spacing,
+.#{$name}-spacing-off {
 	padding-left: 0;
 	padding-top: 0;
 }
-.v-gridlayout-spacing-off {
+.#{$name}-spacing-off {
 	overflow: hidden;
 }
 
diff --git a/WebContent/VAADIN/themes/base/label/label.scss b/WebContent/VAADIN/themes/base/label/label.scss
index ae1539acc9..6ccd0f3d27 100644
--- a/WebContent/VAADIN/themes/base/label/label.scss
+++ b/WebContent/VAADIN/themes/base/label/label.scss
@@ -1,10 +1,10 @@
-@mixin base-label {
+@mixin base-label($name : v-label) {
 
-.v-label {
+.#{$name} {
 	overflow: hidden;
 }
 
-.v-label.v-has-width {
+.#{$name}.v-has-width {
 	white-space: normal;
 }
 
diff --git a/WebContent/VAADIN/themes/base/link/link.scss b/WebContent/VAADIN/themes/base/link/link.scss
index 710f95d832..455ab2cfd0 100644
--- a/WebContent/VAADIN/themes/base/link/link.scss
+++ b/WebContent/VAADIN/themes/base/link/link.scss
@@ -1,20 +1,20 @@
-@mixin base-link {
+@mixin base-link($name : v-link) {
 
-.v-link {
+.#{$name} {
 	white-space: nowrap;	
 }
-.v-link a {
+.#{$name} a {
 	vertical-align: middle;
 	text-decoration: none;
 }
-.v-link span {
+.#{$name} span {
 	text-decoration: underline;
 	vertical-align: middle;
 }
 .v-disabled a {
 	cursor: default;
 }
-.v-link img {
+.#{$name} img {
 	vertical-align: middle;
 	border:none;
 }
diff --git a/WebContent/VAADIN/themes/base/loginform/loginform.scss b/WebContent/VAADIN/themes/base/loginform/loginform.scss
index d2784fad47..d31af3b9e2 100644
--- a/WebContent/VAADIN/themes/base/loginform/loginform.scss
+++ b/WebContent/VAADIN/themes/base/loginform/loginform.scss
@@ -1,6 +1,6 @@
-@mixin base-loginform {
+@mixin base-loginform($name : v-loginform) {
 
-.v-loginform {
+.#{$name} {
 	height: 140px;
 	width: 200px;
 }
diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.scss b/WebContent/VAADIN/themes/base/menubar/menubar.scss
index 512a8ee1d5..f896e967b5 100644
--- a/WebContent/VAADIN/themes/base/menubar/menubar.scss
+++ b/WebContent/VAADIN/themes/base/menubar/menubar.scss
@@ -1,11 +1,11 @@
-@mixin base-menubar {
+@mixin base-menubar($name : v-menubar) {
 
-.v-menubar {
+.#{$name} {
 	display: inline-block;
 	white-space: nowrap;
 	overflow: hidden;
 }
-.v-menubar .v-menubar-menuitem {
+.#{$name} .#{$name}-menuitem {
 	cursor: default;
 	vertical-align: middle;
 	white-space: nowrap;
@@ -13,36 +13,36 @@
 	display: inline-block;
 	zoom: 1;
 }
-.v-menubar .v-menubar-menuitem-caption .v-icon {
+.#{$name} .#{$name}-menuitem-caption .v-icon {
 	vertical-align: middle;
 	white-space: nowrap;
 }
-.v-menubar-submenu {
+.#{$name}-submenu {
 	background: #fff;
 }
-.v-menubar-menuitem-selected {
+.#{$name}-menuitem-selected {
 	background: #333;
 	color: #fff;
 }
-.v-menubar-submenu .v-menubar-menuitem { 
+.#{$name}-submenu .#{$name}-menuitem { 
 	cursor: default;
 	display: block;
 	position: relative;
 	padding-right: 1.5em;
 }
-.v-menubar-submenu .v-menubar-menuitem-caption {
+.#{$name}-submenu .#{$name}-menuitem-caption {
 	display: block;
 }
-.v-menubar-submenu .v-menubar-menuitem *,
-.v-menubar-submenu .v-menubar-menuitem-caption * {
+.#{$name}-submenu .#{$name}-menuitem *,
+.#{$name}-submenu .#{$name}-menuitem-caption * {
 	white-space: nowrap;
 }
-.v-menubar-submenu-indicator {
+.#{$name}-submenu-indicator {
 	display: none;
 	/* Arial has the most coverage for geometric entity characters */
 	font-family: arial, helvetica, sans-serif;
 }
-.v-menubar-submenu .v-menubar-submenu-indicator {
+.#{$name}-submenu .#{$name}-submenu-indicator {
 	display: block;
 	position: absolute;
 	right: 0;
@@ -50,20 +50,20 @@
 	height: 1em;
 	font-size: 0.9em;
 }
-.v-menubar-menuitem-disabled,
-.v-menubar span.v-menubar-menuitem-disabled:hover,
-.v-menubar span.v-menubar-menuitem-disabled:focus,
-.v-menubar span.v-menubar-menuitem-disabled:active {
+.#{$name}-menuitem-disabled,
+.#{$name} span.#{$name}-menuitem-disabled:hover,
+.#{$name} span.#{$name}-menuitem-disabled:focus,
+.#{$name} span.#{$name}-menuitem-disabled:active {
 	color: #999;
 }
-.v-menubar-more-menuitem {
+.#{$name}-more-menuitem {
 	/* Arial has the most coverage for geometric entity characters */
 	font-family: arial, helvetica, sans-serif;
 }
-.v-menubar-separator {
+.#{$name}-separator {
 	overflow: hidden;
 }
-.v-menubar-separator span {
+.#{$name}-separator span {
 	display: block;
 	text-indent: -9999px;
 	font-size: 1px;
@@ -72,26 +72,26 @@
 	margin: 3px 0 2px;
 	overflow: hidden;
 }
-.v-menubar .v-icon,
-.v-menubar-submenu .v-icon {
+.#{$name} .v-icon,
+.#{$name}-submenu .v-icon {
 	margin-right: 3px;
 }
 
-.v-menubar:focus,
-.v-menubar-popup:focus,
-.v-menubar-popup .popupContent:focus,
-.v-menubar-popup .popupContent .v-menubar-submenu:focus{
+.#{$name}:focus,
+.#{$name}-popup:focus,
+.#{$name}-popup .popupContent:focus,
+.#{$name}-popup .popupContent .#{$name}-submenu:focus{
 	outline: none;	
 }
 /* Checkboxes for checkable/checked menu items */
 /* Checked/unchecked requires combined style selected-(un)checked for IE6 */
-.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/check.gif) no-repeat left;
 }
 
diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss
index e67ac14050..350db1a75f 100644
--- a/WebContent/VAADIN/themes/base/notification/notification.scss
+++ b/WebContent/VAADIN/themes/base/notification/notification.scss
@@ -1,6 +1,6 @@
-@mixin base-notification {
+@mixin base-notification($name : v-Notification) {
 
-.v-Notification {
+.#{$name} {
 	background: #999;
 	color: #fff;
 	cursor: pointer;
@@ -9,33 +9,33 @@
 	max-width:85%;
 	
 }
-.v-Notification h1,
-.v-Notification p,
-.v-Notification-error h1,
-.v-Notification-error p,
-.v-Notification-warning h1,
-.v-Notification-warning p {
+.#{$name} h1,
+.#{$name} p,
+.#{$name}-error h1,
+.#{$name}-error p,
+.#{$name}-warning h1,
+.#{$name}-warning p {
 	display: inline;
 	margin: 0 0.5em 0 0;
 }
-.v-Notification-warning {
+.#{$name}-warning {
 	background: orange;
 }
-.v-Notification-error {
+.#{$name}-error {
 	background: red;
 }
-.v-Notification-tray h1 {
+.#{$name}-tray h1 {
 	display: block;
 }
-.v-Notification-tray p {
+.#{$name}-tray p {
 	display: block;
 }
-.v-Notification-system {
+.#{$name}-system {
 	background-color: red;
 	opacity: .7;
 	filter: alpha(opacity=70);
 }
-.v-Notification-system h1 {
+.#{$name}-system h1 {
 	display: block;
 	margin: 0;
 }
diff --git a/WebContent/VAADIN/themes/base/panel/panel.scss b/WebContent/VAADIN/themes/base/panel/panel.scss
index 202e75c226..46571f8bd5 100644
--- a/WebContent/VAADIN/themes/base/panel/panel.scss
+++ b/WebContent/VAADIN/themes/base/panel/panel.scss
@@ -1,48 +1,48 @@
-@mixin base-panel {
+@mixin base-panel($name : v-panel) {
 
-.v-panel,
-.v-panel-caption,
-.v-panel-content,
-.v-panel-deco,
-.v-panel-light,
-.v-panel-caption-light,
-.v-panel-content-light,
-.v-panel-deco-light {
+.#{$name},
+.#{$name}-caption,
+.#{$name}-content,
+.#{$name}-deco,
+.#{$name}-light,
+.#{$name}-caption-light,
+.#{$name}-content-light,
+.#{$name}-deco-light {
 	outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
 	text-align: left; /* Force default alignment */
 }
-.v-panel-caption .v-errorindicator {
+.#{$name}-caption .v-errorindicator {
 	float: none;
 	display: inline;
 }
-.v-panel-caption .v-icon {
+.#{$name}-caption .v-icon {
 	display: inline;
 	vertical-align: middle;
 }
-.v-panel-caption span {
+.#{$name}-caption span {
 	vertical-align: middle;
 	display: table-row;
 }
-.v-panel-caption {
+.#{$name}-caption {
 	white-space: nowrap;
 	overflow:hidden;
 	font-weight: bold;
 }
-.v-panel-nocaption {
+.#{$name}-nocaption {
 	overflow: hidden;
 }
-.v-panel-content {
+.#{$name}-content {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.v-panel.v-has-width > .v-panel-content {
+.#{$name}.v-has-width > .#{$name}-content {
 	width: 100%;
 }
-.v-panel.v-has-height > .v-panel-content {
+.#{$name}.v-has-height > .#{$name}-content {
 	height: 100%;
 }
-.v-panel-deco {
+.#{$name}-deco {
 }
 
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/popupview/popupview.scss b/WebContent/VAADIN/themes/base/popupview/popupview.scss
index e192d0d147..b52f79db76 100644
--- a/WebContent/VAADIN/themes/base/popupview/popupview.scss
+++ b/WebContent/VAADIN/themes/base/popupview/popupview.scss
@@ -1,14 +1,14 @@
-@mixin base-popupview {
+@mixin base-popupview($name : v-popupview) {
 
-.v-popupview {
+.#{$name} {
 	cursor: pointer;
 	text-decoration: underline;
 	white-space: nowrap;
 }
-.v-popupview-popup {
+.#{$name}-popup {
 	overflow: auto;
 }
-.v-popupview-loading {
+.#{$name}-loading {
 	width: 30px;
 	height: 30px;
 	background: transparent url(../common/img/ajax-loader-medium.gif) no-repeat 50%;
diff --git a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss
index 4c1483886b..7af1ba1f0e 100644
--- a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss
+++ b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss
@@ -1,17 +1,17 @@
-@mixin base-progressindicator {
+@mixin base-progressindicator($name : v-progressindicator) {
 
-.v-progressindicator {
+.#{$name} {
 	width: 150px;
 }
-.v-progressindicator-wrapper {
+.#{$name}-wrapper {
 	height: 7px;
 	border: 1px solid #ddd;
 }
-.v-progressindicator-indicator {
+.#{$name}-indicator {
 	height: 7px;
 	background: #ddd;
 }
-div.v-progressindicator-indeterminate {
+div.#{$name}-indeterminate {
 	height: 20px;
 	width: 20px;
 	background: #fff url(../common/img/ajax-loader-medium.gif) no-repeat 50%;
@@ -20,13 +20,13 @@ div.v-progressindicator-indeterminate {
 	-moz-border-radius: 4px;
 }
 /* Hide obsolete elements in indeterminate mode */
-.v-progressindicator-indeterminate .v-progressindicator-wrapper,
-.v-progressindicator-indeterminate .v-progressindicator-indicator,
-.v-progressindicator-indeterminate-disabled .v-progressindicator-wrapper,
-.v-progressindicator-indeterminate-disabled .v-progressindicator-indicator {
+.#{$name}-indeterminate .#{$name}-wrapper,
+.#{$name}-indeterminate .#{$name}-indicator,
+.#{$name}-indeterminate-disabled .#{$name}-wrapper,
+.#{$name}-indeterminate-disabled .#{$name}-indicator {
 	display: none;
 }
-div.v-progressindicator-indeterminate-disabled {
+div.#{$name}-indeterminate-disabled {
 	height: 20px;
 	width: 20px;
 	background: transparent;
diff --git a/WebContent/VAADIN/themes/base/select/select.scss b/WebContent/VAADIN/themes/base/select/select.scss
index d2d9e8a663..483f0e16b6 100644
--- a/WebContent/VAADIN/themes/base/select/select.scss
+++ b/WebContent/VAADIN/themes/base/select/select.scss
@@ -1,58 +1,58 @@
-@mixin base-select {
+@mixin base-select($name : v-select) {
 
-.v-select {
+.#{$name} {
 	text-align: left;
 }
-.v-select-optiongroup .v-select-option {
+.#{$name}-optiongroup .#{$name}-option {
 	display: block;
 	white-space: nowrap;
 }
-.v-select-optiongroup .v-icon {
+.#{$name}-optiongroup .v-icon {
 	vertical-align: middle;
 	white-space: nowrap;
 	margin: 0 2px;	
 }
-.v-ie .v-select-optiongroup .v-select-option {
+.v-ie .#{$name}-optiongroup .#{$name}-option {
 	zoom: 1;
 }
-.v-select-select {
+.#{$name}-select {
 	display: block;
 }
-.v-select-twincol {
+.#{$name}-twincol {
 	white-space: nowrap;
 }
-.v-select-twincol-options {
+.#{$name}-twincol-options {
 	float: left;
 }
-.v-select-twincol-caption-left {
+.#{$name}-twincol-caption-left {
 	float: left;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.v-select-twincol-selections {
+.#{$name}-twincol-selections {
 	font-weight: bold;
 }
-.v-select-twincol-caption-right {
+.#{$name}-twincol-caption-right {
 	float: right;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.v-select-twincol-buttons {
+.#{$name}-twincol-buttons {
 	float: left;
 	text-align: center;
 }
-.v-select-twincol-buttons .v-select-twincol-deco {
+.#{$name}-twincol-buttons .#{$name}-twincol-deco {
 	clear: both;
 }
-.v-select-twincol .v-textfield {
+.#{$name}-twincol .v-textfield {
 	display: block;
 	float: left;
 	clear: left;
 }
-.v-select-twincol .v-button {
+.#{$name}-twincol .v-button {
 	float: left;
 }
-.v-select-twincol-buttons .v-button {
+.#{$name}-twincol-buttons .v-button {
 	float: none;
 }
 .v-filterselect {
@@ -150,10 +150,10 @@
 /* Error styles (disabled by default)
 
 .v-filterselect-error .v-filterselect-input,
-.v-select-error .v-select-option,
-.v-select-error .v-select-select,
-.v-select-error .v-select-twincol-selections,
-.v-select-error .v-select-twincol-options {
+.#{$name}-error .#{$name}-option,
+.#{$name}-error .#{$name}-select,
+.#{$name}-error .#{$name}-twincol-selections,
+.#{$name}-error .#{$name}-twincol-options {
 	background: #ffaaaa;
 }
 */
@@ -161,10 +161,10 @@
 /*  Required field styles (disabled by default)
    
 .v-filterselect-error .v-filterselect-input,
-.v-select-required .v-select-option,
-.v-select-required .v-select-select,
-.v-select-required .v-select-twincol-selections,
-.v-select-required .v-select-twincol-options {
+.#{$name}-required .#{$name}-option,
+.#{$name}-required .#{$name}-select,
+.#{$name}-required .#{$name}-twincol-selections,
+.#{$name}-required .#{$name}-twincol-options {
 	background: #ffaaaa;
 }
 */
diff --git a/WebContent/VAADIN/themes/base/shadow/shadow.scss b/WebContent/VAADIN/themes/base/shadow/shadow.scss
index 4e1085aa5a..c0c94e7680 100644
--- a/WebContent/VAADIN/themes/base/shadow/shadow.scss
+++ b/WebContent/VAADIN/themes/base/shadow/shadow.scss
@@ -1,31 +1,31 @@
-@mixin base-shadow {
+@mixin base-shadow($name : v-shadow) {
 
-.v-shadow {
+.#{$name} {
 	position: absolute;
 }
 
-.v-shadow .top-left {
+.#{$name} .top-left {
     position: absolute; overflow: hidden;
     top: -3px;             left: -5px;
     width: 10px;         height: 10px;
     background: transparent url(img/top-left.png);
 }
 
-.v-shadow .top {
+.#{$name} .top {
     position: absolute; overflow: hidden;
     top: -3px;             left: 5px;
     height: 10px;           right: 5px;
     background: transparent url(img/top.png);
 }
 
-.v-shadow .top-right {
+.#{$name} .top-right {
     position: absolute; overflow: hidden;
     top: -3px;             right: -5px;
     width: 10px;         height: 10px;
     background: transparent url(img/top-right.png);
 }
 
-.v-shadow .left {
+.#{$name} .left {
     position: absolute; overflow: hidden;
     top: 7px;           left: -5px;
     width: 10px;
@@ -33,14 +33,14 @@
     background: transparent url(img/left.png);
 }
 
-.v-shadow .center {
+.#{$name} .center {
     position: absolute; overflow: hidden;
     top: 7px;           left: 5px;
     bottom: 3px;        right: 5px;
     background: transparent url(img/center.png);
 }
 
-.v-shadow .right {
+.#{$name} .right {
     position: absolute; overflow: hidden;
     top: 7px;           right: -5px;
     width: 10px;
@@ -48,21 +48,21 @@
     background: transparent url(img/right.png);
 }
 
-.v-shadow .bottom-left {
+.#{$name} .bottom-left {
     position: absolute; overflow: hidden;
     bottom: -7px;           left: -5px;
     width: 10px;          height: 10px;
     background: transparent url(img/bottom-left.png);
 }
 
-.v-shadow .bottom {
+.#{$name} .bottom {
     position: absolute; overflow: hidden;
     bottom: -7px;           left: 5px;
     right: 5px;          height: 10px;
     background: transparent url(img/bottom.png);
 }
 
-.v-shadow .bottom-right {
+.#{$name} .bottom-right {
     position: absolute; overflow: hidden;
     bottom: -7px;           right: -5px;
     width: 10px;          height: 10px;
diff --git a/WebContent/VAADIN/themes/base/slider/slider.scss b/WebContent/VAADIN/themes/base/slider/slider.scss
index 0c65bf1e73..bfb4c3b950 100644
--- a/WebContent/VAADIN/themes/base/slider/slider.scss
+++ b/WebContent/VAADIN/themes/base/slider/slider.scss
@@ -1,9 +1,9 @@
-@mixin base-slider {
+@mixin base-slider($name : v-slider) {
 
-.v-slider {
+.#{$name} {
 	margin: 5px 0;
 }
-.v-slider-base {
+.#{$name}-base {
 	/* changing the borders will require adjustments to ISlider.java */
 	height: 2px;
 	border-top: 1px solid #ddd;
@@ -12,7 +12,7 @@
 	border-right: 1px solid #eee;
 	
 }
-.v-slider-handle {
+.#{$name}-handle {
 	background: #aaa;
 	width: 12px;
 	height: 12px;
@@ -20,7 +20,7 @@
 	font-size: 0;
 }
 
-.v-slider-vertical {
+.#{$name}-vertical {
 	width: 2px;
 	height: auto;
 	margin: 0 5px;
@@ -28,19 +28,19 @@
 	border-left: 1px solid #cccfd0;
 	border-right: 1px solid #cccfd0;
 }
-.v-slider-vertical .v-slider-base {
+.#{$name}-vertical .#{$name}-base {
 	width: 2px;
 	border-bottom: 1px solid #eee;
 	border-right: none;
 }
-.v-slider-vertical .v-slider-handle {
+.#{$name}-vertical .#{$name}-handle {
 	width: 12px;
 	height: 12px;
 	font-size: 0;
 	margin-left: -5px;
 }
 
-.v-slider-feedback {
+.#{$name}-feedback {
 	padding: 2px 5px;
 	background: #444;
 	color: #fff;
@@ -56,12 +56,12 @@
 }
 
 /* Disabled by default
-.v-slider-error .v-slider-base {
+.#{$name}-error .#{$name}-base {
 	background: #FFE0E0;
 }
 */
 /* Disabled by default
-.v-slider-required .v-slider-base {
+.#{$name}-required .#{$name}-base {
 	background: #FFE0E0;
 }
 */
diff --git a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss
index 2c3e578b0b..177d443312 100644
--- a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss
+++ b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss
@@ -1,13 +1,13 @@
-@mixin base-splitpanel {
+@mixin base-splitpanel($name : v-splitpanel) {
 
-.v-splitpanel-horizontal,
-.v-splitpanel-vertical {
+.#{$name}-horizontal,
+.#{$name}-vertical {
 	overflow: hidden;
 }
-.v-splitpanel-hsplitter {
+.#{$name}-hsplitter {
 	width: 6px;
 }
-.v-splitpanel-hsplitter div {
+.#{$name}-hsplitter div {
 	width: 6px;
 	position: absolute;
 	top: 0;
@@ -16,19 +16,19 @@
 	cursor: e-resize;
 	cursor: col-resize;
 }
-.v-disabled .v-splitpanel-hsplitter div {
+.v-disabled .#{$name}-hsplitter div {
 	cursor: default;
 }
-.v-splitpanel-vsplitter {
+.#{$name}-vsplitter {
 	height: 6px;
 }
-.v-splitpanel-vsplitter div {
+.#{$name}-vsplitter div {
 	height: 6px;
 	background: #ddd;
 	cursor: s-resize;
 	cursor: row-resize;
 }
-.v-disabled .v-splitpanel-vsplitter div {
+.v-disabled .#{$name}-vsplitter div {
 	cursor: default;
 }
 
diff --git a/WebContent/VAADIN/themes/base/table/table.scss b/WebContent/VAADIN/themes/base/table/table.scss
index fd3c0af0e1..552628bb61 100644
--- a/WebContent/VAADIN/themes/base/table/table.scss
+++ b/WebContent/VAADIN/themes/base/table/table.scss
@@ -1,4 +1,4 @@
-@mixin base-table {
+@mixin base-table($name : v-table) {
 
 /* Table theme building instructions
  * 
@@ -8,82 +8,82 @@
  * these instructions.
  * 
  * Borders in table header and in table body need to be same width
- * - specify vertical borders on .v-table-header-wrap and .v-table-body
+ * - specify vertical borders on .#{$name}-header-wrap and .#{$name}-body
  *
  * Table cells in body:
- *  - padding/border for cells is to be defined for td elements (class name: .v-table-cell-content)
+ *  - padding/border for cells is to be defined for td elements (class name: .#{$name}-cell-content)
  *  - in default theme there are no borders, but they should work. Just set border-right or border-bottom
- *  - no padding or border is allowed for div inside cells (class name: .v-table-cell-wrapper) element
+ *  - no padding or border is allowed for div inside cells (class name: .#{$name}-cell-wrapper) element
  *  - background is allowed for both elements
  *
  * Table headers:
- *  - table cells in header contain .v-table-resizer and 
- *	  .v-table-caption-container div elements, which are both floated to right
- *  - to align header caption to body content resizer width + .v-table-caption-container
+ *  - table cells in header contain .#{$name}-resizer and 
+ *	  .#{$name}-caption-container div elements, which are both floated to right
+ *  - to align header caption to body content resizer width + .#{$name}-caption-container
  *    padding right should be equal to content cells padding-right and border-right.
  *  - Possible cell border in header must be themed into column resizer.
  *
  */
-.v-table {
+.#{$name} {
 	overflow: hidden;
 	text-align: left; /* Force default alignment */
 }
-.v-table-header-wrap {
+.#{$name}-header-wrap {
 	overflow: hidden;
 	border: 1px solid #aaa;
 	border-bottom: none;
 	background: #efefef;
 }
-.v-table-header table,
-.v-table-table {
+.#{$name}-header table,
+.#{$name}-table {
 	border-spacing: 0;
 	border-collapse: separate;
 	margin: 0;
 	padding: 0;
 	border: 0;
 }
-.v-table-header td {
+.#{$name}-header td {
 	padding: 0;
 }
-.v-table-header-cell,
-.v-table-header-cell-asc,
-.v-table-header-cell-desc {
+.#{$name}-header-cell,
+.#{$name}-header-cell-asc,
+.#{$name}-header-cell-desc {
 	cursor: pointer;
 }
 
-.v-table.v-disabled .v-table-header-cell,
-.v-table.v-disabled .v-table-header-cell-asc,
-.v-table.v-disabled .v-table-header-cell-desc {
+.#{$name}.v-disabled .#{$name}-header-cell,
+.#{$name}.v-disabled .#{$name}-header-cell-asc,
+.#{$name}.v-disabled .#{$name}-header-cell-desc {
 	cursor: default;
 }
 
-.v-table-footer-wrap {
+.#{$name}-footer-wrap {
 	overflow: hidden;
 	border: 1px solid #aaa;
 	border-top: none;
 	background: #efefef;
 }
-.v-table-footer table {
+.#{$name}-footer table {
 	border-spacing: 0;
 	border-collapse: collapse;
 	margin: 0;
 	padding: 0;
 	border: 0;
 }
-.v-table-footer td {
+.#{$name}-footer td {
 	padding: 0;
 	border-right: 1px solid #aaa;
 }
-.v-table-footer-cell {
+.#{$name}-footer-cell {
 	cursor: pointer;
 }
-.v-table-footer-container {	
+.#{$name}-footer-container {	
 	float:right;	
 	padding-right:6px;
 	overflow:hidden;
 	white-space:nowrap;
 }
-.v-table-resizer {
+.#{$name}-resizer {
 	display: block;
 	height: 1.2em;
 	float: right;
@@ -93,53 +93,53 @@
 	width: 1px;
 	overflow: hidden;
 }
-.v-table.v-disabled .v-table-resizer {
+.#{$name}.v-disabled .#{$name}-resizer {
 	cursor: default;	
 }
-.v-table-caption-container {
+.#{$name}-caption-container {
 	overflow: hidden;
 	white-space: nowrap;
 	margin-left: 6px;
 }
-.v-table-caption-container-align-right {
+.#{$name}-caption-container-align-right {
 	float: right;
 }
-.v-table-sort-indicator {
+.#{$name}-sort-indicator {
 	width: 0px;
 	height: 1.2em;
 	float: right;
 }
-.v-table-header-cell-asc .v-table-sort-indicator,
-.v-table-header-cell-desc .v-table-sort-indicator {
+.#{$name}-header-cell-asc .#{$name}-sort-indicator,
+.#{$name}-header-cell-desc .#{$name}-sort-indicator {
 	width: 16px;
 	height: 1.2em;
 	float: right;
 }		
-.v-table-header-cell-asc .v-table-sort-indicator {
+.#{$name}-header-cell-asc .#{$name}-sort-indicator {
 	background: transparent url(../common/img/sprites.png) no-repeat right 6px;
 }
-.v-table-header-cell-desc .v-table-sort-indicator {
+.#{$name}-header-cell-desc .#{$name}-sort-indicator {
 	background: transparent url(../common/img/sprites.png) no-repeat right -10px;
 }
-.v-table-caption-container-align-center {
+.#{$name}-caption-container-align-center {
 	text-align: center;
 }
-.v-table-caption-container-align-right {
+.#{$name}-caption-container-align-right {
 	text-align: right;
 }
-.v-table-caption-container .v-icon,
-.v-table-header-drag .v-icon {
+.#{$name}-caption-container .v-icon,
+.#{$name}-header-drag .v-icon {
 	vertical-align: middle;
 }
-.v-table-body {
+.#{$name}-body {
 	border: 1px solid #aaa;
 }
-.v-table-row-spacer {
+.#{$name}-row-spacer {
 	height: 10px;
 	overflow: hidden; /* IE hack to allow < one line height divs */
 }
-.v-table-row,
-.v-table-row-odd {
+.#{$name}-row,
+.#{$name}-row-odd {
     background: #fff;
 	border: 0;
 	margin: 0;
@@ -147,36 +147,36 @@
 	cursor: pointer;
 }
 
-.v-table-generated-row {
+.#{$name}-generated-row {
 	   background: #efefef;
 }
 
-.v-table-body-noselection .v-table-row,
-.v-table-body-noselection .v-table-row-odd {
+.#{$name}-body-noselection .#{$name}-row,
+.#{$name}-body-noselection .#{$name}-row-odd {
 	cursor: default;
 }
-.v-table .v-selected {
+.#{$name} .v-selected {
 	background: #999;
 	color: #fff;
 }
-.v-table-cell-content {
+.#{$name}-cell-content {
 	white-space: nowrap;
 	overflow: hidden;
 	padding: 0 6px;
 	border-right: 1px solid #aaa;
 }
-.v-table-cell-wrapper {
+.#{$name}-cell-wrapper {
 	/* Do not specify any margins, paddings or borders here */
 	white-space: nowrap;
 	overflow: hidden;
 }
-.v-table-cell-wrapper-align-center {
+.#{$name}-cell-wrapper-align-center {
 	text-align: center;
 }
-.v-table-cell-wrapper-align-right {
+.#{$name}-cell-wrapper-align-right {
 	text-align: right;
 }
-.v-table-column-selector {
+.#{$name}-column-selector {
 	float: right;
 	background: transparent url(../common/img/sprites.png) no-repeat 4px -37px;
 	margin: -1.2em 0 0 0;
@@ -185,10 +185,10 @@
 	position: relative; /* hide this from IE, it works without it */
 	cursor: pointer;
 }
-.v-table.v-disabled .v-table-column-selector {
+.#{$name}.v-disabled .#{$name}-column-selector {
 	cursor: default;
 }
-.v-table-focus-slot-left {
+.#{$name}-focus-slot-left {
 	border-left: 2px solid #999;
 	float: none;
 	margin-bottom: -1.2em;
@@ -196,11 +196,11 @@
 	background: transparent;
 	border-right: 1px solid #aaa;
 }
-.v-table-focus-slot-right {
+.#{$name}-focus-slot-right {
 	border-right: 2px solid #999;
 	margin-left: -2px;
 }
-.v-table-header-drag {
+.#{$name}-header-drag {
 	position: absolute;
 	background: #efefef;
 	border: 1px solid #eee;
@@ -209,30 +209,30 @@
 	margin-top: 20px;
 	z-index: 30000;
 }
-.v-table-header-drag .v-icon {
+.#{$name}-header-drag .v-icon {
 	vertical-align: middle;
 }
-.v-table-scrollposition {
+.#{$name}-scrollposition {
 	width: 160px;
 	background: #eee;
 	border: 1px solid #aaa;
 }
-.v-table-scrollposition span {
+.#{$name}-scrollposition span {
 	display: block;
 	text-align: center;
 }
-.v-table-body:focus,
-.v-table-body-wrapper:focus {
+.#{$name}-body:focus,
+.#{$name}-body-wrapper:focus {
 	outline: none;
 }
-.v-table-body.focused {
+.#{$name}-body.focused {
 	border-color: #388ddd;
 }
-.v-table-focus .v-table-cell-content {
+.#{$name}-focus .#{$name}-cell-content {
 	border-top: 1px dotted #0066bd;
 	border-bottom: 1px dotted #0066bd;
 }
-.v-table-focus .v-table-cell-wrapper {
+.#{$name}-focus .#{$name}-cell-wrapper {
 	margin-top: -1px;
 	margin-bottom: -1px;
 }
@@ -246,26 +246,26 @@
 /*************************************
  * Drag'n'drop styles
  *************************************/
-.v-table-drag .v-table-body {
+.#{$name}-drag .#{$name}-body {
 	border-color: #1d9dff;
 }
-.v-table-row-drag-middle .v-table-cell-content {
+.#{$name}-row-drag-middle .#{$name}-cell-content {
 	background-color: #bcdcff;
 }
-.v-table-row-drag-top .v-table-cell-content {
+.#{$name}-row-drag-top .#{$name}-cell-content {
 	border-top: 2px solid #1d9dff;
 }
-.v-table-row-drag-top .v-table-cell-wrapper {
+.#{$name}-row-drag-top .#{$name}-cell-wrapper {
 	margin-top: -2px; /* compensate the space consumed by border hint */
 }
-.v-table-row-drag-bottom .v-table-cell-content {
+.#{$name}-row-drag-bottom .#{$name}-cell-content {
 	border-bottom: 2px solid #1d9dff;
 }
-.v-table-row-drag-bottom .v-table-cell-wrapper {
+.#{$name}-row-drag-bottom .#{$name}-cell-wrapper {
 	margin-bottom: -2px; /* compensate the space consumed by border hint */
 }
-.v-table-row-drag-top .v-table-cell-content:first-child:before,
-.v-table-row-drag-bottom .v-table-cell-content:first-child:after {
+.#{$name}-row-drag-top .#{$name}-cell-content:first-child:before,
+.#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after {
 	display: block;
 	
 	position: absolute;
@@ -275,8 +275,8 @@
 	margin-left: -6px;
 	background: transparent url(../common/img/drag-slot-dot.png);
 }
-.v-ff .v-table-row-drag-bottom .v-table-cell-content:first-child:after,
-.v-ie .v-table-row-drag-bottom .v-table-cell-content:first-child:after {
+.v-ff .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after,
+.v-ie .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after {
 	margin-top: -2px;
 }
 
diff --git a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss
index c58c25be58..37dae131e1 100644
--- a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss
+++ b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss
@@ -1,12 +1,12 @@
-@mixin base-tabsheet {
+@mixin base-tabsheet($name : v-tabsheet) {
 
-.v-tabsheet,
-.v-tabsheet-content,
-.v-tabsheet-deco {
+.#{$name},
+.#{$name}-content,
+.#{$name}-deco {
 	outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
 	text-align: left; /* Force default alignment */
 }
-.v-tabsheet-tabs {
+.#{$name}-tabs {
 	empty-cells: hide;
 	border-collapse: collapse;
 	margin: 0;
@@ -15,55 +15,55 @@
 	width: 100%;
 	overflow:hidden;
 }
-.v-tabsheet-tabitemcell:focus {
+.#{$name}-tabitemcell:focus {
 	outline: none;
 }
-.v-tabsheet-tabitemcell,
-.v-tabsheet-spacertd {
+.#{$name}-tabitemcell,
+.#{$name}-spacertd {
 	margin: 0;
 	padding: 0;
 	vertical-align: bottom;
 }
-.v-tabsheet-spacertd {
+.#{$name}-spacertd {
 	width: 100%;
 }
-.v-tabsheet-spacertd div {
+.#{$name}-spacertd div {
 	border-left: 1px solid #aaa;
 	border-bottom: 1px solid #aaa;
 	height: 1em;
 	padding: 0.2em 0;
 }
-.v-tabsheet-hidetabs .v-tabsheet-tabcontainer {
+.#{$name}-hidetabs .#{$name}-tabcontainer {
 	display: none;
 }
-.v-tabsheet-scroller {
+.#{$name}-scroller {
 	white-space: nowrap;
 	text-align: right;
 	margin-top: -1em;
 }
-.v-disabled .v-tabsheet-scroller {
+.v-disabled .#{$name}-scroller {
 	display: none;
 }
-.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: 1px solid #aaa;
 	background: #fff;
 	width: 12px;
 	height: 1em;
 	cursor: pointer;
 }
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled {
+.#{$name}-scrollerPrev-disabled,
+.#{$name}-scrollerNext-disabled {
 	opacity: 0.5;
 	cursor: default;
 }
-.v-tabsheet-tabs .v-caption,
-.v-tabsheet-tabs .v-caption span {
+.#{$name}-tabs .v-caption,
+.#{$name}-tabs .v-caption span {
 	white-space: nowrap;
 }
-.v-tabsheet-caption-close {
+.#{$name}-caption-close {
 	display: inline;
 	display: inline-block;
 	zoom: 1;
@@ -79,49 +79,49 @@
 	-moz-user-select: none;
 	-webkit-user-select: none;
 }
-.v-tabsheet .v-disabled .v-tabsheet-caption-close {
+.#{$name} .v-disabled .#{$name}-caption-close {
 	cursor: default;
 	visibility: hidden;
 }
-.v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
+.#{$name}-tabitem:hover .#{$name}-caption-close {
 	visibility: visible;
 }
-.v-tabsheet-tabitem {
+.#{$name}-tabitem {
 	border: 1px solid #aaa;
 	border-right: none;
 	cursor: pointer;
 	padding: 0.2em 0.5em;
 }
-.v-tabsheet-tabitem .v-caption {
+.#{$name}-tabitem .v-caption {
 	cursor: inherit;
 }
-.v-tabsheet.v-disabled .v-tabsheet-tabitem,
-.v-tabsheet-tabitemcell-disabled .v-tabsheet-tabitem {
+.#{$name}.v-disabled .#{$name}-tabitem,
+.#{$name}-tabitemcell-disabled .#{$name}-tabitem {
 	cursor: default;
 }
-.v-tabsheet-tabitem-selected {
+.#{$name}-tabitem-selected {
 	cursor: default;
 	border-bottom-color: #fff;
 }
-.v-tabsheet-tabitem-selected .v-caption {
+.#{$name}-tabitem-selected .v-caption {
 	cursor: default;
 }
-.v-tabsheet-content {
+.#{$name}-content {
 	border: 1px solid #aaa;
 	/* Vertical borders are not supported, use v-tabsheet-tabcontainer and v-tabsheet-deco to present these borders */
 	border-top: none;
 	border-bottom: none;
 	position: relative;
 }
-.v-tabsheet-deco {
+.#{$name}-deco {
 	height: 1px;
 	background: #aaa;
 	overflow: hidden;
 }
-.v-tabsheet-hidetabs .v-tabsheet-content {
+.#{$name}-hidetabs .#{$name}-content {
 	border: none;
 }
-.v-tabsheet-hidetabs .v-tabsheet-deco {
+.#{$name}-hidetabs .#{$name}-deco {
 	height: 0;
 }
 
diff --git a/WebContent/VAADIN/themes/base/textfield/textfield.scss b/WebContent/VAADIN/themes/base/textfield/textfield.scss
index dc6a4d9aa3..bb6765a60d 100644
--- a/WebContent/VAADIN/themes/base/textfield/textfield.scss
+++ b/WebContent/VAADIN/themes/base/textfield/textfield.scss
@@ -1,23 +1,23 @@
 // textfield-normal.css
 
-@mixin base-textfield {
+@mixin base-textfield($name : v-textfield) {
 
-.v-textfield {
+.#{$name} {
 	text-align: left; /* Force default alignment */
 }
 .v-textarea {
 	resize: none;
 	white-space: pre-wrap;
 }
-.v-textfield-focus,
+.#{$name}-focus,
 .v-textarea-focus {
 }
-input.v-textfield-prompt,
+input.#{$name}-prompt,
 textarea.v-textarea-prompt {
 	color: #999;
 	font-style: italic;
 }
-input.v-textfield-readonly,
+input.#{$name}-readonly,
 textarea.v-textarea-readonly {
 	background: transparent;
 	border: none;
@@ -27,20 +27,20 @@ input.v-disabled,
 textarea.v-disabled {
 	resize: none;
 }
-input.v-textfield-readonly:focus,
+input.#{$name}-readonly:focus,
 textarea.v-textarea-readonly:focus {
 	outline: none;
 }
 /* Disabled by default
 .v-textarea-error,
-.v-textfield-error,
+.#{$name}-error,
 .v-richtextarea-error iframe.gwt-RichTextArea {
 	background: #FFE0E0;	
 }
 */
 /* Disabled by default
 .v-textarea-required,
-.v-textfield-required,
+.#{$name}-required,
 .v-richtextarea-required iframe.gwt-RichTextArea {
 	background: #FFE0E0;	
 }
diff --git a/WebContent/VAADIN/themes/base/tree/tree.scss b/WebContent/VAADIN/themes/base/tree/tree.scss
index 2e34053ad5..2eb2c5908b 100644
--- a/WebContent/VAADIN/themes/base/tree/tree.scss
+++ b/WebContent/VAADIN/themes/base/tree/tree.scss
@@ -1,62 +1,62 @@
-@mixin base-tree {
+@mixin base-tree($name : v-tree) {
 
 // tree-default.css
 
-.v-tree {
+.#{$name} {
 	text-align: left; /* Force default alignment */
 	overflow: hidden;
 	padding: 1px 0;
 	outline: none;
 }
-.v-tree-node {
+.#{$name}-node {
 	background: transparent url(../common/img/sprites.png) no-repeat 5px -37px;
 	padding: 1px 0;
 }
-.v-tree-node-caption:focus {
+.#{$name}-node-caption:focus {
 	outline: none;
 }
-div.v-tree-node-leaf {
+div.#{$name}-node-leaf {
 	background: transparent;
 }
-.v-tree-node-expanded {
+.#{$name}-node-expanded {
 	background: transparent url(../common/img/sprites.png) no-repeat -5px -10px;
 }
-.v-tree-node-caption {
+.#{$name}-node-caption {
 	margin-left: 1em;
 }
-.v-tree-node span {
+.#{$name}-node span {
 	cursor: pointer;
 }
-.v-tree-node-caption div {
+.#{$name}-node-caption div {
 	white-space: nowrap;
 }
-.v-tree-node-caption span,
-.v-tree-node-caption .v-icon {
+.#{$name}-node-caption span,
+.#{$name}-node-caption .v-icon {
 	vertical-align: middle;
 }
-.v-tree-node-selected span {
+.#{$name}-node-selected span {
 	background: #999;
 	color: #fff;
 }
-.v-tree-node-children {
+.#{$name}-node-children {
 	padding-left: 1em;
 }
 
 // Drag'n'drop styles
 
-.v-tree .v-tree-node-drag-top {
+.#{$name} .#{$name}-node-drag-top {
 	border-top: 2px solid #1d9dff;
 	margin-top: -1px;
 	padding-top: 0;
 }
-.v-tree .v-tree-node-drag-bottom {
+.#{$name} .#{$name}-node-drag-bottom {
 	border-bottom: 2px solid #1d9dff;
 	margin-bottom: -1px;
 	padding-bottom: 0;
 }
-.v-tree .v-tree-node-drag-top:before,
-.v-tree .v-tree-node-drag-bottom:after,
-.v-tree .v-tree-node-caption-drag-center:after {
+.#{$name} .#{$name}-node-drag-top:before,
+.#{$name} .#{$name}-node-drag-bottom:after,
+.#{$name} .#{$name}-node-caption-drag-center:after {
 	display: block;
 	
 	position: absolute;
@@ -65,23 +65,23 @@ div.v-tree-node-leaf {
 	margin-top: -4px;
 	background: transparent url(../common/img/drag-slot-dot.png);
 }
-.v-tree .v-tree-node-drag-bottom:after {
+.#{$name} .#{$name}-node-drag-bottom:after {
 	margin-top: -2px;
 }
-.v-tree .v-tree-node-caption-drag-center:after {
+.#{$name} .#{$name}-node-caption-drag-center:after {
 	margin-left: 14px;
 }
-.v-ff .v-tree .v-tree-node-caption-drag-center:after,
-.v-ie .v-tree .v-tree-node-caption-drag-center:after {
+.v-ff .#{$name} .#{$name}-node-caption-drag-center:after,
+.v-ie .#{$name} .#{$name}-node-caption-drag-center:after {
 	margin-top: -2px;
 }
-.v-tree .v-tree-node-drag-top {
+.#{$name} .#{$name}-node-drag-top {
 	background-position: 5px -38px;
 }
-.v-tree .v-tree-node-drag-top.v-tree-node-expanded {
+.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded {
 	background-position: -5px -11px;
 }
-.v-tree .v-tree-node-caption-drag-center div {
+.#{$name} .#{$name}-node-caption-drag-center div {
 	border: 2px solid #1d9dff;
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
@@ -89,51 +89,51 @@ div.v-tree-node-leaf {
 	margin: -2px 2px -2px -2px;
 	background-color: #bcdcff;
 }
-.v-tree .v-tree-node-caption-drag-center div {
+.#{$name} .#{$name}-node-caption-drag-center div {
 	background-color: rgba(169,209,255,.6);
 }
-.v-tree .v-tree-node-caption-drag-center div,
-.v-tree .v-tree-node-drag-top,
-.v-tree .v-tree-node-drag-bottom {
+.#{$name} .#{$name}-node-caption-drag-center div,
+.#{$name} .#{$name}-node-drag-top,
+.#{$name} .#{$name}-node-drag-bottom {
 	border-color: rgba(0,109,232,.6);
 }
 
 // tree-connectors.css
 
-.v-tree-connectors {
+.#{$name}-connectors {
 	// Make item caption height an even number (so that the connector dots overlap nicely)
-	.v-tree-node-caption {
+	.#{$name}-node-caption {
 		padding-top: 1px;
 	}
-	.v-tree-node {
+	.#{$name}-node {
 		background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
 	}
-	.v-tree-node-expanded {
+	.#{$name}-node-expanded {
 		background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
 	}
-	.v-tree-node-last {
+	.#{$name}-node-last {
 		background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
 	}
-	.v-tree-node-expanded.v-tree-node-last {
+	.#{$name}-node-expanded.#{$name}-node-last {
 		background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
 	}
-	.v-tree-node-leaf {
+	.#{$name}-node-leaf {
 		background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
 	}
-	.v-tree-node-leaf-last {
+	.#{$name}-node-leaf-last {
 		background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
 	}
-	.v-tree-node-children {
+	.#{$name}-node-children {
 		background: transparent url(img/connector.png) repeat-y 2px 0;
 	}
-	.v-tree-node-children-last {
+	.#{$name}-node-children-last {
 		background: transparent;
 	}
-	.v-tree-node-drag-top,
-	.v-tree-node-expanded.v-tree-node-drag-top {
+	.#{$name}-node-drag-top,
+	.#{$name}-node-expanded.#{$name}-node-drag-top {
 		background-position: 2px -53px;
 	}
-	.v-tree-node-drag-top.v-tree-node-leaf {
+	.#{$name}-node-drag-top.#{$name}-node-leaf {
 		background-position: 2px 50%;
 	}
 }
diff --git a/WebContent/VAADIN/themes/base/treetable/treetable.scss b/WebContent/VAADIN/themes/base/treetable/treetable.scss
index 30e6b9ccbd..dfb4628794 100644
--- a/WebContent/VAADIN/themes/base/treetable/treetable.scss
+++ b/WebContent/VAADIN/themes/base/treetable/treetable.scss
@@ -1,6 +1,6 @@
-@mixin base-treetable {
+@mixin base-treetable($name : v-treetable) {
 
-.v-treetable-treespacer {
+.#{$name}-treespacer {
     display: inline-block;
     background: transparent;
     height: 10px;
@@ -11,58 +11,58 @@
     top: 5px;
 }
 
-.v-treetable-node-closed {
+.#{$name}-node-closed {
     background: url(../treetable/img/arrow-right.png) right top no-repeat;
 }
 
-.v-treetable-node-open {
+.#{$name}-node-open {
     background: url(../treetable/img/arrow-down.png) right top no-repeat;
 }
 
-.v-treetable .v-checkbox {
+.#{$name} .v-checkbox {
 	display: inline-block;
 	padding-bottom: 4px;
 }
 
-.v-treetable .v-table-row .v-table-cell-content,
-.v-treetable .v-table-row-odd .v-table-cell-content {
+.#{$name} .v-table-row .v-table-cell-content,
+.#{$name} .v-table-row-odd .v-table-cell-content {
     position: relative;
     z-index: 10;
 }
 
-.v-treetable .v-table-cell-wrapper {
+.#{$name} .v-table-cell-wrapper {
 	position: relative;
 }
 
-.v-treetable .v-table-body .v-table-table .v-table-row-animating {
+.#{$name} .v-table-body .v-table-table .v-table-row-animating {
 	zoom:1;
 	z-index:1;
 }
 
-.v-treetable .v-table-body .v-table-table .v-table-row-animating,
-.v-treetable .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content {
+.#{$name} .v-table-body .v-table-table .v-table-row-animating,
+.#{$name} .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content {
     background:transparent;
 }
 
-.v-treetable-animation-clone {
+.#{$name}-animation-clone {
 	border-spacing: 0;
 	zoom:1;
 }
 
-div.v-treetable-animation-clone-wrapper {
+div.#{$name}-animation-clone-wrapper {
 	position: absolute;
     z-index: 2;
     background-color:#fff;
 }
 
-div.v-treetable-animation-clone-wrapper table.v-treetable-animation-clone {
+div.#{$name}-animation-clone-wrapper table.#{$name}-animation-clone {
     background-color:#fff;
 }
 
-div table.v-treetable-animation-clone tr.v-table-row,
-div table.v-treetable-animation-clone tr.v-table-row-odd,
-div table.v-treetable-animation-clone tr.v-table-row td.v-table-cell-content,
-div table.v-treetable-animation-clone tr.v-table-row-odd td.v-table-cell-content {
+div table.#{$name}-animation-clone tr.v-table-row,
+div table.#{$name}-animation-clone tr.v-table-row-odd,
+div table.#{$name}-animation-clone tr.v-table-row td.v-table-cell-content,
+div table.#{$name}-animation-clone tr.v-table-row-odd td.v-table-cell-content {
 	visibility: visible;
 }
 
diff --git a/WebContent/VAADIN/themes/base/upload/upload.scss b/WebContent/VAADIN/themes/base/upload/upload.scss
index e5d94ce678..a992f95f06 100644
--- a/WebContent/VAADIN/themes/base/upload/upload.scss
+++ b/WebContent/VAADIN/themes/base/upload/upload.scss
@@ -1,22 +1,22 @@
-@mixin base-upload {
+@mixin base-upload($name : v-upload) {
 
-.v-upload {
+.#{$name} {
 	white-space: nowrap;
 }
 
 
-.v-upload-immediate {
+.#{$name}-immediate {
 	position: relative;
 	margin: 0;
 	overflow: hidden;
 }
 
-.v-ff .v-upload-immediate,
-.v-op .v-upload-immediate {
+.v-ff .#{$name}-immediate,
+.v-op .#{$name}-immediate {
 	display: inline-block;
 }
 
-.v-upload-immediate input {
+.#{$name}-immediate input {
 	opacity: 0;
 	filter: alpha(opacity=0);
 	z-index: 2;
@@ -28,7 +28,7 @@
 	background: transparent;
 }
 
-.v-upload-immediate button {
+.#{$name}-immediate button {
 	position: relative;
 	left: 0;
 	top: 0;
diff --git a/WebContent/VAADIN/themes/base/widget/widget.scss b/WebContent/VAADIN/themes/base/widget/widget.scss
index 215c276142..a632e20d09 100644
--- a/WebContent/VAADIN/themes/base/widget/widget.scss
+++ b/WebContent/VAADIN/themes/base/widget/widget.scss
@@ -1,6 +1,6 @@
-@mixin base-widget {
+@mixin base-widget($name : v-widget) {
 
-.v-widget {
+.#{$name} {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
diff --git a/WebContent/VAADIN/themes/base/window/window.scss b/WebContent/VAADIN/themes/base/window/window.scss
index 33e54b046f..486906ea6d 100644
--- a/WebContent/VAADIN/themes/base/window/window.scss
+++ b/WebContent/VAADIN/themes/base/window/window.scss
@@ -1,29 +1,29 @@
-@mixin base-window {
+@mixin base-window($name : v-window) {
 
-.v-window {
+.#{$name} {
 	background: #fff;
 }
-.v-window-contents {
+.#{$name}-contents {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
 
-.v-window.v-has-width > div.popupContent,
-.v-window.v-has-width .v-window-wrap,
-.v-window.v-has-width .v-window-contents,
-.v-window.v-has-width .v-window-contents > div {
+.#{$name}.v-has-width > div.popupContent,
+.#{$name}.v-has-width .#{$name}-wrap,
+.#{$name}.v-has-width .#{$name}-contents,
+.#{$name}.v-has-width .#{$name}-contents > div {
 	width: 100%;
 }
 
-.v-window.v-has-height > div.popupContent,
-.v-window.v-has-height .v-window-wrap,
-.v-window.v-has-height .v-window-contents,
-.v-window.v-has-height .v-window-contents > div {
+.#{$name}.v-has-height > div.popupContent,
+.#{$name}.v-has-height .#{$name}-wrap,
+.#{$name}.v-has-height .#{$name}-contents,
+.#{$name}.v-has-height .#{$name}-contents > div {
 	height: 100%;
 }
 
-.v-window-outerheader {
+.#{$name}-outerheader {
 	padding: 0.3em 1em;
 	height: 1.6em;
 	position: relative;
@@ -32,35 +32,35 @@
 	box-sizing: border-box;
 }
 
-.v-window-outerheader,
-.v-window-draggingCurtain {
+.#{$name}-outerheader,
+.#{$name}-draggingCurtain {
  	cursor: move;	
 }
-.v-window-header {
+.#{$name}-header {
 	font-weight: bold;
 }
 /* A more specific selector to make sure padding isn't so easily overridden */
-div.v-window-header {
+div.#{$name}-header {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	-ms-text-overflow: ellipsis;
 	overflow: hidden;
 	padding: 0;
 }
-.v-window-header .v-icon {
+.#{$name}-header .v-icon {
 	vertical-align: middle; /* This has to be 'middle', not 'bottom', to allow larger icons than 16px */
 }
-.v-window-contents > div {
+.#{$name}-contents > div {
 	outline: none;
 }
-.v-window-footer {
+.#{$name}-footer {
 	overflow: hidden;
 	zoom: 1;
 	height: 10px;
 	position: relative;
 	cursor: move;
 }
-.v-window-resizebox {
+.#{$name}-resizebox {
 	width: 10px;
 	height: 10px;
 	background: #ddd;
@@ -69,19 +69,19 @@ div.v-window-header {
 	right: 0;
 }
 
-.v-window-resizebox,
-.v-window-resizingCurtain {
+.#{$name}-resizebox,
+.#{$name}-resizingCurtain {
 	cursor: se-resize;
 }
 
-.v-window div.v-window-footer-noresize {
+.#{$name} div.#{$name}-footer-noresize {
 	height: 0;
 }
-.v-window-resizebox-disabled {
+.#{$name}-resizebox-disabled {
 	cursor: default;
 	display: none;
 }
-.v-window-closebox {
+.#{$name}-closebox {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -91,7 +91,7 @@ div.v-window-header {
 	cursor: pointer;
 	overflow: hidden;
 }
-.v-window-modalitycurtain {
+.#{$name}-modalitycurtain {
 	top: 0;
 	left: 0;
 	background: #999;