Change sass compoent @mixin parameter from $name to $primaryStyleName, fixes #10294

Change-Id: I548fdd3b0295db980bc4d769826e7c149ec0b3b3

34 files changed, 517 insertions, 517 deletions

diff --git a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss
index c8bb57365f..4f007de9af 100644
--- a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss
+++ b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss
@@ -1,18 +1,18 @@
-@mixin base-absolutelayout($name : v-absolutelayout) {
+@mixin base-absolutelayout($primaryStyleName : v-absolutelayout) {
 
-.#{$name}-wrapper {
+.#{$primaryStyleName}-wrapper {
 	position: absolute;
 	overflow: hidden;
 }
-.#{$name}-margin, .#{$name}-canvas {
+.#{$primaryStyleName}-margin, .#{$primaryStyleName}-canvas {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.#{$name}.v-has-height > div, .#{$name}.v-has-height > div > div {
+.#{$primaryStyleName}.v-has-height > div, .#{$primaryStyleName}.v-has-height > div > div {
 	height: 100%;
 }
-.#{$name}.v-has-width > div, .#{$name}.v-has-width > div > div {
+.#{$primaryStyleName}.v-has-width > div, .#{$primaryStyleName}.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 37a5973437..212e386e29 100644
--- a/WebContent/VAADIN/themes/base/button/button.scss
+++ b/WebContent/VAADIN/themes/base/button/button.scss
@@ -1,9 +1,9 @@
-@mixin base-button($name : v-button) {
+@mixin base-button($primaryStyleName : v-button) {
 
 /*
  * Default button (more customizable)
  * -------------------------------------- */
-.#{$name} {
+.#{$primaryStyleName} {
 	display: inline-block;
 	zoom: 1;
 	text-align: center !important;
@@ -26,12 +26,12 @@
 	box-sizing: border-box;
 }
 
-.#{$name}.v-disabled {
+.#{$primaryStyleName}.v-disabled {
 	cursor: default;
 }
 
-.#{$name}-wrap,
-.#{$name}-caption {
+.#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-caption {
 	vertical-align: baseline;
 	white-space: nowrap;
 	font: inherit;
@@ -39,13 +39,13 @@
 	line-height: normal;
 	}
 
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
 	vertical-align: middle;
 	margin-right: 3px;
 	border: none;
 	}
 
-.#{$name} .v-errorindicator {
+.#{$primaryStyleName} .v-errorindicator {
 	display: inline-block;
 	zoom: 1;
 	vertical-align: middle;
@@ -53,7 +53,7 @@
 }
 
 /* Link style (we really should deprecate this) */
-.#{$name}-link {
+.#{$primaryStyleName}-link {
 	border: none;
 	text-align: left !important;
 	background: transparent;
@@ -66,11 +66,11 @@
 }
 
 /* Inset Safari focus outline a bit */
-.v-sa .#{$name}-link:focus{
+.v-sa .#{$primaryStyleName}-link:focus{
 	outline-offset: -3px;
 	}
 
-.#{$name}-link .#{$name}-caption {
+.#{$primaryStyleName}-link .#{$primaryStyleName}-caption {
 	text-decoration: underline;
 	color: inherit;
 	text-align: left;
diff --git a/WebContent/VAADIN/themes/base/button/checkbox.scss b/WebContent/VAADIN/themes/base/button/checkbox.scss
index 9222e76975..cc6143dbc1 100644
--- a/WebContent/VAADIN/themes/base/button/checkbox.scss
+++ b/WebContent/VAADIN/themes/base/button/checkbox.scss
@@ -1,21 +1,21 @@
-@mixin base-checkbox($name : v-checkbox) {
+@mixin base-checkbox($primaryStyleName : v-checkbox) {
 
- .#{$name} {
+ .#{$primaryStyleName} {
  	display: block;
  }
 
-.#{$name},
-.#{$name} label,
-.#{$name} input,
-.#{$name} .v-icon {
+.#{$primaryStyleName},
+.#{$primaryStyleName} label,
+.#{$primaryStyleName} input,
+.#{$primaryStyleName} .v-icon {
 	vertical-align: middle;
 	white-space: nowrap;
 }
 
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
 	margin: 0 2px;
 }
-.#{$name} .v-errorindicator {
+.#{$primaryStyleName} .v-errorindicator {
 	float: none;
 	display: inline;
 	display: inline-block;
@@ -24,12 +24,12 @@
 
 
 /* Disabled by default
-.#{$name}-error {
+.#{$primaryStyleName}-error {
 	background: #ffe0e0;
 }
 */
 /* Disabled by default
-.#{$name}-required {
+.#{$primaryStyleName}-required {
 	background: #ffe0e0;
 }
 */
diff --git a/WebContent/VAADIN/themes/base/button/nativebutton.scss b/WebContent/VAADIN/themes/base/button/nativebutton.scss
index cccc51ff7b..724316a34d 100644
--- a/WebContent/VAADIN/themes/base/button/nativebutton.scss
+++ b/WebContent/VAADIN/themes/base/button/nativebutton.scss
@@ -1,13 +1,13 @@
-@mixin base-nativebutton($name : v-nativebutton) {
+@mixin base-nativebutton($primaryStyleName : v-nativebutton) {
 
 
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
 	vertical-align: middle;
 	margin-right: 3px;
 	border: none;
 	}
 
-.#{$name} .v-errorindicator {
+.#{$primaryStyleName} .v-errorindicator {
 	display: inline-block;
 	zoom: 1;
 	vertical-align: middle;
@@ -15,7 +15,7 @@
 }
 
 /* Link style (we really should deprecate this) */
-.#{$name}-link {
+.#{$primaryStyleName}-link {
 	border: none;
 	text-align: left !important;
 	background: transparent;
@@ -27,13 +27,13 @@
 	user-select: text;
 }
 
-.#{$name}-link .#{$name}-caption {
+.#{$primaryStyleName}-link .#{$primaryStyleName}-caption {
 	text-decoration: underline;
 	color: inherit;
 	text-align: left;
 	}
 
-.#{$name} {
+.#{$primaryStyleName} {
 	text-align: center !important;
 	cursor: pointer;
 	white-space: nowrap;
@@ -42,31 +42,31 @@
 	font: inherit;
 	line-height: normal;
 	}
-.#{$name} .#{$name}-caption {
+.#{$primaryStyleName} .#{$primaryStyleName}-caption {
 	vertical-align: middle;
 	white-space: nowrap;
 	font: inherit;
 	color: inherit;
 	}
 
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
 	vertical-align: middle;
 	margin-right: 3px;
 	}
 
-.#{$name} .v-errorindicator {
+.#{$primaryStyleName} .v-errorindicator {
 	display: inline-block;
 	zoom: 1;
 	float: none;
 }
 /* Fixes stretched buttons in IE7*/
-.v-ie .#{$name} {
+.v-ie .#{$primaryStyleName} {
 	overflow: visible;
 	padding-left: 1em;
 	padding-right: 1em;
 }
 
-.v-ie .#{$name}-link {
+.v-ie .#{$primaryStyleName}-link {
 	padding: 0;
 }
 
diff --git a/WebContent/VAADIN/themes/base/caption/caption.scss b/WebContent/VAADIN/themes/base/caption/caption.scss
index d08f682adb..7b62866d3c 100644
--- a/WebContent/VAADIN/themes/base/caption/caption.scss
+++ b/WebContent/VAADIN/themes/base/caption/caption.scss
@@ -1,26 +1,26 @@
-@mixin base-caption($name : v-caption) {
+@mixin base-caption($primaryStyleName : v-caption) {
 
-.#{$name}wrapper {
+.#{$primaryStyleName}wrapper {
 	text-align: left; /* Force default alignment */
 }
-.#{$name} {
+.#{$primaryStyleName} {
 	overflow: hidden;
 	white-space: nowrap;
 }
 .v-errorindicator {
 	display: inline-block;
 }
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
 	display: inline-block;
 	padding-right: 2px;
 	vertical-align: middle;
 }
-.#{$name} .#{$name}text {
+.#{$primaryStyleName} .#{$primaryStyleName}text {
 	display: inline-block;
 	overflow: hidden;
 	vertical-align: middle;
 }
-.#{$name} .v-required-field-indicator {
+.#{$primaryStyleName} .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 2356a1689d..d6df771b85 100644
--- a/WebContent/VAADIN/themes/base/csslayout/csslayout.scss
+++ b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss
@@ -1,35 +1,35 @@
-@mixin base-csslayout($name : v-csslayout) {
+@mixin base-csslayout($primaryStyleName : v-csslayout) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	overflow: hidden;
 }
 /* More specific selector to override 'v-connector' */
-div.#{$name} {
+div.#{$primaryStyleName} {
 	display: block;
 }
-.#{$name}-margin, .#{$name}-container {
+.#{$primaryStyleName}-margin, .#{$primaryStyleName}-container {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.v-has-width > .#{$name}-margin,
-.v-has-width > .#{$name}-margin > .#{$name}-container {
+.v-has-width > .#{$primaryStyleName}-margin,
+.v-has-width > .#{$primaryStyleName}-margin > .#{$primaryStyleName}-container {
 	width: 100%;
 }
-.v-has-height > .#{$name}-margin,
-.v-has-height > .#{$name}-margin > .#{$name}-container {
+.v-has-height > .#{$primaryStyleName}-margin,
+.v-has-height > .#{$primaryStyleName}-margin > .#{$primaryStyleName}-container {
 	height: 100%;
 }
-.#{$name}-margin-top {
+.#{$primaryStyleName}-margin-top {
 	padding-top: 12px;	
 }
-.#{$name}-margin-bottom {
+.#{$primaryStyleName}-margin-bottom {
 	padding-bottom: 12px;	
 }
-.#{$name}-margin-left {
+.#{$primaryStyleName}-margin-left {
 	padding-left: 12px;	
 }
-.#{$name}-margin-right {
+.#{$primaryStyleName}-margin-right {
 	padding-right: 12px;	
 }
 
diff --git a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss
index 984c31e255..461e1b1246 100644
--- a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss
+++ b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss
@@ -1,6 +1,6 @@
-@mixin base-customcomponent($name : v-customcomponent) {
+@mixin base-customcomponent($primaryStyleName : v-customcomponent) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	overflow: hidden;
 }
 
diff --git a/WebContent/VAADIN/themes/base/customlayout/customlayout.scss b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss
index 0f5f1230c4..c8a13da4e9 100644
--- a/WebContent/VAADIN/themes/base/customlayout/customlayout.scss
+++ b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss
@@ -1,6 +1,6 @@
-@mixin base-customlayout($name : v-customlayout) {
+@mixin base-customlayout($primaryStyleName : v-customlayout) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	overflow: hidden;
 }
 
diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.scss b/WebContent/VAADIN/themes/base/datefield/datefield.scss
index f7d71a576b..dcefe27f09 100644
--- a/WebContent/VAADIN/themes/base/datefield/datefield.scss
+++ b/WebContent/VAADIN/themes/base/datefield/datefield.scss
@@ -1,91 +1,91 @@
-@mixin base-datefield($name : v-datefield) {
+@mixin base-datefield($primaryStyleName : v-datefield) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	white-space: nowrap;
 	display: inline-block; /* Force minimum width */
 	line-height:0; /* Force minimum height */
 }
-.#{$name}-textfield {
+.#{$primaryStyleName}-textfield {
 	vertical-align: top;
 }
-.#{$name}-button {
+.#{$primaryStyleName}-button {
 	cursor: pointer;
 }
-.#{$name}-prompt .#{$name}-textfield {
+.#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield {
 	color: #999;
 	font-style: italic;
 }
-.#{$name} .#{$name}-button-readonly {
+.#{$primaryStyleName} .#{$primaryStyleName}-button-readonly {
 	display: none;
 }
-.#{$name}-calendarpanel table {
+.#{$primaryStyleName}-calendarpanel table {
 	width: 100%;
 }
-.#{$name}-calendarpanel td {
+.#{$primaryStyleName}-calendarpanel td {
 	padding: 0;
 	margin: 0;
 }
-.#{$name}-calendarpanel:focus {
+.#{$primaryStyleName}-calendarpanel:focus {
 	outline:none;	
 }
-.#{$name}-calendarpanel-header td {
+.#{$primaryStyleName}-calendarpanel-header td {
 	text-align: center;
 }
-.#{$name}-calendarpanel-month {
+.#{$primaryStyleName}-calendarpanel-month {
 	text-align: center;
 	white-space: nowrap;
 }
-.#{$name}-calendarpanel-weeknumber {
+.#{$primaryStyleName}-calendarpanel-weeknumber {
 	color: #999;
 	border-right: 1px solid #ddd;
 	font-size: 0.9em;
 }
-.#{$name}-calendarpanel-day,
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day,
+.#{$primaryStyleName}-calendarpanel-day-today {
 	cursor: pointer;
 }
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day-today {
 	border: 1px solid #ddd;
 }
-.v-disabled .#{$name}-calendarpanel-day,
-.v-disabled .#{$name}-calendarpanel-day-today {
+.v-disabled .#{$primaryStyleName}-calendarpanel-day,
+.v-disabled .#{$primaryStyleName}-calendarpanel-day-today {
 	cursor: default;
 }
-.#{$name}-calendarpanel-day-disabled {
+.#{$primaryStyleName}-calendarpanel-day-disabled {
 	cursor: default;
 	opacity: .5;
 }
-.#{$name}-calendarpanel-day-selected {
+.#{$primaryStyleName}-calendarpanel-day-selected {
 	cursor: default;
 	background: #333;
 	color: #fff;
 }
-.#{$name}-calendarpanel-day-focused {
+.#{$primaryStyleName}-calendarpanel-day-focused {
 	outline: 1px dotted black;
 }
-.#{$name}-calendarpanel-day-offmonth {
+.#{$primaryStyleName}-calendarpanel-day-offmonth {
     color: #666;
 }
 
-.#{$name}-time {
+.#{$primaryStyleName}-time {
 	white-space: nowrap;
 }
-.#{$name}-time .v-label {
+.#{$primaryStyleName}-time .v-label {
 	display: inline;
 }
-.#{$name}-popup {
+.#{$primaryStyleName}-popup {
 	background: #fff;
 }
 /* Disabled by default
-.#{$name}-error .v-textfield,
-.#{$name}-error .#{$name}-calendarpanel {
+.#{$primaryStyleName}-error .v-textfield,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-calendarpanel {
 	background: #ffe0e0;
 }
 */
 
 /* Disabled by default
-.#{$name}-required .v-textfield,
-.#{$name}-required .#{$name}-calendarpanel {
+.#{$primaryStyleName}-required .v-textfield,
+.#{$primaryStyleName}-required .#{$primaryStyleName}-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 e9bc677b3e..2baf8a4e09 100644
--- a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
+++ b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
@@ -1,6 +1,6 @@
-@mixin base-dragwrapper($name : v-ddwrapper) {
+@mixin base-dragwrapper($primaryStyleName : v-ddwrapper) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	padding: 2px;
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
@@ -13,7 +13,7 @@
 	-khtml-user-select: none;
 	-webkit-user-select: none;
 }
-.v-ie .#{$name} a.drag-start {
+.v-ie .#{$primaryStyleName} a.drag-start {
 	display: block;
 	position: absolute;
 	top: 0;
@@ -27,22 +27,22 @@
 	background-color:cyan;
 	filter: alpha(opacity=0);
 }
-.#{$name}-over {
+.#{$primaryStyleName}-over {
 	border: 2px solid #1d9dff;
 	background-color: #bcdcff;
 	padding: 0;
 }
-.#{$name}-over {
+.#{$primaryStyleName}-over {
 	background-color: rgba(169,209,255,.6);
 }
-.no-box-drag-hints .#{$name}-over {
+.no-box-drag-hints .#{$primaryStyleName}-over {
 	border: none;
 	background-color: transparent;
 	padding: 2px;
 }
-&.v-app .#{$name}-over-top,
-.v-window .#{$name}-over-top,
-.v-popupview-popup .#{$name}-over-top {
+&.v-app .#{$primaryStyleName}-over-top,
+.v-window .#{$primaryStyleName}-over-top,
+.v-popupview-popup .#{$primaryStyleName}-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 .#{$name}-over-bottom,
-.v-window .#{$name}-over-bottom,
-.v-popupview-popup .#{$name}-over-bottom {
+&.v-app .#{$primaryStyleName}-over-bottom,
+.v-window .#{$primaryStyleName}-over-bottom,
+.v-popupview-popup .#{$primaryStyleName}-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 .#{$name}-over-left,
-.v-window .#{$name}-over-left,
-.v-popupview-popup .#{$name}-over-left {
+&.v-app .#{$primaryStyleName}-over-left,
+.v-window .#{$primaryStyleName}-over-left,
+.v-popupview-popup .#{$primaryStyleName}-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 .#{$name}-over-right,
-.v-window .#{$name}-over-right,
-.v-popupview-popup .#{$name}-over-right {
+&.v-app .#{$primaryStyleName}-over-right,
+.v-window .#{$primaryStyleName}-over-right,
+.v-popupview-popup .#{$primaryStyleName}-over-right {
 	border: none;
 	border-right: 2px solid #1d9dff;
 	background-color: transparent;
@@ -88,27 +88,27 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.#{$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 {
+.#{$primaryStyleName},
+.#{$primaryStyleName}-over,
+&.v-app .#{$primaryStyleName}-over-top,
+.v-window .#{$primaryStyleName}-over-top,
+.v-popupview-popup .#{$primaryStyleName}-over-top,
+&.v-app .#{$primaryStyleName}-over-bottom,
+.v-window .#{$primaryStyleName}-over-bottom,
+.v-popupview-popup .#{$primaryStyleName}-over-bottom,
+&.v-app .#{$primaryStyleName}-over-left,
+.v-window .#{$primaryStyleName}-over-left,
+.v-popupview-popup .#{$primaryStyleName}-over-left,
+&.v-app .#{$primaryStyleName}-over-right,
+.v-window .#{$primaryStyleName}-over-right,
+.v-popupview-popup .#{$primaryStyleName}-over-right {
 	border-color: rgba(0,109,232,.6);
 }
 
-.#{$name}-over-top:before,
-.#{$name}-over-bottom:after,
-.#{$name}-over-left:before,
-.#{$name}-over-right:before {
+.#{$primaryStyleName}-over-top:before,
+.#{$primaryStyleName}-over-bottom:after,
+.#{$primaryStyleName}-over-left:before,
+.#{$primaryStyleName}-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;
 }
-.#{$name}-over-bottom:after {
+.#{$primaryStyleName}-over-bottom:after {
 	margin-top: -2px;
 }
-.#{$name}-over-left:before,
-.#{$name}-over-right:before {
+.#{$primaryStyleName}-over-left:before,
+.#{$primaryStyleName}-over-right:before {
 	background-position: 0 -6px;
 	margin-top: -2px;
 	margin-left: -4px;
 }
-.#{$name}-over-right:before {
+.#{$primaryStyleName}-over-right:before {
 	position: relative;
 	margin-bottom: -4px;
 	margin-right: -4px;
@@ -136,26 +136,26 @@
 	background-position: 100% -6px;
 }
 
-.no-horizontal-drag-hints .#{$name}-over-left {
+.no-horizontal-drag-hints .#{$primaryStyleName}-over-left {
 	padding-left: 2px;
 	border-left: none;
 }
-.no-horizontal-drag-hints .#{$name}-over-right {
+.no-horizontal-drag-hints .#{$primaryStyleName}-over-right {
 	padding-right: 2px;
 	border-right: none;
 }
-.no-vertical-drag-hints .#{$name}-over-top {
+.no-vertical-drag-hints .#{$primaryStyleName}-over-top {
 	padding-top: 2px;
 	border-top: none;
 }
-.no-vertical-drag-hints .#{$name}-over-bottom {
+.no-vertical-drag-hints .#{$primaryStyleName}-over-bottom {
 	padding-bottom: 2px;
 	border-bottom: none;
 }
-.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 {
+.no-horizontal-drag-hints .#{$primaryStyleName}-over-left:before,
+.no-horizontal-drag-hints .#{$primaryStyleName}-over-right:before,
+.no-vertical-drag-hints .#{$primaryStyleName}-over-top:before,
+.no-vertical-drag-hints .#{$primaryStyleName}-over-bottom:after {
 	display: none;
 }
 
diff --git a/WebContent/VAADIN/themes/base/embedded/embedded.scss b/WebContent/VAADIN/themes/base/embedded/embedded.scss
index bd7403bda2..abb5e7956f 100644
--- a/WebContent/VAADIN/themes/base/embedded/embedded.scss
+++ b/WebContent/VAADIN/themes/base/embedded/embedded.scss
@@ -1,6 +1,6 @@
-@mixin base-embedded($name : v-embedded) {
+@mixin base-embedded($primaryStyleName : v-embedded) {
 
-.v-table .#{$name}-image {
+.v-table .#{$primaryStyleName}-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 6bfe112254..a8006fdfe3 100644
--- a/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
+++ b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
@@ -1,55 +1,55 @@
-@mixin base-formlayout($name : v-formlayout) {
+@mixin base-formlayout($primaryStyleName : v-formlayout) {
 
-.#{$name}.v-has-width > table {
+.#{$primaryStyleName}.v-has-width > table {
 	width: 100%;
 }
-.#{$name}.v-has-height > table {
+.#{$primaryStyleName}.v-has-height > table {
 	height: 100%;
 }
-.#{$name}-cell .v-errorindicator {
+.#{$primaryStyleName}-cell .v-errorindicator {
 	display: block;
 }
-.#{$name}-error-indicator {
+.#{$primaryStyleName}-error-indicator {
 	/* fix width so layout is not jumpy when error disappears */
 	width: 12px;
 }
-.#{$name}-captioncell {
+.#{$primaryStyleName}-captioncell {
 	text-align:right;
 	white-space: nowrap;
 }
-.#{$name}-errorcell, .#{$name}-captioncell {
+.#{$primaryStyleName}-errorcell, .#{$primaryStyleName}-captioncell {
 	width: 1px; /* Don't use any extra space */
 }
-.#{$name}-captioncell .v-caption {
+.#{$primaryStyleName}-captioncell .v-caption {
 	overflow: visible;
 }
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-captioncell, 
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-contentcell,
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-errorcell {
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell, 
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-errorcell {
 	padding-top: 6px;
 }
-.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-captioncell, 
-.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-contentcell,
-.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-errorcell {
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-captioncell, 
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-errorcell {
 	padding-top: 0;
 }
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-captioncell, 
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-contentcell,
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-errorcell {
+.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-captioncell, 
+.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-errorcell {
 	padding-top: 12px;
 }
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-captioncell,
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-contentcell,
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-errorcell {
+.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-captioncell,
+.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-errorcell {
 	padding-bottom: 12px;
 }
-.#{$name}-margin-left > tbody > .#{$name}-row > .#{$name}-captioncell {
+.#{$primaryStyleName}-margin-left > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell {
 	padding-left: 12px;
 } 
-.#{$name}-margin-right > tbody > .#{$name}-row > .#{$name}-contentcell {
+.#{$primaryStyleName}-margin-right > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell {
 	padding-right: 12px;
 }
-.#{$name}-captioncell .v-caption .v-required-field-indicator {
+.#{$primaryStyleName}-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 45b02316ae..54a2e8667c 100644
--- a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss
+++ b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss
@@ -1,34 +1,34 @@
-@mixin base-gridlayout($name : v-gridlayout) {
+@mixin base-gridlayout($primaryStyleName : v-gridlayout) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	position: relative;
 }
-.#{$name}-slot {
+.#{$primaryStyleName}-slot {
 	position: absolute;
 }
-.#{$name}-margin-top {
+.#{$primaryStyleName}-margin-top {
 	padding-top: 12px;
 }
-.#{$name}-margin-bottom {
+.#{$primaryStyleName}-margin-bottom {
 	padding-bottom: 12px;
 }
-.#{$name}-margin-left {
+.#{$primaryStyleName}-margin-left {
 	padding-left: 12px;
 } 
-.#{$name}-margin-right {
+.#{$primaryStyleName}-margin-right {
 	padding-right: 12px;
 }
-.#{$name}-spacing-on {
+.#{$primaryStyleName}-spacing-on {
 	padding-left: 6px;
 	padding-top: 6px;
 	overflow: hidden;
 }
-.#{$name}-spacing,
-.#{$name}-spacing-off {
+.#{$primaryStyleName}-spacing,
+.#{$primaryStyleName}-spacing-off {
 	padding-left: 0;
 	padding-top: 0;
 }
-.#{$name}-spacing-off {
+.#{$primaryStyleName}-spacing-off {
 	overflow: hidden;
 }
 
diff --git a/WebContent/VAADIN/themes/base/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/base/inlinedatefield/inlinedatefield.scss
index 0c42979b6b..06a24125c2 100644
--- a/WebContent/VAADIN/themes/base/inlinedatefield/inlinedatefield.scss
+++ b/WebContent/VAADIN/themes/base/inlinedatefield/inlinedatefield.scss
@@ -1,5 +1,5 @@
-@mixin base-inline-datefield($name : v-inline-datefield){
+@mixin base-inline-datefield($primaryStyleName : v-inline-datefield){
         
-    /* FIXME $name should be passed to the the mixing instead of the default. Fix when SASS compiler works. #9821 */
+    /* FIXME $primaryStyleName should be passed to the the mixing instead of the default. Fix when SASS compiler works. #9821 */
     @include base-datefield(v-inline-datefield);
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/label/label.scss b/WebContent/VAADIN/themes/base/label/label.scss
index 6ccd0f3d27..3c72796828 100644
--- a/WebContent/VAADIN/themes/base/label/label.scss
+++ b/WebContent/VAADIN/themes/base/label/label.scss
@@ -1,10 +1,10 @@
-@mixin base-label($name : v-label) {
+@mixin base-label($primaryStyleName : v-label) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	overflow: hidden;
 }
 
-.#{$name}.v-has-width {
+.#{$primaryStyleName}.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 455ab2cfd0..bff6fbd5fe 100644
--- a/WebContent/VAADIN/themes/base/link/link.scss
+++ b/WebContent/VAADIN/themes/base/link/link.scss
@@ -1,20 +1,20 @@
-@mixin base-link($name : v-link) {
+@mixin base-link($primaryStyleName : v-link) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	white-space: nowrap;	
 }
-.#{$name} a {
+.#{$primaryStyleName} a {
 	vertical-align: middle;
 	text-decoration: none;
 }
-.#{$name} span {
+.#{$primaryStyleName} span {
 	text-decoration: underline;
 	vertical-align: middle;
 }
 .v-disabled a {
 	cursor: default;
 }
-.#{$name} img {
+.#{$primaryStyleName} 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 d31af3b9e2..48fabbf793 100644
--- a/WebContent/VAADIN/themes/base/loginform/loginform.scss
+++ b/WebContent/VAADIN/themes/base/loginform/loginform.scss
@@ -1,6 +1,6 @@
-@mixin base-loginform($name : v-loginform) {
+@mixin base-loginform($primaryStyleName : v-loginform) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	height: 140px;
 	width: 200px;
 }
diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.scss b/WebContent/VAADIN/themes/base/menubar/menubar.scss
index f896e967b5..732f3d3444 100644
--- a/WebContent/VAADIN/themes/base/menubar/menubar.scss
+++ b/WebContent/VAADIN/themes/base/menubar/menubar.scss
@@ -1,11 +1,11 @@
-@mixin base-menubar($name : v-menubar) {
+@mixin base-menubar($primaryStyleName : v-menubar) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	display: inline-block;
 	white-space: nowrap;
 	overflow: hidden;
 }
-.#{$name} .#{$name}-menuitem {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem {
 	cursor: default;
 	vertical-align: middle;
 	white-space: nowrap;
@@ -13,36 +13,36 @@
 	display: inline-block;
 	zoom: 1;
 }
-.#{$name} .#{$name}-menuitem-caption .v-icon {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem-caption .v-icon {
 	vertical-align: middle;
 	white-space: nowrap;
 }
-.#{$name}-submenu {
+.#{$primaryStyleName}-submenu {
 	background: #fff;
 }
-.#{$name}-menuitem-selected {
+.#{$primaryStyleName}-menuitem-selected {
 	background: #333;
 	color: #fff;
 }
-.#{$name}-submenu .#{$name}-menuitem { 
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem { 
 	cursor: default;
 	display: block;
 	position: relative;
 	padding-right: 1.5em;
 }
-.#{$name}-submenu .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption {
 	display: block;
 }
-.#{$name}-submenu .#{$name}-menuitem *,
-.#{$name}-submenu .#{$name}-menuitem-caption * {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem *,
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption * {
 	white-space: nowrap;
 }
-.#{$name}-submenu-indicator {
+.#{$primaryStyleName}-submenu-indicator {
 	display: none;
 	/* Arial has the most coverage for geometric entity characters */
 	font-family: arial, helvetica, sans-serif;
 }
-.#{$name}-submenu .#{$name}-submenu-indicator {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-submenu-indicator {
 	display: block;
 	position: absolute;
 	right: 0;
@@ -50,20 +50,20 @@
 	height: 1em;
 	font-size: 0.9em;
 }
-.#{$name}-menuitem-disabled,
-.#{$name} span.#{$name}-menuitem-disabled:hover,
-.#{$name} span.#{$name}-menuitem-disabled:focus,
-.#{$name} span.#{$name}-menuitem-disabled:active {
+.#{$primaryStyleName}-menuitem-disabled,
+.#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:hover,
+.#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:focus,
+.#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:active {
 	color: #999;
 }
-.#{$name}-more-menuitem {
+.#{$primaryStyleName}-more-menuitem {
 	/* Arial has the most coverage for geometric entity characters */
 	font-family: arial, helvetica, sans-serif;
 }
-.#{$name}-separator {
+.#{$primaryStyleName}-separator {
 	overflow: hidden;
 }
-.#{$name}-separator span {
+.#{$primaryStyleName}-separator span {
 	display: block;
 	text-indent: -9999px;
 	font-size: 1px;
@@ -72,26 +72,26 @@
 	margin: 3px 0 2px;
 	overflow: hidden;
 }
-.#{$name} .v-icon,
-.#{$name}-submenu .v-icon {
+.#{$primaryStyleName} .v-icon,
+.#{$primaryStyleName}-submenu .v-icon {
 	margin-right: 3px;
 }
 
-.#{$name}:focus,
-.#{$name}-popup:focus,
-.#{$name}-popup .popupContent:focus,
-.#{$name}-popup .popupContent .#{$name}-submenu:focus{
+.#{$primaryStyleName}:focus,
+.#{$primaryStyleName}-popup:focus,
+.#{$primaryStyleName}-popup .popupContent:focus,
+.#{$primaryStyleName}-popup .popupContent .#{$primaryStyleName}-submenu:focus{
 	outline: none;	
 }
 /* Checkboxes for checkable/checked menu items */
 /* Checked/unchecked requires combined style selected-(un)checked for IE6 */
-.#{$name}-submenu-check-column .#{$name}-menuitem {
+.#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem {
 	padding-left: 6px;
 }
-.#{$name}-submenu-check-column .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem-caption {
 	padding-left: 18px;
 }
-.#{$name}-submenu .#{$name}-menuitem-checked .#{$name}-menuitem-caption { 
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-checked .#{$primaryStyleName}-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 350db1a75f..9751422fb7 100644
--- a/WebContent/VAADIN/themes/base/notification/notification.scss
+++ b/WebContent/VAADIN/themes/base/notification/notification.scss
@@ -1,6 +1,6 @@
-@mixin base-notification($name : v-Notification) {
+@mixin base-notification($primaryStyleName : v-Notification) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	background: #999;
 	color: #fff;
 	cursor: pointer;
@@ -9,33 +9,33 @@
 	max-width:85%;
 	
 }
-.#{$name} h1,
-.#{$name} p,
-.#{$name}-error h1,
-.#{$name}-error p,
-.#{$name}-warning h1,
-.#{$name}-warning p {
+.#{$primaryStyleName} h1,
+.#{$primaryStyleName} p,
+.#{$primaryStyleName}-error h1,
+.#{$primaryStyleName}-error p,
+.#{$primaryStyleName}-warning h1,
+.#{$primaryStyleName}-warning p {
 	display: inline;
 	margin: 0 0.5em 0 0;
 }
-.#{$name}-warning {
+.#{$primaryStyleName}-warning {
 	background: orange;
 }
-.#{$name}-error {
+.#{$primaryStyleName}-error {
 	background: red;
 }
-.#{$name}-tray h1 {
+.#{$primaryStyleName}-tray h1 {
 	display: block;
 }
-.#{$name}-tray p {
+.#{$primaryStyleName}-tray p {
 	display: block;
 }
-.#{$name}-system {
+.#{$primaryStyleName}-system {
 	background-color: red;
 	opacity: .7;
 	filter: alpha(opacity=70);
 }
-.#{$name}-system h1 {
+.#{$primaryStyleName}-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 46571f8bd5..bcc4875a78 100644
--- a/WebContent/VAADIN/themes/base/panel/panel.scss
+++ b/WebContent/VAADIN/themes/base/panel/panel.scss
@@ -1,48 +1,48 @@
-@mixin base-panel($name : v-panel) {
+@mixin base-panel($primaryStyleName : v-panel) {
 
-.#{$name},
-.#{$name}-caption,
-.#{$name}-content,
-.#{$name}-deco,
-.#{$name}-light,
-.#{$name}-caption-light,
-.#{$name}-content-light,
-.#{$name}-deco-light {
+.#{$primaryStyleName},
+.#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-content,
+.#{$primaryStyleName}-deco,
+.#{$primaryStyleName}-light,
+.#{$primaryStyleName}-caption-light,
+.#{$primaryStyleName}-content-light,
+.#{$primaryStyleName}-deco-light {
 	outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
 	text-align: left; /* Force default alignment */
 }
-.#{$name}-caption .v-errorindicator {
+.#{$primaryStyleName}-caption .v-errorindicator {
 	float: none;
 	display: inline;
 }
-.#{$name}-caption .v-icon {
+.#{$primaryStyleName}-caption .v-icon {
 	display: inline;
 	vertical-align: middle;
 }
-.#{$name}-caption span {
+.#{$primaryStyleName}-caption span {
 	vertical-align: middle;
 	display: table-row;
 }
-.#{$name}-caption {
+.#{$primaryStyleName}-caption {
 	white-space: nowrap;
 	overflow:hidden;
 	font-weight: bold;
 }
-.#{$name}-nocaption {
+.#{$primaryStyleName}-nocaption {
 	overflow: hidden;
 }
-.#{$name}-content {
+.#{$primaryStyleName}-content {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.#{$name}.v-has-width > .#{$name}-content {
+.#{$primaryStyleName}.v-has-width > .#{$primaryStyleName}-content {
 	width: 100%;
 }
-.#{$name}.v-has-height > .#{$name}-content {
+.#{$primaryStyleName}.v-has-height > .#{$primaryStyleName}-content {
 	height: 100%;
 }
-.#{$name}-deco {
+.#{$primaryStyleName}-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 b52f79db76..cafcf9b720 100644
--- a/WebContent/VAADIN/themes/base/popupview/popupview.scss
+++ b/WebContent/VAADIN/themes/base/popupview/popupview.scss
@@ -1,14 +1,14 @@
-@mixin base-popupview($name : v-popupview) {
+@mixin base-popupview($primaryStyleName : v-popupview) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	cursor: pointer;
 	text-decoration: underline;
 	white-space: nowrap;
 }
-.#{$name}-popup {
+.#{$primaryStyleName}-popup {
 	overflow: auto;
 }
-.#{$name}-loading {
+.#{$primaryStyleName}-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 7af1ba1f0e..0065cf3d07 100644
--- a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss
+++ b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss
@@ -1,17 +1,17 @@
-@mixin base-progressindicator($name : v-progressindicator) {
+@mixin base-progressindicator($primaryStyleName : v-progressindicator) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	width: 150px;
 }
-.#{$name}-wrapper {
+.#{$primaryStyleName}-wrapper {
 	height: 7px;
 	border: 1px solid #ddd;
 }
-.#{$name}-indicator {
+.#{$primaryStyleName}-indicator {
 	height: 7px;
 	background: #ddd;
 }
-div.#{$name}-indeterminate {
+div.#{$primaryStyleName}-indeterminate {
 	height: 20px;
 	width: 20px;
 	background: #fff url(../common/img/ajax-loader-medium.gif) no-repeat 50%;
@@ -20,13 +20,13 @@ div.#{$name}-indeterminate {
 	-moz-border-radius: 4px;
 }
 /* Hide obsolete elements in indeterminate mode */
-.#{$name}-indeterminate .#{$name}-wrapper,
-.#{$name}-indeterminate .#{$name}-indicator,
-.#{$name}-indeterminate-disabled .#{$name}-wrapper,
-.#{$name}-indeterminate-disabled .#{$name}-indicator {
+.#{$primaryStyleName}-indeterminate .#{$primaryStyleName}-wrapper,
+.#{$primaryStyleName}-indeterminate .#{$primaryStyleName}-indicator,
+.#{$primaryStyleName}-indeterminate-disabled .#{$primaryStyleName}-wrapper,
+.#{$primaryStyleName}-indeterminate-disabled .#{$primaryStyleName}-indicator {
 	display: none;
 }
-div.#{$name}-indeterminate-disabled {
+div.#{$primaryStyleName}-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 8e252e1f60..e45249ce66 100644
--- a/WebContent/VAADIN/themes/base/select/select.scss
+++ b/WebContent/VAADIN/themes/base/select/select.scss
@@ -1,58 +1,58 @@
-@mixin base-select($name : v-select) {
+@mixin base-select($primaryStyleName : v-select) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	text-align: left;
 }
-.#{$name}-optiongroup .#{$name}-option {
+.#{$primaryStyleName}-optiongroup .#{$primaryStyleName}-option {
 	display: block;
 	white-space: nowrap;
 }
-.#{$name}-optiongroup .v-icon {
+.#{$primaryStyleName}-optiongroup .v-icon {
 	vertical-align: middle;
 	white-space: nowrap;
 	margin: 0 2px;	
 }
-.v-ie .#{$name}-optiongroup .#{$name}-option {
+.v-ie .#{$primaryStyleName}-optiongroup .#{$primaryStyleName}-option {
 	zoom: 1;
 }
-.#{$name}-select {
+.#{$primaryStyleName}-select {
 	display: block;
 }
-.#{$name}-twincol {
+.#{$primaryStyleName}-twincol {
 	white-space: nowrap;
 }
-.#{$name}-twincol-options {
+.#{$primaryStyleName}-twincol-options {
 	float: left;
 }
-.#{$name}-twincol-caption-left {
+.#{$primaryStyleName}-twincol-caption-left {
 	float: left;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.#{$name}-twincol-selections {
+.#{$primaryStyleName}-twincol-selections {
 	font-weight: bold;
 }
-.#{$name}-twincol-caption-right {
+.#{$primaryStyleName}-twincol-caption-right {
 	float: right;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.#{$name}-twincol-buttons {
+.#{$primaryStyleName}-twincol-buttons {
 	float: left;
 	text-align: center;
 }
-.#{$name}-twincol-buttons .#{$name}-twincol-deco {
+.#{$primaryStyleName}-twincol-buttons .#{$primaryStyleName}-twincol-deco {
 	clear: both;
 }
-.#{$name}-twincol .v-textfield {
+.#{$primaryStyleName}-twincol .v-textfield {
 	display: block;
 	float: left;
 	clear: left;
 }
-.#{$name}-twincol .v-button {
+.#{$primaryStyleName}-twincol .v-button {
 	float: left;
 }
-.#{$name}-twincol-buttons .v-button {
+.#{$primaryStyleName}-twincol-buttons .v-button {
 	float: none;
 }
 .v-filterselect {
@@ -150,10 +150,10 @@
 /* Error styles (disabled by default)
 
 .v-filterselect-error .v-filterselect-input,
-.#{$name}-error .#{$name}-option,
-.#{$name}-error .#{$name}-select,
-.#{$name}-error .#{$name}-twincol-selections,
-.#{$name}-error .#{$name}-twincol-options {
+.#{$primaryStyleName}-error .#{$primaryStyleName}-option,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-select,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-twincol-selections,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-twincol-options {
 	background: #ffaaaa;
 }
 */
@@ -161,10 +161,10 @@
 /*  Required field styles (disabled by default)
    
 .v-filterselect-error .v-filterselect-input,
-.#{$name}-required .#{$name}-option,
-.#{$name}-required .#{$name}-select,
-.#{$name}-required .#{$name}-twincol-selections,
-.#{$name}-required .#{$name}-twincol-options {
+.#{$primaryStyleName}-required .#{$primaryStyleName}-option,
+.#{$primaryStyleName}-required .#{$primaryStyleName}-select,
+.#{$primaryStyleName}-required .#{$primaryStyleName}-twincol-selections,
+.#{$primaryStyleName}-required .#{$primaryStyleName}-twincol-options {
 	background: #ffaaaa;
 }
 */
diff --git a/WebContent/VAADIN/themes/base/shadow/shadow.scss b/WebContent/VAADIN/themes/base/shadow/shadow.scss
index c0c94e7680..47bf4acfde 100644
--- a/WebContent/VAADIN/themes/base/shadow/shadow.scss
+++ b/WebContent/VAADIN/themes/base/shadow/shadow.scss
@@ -1,31 +1,31 @@
-@mixin base-shadow($name : v-shadow) {
+@mixin base-shadow($primaryStyleName : v-shadow) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	position: absolute;
 }
 
-.#{$name} .top-left {
+.#{$primaryStyleName} .top-left {
     position: absolute; overflow: hidden;
     top: -3px;             left: -5px;
     width: 10px;         height: 10px;
     background: transparent url(img/top-left.png);
 }
 
-.#{$name} .top {
+.#{$primaryStyleName} .top {
     position: absolute; overflow: hidden;
     top: -3px;             left: 5px;
     height: 10px;           right: 5px;
     background: transparent url(img/top.png);
 }
 
-.#{$name} .top-right {
+.#{$primaryStyleName} .top-right {
     position: absolute; overflow: hidden;
     top: -3px;             right: -5px;
     width: 10px;         height: 10px;
     background: transparent url(img/top-right.png);
 }
 
-.#{$name} .left {
+.#{$primaryStyleName} .left {
     position: absolute; overflow: hidden;
     top: 7px;           left: -5px;
     width: 10px;
@@ -33,14 +33,14 @@
     background: transparent url(img/left.png);
 }
 
-.#{$name} .center {
+.#{$primaryStyleName} .center {
     position: absolute; overflow: hidden;
     top: 7px;           left: 5px;
     bottom: 3px;        right: 5px;
     background: transparent url(img/center.png);
 }
 
-.#{$name} .right {
+.#{$primaryStyleName} .right {
     position: absolute; overflow: hidden;
     top: 7px;           right: -5px;
     width: 10px;
@@ -48,21 +48,21 @@
     background: transparent url(img/right.png);
 }
 
-.#{$name} .bottom-left {
+.#{$primaryStyleName} .bottom-left {
     position: absolute; overflow: hidden;
     bottom: -7px;           left: -5px;
     width: 10px;          height: 10px;
     background: transparent url(img/bottom-left.png);
 }
 
-.#{$name} .bottom {
+.#{$primaryStyleName} .bottom {
     position: absolute; overflow: hidden;
     bottom: -7px;           left: 5px;
     right: 5px;          height: 10px;
     background: transparent url(img/bottom.png);
 }
 
-.#{$name} .bottom-right {
+.#{$primaryStyleName} .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 bfb4c3b950..9ef94d9d9e 100644
--- a/WebContent/VAADIN/themes/base/slider/slider.scss
+++ b/WebContent/VAADIN/themes/base/slider/slider.scss
@@ -1,9 +1,9 @@
-@mixin base-slider($name : v-slider) {
+@mixin base-slider($primaryStyleName : v-slider) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	margin: 5px 0;
 }
-.#{$name}-base {
+.#{$primaryStyleName}-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;
 	
 }
-.#{$name}-handle {
+.#{$primaryStyleName}-handle {
 	background: #aaa;
 	width: 12px;
 	height: 12px;
@@ -20,7 +20,7 @@
 	font-size: 0;
 }
 
-.#{$name}-vertical {
+.#{$primaryStyleName}-vertical {
 	width: 2px;
 	height: auto;
 	margin: 0 5px;
@@ -28,19 +28,19 @@
 	border-left: 1px solid #cccfd0;
 	border-right: 1px solid #cccfd0;
 }
-.#{$name}-vertical .#{$name}-base {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-base {
 	width: 2px;
 	border-bottom: 1px solid #eee;
 	border-right: none;
 }
-.#{$name}-vertical .#{$name}-handle {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle {
 	width: 12px;
 	height: 12px;
 	font-size: 0;
 	margin-left: -5px;
 }
 
-.#{$name}-feedback {
+.#{$primaryStyleName}-feedback {
 	padding: 2px 5px;
 	background: #444;
 	color: #fff;
@@ -56,12 +56,12 @@
 }
 
 /* Disabled by default
-.#{$name}-error .#{$name}-base {
+.#{$primaryStyleName}-error .#{$primaryStyleName}-base {
 	background: #FFE0E0;
 }
 */
 /* Disabled by default
-.#{$name}-required .#{$name}-base {
+.#{$primaryStyleName}-required .#{$primaryStyleName}-base {
 	background: #FFE0E0;
 }
 */
diff --git a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss
index f9731cf83c..bae740257f 100644
--- a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss
+++ b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss
@@ -1,13 +1,13 @@
-@mixin base-splitpanel($name : v-splitpanel) {
+@mixin base-splitpanel($primaryStyleName : v-splitpanel) {
 
-.#{$name}-horizontal,
-.#{$name}-vertical {
+.#{$primaryStyleName}-horizontal,
+.#{$primaryStyleName}-vertical {
 	overflow: hidden;
 }
-.#{$name}-hsplitter {
+.#{$primaryStyleName}-hsplitter {
 	width: 6px;
 }
-.#{$name}-hsplitter div {
+.#{$primaryStyleName}-hsplitter div {
 	width: 6px;
 	position: absolute;
 	top: 0;
@@ -16,19 +16,19 @@
 	cursor: e-resize;
 	cursor: col-resize;
 }
-.v-disabled .#{$name}-hsplitter div {
+.v-disabled .#{$primaryStyleName}-hsplitter div {
 	cursor: default;
 }
-.#{$name}-vsplitter {
+.#{$primaryStyleName}-vsplitter {
 	height: 6px;
 }
-.#{$name}-vsplitter div {
+.#{$primaryStyleName}-vsplitter div {
 	height: 6px;
 	background: #ddd;
 	cursor: s-resize;
 	cursor: row-resize;
 }
-.v-disabled .#{$name}-vsplitter div {
+.v-disabled .#{$primaryStyleName}-vsplitter div {
 	cursor: default;
 }
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/table/table.scss b/WebContent/VAADIN/themes/base/table/table.scss
index 552628bb61..660c30a4cf 100644
--- a/WebContent/VAADIN/themes/base/table/table.scss
+++ b/WebContent/VAADIN/themes/base/table/table.scss
@@ -1,4 +1,4 @@
-@mixin base-table($name : v-table) {
+@mixin base-table($primaryStyleName : 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 .#{$name}-header-wrap and .#{$name}-body
+ * - specify vertical borders on .#{$primaryStyleName}-header-wrap and .#{$primaryStyleName}-body
  *
  * Table cells in body:
- *  - padding/border for cells is to be defined for td elements (class name: .#{$name}-cell-content)
+ *  - padding/border for cells is to be defined for td elements (class name: .#{$primaryStyleName}-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: .#{$name}-cell-wrapper) element
+ *  - no padding or border is allowed for div inside cells (class name: .#{$primaryStyleName}-cell-wrapper) element
  *  - background is allowed for both elements
  *
  * Table headers:
- *  - 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
+ *  - table cells in header contain .#{$primaryStyleName}-resizer and 
+ *	  .#{$primaryStyleName}-caption-container div elements, which are both floated to right
+ *  - to align header caption to body content resizer width + .#{$primaryStyleName}-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.
  *
  */
-.#{$name} {
+.#{$primaryStyleName} {
 	overflow: hidden;
 	text-align: left; /* Force default alignment */
 }
-.#{$name}-header-wrap {
+.#{$primaryStyleName}-header-wrap {
 	overflow: hidden;
 	border: 1px solid #aaa;
 	border-bottom: none;
 	background: #efefef;
 }
-.#{$name}-header table,
-.#{$name}-table {
+.#{$primaryStyleName}-header table,
+.#{$primaryStyleName}-table {
 	border-spacing: 0;
 	border-collapse: separate;
 	margin: 0;
 	padding: 0;
 	border: 0;
 }
-.#{$name}-header td {
+.#{$primaryStyleName}-header td {
 	padding: 0;
 }
-.#{$name}-header-cell,
-.#{$name}-header-cell-asc,
-.#{$name}-header-cell-desc {
+.#{$primaryStyleName}-header-cell,
+.#{$primaryStyleName}-header-cell-asc,
+.#{$primaryStyleName}-header-cell-desc {
 	cursor: pointer;
 }
 
-.#{$name}.v-disabled .#{$name}-header-cell,
-.#{$name}.v-disabled .#{$name}-header-cell-asc,
-.#{$name}.v-disabled .#{$name}-header-cell-desc {
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell,
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell-asc,
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell-desc {
 	cursor: default;
 }
 
-.#{$name}-footer-wrap {
+.#{$primaryStyleName}-footer-wrap {
 	overflow: hidden;
 	border: 1px solid #aaa;
 	border-top: none;
 	background: #efefef;
 }
-.#{$name}-footer table {
+.#{$primaryStyleName}-footer table {
 	border-spacing: 0;
 	border-collapse: collapse;
 	margin: 0;
 	padding: 0;
 	border: 0;
 }
-.#{$name}-footer td {
+.#{$primaryStyleName}-footer td {
 	padding: 0;
 	border-right: 1px solid #aaa;
 }
-.#{$name}-footer-cell {
+.#{$primaryStyleName}-footer-cell {
 	cursor: pointer;
 }
-.#{$name}-footer-container {	
+.#{$primaryStyleName}-footer-container {	
 	float:right;	
 	padding-right:6px;
 	overflow:hidden;
 	white-space:nowrap;
 }
-.#{$name}-resizer {
+.#{$primaryStyleName}-resizer {
 	display: block;
 	height: 1.2em;
 	float: right;
@@ -93,53 +93,53 @@
 	width: 1px;
 	overflow: hidden;
 }
-.#{$name}.v-disabled .#{$name}-resizer {
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-resizer {
 	cursor: default;	
 }
-.#{$name}-caption-container {
+.#{$primaryStyleName}-caption-container {
 	overflow: hidden;
 	white-space: nowrap;
 	margin-left: 6px;
 }
-.#{$name}-caption-container-align-right {
+.#{$primaryStyleName}-caption-container-align-right {
 	float: right;
 }
-.#{$name}-sort-indicator {
+.#{$primaryStyleName}-sort-indicator {
 	width: 0px;
 	height: 1.2em;
 	float: right;
 }
-.#{$name}-header-cell-asc .#{$name}-sort-indicator,
-.#{$name}-header-cell-desc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator,
+.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
 	width: 16px;
 	height: 1.2em;
 	float: right;
 }		
-.#{$name}-header-cell-asc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator {
 	background: transparent url(../common/img/sprites.png) no-repeat right 6px;
 }
-.#{$name}-header-cell-desc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
 	background: transparent url(../common/img/sprites.png) no-repeat right -10px;
 }
-.#{$name}-caption-container-align-center {
+.#{$primaryStyleName}-caption-container-align-center {
 	text-align: center;
 }
-.#{$name}-caption-container-align-right {
+.#{$primaryStyleName}-caption-container-align-right {
 	text-align: right;
 }
-.#{$name}-caption-container .v-icon,
-.#{$name}-header-drag .v-icon {
+.#{$primaryStyleName}-caption-container .v-icon,
+.#{$primaryStyleName}-header-drag .v-icon {
 	vertical-align: middle;
 }
-.#{$name}-body {
+.#{$primaryStyleName}-body {
 	border: 1px solid #aaa;
 }
-.#{$name}-row-spacer {
+.#{$primaryStyleName}-row-spacer {
 	height: 10px;
 	overflow: hidden; /* IE hack to allow < one line height divs */
 }
-.#{$name}-row,
-.#{$name}-row-odd {
+.#{$primaryStyleName}-row,
+.#{$primaryStyleName}-row-odd {
     background: #fff;
 	border: 0;
 	margin: 0;
@@ -147,36 +147,36 @@
 	cursor: pointer;
 }
 
-.#{$name}-generated-row {
+.#{$primaryStyleName}-generated-row {
 	   background: #efefef;
 }
 
-.#{$name}-body-noselection .#{$name}-row,
-.#{$name}-body-noselection .#{$name}-row-odd {
+.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row,
+.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row-odd {
 	cursor: default;
 }
-.#{$name} .v-selected {
+.#{$primaryStyleName} .v-selected {
 	background: #999;
 	color: #fff;
 }
-.#{$name}-cell-content {
+.#{$primaryStyleName}-cell-content {
 	white-space: nowrap;
 	overflow: hidden;
 	padding: 0 6px;
 	border-right: 1px solid #aaa;
 }
-.#{$name}-cell-wrapper {
+.#{$primaryStyleName}-cell-wrapper {
 	/* Do not specify any margins, paddings or borders here */
 	white-space: nowrap;
 	overflow: hidden;
 }
-.#{$name}-cell-wrapper-align-center {
+.#{$primaryStyleName}-cell-wrapper-align-center {
 	text-align: center;
 }
-.#{$name}-cell-wrapper-align-right {
+.#{$primaryStyleName}-cell-wrapper-align-right {
 	text-align: right;
 }
-.#{$name}-column-selector {
+.#{$primaryStyleName}-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;
 }
-.#{$name}.v-disabled .#{$name}-column-selector {
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-column-selector {
 	cursor: default;
 }
-.#{$name}-focus-slot-left {
+.#{$primaryStyleName}-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;
 }
-.#{$name}-focus-slot-right {
+.#{$primaryStyleName}-focus-slot-right {
 	border-right: 2px solid #999;
 	margin-left: -2px;
 }
-.#{$name}-header-drag {
+.#{$primaryStyleName}-header-drag {
 	position: absolute;
 	background: #efefef;
 	border: 1px solid #eee;
@@ -209,30 +209,30 @@
 	margin-top: 20px;
 	z-index: 30000;
 }
-.#{$name}-header-drag .v-icon {
+.#{$primaryStyleName}-header-drag .v-icon {
 	vertical-align: middle;
 }
-.#{$name}-scrollposition {
+.#{$primaryStyleName}-scrollposition {
 	width: 160px;
 	background: #eee;
 	border: 1px solid #aaa;
 }
-.#{$name}-scrollposition span {
+.#{$primaryStyleName}-scrollposition span {
 	display: block;
 	text-align: center;
 }
-.#{$name}-body:focus,
-.#{$name}-body-wrapper:focus {
+.#{$primaryStyleName}-body:focus,
+.#{$primaryStyleName}-body-wrapper:focus {
 	outline: none;
 }
-.#{$name}-body.focused {
+.#{$primaryStyleName}-body.focused {
 	border-color: #388ddd;
 }
-.#{$name}-focus .#{$name}-cell-content {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-cell-content {
 	border-top: 1px dotted #0066bd;
 	border-bottom: 1px dotted #0066bd;
 }
-.#{$name}-focus .#{$name}-cell-wrapper {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-cell-wrapper {
 	margin-top: -1px;
 	margin-bottom: -1px;
 }
@@ -246,26 +246,26 @@
 /*************************************
  * Drag'n'drop styles
  *************************************/
-.#{$name}-drag .#{$name}-body {
+.#{$primaryStyleName}-drag .#{$primaryStyleName}-body {
 	border-color: #1d9dff;
 }
-.#{$name}-row-drag-middle .#{$name}-cell-content {
+.#{$primaryStyleName}-row-drag-middle .#{$primaryStyleName}-cell-content {
 	background-color: #bcdcff;
 }
-.#{$name}-row-drag-top .#{$name}-cell-content {
+.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-content {
 	border-top: 2px solid #1d9dff;
 }
-.#{$name}-row-drag-top .#{$name}-cell-wrapper {
+.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-wrapper {
 	margin-top: -2px; /* compensate the space consumed by border hint */
 }
-.#{$name}-row-drag-bottom .#{$name}-cell-content {
+.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content {
 	border-bottom: 2px solid #1d9dff;
 }
-.#{$name}-row-drag-bottom .#{$name}-cell-wrapper {
+.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-wrapper {
 	margin-bottom: -2px; /* compensate the space consumed by border hint */
 }
-.#{$name}-row-drag-top .#{$name}-cell-content:first-child:before,
-.#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after {
+.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-content:first-child:before,
+.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-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 .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after,
-.v-ie .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after {
+.v-ff .#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content:first-child:after,
+.v-ie .#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-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 a001605f27..1a799814c1 100644
--- a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss
+++ b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss
@@ -1,12 +1,12 @@
-@mixin base-tabsheet($name : v-tabsheet) {
+@mixin base-tabsheet($primaryStyleName : v-tabsheet) {
 
-.#{$name},
-.#{$name}-content,
-.#{$name}-deco {
+.#{$primaryStyleName},
+.#{$primaryStyleName}-content,
+.#{$primaryStyleName}-deco {
 	outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */
 	text-align: left; /* Force default alignment */
 }
-.#{$name}-tabs {
+.#{$primaryStyleName}-tabs {
 	empty-cells: hide;
 	border-collapse: collapse;
 	margin: 0;
@@ -15,55 +15,55 @@
 	width: 100%;
 	overflow:hidden;
 }
-.#{$name}-tabitemcell:focus {
+.#{$primaryStyleName}-tabitemcell:focus {
 	outline: none;
 }
-.#{$name}-tabitemcell,
-.#{$name}-spacertd {
+.#{$primaryStyleName}-tabitemcell,
+.#{$primaryStyleName}-spacertd {
 	margin: 0;
 	padding: 0;
 	vertical-align: bottom;
 }
-.#{$name}-spacertd {
+.#{$primaryStyleName}-spacertd {
 	width: 100%;
 }
-.#{$name}-spacertd div {
+.#{$primaryStyleName}-spacertd div {
 	border-left: 1px solid #aaa;
 	border-bottom: 1px solid #aaa;
 	height: 1em;
 	padding: 0.2em 0;
 }
-.#{$name}-hidetabs > .#{$name}-tabcontainer {
+.#{$primaryStyleName}-hidetabs > .#{$primaryStyleName}-tabcontainer {
 	display: none;
 }
-.#{$name}-scroller {
+.#{$primaryStyleName}-scroller {
 	white-space: nowrap;
 	text-align: right;
 	margin-top: -1em;
 }
-.v-disabled .#{$name}-scroller {
+.v-disabled .#{$primaryStyleName}-scroller {
 	display: none;
 }
-.#{$name}-scrollerPrev,
-.#{$name}-scrollerNext,
-.#{$name}-scrollerPrev-disabled,
-.#{$name}-scrollerNext-disabled {
+.#{$primaryStyleName}-scrollerPrev,
+.#{$primaryStyleName}-scrollerNext,
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled {
 	border: 1px solid #aaa;
 	background: #fff;
 	width: 12px;
 	height: 1em;
 	cursor: pointer;
 }
-.#{$name}-scrollerPrev-disabled,
-.#{$name}-scrollerNext-disabled {
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled {
 	opacity: 0.5;
 	cursor: default;
 }
-.#{$name}-tabs .v-caption,
-.#{$name}-tabs .v-caption span {
+.#{$primaryStyleName}-tabs .v-caption,
+.#{$primaryStyleName}-tabs .v-caption span {
 	white-space: nowrap;
 }
-.#{$name}-caption-close {
+.#{$primaryStyleName}-caption-close {
 	display: inline;
 	display: inline-block;
 	zoom: 1;
@@ -79,49 +79,49 @@
 	-moz-user-select: none;
 	-webkit-user-select: none;
 }
-.#{$name} .v-disabled .#{$name}-caption-close {
+.#{$primaryStyleName} .v-disabled .#{$primaryStyleName}-caption-close {
 	cursor: default;
 	visibility: hidden;
 }
-.#{$name}-tabitem:hover .#{$name}-caption-close {
+.#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close {
 	visibility: visible;
 }
-.#{$name}-tabitem {
+.#{$primaryStyleName}-tabitem {
 	border: 1px solid #aaa;
 	border-right: none;
 	cursor: pointer;
 	padding: 0.2em 0.5em;
 }
-.#{$name}-tabitem .v-caption {
+.#{$primaryStyleName}-tabitem .v-caption {
 	cursor: inherit;
 }
-.#{$name}.v-disabled .#{$name}-tabitem,
-.#{$name}-tabitemcell-disabled .#{$name}-tabitem {
+.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-tabitem,
+.#{$primaryStyleName}-tabitemcell-disabled .#{$primaryStyleName}-tabitem {
 	cursor: default;
 }
-.#{$name}-tabitem-selected {
+.#{$primaryStyleName}-tabitem-selected {
 	cursor: default;
 	border-bottom-color: #fff;
 }
-.#{$name}-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabitem-selected .v-caption {
 	cursor: default;
 }
-.#{$name}-content {
+.#{$primaryStyleName}-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;
 }
-.#{$name}-deco {
+.#{$primaryStyleName}-deco {
 	height: 1px;
 	background: #aaa;
 	overflow: hidden;
 }
-.#{$name}-hidetabs .#{$name}-content {
+.#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-content {
 	border: none;
 }
-.#{$name}-hidetabs .#{$name}-deco {
+.#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-deco {
 	height: 0;
 }
 
diff --git a/WebContent/VAADIN/themes/base/textfield/textfield.scss b/WebContent/VAADIN/themes/base/textfield/textfield.scss
index bb6765a60d..1eb1203e97 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($name : v-textfield) {
+@mixin base-textfield($primaryStyleName : v-textfield) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	text-align: left; /* Force default alignment */
 }
 .v-textarea {
 	resize: none;
 	white-space: pre-wrap;
 }
-.#{$name}-focus,
+.#{$primaryStyleName}-focus,
 .v-textarea-focus {
 }
-input.#{$name}-prompt,
+input.#{$primaryStyleName}-prompt,
 textarea.v-textarea-prompt {
 	color: #999;
 	font-style: italic;
 }
-input.#{$name}-readonly,
+input.#{$primaryStyleName}-readonly,
 textarea.v-textarea-readonly {
 	background: transparent;
 	border: none;
@@ -27,20 +27,20 @@ input.v-disabled,
 textarea.v-disabled {
 	resize: none;
 }
-input.#{$name}-readonly:focus,
+input.#{$primaryStyleName}-readonly:focus,
 textarea.v-textarea-readonly:focus {
 	outline: none;
 }
 /* Disabled by default
 .v-textarea-error,
-.#{$name}-error,
+.#{$primaryStyleName}-error,
 .v-richtextarea-error iframe.gwt-RichTextArea {
 	background: #FFE0E0;	
 }
 */
 /* Disabled by default
 .v-textarea-required,
-.#{$name}-required,
+.#{$primaryStyleName}-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 fd998eac45..c1d1283f52 100644
--- a/WebContent/VAADIN/themes/base/tree/tree.scss
+++ b/WebContent/VAADIN/themes/base/tree/tree.scss
@@ -1,62 +1,62 @@
-@mixin base-tree($name : v-tree) {
+@mixin base-tree($primaryStyleName : v-tree) {
 
 // tree-default.css
 
-.#{$name} {
+.#{$primaryStyleName} {
 	text-align: left; /* Force default alignment */
 	overflow: hidden;
 	padding: 1px 0;
 	outline: none;
 }
-.#{$name}-node {
+.#{$primaryStyleName}-node {
 	background: transparent url(../common/img/sprites.png) no-repeat 5px -37px;
 	padding: 1px 0;
 }
-.#{$name}-node-caption:focus {
+.#{$primaryStyleName}-node-caption:focus {
 	outline: none;
 }
-div.#{$name}-node-leaf {
+div.#{$primaryStyleName}-node-leaf {
 	background: transparent;
 }
-.#{$name}-node-expanded {
+.#{$primaryStyleName}-node-expanded {
 	background: transparent url(../common/img/sprites.png) no-repeat -5px -10px;
 }
-.#{$name}-node-caption {
+.#{$primaryStyleName}-node-caption {
 	margin-left: 1em;
 }
-.#{$name}-node span {
+.#{$primaryStyleName}-node span {
 	cursor: pointer;
 }
-.#{$name}-node-caption div {
+.#{$primaryStyleName}-node-caption div {
 	white-space: nowrap;
 }
-.#{$name}-node-caption span,
-.#{$name}-node-caption .v-icon {
+.#{$primaryStyleName}-node-caption span,
+.#{$primaryStyleName}-node-caption .v-icon {
 	vertical-align: middle;
 }
-.#{$name}-node-selected span {
+.#{$primaryStyleName}-node-selected span {
 	background: #999;
 	color: #fff;
 }
-.#{$name}-node-children {
+.#{$primaryStyleName}-node-children {
 	padding-left: 1em;
 }
 
 // Drag'n'drop styles
 
-.#{$name} .#{$name}-node-drag-top {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top {
 	border-top: 2px solid #1d9dff;
 	margin-top: -1px;
 	padding-top: 0;
 }
-.#{$name} .#{$name}-node-drag-bottom {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom {
 	border-bottom: 2px solid #1d9dff;
 	margin-bottom: -1px;
 	padding-bottom: 0;
 }
-.#{$name} .#{$name}-node-drag-top:before,
-.#{$name} .#{$name}-node-drag-bottom:after,
-.#{$name} .#{$name}-node-caption-drag-center:after {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top:before,
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom:after,
+.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after {
 	display: block;
 	
 	position: absolute;
@@ -65,23 +65,23 @@ div.#{$name}-node-leaf {
 	margin-top: -4px;
 	background: transparent url(../common/img/drag-slot-dot.png);
 }
-.#{$name} .#{$name}-node-drag-bottom:after {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom:after {
 	margin-top: -2px;
 }
-.#{$name} .#{$name}-node-caption-drag-center:after {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after {
 	margin-left: 14px;
 }
-.v-ff .#{$name} .#{$name}-node-caption-drag-center:after,
-.v-ie .#{$name} .#{$name}-node-caption-drag-center:after {
+.v-ff .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after,
+.v-ie .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after {
 	margin-top: -2px;
 }
-.#{$name} .#{$name}-node-drag-top {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top {
 	background-position: 5px -38px;
 }
-.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-expanded {
 	background-position: -5px -11px;
 }
-.#{$name} .#{$name}-node-caption-drag-center div {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div {
 	border: 2px solid #1d9dff;
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
@@ -89,12 +89,12 @@ div.#{$name}-node-leaf {
 	margin: -2px 2px -2px -2px;
 	background-color: #bcdcff;
 }
-.#{$name} .#{$name}-node-caption-drag-center div {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div {
 	background-color: rgba(169,209,255,.6);
 }
-.#{$name} .#{$name}-node-caption-drag-center div,
-.#{$name} .#{$name}-node-drag-top,
-.#{$name} .#{$name}-node-drag-bottom {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div,
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top,
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom {
 	border-color: rgba(0,109,232,.6);
 }
 
@@ -103,38 +103,38 @@ div.#{$name}-node-leaf {
 // row, but #10309 prevents us from doing that right now.
 
 	// Make item caption height an even number (so that the connector dots overlap nicely)
-	.#{$name}-connectors .#{$name}-node-caption {
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-caption {
 		padding-top: 1px;
 	}
-	.#{$name}-connectors .#{$name}-node {
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node {
 		background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
 	}
-	.#{$name}-connectors .#{$name}-node-expanded {
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded {
 		background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
 	}
-	.#{$name}-connectors .#{$name}-node-last {
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-last {
 		background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
 	}
-	.#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-last {
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-last {
 		background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
 	}
-	.#{$name}-connectors .#{$name}-node-leaf {
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-leaf {
 		background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
 	}
-	.#{$name}-connectors .#{$name}-node-leaf-last {
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-leaf-last {
 		background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
 	}
-	.#{$name}-connectors .#{$name}-node-children {
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-children {
 		background: transparent url(img/connector.png) repeat-y 2px 0;
 	}
-	.#{$name}-connectors .#{$name}-node-children-last {
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-children-last {
 		background: transparent;
 	}
-	.#{$name}-connectors .#{$name}-node-drag-top,
-	.#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-drag-top {
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top,
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-drag-top {
 		background-position: 2px -53px;
 	}
-	.#{$name}-connectors .#{$name}-node-drag-top.#{$name}-node-leaf {
+	.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-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 dfb4628794..934e66097c 100644
--- a/WebContent/VAADIN/themes/base/treetable/treetable.scss
+++ b/WebContent/VAADIN/themes/base/treetable/treetable.scss
@@ -1,6 +1,6 @@
-@mixin base-treetable($name : v-treetable) {
+@mixin base-treetable($primaryStyleName : v-treetable) {
 
-.#{$name}-treespacer {
+.#{$primaryStyleName}-treespacer {
     display: inline-block;
     background: transparent;
     height: 10px;
@@ -11,58 +11,58 @@
     top: 5px;
 }
 
-.#{$name}-node-closed {
+.#{$primaryStyleName}-node-closed {
     background: url(../treetable/img/arrow-right.png) right top no-repeat;
 }
 
-.#{$name}-node-open {
+.#{$primaryStyleName}-node-open {
     background: url(../treetable/img/arrow-down.png) right top no-repeat;
 }
 
-.#{$name} .v-checkbox {
+.#{$primaryStyleName} .v-checkbox {
 	display: inline-block;
 	padding-bottom: 4px;
 }
 
-.#{$name} .v-table-row .v-table-cell-content,
-.#{$name} .v-table-row-odd .v-table-cell-content {
+.#{$primaryStyleName} .v-table-row .v-table-cell-content,
+.#{$primaryStyleName} .v-table-row-odd .v-table-cell-content {
     position: relative;
     z-index: 10;
 }
 
-.#{$name} .v-table-cell-wrapper {
+.#{$primaryStyleName} .v-table-cell-wrapper {
 	position: relative;
 }
 
-.#{$name} .v-table-body .v-table-table .v-table-row-animating {
+.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating {
 	zoom:1;
 	z-index:1;
 }
 
-.#{$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 {
+.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating,
+.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content {
     background:transparent;
 }
 
-.#{$name}-animation-clone {
+.#{$primaryStyleName}-animation-clone {
 	border-spacing: 0;
 	zoom:1;
 }
 
-div.#{$name}-animation-clone-wrapper {
+div.#{$primaryStyleName}-animation-clone-wrapper {
 	position: absolute;
     z-index: 2;
     background-color:#fff;
 }
 
-div.#{$name}-animation-clone-wrapper table.#{$name}-animation-clone {
+div.#{$primaryStyleName}-animation-clone-wrapper table.#{$primaryStyleName}-animation-clone {
     background-color:#fff;
 }
 
-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 {
+div table.#{$primaryStyleName}-animation-clone tr.v-table-row,
+div table.#{$primaryStyleName}-animation-clone tr.v-table-row-odd,
+div table.#{$primaryStyleName}-animation-clone tr.v-table-row td.v-table-cell-content,
+div table.#{$primaryStyleName}-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 a992f95f06..71827480ae 100644
--- a/WebContent/VAADIN/themes/base/upload/upload.scss
+++ b/WebContent/VAADIN/themes/base/upload/upload.scss
@@ -1,22 +1,22 @@
-@mixin base-upload($name : v-upload) {
+@mixin base-upload($primaryStyleName : v-upload) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	white-space: nowrap;
 }
 
 
-.#{$name}-immediate {
+.#{$primaryStyleName}-immediate {
 	position: relative;
 	margin: 0;
 	overflow: hidden;
 }
 
-.v-ff .#{$name}-immediate,
-.v-op .#{$name}-immediate {
+.v-ff .#{$primaryStyleName}-immediate,
+.v-op .#{$primaryStyleName}-immediate {
 	display: inline-block;
 }
 
-.#{$name}-immediate input {
+.#{$primaryStyleName}-immediate input {
 	opacity: 0;
 	filter: alpha(opacity=0);
 	z-index: 2;
@@ -28,7 +28,7 @@
 	background: transparent;
 }
 
-.#{$name}-immediate button {
+.#{$primaryStyleName}-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 a632e20d09..e1e830d488 100644
--- a/WebContent/VAADIN/themes/base/widget/widget.scss
+++ b/WebContent/VAADIN/themes/base/widget/widget.scss
@@ -1,6 +1,6 @@
-@mixin base-widget($name : v-widget) {
+@mixin base-widget($primaryStyleName : v-widget) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	-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 486906ea6d..b9e7b54139 100644
--- a/WebContent/VAADIN/themes/base/window/window.scss
+++ b/WebContent/VAADIN/themes/base/window/window.scss
@@ -1,29 +1,29 @@
-@mixin base-window($name : v-window) {
+@mixin base-window($primaryStyleName : v-window) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	background: #fff;
 }
-.#{$name}-contents {
+.#{$primaryStyleName}-contents {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
 
-.#{$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 {
+.#{$primaryStyleName}.v-has-width > div.popupContent,
+.#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-contents,
+.#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-contents > div {
 	width: 100%;
 }
 
-.#{$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 {
+.#{$primaryStyleName}.v-has-height > div.popupContent,
+.#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-contents,
+.#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-contents > div {
 	height: 100%;
 }
 
-.#{$name}-outerheader {
+.#{$primaryStyleName}-outerheader {
 	padding: 0.3em 1em;
 	height: 1.6em;
 	position: relative;
@@ -32,35 +32,35 @@
 	box-sizing: border-box;
 }
 
-.#{$name}-outerheader,
-.#{$name}-draggingCurtain {
+.#{$primaryStyleName}-outerheader,
+.#{$primaryStyleName}-draggingCurtain {
  	cursor: move;	
 }
-.#{$name}-header {
+.#{$primaryStyleName}-header {
 	font-weight: bold;
 }
 /* A more specific selector to make sure padding isn't so easily overridden */
-div.#{$name}-header {
+div.#{$primaryStyleName}-header {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	-ms-text-overflow: ellipsis;
 	overflow: hidden;
 	padding: 0;
 }
-.#{$name}-header .v-icon {
+.#{$primaryStyleName}-header .v-icon {
 	vertical-align: middle; /* This has to be 'middle', not 'bottom', to allow larger icons than 16px */
 }
-.#{$name}-contents > div {
+.#{$primaryStyleName}-contents > div {
 	outline: none;
 }
-.#{$name}-footer {
+.#{$primaryStyleName}-footer {
 	overflow: hidden;
 	zoom: 1;
 	height: 10px;
 	position: relative;
 	cursor: move;
 }
-.#{$name}-resizebox {
+.#{$primaryStyleName}-resizebox {
 	width: 10px;
 	height: 10px;
 	background: #ddd;
@@ -69,19 +69,19 @@ div.#{$name}-header {
 	right: 0;
 }
 
-.#{$name}-resizebox,
-.#{$name}-resizingCurtain {
+.#{$primaryStyleName}-resizebox,
+.#{$primaryStyleName}-resizingCurtain {
 	cursor: se-resize;
 }
 
-.#{$name} div.#{$name}-footer-noresize {
+.#{$primaryStyleName} div.#{$primaryStyleName}-footer-noresize {
 	height: 0;
 }
-.#{$name}-resizebox-disabled {
+.#{$primaryStyleName}-resizebox-disabled {
 	cursor: default;
 	display: none;
 }
-.#{$name}-closebox {
+.#{$primaryStyleName}-closebox {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -91,7 +91,7 @@ div.#{$name}-header {
 	cursor: pointer;
 	overflow: hidden;
 }
-.#{$name}-modalitycurtain {
+.#{$primaryStyleName}-modalitycurtain {
 	top: 0;
 	left: 0;
 	background: #999;