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

1 files changed, 18 insertions, 18 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
index 78f4a9fa45..8d81a12a5b 100644
--- a/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
+++ b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
@@ -1,6 +1,6 @@
-@mixin reindeer-menubar {
+@mixin reindeer-menubar($name : v-menubar) {
 
-.v-menubar {
+.#{$name} {
 	height: 23px;
 	background: #323336 repeat-x;
 	background-image: url(img/bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
@@ -8,15 +8,15 @@
 	text-shadow: rgba(0,0,0,.9) 0 1px 0;
 	padding: 0 8px;
 }
-.v-menubar .v-menubar-menuitem {
+.#{$name} .#{$name}-menuitem {
 	padding: 3px 8px;
 	height: 17px;
 	line-height: 16px;
 }
-.v-menubar .v-menubar-menuitem:hover {
+.#{$name} .#{$name}-menuitem:hover {
 	color: #fff;
 }
-.v-menubar-submenu {
+.#{$name}-submenu {
 	background: #f8f8f9;
 	border: none;
 	border-radius: 3px;
@@ -26,50 +26,50 @@
 	overflow: hidden;
 	padding: 4px 0;
 }
-.v-menubar-submenu .v-menubar-menuitem {
+.#{$name}-submenu .#{$name}-menuitem {
 	padding: 1px 26px 1px 10px;
 	line-height: 16px;
 }
-.v-menubar-submenu .v-menubar-menuitem-caption .v-icon { 
+.#{$name}-submenu .#{$name}-menuitem-caption .v-icon { 
 	vertical-align: middle;
 }
-.v-menubar .v-menubar-menuitem-selected,
-.v-menubar-submenu .v-menubar-menuitem-selected {
+.#{$name} .#{$name}-menuitem-selected,
+.#{$name}-submenu .#{$name}-menuitem-selected {
 	background: #4d749f repeat-x;
 	background-image: url(../common/img/sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #fff;
 	text-shadow: 0 1px 0 #3b5a7a;
 }
-.v-menubar .v-menubar-menuitem-selected {
+.#{$name} .#{$name}-menuitem-selected {
 	background-image: url(img/menu-sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px  */
 }
-.v-menubar-submenu .v-menubar-submenu-indicator {
+.#{$name}-submenu .#{$name}-submenu-indicator {
 	background: transparent url(img/submenu-icon.png) no-repeat right 70%;
 	width: 26px;
 	height: 16px;
 	text-indent: -9999px;
 }
-.v-menubar-submenu .v-menubar-menuitem-selected .v-menubar-submenu-indicator {
+.#{$name}-submenu .#{$name}-menuitem-selected .#{$name}-submenu-indicator {
 	background-image: url(img/submenu-icon-hover.png);
 }
 
 /* Checkboxes for checkable/checked menu items */
-.v-menubar-submenu-check-column .v-menubar-menuitem {
+.#{$name}-submenu-check-column .#{$name}-menuitem {
 	padding-left: 6px;
 }
-.v-menubar-submenu-check-column .v-menubar-menuitem-caption {
+.#{$name}-submenu-check-column .#{$name}-menuitem-caption {
 	padding-left: 18px;
 }
-.v-menubar-submenu .v-menubar-menuitem-checked .v-menubar-menuitem-caption { 
+.#{$name}-submenu .#{$name}-menuitem-checked .#{$name}-menuitem-caption { 
 	background: transparent url(img/checked.png) no-repeat left;
 }
-.v-menubar-submenu .v-menubar-menuitem-unchecked .v-menubar-menuitem-caption {
+.#{$name}-submenu .#{$name}-menuitem-unchecked .#{$name}-menuitem-caption {
 	background: transparent url(img/unchecked.png) no-repeat left;
 }
-.v-menubar-submenu .v-menubar-menuitem-selected-checked .v-menubar-menuitem-caption { 
+.#{$name}-submenu .#{$name}-menuitem-selected-checked .#{$name}-menuitem-caption { 
 	background: transparent url(img/checked-selected.png) no-repeat left;
 }
-.v-menubar-submenu .v-menubar-menuitem-selected-unchecked .v-menubar-menuitem-caption {
+.#{$name}-submenu .#{$name}-menuitem-selected-unchecked .#{$name}-menuitem-caption {
 	background: transparent url(img/unchecked-selected.png) no-repeat left;
 }