// private $menu-icon-separator-indent: before($menu-item-icon-horizontal-spacing) + $menu-item-icon-size + after($menu-item-icon-horizontal-spacing); // private $menu-item-indent: $menu-icon-separator-indent + $menu-separator-size + before($menu-item-text-horizontal-spacing); // private $menu-item-indent-no-separator: before($menu-item-icon-horizontal-spacing) + $menu-item-icon-size + max(after($menu-item-icon-horizontal-spacing), before($menu-item-text-horizontal-spacing)); // private $menu-item-indent-right-icon: $menu-icon-separator-indent + before($menu-item-text-horizontal-spacing); // private $menu-item-indent-right-arrow: $menu-item-arrow-width + before($menu-item-arrow-horizontal-spacing) + after($menu-item-arrow-horizontal-spacing) + after($menu-item-text-horizontal-spacing); // private $menu-item-icon-top: round(($menu-item-height - vertical($menu-item-border-width) - $menu-item-icon-size) / 2) + $menu-item-icon-vertical-offset !default; @if not is-null($menu-border-width) and $menu-border-width != 0 { .#{$prefix}menu { // if $menu-border-width is null, we will inherit body border from Panel border-style: $menu-border-style; border-width: $menu-border-width; border-color: $menu-border-color; } } .#{$prefix}menu-body { background: $menu-background-color; padding: $menu-padding; } .#{$prefix}menu-icon-separator { left: $menu-icon-separator-indent; border-left: solid 1px $menu-separator-border-color; background-color: $menu-separator-background-color; width: $menu-separator-size; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}menu .#{$prefix}menu-icon-separator { left: auto; right: $menu-icon-separator-indent; } } .#{$prefix}menu-item { // Inactive menu items have padding in place of the active border width. // When active, they get their border added, but padding set to zero. // So that there's no border occluding the Menu when an item is inactive. // TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack. @if $menu-item-border-width != 0 { padding: $menu-item-border-width; } cursor: $menu-item-cursor; } .#{$prefix}menu-item-link, .#{$prefix}menu-item-cmp { margin: 0 after($menu-item-text-horizontal-spacing) 0 before($menu-item-text-horizontal-spacing); } .#{$prefix}menu-item-indent { margin-left: $menu-item-indent; } .#{$prefix}menu-item-indent-no-separator { margin-left: $menu-item-indent-no-separator; } .#{$prefix}menu-item-indent-right-icon { margin-right: $menu-item-indent-right-icon; } .#{$prefix}menu-item-indent-right-arrow { margin-right: $menu-item-indent-right-arrow; } @if $include-rtl { .#{$prefix}rtl { &.#{$prefix}menu-item-link, &.#{$prefix}menu-item-cmp { margin: 0 before($menu-item-text-horizontal-spacing) 0 after($menu-item-text-horizontal-spacing); } &.#{$prefix}menu-item-indent { margin-right: $menu-item-indent; } &.#{$prefix}menu-item-indent-no-separator { margin-right: $menu-item-indent-no-separator; } &.#{$prefix}menu-item-indent-right-icon { margin-left: $menu-item-indent-right-icon; } &.#{$prefix}menu-item-indent-right-arrow { margin-left: $menu-item-indent-right-arrow; } } } .#{$prefix}menu-item-active { @include background-gradient($menu-item-active-background-color, $menu-item-background-gradient); @if $menu-item-active-border-radius != 0 { @include border-radius($menu-item-active-border-radius); } @if $menu-item-border-width != 0 { border: $menu-item-border-width solid $menu-item-active-border-color; padding: 0; } // Background linear gradient @if $include-slicer-gradient { .#{$prefix}nlg & { background: $menu-item-active-background-color repeat-x left top; background-image: slicer-background-image(menu-item-link, 'menu/menu-item-active-bg'); } } } $stretch: slicer-background-stretch(menu-item-link, bottom); .#{$prefix}menu-item-icon { width: $menu-item-icon-size; height: $menu-item-icon-size; top: $menu-item-icon-top; left: before($menu-item-icon-horizontal-spacing); background-position: $menu-item-icon-background-position; .#{$prefix}menu-item-active & { top: $menu-item-icon-top - top($menu-item-border-width); left: before($menu-item-icon-horizontal-spacing) - left($menu-item-border-width); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}menu-item-icon { left: auto; right: before($menu-item-icon-horizontal-spacing); .#{$prefix}menu-item-active & { right: before($menu-item-icon-horizontal-spacing) - left($menu-item-border-width); } } } .#{$prefix}menu-item-glyph { font-size: $menu-item-icon-size; line-height: $menu-item-icon-size; color: $menu-glyph-color; @if $menu-glyph-opacity != 1 { // do not use the opacity mixin because we do not want IE's filter version of // opacity to be included. We emulate the opacity setting in IE8m by mixing // the icon color into the background color. (see below) opacity: $menu-glyph-opacity; } @if $include-ie { // In IE8 and below when a glyph contains partially transparent pixels, we // can't apply an opacity filter to the glyph element, because IE8m will render // the partially transparent pixels of the glyph as black. To work around this, // we emulate the approximate color that the glyph would have if it had opacity // applied by mixing the glyph color with the menus's background-color. .#{$prefix}ie8m & { color: mix($menu-glyph-color, $menu-background-color, $menu-glyph-opacity * 100); } } } // For when an icon needs to be used in the right position where a submenu arrow usually goes. // eg: When a CheckItem needs an icon. The left icon position is a checkbox, so the icon is moved to the right. .#{$prefix}menu-item-icon-right { width: $menu-item-icon-size; height: $menu-item-icon-size; top: $menu-item-icon-top; right: after($menu-item-icon-horizontal-spacing); background-position: $menu-item-icon-background-position; .#{$prefix}menu-item-active & { top: $menu-item-icon-top - top($menu-item-border-width); right: after($menu-item-icon-horizontal-spacing) - right($menu-item-border-width); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}menu-item-icon-right { right: auto; left: after($menu-item-icon-horizontal-spacing); .#{$prefix}menu-item-active & { left: after($menu-item-icon-horizontal-spacing) - right($menu-item-border-width); } } } .#{$prefix}menu-item-text { font: $menu-item-font-weight $menu-item-font-size $menu-item-font-family; line-height: $menu-item-height - vertical($menu-item-border-width) - abs($menu-item-text-vertical-offset); @if $menu-item-text-vertical-offset > 0 { padding-top: $menu-item-text-vertical-offset; } @else if $menu-item-text-vertical-offset < 0 { padding-bottom: $menu-item-text-vertical-offset; } color: $menu-text-color; cursor: $menu-item-cursor; // needed to override cursor:default set by x-unselectable } .#{$prefix}menu-item-checked { .#{$prefix}menu-item-checkbox { background-image: theme-background-image('menu/checked'); } .#{$prefix}menu-group-icon { background-image: theme-background-image('menu/group-checked'); } } .#{$prefix}menu-item-unchecked { .#{$prefix}menu-item-checkbox { background-image: theme-background-image('menu/unchecked'); } .#{$prefix}menu-group-icon { background-image: none; } } .#{$prefix}menu-item-separator { height: $menu-separator-size; border-top: solid 1px $menu-separator-border-color; background-color: $menu-separator-background-color; margin: $menu-item-separator-margin; padding: 0; } .#{$prefix}menu-item-arrow { width: $menu-item-arrow-width; height: $menu-item-arrow-height; top: $menu-item-arrow-top; right: after($menu-item-arrow-horizontal-spacing); background-image: theme-background-image('menu/menu-parent'); .#{$prefix}menu-item-active & { top: $menu-item-arrow-top - top($menu-item-border-width); right: after($menu-item-arrow-horizontal-spacing) - right($menu-item-border-width); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}menu-item-arrow { left: after($menu-item-arrow-horizontal-spacing); right: auto; background-image: theme-background-image('menu/menu-parent-left'); .#{$prefix}menu-item-active & { left: after($menu-item-arrow-horizontal-spacing) - right($menu-item-border-width); right: auto; } } } .#{$prefix}menu-item-disabled { @include opacity($menu-item-disabled-opacity); } @if $include-content-box { .#{$prefix}content-box { .#{$prefix}menu-icon-separator { width: $menu-separator-size - 1; } .#{$prefix}menu-item-separator { height: $menu-separator-size - 1; } } } @if $include-ie { .#{$prefix}ie { .#{$prefix}menu-item-disabled { .#{$prefix}menu-item-icon { @include opacity($menu-item-disabled-opacity); } .#{$prefix}menu-item-text { // IE opacity/cleartype bug workaround background-color: transparent; } } } } @if $include-ext-form-labelable { // When Fields are added to Menus... .#{$prefix}menu-item .#{$prefix}form-item-label { font-size: $menu-item-font-size; color: $menu-text-color; } } .#{$prefix}menu-scroll-top { height: $menu-scroller-height; background-image: theme-background-image('menu/scroll-top'); } .#{$prefix}menu-scroll-bottom { height: $menu-scroller-height; background-image: theme-background-image('menu/scroll-bottom'); } .#{$prefix}menu-scroll-top, .#{$prefix}menu-scroll-bottom { @if $menu-scroller-opacity != 1 { @include opacity($menu-scroller-opacity); } @if $menu-scroller-opacity != 1 $menu-scroller-opacity-over != 1 $menu-scroller-opacity-pressed != 1 { // EXTJSIV-8846: partially transparent png images do not display correctly // in winXP/IE8m when the image element has a transparent background. // to fix this, we give the element the same background-color as the menu. background-color: $menu-background-color; } } @if $menu-scroller-opacity-over != 1 or $menu-scroller-opacity != 1 { .#{$prefix}menu-scroll-top-hover, .#{$prefix}menu-scroll-bottom-hover { @include opacity($menu-scroller-opacity-over); } } @if $menu-scroller-opacity-pressed != 1 or $menu-scroller-opacity != 1 { .#{$prefix}menu-scroll-top-pressed, .#{$prefix}menu-scroll-bottom-pressed { @include opacity($menu-scroller-opacity-pressed); } } @include x-slicer(menu-item-link);