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

8 files changed, 148 insertions, 148 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
index 1efdab68af..40c6713bcd 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
@@ -1,22 +1,22 @@
-@mixin reindeer-tabsheet-borderless-style {
+@mixin reindeer-tabsheet-borderless-style($name : v-tabsheet-borderless) {
 
-.v-tabsheet-borderless .v-tabsheet-tabitemcell-first {
+.#{$name} .v-tabsheet-tabitemcell-first {
 	padding-left: 7px;
 	background: url(img/framed/tab-first-left.png) no-repeat -3px 0;
 }
-.v-tabsheet-borderless .v-tabsheet-tabitemcell-selected-first {
+.#{$name} .v-tabsheet-tabitemcell-selected-first {
 	background: url(img/framed/tab-first-left-sel.png) no-repeat -3px 0;
 }
-.v-tabsheet-borderless .v-tabsheet-spacertd div {
+.#{$name} .v-tabsheet-spacertd div {
 	margin-right: 0;
 }
-.v-tabsheet-borderless .v-tabsheet-spacertd {
+.#{$name} .v-tabsheet-spacertd {
 	background: transparent;
 }
-.v-tabsheet-borderless .v-tabsheet-content {
+.#{$name} .v-tabsheet-content {
 	border: none;
 }
-.v-tabsheet-borderless .v-tabsheet-deco {
+.#{$name} .v-tabsheet-deco {
 	height: 0;
 	border-top: none;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
index dda381b1b0..f8e1a16335 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
@@ -1,9 +1,9 @@
-@mixin reindeer-tabsheet-hover-closable-style {
+@mixin reindeer-tabsheet-hover-closable-style($name : v-tabsheet) {
 
-.v-tabsheet-tabs-hover-closable .v-tabsheet-caption-close {
+.#{$name}-tabs-hover-closable .#{$name}-caption-close {
 	visibility: hidden;
 }
-.v-tabsheet-tabs-hover-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
+.#{$name}-tabs-hover-closable .#{$name}-tabitem:hover .#{$name}-caption-close {
 	visibility: visible;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
index 608aae55cb..7d21b3b2a8 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
@@ -1,41 +1,41 @@
-@mixin reindeer-tabsheet-minimal-style {
+@mixin reindeer-tabsheet-minimal-style($name : v-tabsheet) {
 
 /**
  * Tabsheet "minimal" style --------------
  */
 
 /* Minimal tabsheet on blue background */
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div,
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-tabitem,
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected  {
+.blue .#{$name}-tabs-minimal .#{$name}-spacertd div,
+.blue .#{$name}-tabs-minimal .#{$name}-tabitem,
+.blue .#{$name}-tabs-minimal .#{$name}-tabitem-selected  {
 	border-color: #7c8a91;
 }
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.blue .#{$name}-tabs-minimal .#{$name}-caption-close {
 	color: #7c8a91;
 }
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover {
+.blue .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
 	color: #BCD3DE;
 	background: #778d98;
 }
-.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.blue .#{$name}-tabs-minimal .#{$name}-caption-close:active {
 	background: #4f6874;
 }
 
 /* Default & white styles */
-.v-tabsheet-tabs-minimal .v-tabsheet-spacertd div,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div {
+.#{$name}-tabs-minimal .#{$name}-spacertd div,
+.white .#{$name}-tabs-minimal .#{$name}-spacertd div {
 	border-bottom: 1px solid #bfbfbf;
 	height: auto;
 	background: transparent;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitemcell,
-.v-tabsheet-tabs-minimal .v-tabsheet-spacertd {
+.#{$name}-tabs-minimal .#{$name}-tabitemcell,
+.#{$name}-tabs-minimal .#{$name}-spacertd {
 	height: auto;
 	background: transparent;
 	padding-left: 0;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-tabitem {
+.#{$name}-tabs-minimal .#{$name}-tabitem,
+.white .#{$name}-tabs-minimal .#{$name}-tabitem {
 	border: none;
 	border-bottom: 1px solid #bfbfbf;
 	color: #4d748f;
@@ -44,54 +44,54 @@
 	background: transparent;
 	text-shadow: none;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem .v-caption {
+.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption {
 	padding: 5px 16px;
 	height: auto;
 	background: transparent;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitemcell-selected {
+.#{$name}-tabs-minimal .#{$name}-tabitemcell-selected {
 	background: transparent;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected {
+.#{$name}-tabs-minimal .#{$name}-tabitem-selected,
+.white .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
 	background: transparent;
 	border: 1px solid #bfbfbf;
 	border-bottom: none;
 	color: #222;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected .v-caption {
+.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption {
 	background: transparent;
 	padding: 4px 15px 6px 15px;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem .v-caption-closable,
-.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected .v-caption-closable {
+.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption-closable,
+.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption-closable {
 	padding-right: 6px;
 }
-.v-tabsheet-content-minimal,
-.white .v-tabsheet-content-minimal {
+.#{$name}-content-minimal,
+.white .#{$name}-content-minimal {
 	border: none;
 }
-.v-tabsheet-content-minimal .v-tabsheet-tabsheetpanel {
+.#{$name}-content-minimal .#{$name}-tabsheetpanel {
 	background: transparent;
 }
-.v-tabsheet-deco-minimal,
-.white .v-tabsheet-deco-minimal {
+.#{$name}-deco-minimal,
+.white .#{$name}-deco-minimal {
 	height: 0;
 	border: none;
 }
-.v-tabsheet-tabcontainer-minimal .v-tabsheet-scroller {
+.#{$name}-tabcontainer-minimal .#{$name}-scroller {
 	margin-top: -20px;
 	height: 17px;
 	padding: 0;
 	border: none;
 	background: transparent;
 }
-.v-tabsheet-tabcontainer-minimal .v-tabsheet-scroller button {
+.#{$name}-tabcontainer-minimal .#{$name}-scroller button {
 	margin-top: 0;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close,
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover,
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.#{$name}-tabs-minimal .#{$name}-caption-close,
+.#{$name}-tabs-minimal .#{$name}-caption-close:hover,
+.#{$name}-tabs-minimal .#{$name}-caption-close:active {
 	text-indent: 0;
 	background: transparent;
 	margin-left: 3px;
@@ -104,45 +104,45 @@
 	-webkit-border-radius: 7px;
 	-moz-border-radius: 7px;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.#{$name}-tabs-minimal .#{$name}-caption-close {
 	margin-top: 1px;
 }
-.v-ff .v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.v-ff .#{$name}-tabs-minimal .#{$name}-caption-close {
 	margin-top: -15px;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover {
+.#{$name}-tabs-minimal .#{$name}-caption-close:hover,
+.white .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
 	color: #fff;
 	background: #aaa;
 }
-.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active,
-.white .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.#{$name}-tabs-minimal .#{$name}-caption-close:active,
+.white .#{$name}-tabs-minimal .#{$name}-caption-close:active {
 	background: #777;
 }
 
 /* Minimal tabsheet on black background */
-.black .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div,
-.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem,
-.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected  {
+.black .#{$name}-tabs-minimal .#{$name}-spacertd div,
+.black .#{$name}-tabs-minimal .#{$name}-tabitem,
+.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected  {
 	border-color: #3e4044;
 	color: #6a7f89;
 }
-.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected {
+.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
 	color: #c9ccce;
 }
-.black .v-tabsheet-content-minimal,
-.black .v-tabsheet-content-bar {
+.black .#{$name}-content-minimal,
+.black .#{$name}-content-bar {
 	color: #c9ccce;
 	text-shadow: #000 0 0 1px;
 }
-.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close {
+.black .#{$name}-tabs-minimal .#{$name}-caption-close {
 	color: #72787c;
 }
-.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover {
+.black .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
 	color: #1d2021;
 	background: #4d5154;
 }
-.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active {
+.black .#{$name}-tabs-minimal .#{$name}-caption-close:active {
 	background: #626669;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
index 176d35eea8..5147f608ab 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
@@ -1,22 +1,22 @@
-@mixin reindeer-tabsheet-normal-style {
+@mixin reindeer-tabsheet-normal-style($name : v-tabsheet) {
 
 /* Default Tabsheet styles */
 
-.v-tabsheet-tabitemcell,
-.v-tabsheet-spacertd {
+.#{$name}-tabitemcell,
+.#{$name}-spacertd {
 	height: 32px;
 }
-.v-tabsheet-tabitemcell {
+.#{$name}-tabitemcell {
 	background: no-repeat;
 	background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */
 	padding-left: 3px;
 }
-.v-tabsheet-tabitemcell-first {
+.#{$name}-tabitemcell-first {
 	padding-left: 10px;
 	background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitem,
-.v-tabsheet-spacertd div {
+.#{$name}-tabitem,
+.#{$name}-spacertd div {
 	border: none;
 	height: 32px;
 	background: transparent repeat-x;
@@ -25,23 +25,23 @@
 	color: #222;
 	text-shadow: #fff 0 1px 0;
 }
-.v-tabsheet-tabitem .v-caption {
+.#{$name}-tabitem .v-caption {
 	border: none;
 	height: 23px;
 	background: no-repeat right top;
 	background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
 	padding: 9px 8px 0 6px;
 }
-.v-tabsheet-tabitem .v-caption-closable {
+.#{$name}-tabitem .v-caption-closable {
 	padding-right: 0;
 	padding-left: 17px;
 }
-.v-tabsheet-tabitem .v-captiontext {
+.#{$name}-tabitem .v-captiontext {
 	height: 16px;
 	line-height: 16px;
 	vertical-align:baseline;
 }
-.v-tabsheet-caption-close {
+.#{$name}-caption-close {
 	float: right;
 	width: 19px;
 	height: 18px;
@@ -55,70 +55,70 @@
 	font-size: 14px;
 	font-weight: normal;
 }
-.v-tabsheet-caption-close:hover {
+.#{$name}-caption-close:hover {
 	background-image: url(img/close-btn-hover.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-caption-close:active {
+.#{$name}-caption-close:active {
 	background-image: url(img/close-btn-pressed.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+.#{$name}-tabitem-selected .#{$name}-caption-close {
 	background-image: url(img/close-btn-sel.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+.#{$name}-tabitem-selected .#{$name}-caption-close:hover {
 	background-image: url(img/close-btn-sel-hover.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+.#{$name}-tabitem-selected .#{$name}-caption-close:active {
 	background-image: url(img/close-btn-sel-pressed.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitemcell-selected {
+.#{$name}-tabitemcell-selected {
 	background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitemcell-selected-first {
+.#{$name}-tabitemcell-selected-first {
 	background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabitem-selected {
+.#{$name}-tabitem-selected {
 	background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #232930;
 }
-.v-tabsheet-tabitem-selected .v-caption {
+.#{$name}-tabitem-selected .v-caption {
 	background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
 }
-.v-tabsheet-spacertd div {
+.#{$name}-spacertd div {
 	margin-right: 4px;
 }
-.v-tabsheet-spacertd {
+.#{$name}-spacertd {
 	background: transparent no-repeat right top;
 	background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */
 }
-.blue .v-tabsheet-content {
+.blue .#{$name}-content {
 	border-color: #a8bcc5;
 }
-.v-tabsheet-content,
-.white .v-tabsheet-content {
+.#{$name}-content,
+.white .#{$name}-content {
 	border: 1px solid #dcdcdc;
 	border-bottom: none;
 	border-top: none;
 	color: #222;
 	text-shadow: none;
 }
-.v-tabsheet-tabsheetpanel {
+.#{$name}-tabsheetpanel {
 	background: #fff;
 }
-.v-sa .v-tabsheet-content {
+.v-sa .#{$name}-content {
 	border-color: rgba(0,0,0,.1);
 }
-.blue .v-tabsheet-deco {
+.blue .#{$name}-deco {
 	border-color: #92a3ac;
 	background: #adc2cd;
 }
-.v-tabsheet-deco,
-.white .v-tabsheet-deco {
+.#{$name}-deco,
+.white .#{$name}-deco {
 	height: 1px;
 	border-top: 1px solid #bebebe;
 	background: #e2e2e2;
 	overflow: hidden;
 }
-.v-sa .v-tabsheet-deco {
+.v-sa .#{$name}-deco {
 	border-top-color: rgba(0,0,0,.1);
 	background: rgba(0,0,0,.08);
 }
@@ -126,31 +126,31 @@
 
 /* Icons & error indicators */
 
-.v-tabsheet-tabs .v-icon,
-.v-tabsheet-tabs .v-captiontext,
-.v-tabsheet-tabs .v-errorindicator {
+.#{$name}-tabs .v-icon,
+.#{$name}-tabs .v-captiontext,
+.#{$name}-tabs .v-errorindicator {
 	display: inline;
 	float: none;
 }
-.v-sa .v-tabsheet-tabs .v-captiontext {
+.v-sa .#{$name}-tabs .v-captiontext {
 	display: inline-block;
 }
-.v-tabsheet-tabs .v-icon {
+.#{$name}-tabs .v-icon {
 	width: 16px !important;
 	height: 16px !important;
 }
-.v-tabsheet-tabs .v-errorindicator {
+.#{$name}-tabs .v-errorindicator {
 	display: inline-block;
 	width: 13px;
 	height: 16px;
 	background: transparent url(../common/icons/error.png) no-repeat 50%;
 }
-.v-ie .v-tabsheet-tabs .v-errorindicator {
+.v-ie .#{$name}-tabs .v-errorindicator {
 	zoom: 1;
 	display: inline;
 }
-.v-ie8 .v-tabsheet-tabs .v-errorindicator,
-.v-ie9 .v-tabsheet-tabs .v-errorindicator {
+.v-ie8 .#{$name}-tabs .v-errorindicator,
+.v-ie9 .#{$name}-tabs .v-errorindicator {
 	display: inline-block;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
index 8f176e2150..b3f98098ef 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
@@ -1,8 +1,8 @@
-@mixin reindeer-tabsheet-scroller {
+@mixin reindeer-tabsheet-scroller($name : v-tabsheet) {
 
 /* Tabsheet scroller styles */
 
-.v-tabsheet-scroller {
+.#{$name}-scroller {
 	height: 31px;
 	margin-top: -31px;
 	padding: 0 3px 0 4px;
@@ -13,13 +13,13 @@
 	background: transparent url(img/framed/tab-bg.png) repeat-x left -1px;
 	width: 36px;
 }
-.v-tabsheet-scroller button {
+.#{$name}-scroller button {
 	margin-top: 7px;
 }
-.v-tabsheet-scrollerPrev,
-.v-tabsheet-scrollerNext,
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled {
+.#{$name}-scrollerPrev,
+.#{$name}-scrollerNext,
+.#{$name}-scrollerPrev-disabled,
+.#{$name}-scrollerNext-disabled {
 	border: none;
 	background: transparent;
 	background-image: url(img/tab-prev.png); /** sprite-ref: verticals */
@@ -27,26 +27,26 @@
 	height: 17px;
 	overflow: hidden;
 }
-.v-tabsheet-scroller button::-moz-focus-inner {
+.#{$name}-scroller button::-moz-focus-inner {
 	border: none;
 }
-.v-tabsheet-scrollerNext {
+.#{$name}-scrollerNext {
 	background-image: url(img/tab-next.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-scrollerPrev:active {
+.#{$name}-scrollerPrev:active {
 	background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-scrollerNext:active {
+.#{$name}-scrollerNext:active {
 	background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerPrev-disabled:active {
+.#{$name}-scrollerPrev-disabled,
+.#{$name}-scrollerPrev-disabled:active {
 	background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */
 	opacity: 1;
 	filter: none;
 }
-.v-tabsheet-scrollerNext-disabled,
-.v-tabsheet-scrollerNext-disabled:active {
+.#{$name}-scrollerNext-disabled,
+.#{$name}-scrollerNext-disabled:active {
 	background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
 	opacity: 1;
 	filter: none;
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
index d26a569c25..75ac111ec7 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
@@ -1,11 +1,11 @@
-@mixin reindeer-tabsheet-selected-closable-style {
+@mixin reindeer-tabsheet-selected-closable-style($name : v-tabsheet) {
 
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem .v-tabsheet-caption-close,
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close {
+.#{$name}-tabs-selected-closable .#{$name}-tabitem .#{$name}-caption-close,
+.#{$name}-tabs-selected-closable .#{$name}-tabitem:hover .#{$name}-caption-close {
 	visibility: hidden;
 }
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected .v-tabsheet-caption-close,
-.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected:hover .v-tabsheet-caption-close {
+.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected .#{$name}-caption-close,
+.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected:hover .#{$name}-caption-close {
 	visibility: visible;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
index e4f098046c..61358b3723 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
@@ -1,42 +1,42 @@
-@mixin reindeer-tabsheet-small-style {
+@mixin reindeer-tabsheet-small-style($name : v-tabsheet) {
 
 /**
  * Tabsheet bar style ---------------
  */
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell,
-.v-tabsheet-tabs-bar .v-tabsheet-spacertd {
+.#{$name}-tabs-bar .#{$name}-tabitemcell,
+.#{$name}-tabs-bar .#{$name}-spacertd {
 	height: 20px;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-spacertd {
+.#{$name}-tabs-bar .#{$name}-spacertd {
 	background: transparent;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell {
+.#{$name}-tabs-bar .#{$name}-tabitemcell {
 	background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-first {
+.#{$name}-tabs-bar .#{$name}-tabitemcell-first {
 	padding-left: 6px;
 	background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem,
-.v-tabsheet-tabs-bar .v-tabsheet-spacertd div {
+.#{$name}-tabs-bar .#{$name}-tabitem,
+.#{$name}-tabs-bar .#{$name}-spacertd div {
 	height: 20px;
 	background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	font-size: 11px;
 	margin: 0;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem .v-caption {
+.#{$name}-tabs-bar .#{$name}-tabitem .v-caption {
 	height: 18px;
 	background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
 	padding: 2px 12px 0 10px;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem .v-caption-closable,
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-caption-closable {
+.#{$name}-tabs-bar .#{$name}-tabitem .v-caption-closable,
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption-closable {
 	padding-right: 8px;
 	padding-left: 14px;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close,
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:hover,
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:active {
+.#{$name}-tabs-bar .#{$name}-caption-close,
+.#{$name}-tabs-bar .#{$name}-caption-close:hover,
+.#{$name}-tabs-bar .#{$name}-caption-close:active {
 	text-indent: 0;
 	background: transparent;
 	margin-left: 3px;
@@ -49,62 +49,62 @@
 	-webkit-border-radius: 7px;
 	-moz-border-radius: 7px;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close {
+.#{$name}-tabs-bar .#{$name}-caption-close {
 	margin-top: 1px;
 }
-.v-ff .v-tabsheet-tabs-bar .v-tabsheet-caption-close {
+.v-ff .#{$name}-tabs-bar .#{$name}-caption-close {
 	margin-top: -14px;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:hover {
+.#{$name}-tabs-bar .#{$name}-caption-close:hover {
 	background: #bfbfbf;
 	-webkit-box-shadow: 0 1px 0 #fff;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-caption-close:active {
+.#{$name}-tabs-bar .#{$name}-caption-close:active {
 	background: #a9a9a9;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close {
 	color: #404142;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:hover {
 	background: #5e666e;
 	color: #fff;
 	text-shadow: 0 -1px 0 #222;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:active {
 	background: #404142;
 }
 
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-selected {
+.#{$name}-tabs-bar .#{$name}-tabitemcell-selected {
 	background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-selected-first {
+.#{$name}-tabs-bar .#{$name}-tabitemcell-selected-first {
 	background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected {
 	background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #232930;
 }
-.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-caption {
+.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption {
 	background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
 }
-.v-tabsheet-tabcontainer-bar .v-tabsheet-scroller {
+.#{$name}-tabcontainer-bar .#{$name}-scroller {
 	margin-top: -20px;
 	height: 19px;
 	border-right: none;
 	background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-tabsheet-tabcontainer-bar .v-tabsheet-scroller button {
+.#{$name}-tabcontainer-bar .#{$name}-scroller button {
 	margin-top: 1px;
 }
-.v-tabsheet-content-bar,
-.white .v-tabsheet-content-bar {
+.#{$name}-content-bar,
+.white .#{$name}-content-bar {
 	border: none;
 }
-.v-tabsheet-content-bar .v-tabsheet-tabsheetpanel {
+.#{$name}-content-bar .#{$name}-tabsheetpanel {
 	background: transparent;
 }
-.v-tabsheet-deco-bar,
-.white .v-tabsheet-deco-bar {
+.#{$name}-deco-bar,
+.white .#{$name}-deco-bar {
 	height: 0;
 	border: none;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss
index 8b9252cf68..35001daf4d 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss
@@ -8,7 +8,7 @@
 @import "tabsheet-hover-closable-style.scss";
 
 @mixin reindeer-tabsheet {
-
+	// TODO use $exclude
 	@include reindeer-tabsheet-normal-style;
 	@include reindeer-tabsheet-scroller;
 	@include reindeer-tabsheet-borderless-style;