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

1 files changed, 21 insertions, 21 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
index 07a38891f5..c837688387 100644
--- a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
+++ b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
@@ -1,12 +1,12 @@
-@mixin reindeer-splitpanel {
+@mixin reindeer-splitpanel($name : v-splitpanel) {
 
-.v-splitpanel-hsplitter,
-.v-splitpanel-hsplitter-locked {
+.#{$name}-hsplitter,
+.#{$name}-hsplitter-locked {
 	width: 7px;
 	background-repeat: repeat-y;
 	background-image: url(img/hor-bg.png); /** sprite-ref: horizontals; sprite-alignment: repeat */
 }
-.v-splitpanel-hsplitter div {
+.#{$name}-hsplitter div {
 	width: 7px;
 	height: 100%; /* for Opera */
 	background: transparent;
@@ -14,13 +14,13 @@
 	background-position: 50%;
 	background-image: url(img/hor-handle.png); /** sprite-ref: horizontals; sprite-alignment: center */
 }
-.v-splitpanel-vsplitter,
-.v-splitpanel-vsplitter-locked {
+.#{$name}-vsplitter,
+.#{$name}-vsplitter-locked {
 	height: 7px;
 	background-repeat: repeat-x;
 	background-image: url(img/ver-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-splitpanel-vsplitter div {
+.#{$name}-vsplitter div {
 	height: 7px;
 	background: transparent;
 	background-repeat: no-repeat;
@@ -30,38 +30,38 @@
 
 
 /* Splitpanels on blue background */
-.blue .v-splitpanel-hsplitter-small,
-.blue .v-splitpanel-hsplitter-small-locked {
+.blue .#{$name}-hsplitter-small,
+.blue .#{$name}-hsplitter-small-locked {
 	background: #7c8a91;
 }
 
 /* Splitpanels on black background */
-.black .v-splitpanel-hsplitter-small,
-.black .v-splitpanel-hsplitter-small-locked {
+.black .#{$name}-hsplitter-small,
+.black .#{$name}-hsplitter-small-locked {
 	background: #4e5253;
 }
 
 /* Small style */
-.v-splitpanel-hsplitter-small,
-.v-splitpanel-hsplitter-small-locked,
-.white .v-splitpanel-hsplitter-small,
-.white .v-splitpanel-hsplitter-small-locked {
+.#{$name}-hsplitter-small,
+.#{$name}-hsplitter-small-locked,
+.white .#{$name}-hsplitter-small,
+.white .#{$name}-hsplitter-small-locked {
 	width: 1px;
 	background: #949698;
 }
-.v-splitpanel-vsplitter-small,
-.v-splitpanel-vsplitter-small-locked,
-.white .v-splitpanel-vsplitter-small,
-.white .v-splitpanel-vsplitter-small-locked {
+.#{$name}-vsplitter-small,
+.#{$name}-vsplitter-small-locked,
+.white .#{$name}-vsplitter-small,
+.white .#{$name}-vsplitter-small-locked {
 	height: 1px;
 	background: #949698;
 }
-.v-splitpanel-hsplitter-small div {
+.#{$name}-hsplitter-small div {
 	width: 5px;
 	margin-left: -2px;
 	background: transparent;
 }
-.v-splitpanel-vsplitter-small div {
+.#{$name}-vsplitter-small div {
 	height: 5px;
 	margin-top: -2px;
 	background: transparent;