1 files changed, 31 insertions, 31 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/panel/panel.scss b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
index 00483c5546..e692ba90a9 100644
--- a/WebContent/VAADIN/themes/reindeer/panel/panel.scss
+++ b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
@@ -1,58 +1,58 @@
-@mixin reindeer-panel {
+@mixin reindeer-panel($name : v-panel) {
 
-.blue .v-panel-caption,
-.blue .v-panel-nocaption,
-.blue .v-panel-content {
+.blue .#{$name}-caption,
+.blue .#{$name}-nocaption,
+.blue .#{$name}-content {
 	border-color: #a8bcc5;
 }
-.v-panel-caption,
-.v-panel-nocaption,
-.white .v-panel-caption,
-.white .v-panel-nocaption {
+.#{$name}-caption,
+.#{$name}-nocaption,
+.white .#{$name}-caption,
+.white .#{$name}-nocaption {
 	border-bottom: 1px solid #e5e5e5;
 	line-height: 16px; /* accommodate minimum icon size */
 }
-.v-webkit .v-panel-caption,
-.v-webkit .v-panel-nocaption,
-.v-gecko .v-panel-caption,
-.v-gecko .v-panel-nocaption,
-.v-ie9 .v-panel-caption,
-.v-ie9 .v-panel-nocaption {
+.v-webkit .#{$name}-caption,
+.v-webkit .#{$name}-nocaption,
+.v-gecko .#{$name}-caption,
+.v-gecko .#{$name}-nocaption,
+.v-ie9 .#{$name}-caption,
+.v-ie9 .#{$name}-nocaption {
 	border-bottom-color: rgba(0,0,0,.08);
 }
-.v-panel-caption {
+.#{$name}-caption {
 	padding-bottom: 2px;
 }
-.v-panel-content,
-.white .v-panel-content {
+.#{$name}-content,
+.white .#{$name}-content {
 	background: #fff;
 	border: 1px solid #dcdcdc;
 	border-bottom: none;
 	border-top: none;
 }
-.v-webkit .v-panel-content,
-.v-gecko .v-panel-content,
-.v-ie9 .v-panel-content {
+.v-webkit .#{$name}-content,
+.v-gecko .#{$name}-content,
+.v-ie9 .#{$name}-content {
 	border-top-color: rgba(0,0,0,.07);
 }
-.blue .v-panel-deco {
+.blue .#{$name}-deco {
 	border-color: #92a3ac;
 	background: #adc2cd;
 }
-.v-panel-deco,
-.white .v-panel-deco {
+.#{$name}-deco,
+.white .#{$name}-deco {
 	height: 1px;
 	border-top: 1px solid #bebebe;
 	background: #e2e2e2;
 	overflow: hidden;
 }
-.v-webkit .v-panel-deco,
-.v-gecko .v-panel-deco,
-.v-ie9 .v-panel-deco {
+.v-webkit .#{$name}-deco,
+.v-gecko .#{$name}-deco,
+.v-ie9 .#{$name}-deco {
 	border-top-color: rgba(0,0,0,.1);
 	background: rgba(0,0,0,.08);
 }
-.v-panel-caption .v-errorindicator {
+.#{$name}-caption .v-errorindicator {
 	height: 16px;
 	width: 13px;
 	background: url(../common/icons/error.png) no-repeat 50%;
@@ -62,15 +62,15 @@
 }
 
 /* Light style */
-.v-panel-light .v-panel-caption-light,
-.v-panel-light .v-panel-nocaption-light {
+.#{$name}-light .#{$name}-caption-light,
+.#{$name}-light .#{$name}-nocaption-light {
 	border: none;
 }
-.v-panel-light .v-panel-content-light {
+.#{$name}-light .#{$name}-content-light {
 	border: none;
 	background: transparent;
 }
-.v-panel-light .v-panel-deco-light {
+.#{$name}-light .#{$name}-deco-light {
 	height: 0;
 	border: none;
 }