@mixin reindeer-menubar($primaryStyleName : v-menubar) { .#{$primaryStyleName} { height: 23px; background: #323336 repeat-x; background-image: url(img/bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #d1d3d6; text-shadow: rgba(0,0,0,.9) 0 1px 0; padding: 0 8px; } .#{$primaryStyleName} .#{$primaryStyleName}-menuitem { padding: 3px 8px; height: 17px; line-height: 16px; } .#{$primaryStyleName} .#{$primaryStyleName}-menuitem:hover { color: #fff; } .#{$primaryStyleName}-submenu { background: #f8f8f9; border: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; overflow: hidden; padding: 4px 0; } .#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem { padding: 1px 26px 1px 10px; line-height: 16px; } .#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption .v-icon { vertical-align: middle; } .#{$primaryStyleName} .#{$primaryStyleName}-menuitem-selected, .#{$primaryStyleName}-submenu .#{$primaryStyleName}-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; } .#{$primaryStyleName} .#{$primaryStyleName}-menuitem-selected { background-image: url(img/menu-sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */ } .#{$primaryStyleName}-submenu .#{$primaryStyleName}-submenu-indicator { background: transparent url(img/submenu-icon.png) no-repeat right 70%; width: 26px; height: 16px; text-indent: -9999px; font-size: 10.8px; } .#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected .#{$primaryStyleName}-submenu-indicator { background-image: url(img/submenu-icon-hover.png); } /* Checkboxes for checkable/checked menu items */ .#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem { padding-left: 6px; } .#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem-caption { padding-left: 18px; } .#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-checked .#{$primaryStyleName}-menuitem-caption { background: transparent url(img/checked.png) no-repeat left; } .#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-unchecked .#{$primaryStyleName}-menuitem-caption { background: transparent url(img/unchecked.png) no-repeat left; } .#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected-checked .#{$primaryStyleName}-menuitem-caption { background: transparent url(img/checked-selected.png) no-repeat left; } .#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected-unchecked .#{$primaryStyleName}-menuitem-caption { background: transparent url(img/unchecked-selected.png) no-repeat left; } }