| @mixin base-menubar($primaryStyleName : v-menubar) { |
| |
| .#{$primaryStyleName} { |
| display: inline-block; |
| white-space: nowrap; |
| overflow: hidden; |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-menuitem { |
| cursor: default; |
| vertical-align: middle; |
| white-space: nowrap; |
| display: inline; |
| display: inline-block; |
| zoom: 1; |
| } |
| .#{$primaryStyleName} .#{$primaryStyleName}-menuitem-caption .v-icon { |
| vertical-align: middle; |
| white-space: nowrap; |
| } |
| .#{$primaryStyleName}-submenu { |
| background: #fff; |
| } |
| .#{$primaryStyleName}-menuitem-selected { |
| background: #333; |
| color: #fff; |
| } |
| .#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem { |
| cursor: default; |
| display: block; |
| position: relative; |
| padding-right: 1.5em; |
| } |
| .#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption { |
| display: block; |
| } |
| .#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem *, |
| .#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption * { |
| white-space: nowrap; |
| } |
| .#{$primaryStyleName}-submenu-indicator { |
| display: none; |
| /* Arial has the most coverage for geometric entity characters */ |
| font-family: arial, helvetica, sans-serif; |
| } |
| .#{$primaryStyleName}-submenu .#{$primaryStyleName}-submenu-indicator { |
| display: block; |
| position: absolute; |
| right: 0; |
| width: 1em; |
| height: 1em; |
| font-size: 11.7px; |
| } |
| .#{$primaryStyleName}-menuitem-disabled, |
| .#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:hover, |
| .#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:focus, |
| .#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:active { |
| opacity: .5; |
| filter: alpha(opacity=50); |
| |
| .v-ie8 & { |
| filter: none; |
| color: #999; |
| img { |
| filter: alpha(opacity=50); |
| } |
| } |
| } |
| |
| .#{$primaryStyleName}-more-menuitem { |
| /* Arial has the most coverage for geometric entity characters */ |
| font-family: arial, helvetica, sans-serif; |
| } |
| .#{$primaryStyleName}-separator { |
| overflow: hidden; |
| } |
| .#{$primaryStyleName}-separator span { |
| display: block; |
| text-indent: -9999px; |
| font-size: 1px; |
| line-height: 1px; |
| border-top: 1px solid #ddd; |
| margin: 3px 0 2px; |
| overflow: hidden; |
| } |
| .#{$primaryStyleName} .v-icon, |
| .#{$primaryStyleName}-submenu .v-icon { |
| margin-right: 3px; |
| } |
| |
| .#{$primaryStyleName}:focus, |
| .#{$primaryStyleName}-popup:focus, |
| .#{$primaryStyleName}-popup .popupContent:focus, |
| .#{$primaryStyleName}-popup .popupContent .#{$primaryStyleName}-submenu:focus{ |
| outline: none; |
| } |
| /* Checkboxes for checkable/checked menu items */ |
| /* Checked/unchecked requires combined style selected-(un)checked for IE6 */ |
| .#{$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/check.gif) no-repeat left; |
| } |
| |
| } |