/**
* @class Ext.menu.Menu
*/
/**
* @var {color}
* The background-color of the Menu
*/
$menu-background-color: dynamic(#fff);
/**
* @var {color}
* The border-color of the Menu
*/
$menu-border-color: dynamic($neutral-color);
/**
* @var {string}
* The border-style of the Menu
*/
$menu-border-style: dynamic(solid);
/**
* @var {number}
* The border-width of the Menu
*/
$menu-border-width: dynamic(1px);
/**
* @var {number/list}
* The padding to apply to the Menu body element
*/
$menu-padding: dynamic(2px);
/**
* @var {color}
* The color of Menu Item text
*/
$menu-text-color: dynamic(#000);
/**
* @var {string}
* The font-family of {@link Ext.menu.Item Menu Items}
*/
$menu-item-font-family: dynamic($font-family);
/**
* @var {number}
* The font-size of {@link Ext.menu.Item Menu Items}
*/
$menu-item-font-size: dynamic($font-size);
/**
* @var {string}
* The font-weight of {@link Ext.menu.Item Menu Items}
*/
$menu-item-font-weight: dynamic($font-weight);
/**
* @var {number}
* The height of {@link Ext.menu.Item Menu Items}
*/
$menu-item-height: dynamic(24px);
/**
* @var {number}
* The border-width of {@link Ext.menu.Item Menu Items}
*/
$menu-item-border-width: dynamic(1px);
/**
* @var {string}
* The style of cursor to display when the cursor is over a {@link Ext.menu.Item Menu Item}
*/
$menu-item-cursor: dynamic(pointer);
/**
* @var {string}
* The style of cursor to display when the cursor is over a disabled {@link Ext.menu.Item Menu Item}
*/
$menu-item-disabled-cursor: dynamic(default);
/**
* @var {color}
* The text color of the active {@link Ext.menu.Item Menu Item}
*/
$menu-item-active-text-color: dynamic($color);
/**
* @var {color}
* The background-color of the active {@link Ext.menu.Item Menu Item}
*/
$menu-item-active-background-color: dynamic($base-color);
/**
* @var {color}
* The border-color of the active {@link Ext.menu.Item Menu Item}
*/
$menu-item-active-border-color: dynamic(adjust-color($base-color, $saturation: 23%, $lightness: -3%));
/**
* @var {string/list}
* The background-gradient for {@link Ext.menu.Item Menu Items}. Can be either the name
* of a predefined gradient or a list of color stops. Used as the `$type` parameter for
* {@link Global_CSS#background-gradient}.
*/
$menu-item-background-gradient: dynamic('none');
/**
* @var {number}
* The border-radius of {@link Ext.menu.Item Menu Items}
*/
$menu-item-active-border-radius: dynamic(0);
/**
* @var {number}
* The size of {@link Ext.menu.Item Menu Item} icons
*/
$menu-item-icon-size: dynamic(16px);
/**
* @var {color} $menu-glyph-color
* The color to use for menu icons configured using {@link Ext.menu.Item#glyph glyph}
*/
$menu-glyph-color: dynamic($menu-text-color);
/**
* @var {string}
* The font-size to use for menu icons configured using {@link Ext.menu.Item#glyph glyph}
*/
$menu-glyph-font-size: dynamic($menu-item-icon-size);
/**
* @var {number} $menu-glyph-opacity
* The opacity to use for menu icons configured using {@link Ext.menu.Item#glyph glyph}
*/
$menu-glyph-opacity: dynamic(.5);
/**
* @var {color}
* The color to use for menu icons configured using {@link Ext.menu.Item#glyph glyph}
* when the menu item is active.
*/
$menu-item-active-glyph-color: dynamic($menu-glyph-color);
/**
* @var {number}
* The size of {@link Ext.menu.CheckItem CheckItem} checkboxes
*/
$menu-item-checkbox-size: dynamic($menu-item-icon-size);
/**
* @var {number}
* The size of {@link Ext.menu.CheckItem CheckItem} checkboxes
*/
$menu-item-checkbox-glyph-font-size: dynamic($form-checkbox-size);
/**
* @var {string/list}
* The glyph for {@link Ext.menu.CheckItem CheckItem} checkboxes when
* {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-checkbox-glyph: dynamic($fa-var-square $menu-item-checkbox-glyph-font-size $font-icon-font-family);
/**
* @var {string/list}
* The glyph for {@link Ext.menu.CheckItem CheckItem} checkboxes in "checked" state when
* {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-checkbox-checked-glyph: dynamic($fa-var-check-square $menu-item-checkbox-glyph-font-size $font-icon-font-family);
/**
* @var {color}
* The color of {@link Ext.menu.CheckItem CheckItem} checkboxes when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-checkbox-glyph-color: dynamic($menu-text-color);
/**
* @var {color}
* The color of the {@link Ext.menu.CheckItem CheckItem} checkbox for the active menu item
* when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-active-checkbox-glyph-color: dynamic($menu-item-active-text-color);
/**
* @var {string/list}
* The glyph for {@link Ext.menu.CheckItem CheckItem} group checkboxes when
* {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-checkbox-group-glyph: dynamic(null);
/**
* @var {string/list}
* The glyph for {@link Ext.menu.CheckItem CheckItem} group checkboxes in "checked" state when
* {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-checkbox-group-checked-glyph: dynamic($fa-var-check $menu-item-checkbox-glyph-font-size $font-icon-font-family);
/**
* @var {color}
* The color of {@link Ext.menu.CheckItem CheckItem} group checkboxes when
* {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-checkbox-group-glyph-color: dynamic($menu-item-checkbox-glyph-color);
/**
* @var {color}
* The color of the {@link Ext.menu.CheckItem CheckItem} group checkbox for the active menu item
* when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-active-checkbox-group-glyph-color: dynamic($menu-item-active-checkbox-glyph-color);
/**
* @var {list}
* The background-position of {@link Ext.menu.Item Menu Item} icons
*/
$menu-item-icon-background-position: dynamic(center center);
/**
* @var {number}
* vertical offset for menu item icons/checkboxes. By default the icons are roughly
* vertically centered, but it may be necessary in some cases to make minor adjustments
* to the vertical position.
*/
$menu-item-icon-vertical-offset: dynamic(0);
/**
* @var {number}
* vertical offset for menu item text. By default the text is given a line-height
* equal to the menu item's content-height, however, depending on the font this may not
* result in perfect vertical centering. Offset can be used to make small adjustments
* to the text's vertical position.
*/
$menu-item-text-vertical-offset: dynamic(0);
/**
* @var {number/list}
* The space to the left and right of {@link Ext.menu.Item Menu Item} text. Can be specified
* as a number (e.g. 5px) or as a list with 2 items for different left/right values. e.g.
*
* $menu-item-text-horizontal-spacing: dynamic(4px 8px); // 4px of space to the left, and 8px to the right
*/
$menu-item-text-horizontal-spacing: dynamic(4px);
/**
* @var {number}
* The space to the left and right of {@link Ext.menu.Item Menu Item} icons. Can be specified
* as a number (e.g. 5px) or as a list with 2 items for different left/right values. e.g.
*
* $menu-item-icon-horizontal-spacing: dynamic(4px 8px); // 4px of space to the left, and 8px to the right
*/
$menu-item-icon-horizontal-spacing: dynamic(3px 10px);
/**
* @var {number}
* The space to the left and right of {@link Ext.menu.Item Menu Item} arrows. Can be specified
* as a number (e.g. 5px) or as a list with 2 items for different left/right values. e.g.
*
* $menu-item-arrow-horizontal-spacing: dynamic(4px 8px); // 4px of space to the left, and 8px to the right
*/
$menu-item-arrow-horizontal-spacing: dynamic(5px 0);
/**
* @var {number}
* The space to the left and right of the {@link Ext.menu.Bar Menu item} arrows. Can be specified
* as a number or as a list with 2 values.
*/
$menubar-item-arrow-horizontal-spacing: dynamic(5px 5px);
/**
* @var {number/list}
* The margin of {@link Ext.menu.Separator Menu Separators}
*/
$menu-item-separator-margin: dynamic(2px 0);
/**
* @var {number}
* The height of {@link Ext.menu.Item Menu Item} arrows
*/
$menu-item-arrow-height: dynamic(9px);
/**
* @var {number}
* Vertical offset for arrow el.
* @private
*/
$menubar-item-arrow-vertical-offset: dynamic(round($menubar-item-arrow-height / 2));
/**
* @var {number}
* The width of {@link Ext.menu.Item Menu Item} arrows
*/
$menu-item-arrow-width: dynamic(12px);
/**
* @var {number}
* The height of the {@link Ext.menu.Bar Menu item} arrows
*/
$menubar-item-arrow-height: dynamic(6px);
/**
* @var {number}
* The width of the {@link Ext.menu.Bar Menu item} arrows
*/
$menubar-item-arrow-width: dynamic(9px);
/**
* @var {number/list}
* The margin of {@link Ext.menu.Item Menu Item} arrows
*/
$menu-item-arrow-margin: dynamic(null);
/**
* @var {color}
* The color to use for the menu arrow icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-arrow-glyph-color: dynamic($color);
/**
* @var {color}
* The color to use for the menu arrow icon of the active menu item when
* {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-active-arrow-glyph-color: dynamic($menu-item-active-text-color);
/**
* @var {number}
* The font size to use for the menu arrow icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-arrow-glyph-font-size: dynamic(16px);
/**
* @var {string/list}
* Glyph for the menu arrow icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-arrow-glyph: dynamic($fa-var-caret-right $menu-item-arrow-glyph-font-size $font-icon-font-family);
/**
* @var {string/list}
* Glyph for the RTL menu arrow icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-item-arrow-glyph-rtl: dynamic($fa-var-caret-left $menu-item-arrow-glyph-font-size $font-icon-font-family);
/**
* @var {string/list}
* Glyph for the menu bar item arrow icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menubar-item-arrow-glyph: dynamic($fa-var-caret-down $menu-item-arrow-glyph-font-size $font-icon-font-family);
/**
* @var {string/list}
* Glyph for the RTL menu bar item arrow icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menubar-item-arrow-glyph-rtl: dynamic($fa-var-caret-down $menu-item-arrow-glyph-font-size $font-icon-font-family);
/**
* @var {number}
* The opacity of disabled {@link Ext.menu.Item Menu Items}
*/
$menu-item-disabled-opacity: dynamic(.5);
/**
* @var {number/list}
* The margin non-MenuItems placed in a Menu
*/
$menu-component-margin: dynamic(0);
/**
* @var {color}
* The border-color of {@link Ext.menu.Separator Menu Separators}
*/
$menu-separator-border-color: dynamic($neutral-color);
/**
* @var {color}
* The background-color of {@link Ext.menu.Separator Menu Separators}
*/
$menu-separator-background-color: dynamic(#FFF);
/**
* @var {number}
* The size of {@link Ext.menu.Separator Menu Separators}
*/
$menu-separator-size: dynamic(2px);
/**
* @var {number}
* The width of Menu scrollers
*/
$menu-scroller-width: dynamic(16px);
/**
* @var {number}
* The height of Menu scrollers
*/
$menu-scroller-height: dynamic(16px);
/**
* @var {color}
* The border-color of Menu scroller buttons
*/
$menu-scroller-border-color: dynamic($neutral-color);
/**
* @var {number}
* The border-width of Menu scroller buttons
*/
$menu-scroller-border-width: dynamic(0);
/**
* @var {number/list}
* The margin of "top" Menu scroller buttons
*/
$menu-scroller-top-margin: dynamic(4px 0);
/**
* @var {number/list}
* The margin of "bottom" Menu scroller buttons
*/
$menu-scroller-bottom-margin: dynamic(4px 0);
/**
* @var {string}
* The cursor of Menu scroller buttons
*/
$menu-scroller-cursor: dynamic(pointer);
/**
* @var {string}
* The cursor of disabled Menu scroller buttons
*/
$menu-scroller-cursor-disabled: dynamic(default);
/**
* @var {number}
* The opacity of Menu scroller buttons. Only applicable when
* {@link #$menu-classic-scrollers} is `false`.
*/
$menu-scroller-opacity: dynamic(0.5);
/**
* @var {number}
* The opacity of hovered Menu scroller buttons. Only applicable when
* {@link #$menu-classic-scrollers} is `false`.
*/
$menu-scroller-opacity-over: dynamic(0.6);
/**
* @var {number}
* The opacity of pressed Menu scroller buttons. Only applicable when
* {@link #$menu-classic-scrollers} is `false`.
*/
$menu-scroller-opacity-pressed: dynamic(0.7);
/**
* @var {number}
* The opacity of disabled Menu scroller buttons.
*/
$menu-scroller-opacity-disabled: dynamic(0.25);
/**
* @var {color}
* The color to use for Menu scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-scroller-glyph-color: dynamic($neutral-color);
/**
* @var {number}
* The font size for Menu scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-scroller-glyph-font-size: dynamic(16px);
/**
* @var {string/list}
* Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-scroller-top-glyph: dynamic($fa-var-chevron-up $menu-scroller-glyph-font-size $font-icon-font-family);
/**
* @var {string/list}
* Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*/
$menu-scroller-bottom-glyph: dynamic($fa-var-chevron-down $menu-scroller-glyph-font-size $font-icon-font-family);
/**
* @var {boolean}
* `true` to use classic-style scroller buttons. When `true` scroller buttons are given their
* hover state by changing their background-position, When `false` scroller buttons are
* given their hover state by applying opacity.
*/
$menu-classic-scrollers: dynamic(false);
/**
* @var {boolean}
* True to include the "default" menu UI
*/
$include-menu-default-ui: dynamic($include-default-uis);
/**
* Creates a visual theme for a Menu.
*
* @param {string} $ui
* The name of the UI being created. Can not included spaces or special punctuation
* (used in CSS class names).
*
* @param {color} [$ui-background-color=$menu-background-color]
* The background-color of the Menu
*
* @param {color} [$ui-border-color=$menu-border-color]
* The border-color of the Menu
*
* @param {string} [$ui-border-style=$menu-border-style]
* The border-style of the Menu
*
* @param {number} [$ui-border-width=$menu-border-width]
* The border-width of the Menu
*
* @param {number/list} [$ui-padding=$menu-padding]
* The padding to apply to the Menu body element
*
* @param {color} [$ui-text-color=$menu-text-color]
* The color of Menu Item text
*
* @param {string} [$ui-item-font-family=$menu-item-font-family]
* The font-family of {@link Ext.menu.Item Menu Items}
*
* @param {number} [$ui-item-font-size=$menu-item-font-size]
* The font-size of {@link Ext.menu.Item Menu Items}
*
* @param {string} [$ui-item-font-weight=$menu-item-font-weight]
* The font-weight of {@link Ext.menu.Item Menu Items}
*
* @param {number} [$ui-item-height=$menu-item-height]
* The height of {@link Ext.menu.Item Menu Items}
*
* @param {number} [$ui-item-border-width=$menu-item-border-width]
* The border-width of {@link Ext.menu.Item Menu Items}
*
* @param {string} [$ui-item-cursor=$menu-item-cursor]
* The style of cursor to display when the cursor is over a {@link Ext.menu.Item Menu Item}
*
* @param {string} [$ui-item-disabled-cursor=$menu-item-disabled-cursor]
* The style of cursor to display when the cursor is over a disabled {@link Ext.menu.Item Menu Item}
*
* @param {color} [$ui-item-active-text-color=$menu-item-active-text-color]
* The text color of the active {@link Ext.menu.Item Menu Item}
*
* @param {color} [$ui-item-active-background-color=$menu-item-active-background-color]
* The background-color of the active {@link Ext.menu.Item Menu Item}
*
* @param {color} [$ui-item-active-border-color=$menu-item-active-border-color]
* The border-color of the active {@link Ext.menu.Item Menu Item}
*
* @param {string/list} [$ui-item-background-gradient=$menu-item-background-gradient]
* The background-gradient for {@link Ext.menu.Item Menu Items}. Can be either the name
* of a predefined gradient or a list of color stops. Used as the `$type` parameter for
* {@link Global_CSS#background-gradient}.
*
* @param {number} [$ui-item-active-border-radius=$menu-item-active-border-radius]
* The border-radius of {@link Ext.menu.Item Menu Items}
*
* @param {number} [$ui-item-icon-size=$menu-item-icon-size]
* The size of {@link Ext.menu.Item Menu Item} icons
*
* @param {color} [$ui-glyph-color=$menu-glyph-color]
* The color to use for menu icons configured using {@link Ext.menu.Item#glyph glyph}
*
* @param {string} [$ui-glyph-font-size=$menu-glyph-font-size]
* The font-size to use for menu icons configured using {@link Ext.menu.Item#glyph glyph}
*
* @param {number} [$ui-glyph-opacity=$menu-glyph-opacity]
* The opacity to use for menu icons configured using {@link Ext.menu.Item#glyph glyph}
*
* @param {color} [$ui-item-active-glyph-color=$menu-item-active-glyph-color]
* The color to use for menu icons configured using {@link Ext.menu.Item#glyph glyph}
* when the menu item is active.
*
* @param {number} [$ui-item-checkbox-size=$menu-item-checkbox-size]
* The size of {@link Ext.menu.Item Menu Item} checkboxes
*
* @param {string/list} [$ui-item-checkbox-glyph=$menu-item-checkbox-glyph]
* The glyph for {@link Ext.menu.CheckItem CheckItem} checkboxes when
* {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$ui-item-checkbox-checked-glyph=$menu-item-checkbox-checked-glyph]
* The glyph for {@link Ext.menu.CheckItem CheckItem} checkboxes in "checked" state when
* {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {color} [$ui-item-checkbox-glyph-color=$menu-item-checkbox-glyph-color]
* The color of the glyph for grouped checkboxes.
*
* @param {string/list} [$ui-item-checkbox-group-glyph=$menu-item-checkbox-group-glyph]
* The glyph for grouped checkboxes.
*
* @param {string/list} [$ui-item-checkbox-group-checked-glyph=$menu-item-checkbox-group-checked-glyph]
* The glyph for checked grouped checkboxes.
*
* @param {color} [$ui-item-checkbox-group-glyph-color=$menu-item-checkbox-group-glyph-color]
* The color of the glyph for checked grouped checkboxes.
*
* @param {color} [$ui-item-active-checkbox-group-glyph-color=$menu-item-checkbox-glyph-color]
* The color of {@link Ext.menu.CheckItem CheckItem} checkboxes when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {color} [$ui-item-active-checkbox-glyph-color=$menu-item-active-checkbox-glyph-color]
* The color of the {@link Ext.menu.CheckItem CheckItem} checkbox for the active menu item
* when {@link Global_CSS#$enable-font-icons} is `true`.*
*
* @param {list} [$ui-item-icon-background-position=$menu-item-icon-background-position]
* The background-position of {@link Ext.menu.Item Menu Item} icons
*
* @param {number} [$ui-item-icon-vertical-offset=$menu-item-icon-vertical-offset]
* vertical offset for menu item icons/checkboxes. By default the icons are roughly
* vertically centered, but it may be necessary in some cases to make minor adjustments
* to the vertical position.
*
* @param {number} [$ui-item-text-vertical-offset=$menu-item-text-vertical-offset]
* vertical offset for menu item text. By default the text is given a line-height
* equal to the menu item's content-height, however, depending on the font this may not
* result in perfect vertical centering. Offset can be used to make small adjustments
* to the text's vertical position.
*
* @param {number/list} [$ui-item-text-horizontal-spacing=$menu-item-text-horizontal-spacing]
* The space to the left and right of {@link Ext.menu.Item Menu Item} text. Can be specified
* as a number (e.g. 5px) or as a list with 2 items for different left/right values. e.g.
*
* $menu-item-text-horizontal-spacing: 4px 8px !default; // 4px of space to the left, and 8px to the right
*
* @param {number} [$ui-item-icon-horizontal-spacing=$menu-item-icon-horizontal-spacing]
* The space to the left and right of {@link Ext.menu.Item Menu Item} icons. Can be specified
* as a number (e.g. 5px) or as a list with 2 items for different left/right values. e.g.
*
* $menu-item-icon-horizontal-spacing: 4px 8px !default; // 4px of space to the left, and 8px to the right
*
* @param {number} [$ui-item-arrow-horizontal-spacing=$menu-item-arrow-horizontal-spacing]
* The space to the left and right of {@link Ext.menu.Item Menu Item} arrows. Can be specified
* as a number (e.g. 5px) or as a list with 2 items for different left/right values. e.g.
*
* $menu-item-arrow-horizontal-spacing: 4px 8px !default; // 4px of space to the left, and 8px to the right
*
* @param {number/list} [$ui-item-separator-margin=$menu-item-separator-margin]
* The margin of {@link Ext.menu.Separator Menu Separators}
*
* @param {number} [$ui-item-arrow-height=$menu-item-arrow-height]
* The height of {@link Ext.menu.Item Menu Item} arrows
*
* @param {number} [$ui-item-arrow-width=$menu-item-arrow-width]
* The width of {@link Ext.menu.Item Menu Item} arrows
*
* @param {number} [$ui-item-arrow-margin=$menu-item-arrow-margin]
* The margin of {@link Ext.menu.Item Menu Item} arrows
*
* @param {color} [$ui-item-arrow-glyph-color=$menu-item-arrow-glyph-color]
* The color to use for the menu arrow icon when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {color} [$ui-item-active-arrow-glyph-color=$menu-item-active-arrow-glyph-color]
* The color to use for the menu arrow icon of the active menu item when
* {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$ui-item-arrow-glyph=$menu-item-arrow-glyph]
* Glyph for the menu arrow icon when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$ui-item-arrow-glyph-rtl=$menu-item-arrow-glyph-rtl]
* Glyph for the rtl menu arrow icon when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {number} [$ui-item-disabled-opacity=$menu-item-disabled-opacity]
* The opacity of disabled {@link Ext.menu.Item Menu Items}
*
* @param {number/list} [$ui-component-margin=$menu-component-margin]
* The margin non-MenuItems placed in a Menu
*
* @param {color} [$ui-separator-border-color=$menu-separator-border-color]
* The border-color of {@link Ext.menu.Separator Menu Separators}
*
* @param {color} [$ui-separator-background-color=$menu-separator-background-color]
* The background-color of {@link Ext.menu.Separator Menu Separators}
*
* @param {number} [$ui-separator-size=$menu-separator-size]
* The size of {@link Ext.menu.Separator Menu Separators}
*
* @param {number} [$ui-scroller-width=$menu-scroller-width]
* The width of Menu scrollers
*
* @param {number} [$ui-scroller-height=$menu-scroller-height]
* The height of Menu scrollers
*
* @param {color} [$ui-scroller-border-color=$menu-scroller-border-color]
* The border-color of Menu scroller buttons
*
* @param {number} [$ui-scroller-border-width=$menu-scroller-border-width]
* The border-width of Menu scroller buttons
*
* @param {number/list} [$ui-scroller-top-margin=$menu-scroller-top-margin]
* The margin of "top" Menu scroller buttons
*
* @param {number/list} [$ui-scroller-bottom-margin=$menu-scroller-bottom-margin]
* The margin of "bottom" Menu scroller buttons
*
* @param {string} [$ui-scroller-cursor=$menu-scroller-cursor]
* The cursor of Menu scroller buttons
*
* @param {string} [$ui-scroller-cursor-disabled=$menu-scroller-cursor-disabled]
* The cursor of disabled Menu scroller buttons
*
* @param {number} [$ui-scroller-opacity=$menu-scroller-opacity]
* The opacity of Menu scroller buttons. Only applicable when
* {@link #$menu-classic-scrollers} is `false`.
*
* @param {number} [$ui-scroller-opacity-over=$menu-scroller-opacity-over]
* The opacity of hovered Menu scroller buttons. Only applicable when
* {@link #$menu-classic-scrollers} is `false`.
*
* @param {number} [$ui-scroller-opacity-pressed=$menu-scroller-opacity-pressed]
* The opacity of pressed Menu scroller buttons. Only applicable when
* {@link #$menu-classic-scrollers} is `false`.
*
* @param {number} [$ui-scroller-opacity-disabled=$menu-scroller-opacity-disabled]
* The opacity of disabled Menu scroller buttons.
*
* @param {color} [$ui-scroller-glyph-color=$menu-scroller-glyph-color]
* The color to use for Menu scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$ui-scroller-top-glyph=$menu-scroller-top-glyph]
* Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {string/list} [$ui-scroller-bottom-glyph=$menu-scroller-bottom-glyph]
* Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
*
* @param {boolean} [$ui-classic-scrollers=$menu-classic-scrollers]
* `true` to use classic-style scroller buttons. When `true` scroller buttons are given their
* hover state by changing their background-position, When `false` scroller buttons are
* given their hover state by applying opacity.
*
* @param {number} [$ui-item-arrow-top-offset=0]
*
* @member Ext.menu.Menu
*/
@mixin extjs-menu-ui(
$ui,
$ui-background-color: $menu-background-color,
$ui-border-color: $menu-border-color,
$ui-border-style: $menu-border-style,
$ui-border-width: $menu-border-width,
$ui-padding: $menu-padding,
$ui-text-color: $menu-text-color,
$ui-item-font-family: $menu-item-font-family,
$ui-item-font-size: $menu-item-font-size,
$ui-item-font-weight: $menu-item-font-weight,
$ui-item-height: $menu-item-height,
$ui-item-border-width: $menu-item-border-width,
$ui-item-cursor: $menu-item-cursor,
$ui-item-disabled-cursor: $menu-item-disabled-cursor,
$ui-item-active-text-color: $menu-item-active-text-color,
$ui-item-active-background-color: $menu-item-active-background-color,
$ui-item-active-border-color: $menu-item-active-border-color,
$ui-item-background-gradient: $menu-item-background-gradient,
$ui-item-active-border-radius: $menu-item-active-border-radius,
$ui-item-icon-size: $menu-item-icon-size,
$ui-glyph-color: $menu-glyph-color,
$ui-glyph-font-size: $menu-glyph-font-size,
$ui-glyph-opacity: $menu-glyph-opacity,
$ui-item-active-glyph-color: $menu-item-active-glyph-color,
$ui-item-checkbox-size: $menu-item-checkbox-size,
$ui-item-checkbox-glyph: $menu-item-checkbox-glyph,
$ui-item-checkbox-checked-glyph: $menu-item-checkbox-checked-glyph,
$ui-item-checkbox-glyph-color: $menu-item-checkbox-glyph-color,
$ui-item-checkbox-group-glyph: $menu-item-checkbox-group-glyph,
$ui-item-checkbox-group-checked-glyph: $menu-item-checkbox-group-checked-glyph,
$ui-item-checkbox-group-glyph-color: $menu-item-checkbox-group-glyph-color,
$ui-item-active-checkbox-group-glyph-color: $menu-item-active-checkbox-group-glyph-color,
$ui-item-active-checkbox-glyph-color: $menu-item-active-checkbox-glyph-color,
$ui-item-icon-background-position: $menu-item-icon-background-position,
$ui-item-icon-vertical-offset: $menu-item-icon-vertical-offset,
$ui-item-text-vertical-offset: $menu-item-text-vertical-offset,
$ui-item-text-horizontal-spacing: $menu-item-text-horizontal-spacing,
$ui-item-icon-horizontal-spacing: $menu-item-icon-horizontal-spacing,
$ui-item-arrow-horizontal-spacing: $menu-item-arrow-horizontal-spacing,
$ui-item-separator-margin: $menu-item-separator-margin,
$ui-item-arrow-height: $menu-item-arrow-height,
$ui-item-arrow-width: $menu-item-arrow-width,
$ui-item-arrow-margin: $menu-item-arrow-margin,
$ui-item-arrow-glyph-color: $menu-item-arrow-glyph-color,
$ui-item-active-arrow-glyph-color: $menu-item-active-arrow-glyph-color,
$ui-item-arrow-glyph: $menu-item-arrow-glyph,
$ui-item-arrow-glyph-rtl: $menu-item-arrow-glyph-rtl,
$ui-item-disabled-opacity: $menu-item-disabled-opacity,
$ui-component-margin: $menu-component-margin,
$ui-separator-border-color: $menu-separator-border-color,
$ui-separator-background-color: $menu-separator-background-color,
$ui-separator-size: $menu-separator-size,
$ui-scroller-width: $menu-scroller-width,
$ui-scroller-height: $menu-scroller-height,
$ui-scroller-border-color: $menu-scroller-border-color,
$ui-scroller-border-width: $menu-scroller-border-width,
$ui-scroller-top-margin: $menu-scroller-top-margin,
$ui-scroller-bottom-margin: $menu-scroller-bottom-margin,
$ui-scroller-cursor: $menu-scroller-cursor,
$ui-scroller-cursor-disabled: $menu-scroller-cursor-disabled,
$ui-scroller-opacity: $menu-scroller-opacity,
$ui-scroller-opacity-over: $menu-scroller-opacity-over,
$ui-scroller-opacity-pressed: $menu-scroller-opacity-pressed,
$ui-scroller-opacity-disabled: $menu-scroller-opacity-disabled,
$ui-scroller-glyph-color: $menu-scroller-glyph-color,
$ui-scroller-top-glyph: $menu-scroller-top-glyph,
$ui-scroller-bottom-glyph: $menu-scroller-bottom-glyph,
$ui-classic-scrollers: $menu-classic-scrollers,
$ui-item-arrow-top-offset: 0
) {
$ui-item-arrow-top: round(($ui-item-height - vertical($ui-item-border-width) - $ui-item-arrow-height) / 2) + $ui-item-arrow-top-offset !default;
$ui-icon-separator-indent: before($ui-item-icon-horizontal-spacing) + $ui-item-icon-size + after($ui-item-icon-horizontal-spacing);
$ui-item-indent: $ui-icon-separator-indent + $ui-separator-size + before($ui-item-text-horizontal-spacing);
$ui-item-indent-no-separator: before($ui-item-icon-horizontal-spacing) + $ui-item-icon-size + max(after($ui-item-icon-horizontal-spacing), before($ui-item-text-horizontal-spacing));
$ui-item-indent-right-icon: $ui-icon-separator-indent + before($ui-item-text-horizontal-spacing);
$ui-item-indent-right-arrow: $ui-item-arrow-width + before($ui-item-arrow-horizontal-spacing) + after($ui-item-arrow-horizontal-spacing) + after($ui-item-text-horizontal-spacing);
$ui-item-icon-top: round(($ui-item-height - vertical($ui-item-border-width) - $ui-item-icon-size) / 2) + $ui-item-icon-vertical-offset !default;
@if not is-null($ui-border-width) and $ui-border-width != 0 {
.#{$prefix}menu-#{$ui} {
border-style: $ui-border-style;
border-width: $ui-border-width;
border-color: $ui-border-color;
}
}
.#{$prefix}menu-body-#{$ui} {
background: $ui-background-color;
padding: $ui-padding;
}
.#{$prefix}menu-icon-separator-#{$ui} {
left: $ui-icon-separator-indent;
border-left: solid 1px $ui-separator-border-color;
background-color: $ui-separator-background-color;
width: $ui-separator-size;
}
@if $include-rtl {
.#{$prefix}rtl > .#{$prefix}menu-icon-separator {
left: auto;
right: $ui-icon-separator-indent;
}
}
.#{$prefix}menu-item-#{$ui} {
border-width: $ui-item-border-width;
cursor: $ui-item-cursor;
// We duplicate the styling for both active and focused menu items
// because an item may be active but not focused, and vice versa.
&.#{$prefix}menu-item-focus,
&.#{$prefix}menu-item-active {
@include background-gradient($ui-item-active-background-color, $ui-item-background-gradient);
@if $ui-item-active-border-radius != 0 {
@include border-radius($ui-item-active-border-radius);
}
@if $ui-item-border-width != 0 {
border-color: $ui-item-active-border-color;
}
// Background linear gradient
@if $include-slicer-gradient {
.#{$prefix}nlg & {
background: $ui-item-active-background-color repeat-x left top;
background-image: slicer-background-image(menu-item-#{$ui}-active, 'menu/menu-item-#{$ui}-active-bg');
}
}
}
&.#{$prefix}menu-item-disabled {
cursor: $ui-item-disabled-cursor;
a {
cursor: $ui-item-disabled-cursor;
}
}
&.#{$prefix}menu-item-separator {
height: $ui-separator-size;
border-top: solid 1px $ui-separator-border-color;
background-color: $ui-separator-background-color;
margin: $ui-item-separator-margin;
padding: 0;
}
&.#{$prefix}menu-item-disabled {
@include opacity($ui-item-disabled-opacity);
@if $include-ie {
.#{$prefix}ie9m & {
.#{$prefix}menu-item-icon-#{ui} {
@include opacity($ui-item-disabled-opacity);
}
.#{$prefix}menu-item-text-#{$ui} {
// IE opacity/cleartype bug workaround
background-color: transparent;
}
}
}
}
@if $include-ext-form-labelable {
// When Fields are added to Menus...
.#{$prefix}form-item-label {
font-size: $ui-item-font-size;
color: $ui-text-color;
}
}
}
.#{$prefix}menu-item-text-#{$ui},
.#{$prefix}menu-item-cmp-#{$ui} {
margin: 0 after($ui-item-text-horizontal-spacing) 0 before($ui-item-text-horizontal-spacing);
}
.#{$prefix}menu-item-text-#{$ui} {
font: $ui-item-font-weight $ui-item-font-size $ui-item-font-family;
line-height: $ui-item-height - vertical($ui-item-border-width) - abs($ui-item-text-vertical-offset);
@if $ui-item-text-vertical-offset > 0 {
padding-top: $ui-item-text-vertical-offset;
} @else if $ui-item-text-vertical-offset < 0 {
padding-bottom: $ui-item-text-vertical-offset;
}
color: $ui-text-color;
cursor: $ui-item-cursor; // needed to override cursor:default set by x-unselectable
@if $ui-item-active-text-color != $ui-text-color {
.#{$prefix}menu-item-focus &,
.#{$prefix}menu-item-active & {
color: $ui-item-active-text-color;
}
}
&.#{$prefix}menu-item-indent {
margin-left: $ui-item-indent;
}
&.#{$prefix}menu-item-indent-no-separator {
margin-left: $ui-item-indent-no-separator;
}
&.#{$prefix}menu-item-indent-right-icon {
margin-right: $ui-item-indent-right-icon;
}
&.#{$prefix}menu-item-indent-right-arrow {
margin-right: $ui-item-indent-right-arrow;
}
.#{$prefix}menu-item-disabled & {
cursor: $ui-item-disabled-cursor;
}
}
@if $include-rtl {
.#{$prefix}rtl {
&.#{$prefix}menu-item-text-#{$ui},
&.#{$prefix}menu-item-cmp-#{$ui} {
margin: 0 before($ui-item-text-horizontal-spacing) 0 after($ui-item-text-horizontal-spacing);
}
&.#{$prefix}menu-item-text-#{$ui} {
&.#{$prefix}menu-item-indent {
margin-right: $ui-item-indent;
}
&.#{$prefix}menu-item-indent-no-separator {
margin-right: $ui-item-indent-no-separator;
}
&.#{$prefix}menu-item-indent-right-icon {
margin-left: $ui-item-indent-right-icon;
}
&.#{$prefix}menu-item-indent-right-arrow {
margin-left: $ui-item-indent-right-arrow;
}
}
}
}
.#{$prefix}menu-item-indent-#{$ui} {
margin-left: $ui-item-indent;
@if $include-rtl {
&.#{$prefix}rtl {
margin-left: 0;
margin-right: $ui-item-indent;
}
}
}
.#{$prefix}menu-item-icon-#{$ui} {
width: $ui-item-icon-size;
height: $ui-item-icon-size;
top: $ui-item-icon-top;
left: before($ui-item-icon-horizontal-spacing);
line-height: $ui-item-icon-size;
font-size: $ui-glyph-font-size;
color: $ui-glyph-color;
@if $ui-item-active-glyph-color != $ui-glyph-color {
.#{$prefix}menu-item-focus &,
.#{$prefix}menu-item-active & {
color: $ui-item-active-glyph-color;
@if $include-ie {
// In IE8 the text color is not applied due to some bug
// so we have to force it
.#{$prefix}ie8 & {
color: $ui-item-active-glyph-color !important;
}
}
}
}
background-position: $ui-item-icon-background-position;
@if $include-rtl {
&.#{$prefix}rtl {
left: auto;
right: before($ui-item-icon-horizontal-spacing);
.#{$prefix}menu-item-focus &,
.#{$prefix}menu-item-active & {
right: before($ui-item-icon-horizontal-spacing) - left($ui-item-border-width);
}
}
}
&.#{$prefix}menu-item-glyph {
@if $ui-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: $ui-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}ie8 & {
color: mix($ui-glyph-color, $ui-background-color, $ui-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: $ui-item-icon-size;
height: $ui-item-icon-size;
top: $ui-item-icon-top;
right: after($ui-item-icon-horizontal-spacing);
left: auto;
background-position: $ui-item-icon-background-position;
@if $include-rtl {
&.#{$prefix}rtl {
right: auto;
left: after($ui-item-icon-horizontal-spacing);
.#{$prefix}menu-item-focus &,
.#{$prefix}menu-item-active & {
left: after($ui-item-icon-horizontal-spacing) - right($ui-item-border-width);
}
}
}
}
&.#{$prefix}menu-item-checkbox {
@if $ui-item-checkbox-size != $ui-item-icon-size {
height: $ui-item-checkbox-size;
width: $ui-item-checkbox-size;
}
@if $enable-font-icons {
color: $ui-item-checkbox-glyph-color;
@if $ui-item-active-checkbox-glyph-color != $ui-item-checkbox-glyph-color {
.#{$prefix}menu-item-focus &,
.#{$prefix}menu-item-active & {
color: $ui-item-active-checkbox-glyph-color;
}
}
}
.#{$prefix}menu-item-checked & {
@if $enable-font-icons and ($ui-item-checkbox-checked-glyph != null) {
@include font-icon($ui-item-checkbox-checked-glyph, $line-height: $ui-item-checkbox-size);
} @else {
background-image: theme-background-image('menu/#{$ui}-checked');
}
}
.#{$prefix}menu-item-unchecked & {
@if $enable-font-icons and ($ui-item-checkbox-glyph != null) {
@include font-icon($ui-item-checkbox-glyph, $line-height: $ui-item-checkbox-size);
} @else {
background-image: theme-background-image('menu/#{$ui}-unchecked');
}
}
}
&.#{$prefix}menu-group-icon {
@if $enable-font-icons {
@if $ui-item-checkbox-group-glyph-color != $ui-item-checkbox-glyph-color {
color: $ui-item-checkbox-group-glyph-color;
}
@if $ui-item-active-checkbox-group-glyph-color != $ui-item-checkbox-group-glyph-color {
.#{$prefix}menu-item-focus &,
.#{$prefix}menu-item-active & {
color: $ui-item-active-checkbox-group-glyph-color;
}
}
}
.#{$prefix}menu-item-checked & {
@if $enable-font-icons and ($ui-item-checkbox-group-checked-glyph != null) {
@include font-icon($ui-item-checkbox-group-checked-glyph, $line-height: $ui-item-checkbox-size);
} @else {
background-image: theme-background-image('menu/#{$ui}-group-checked');
}
}
.#{$prefix}menu-item-unchecked & {
@if $enable-font-icons {
@if $ui-item-checkbox-group-glyph != null {
@include font-icon($ui-item-checkbox-group-glyph, $line-height: $ui-item-checkbox-size);
} @else {
&:before {
content: '';
}
}
}
background-image: none;
}
}
}
.#{$prefix}menu-item-arrow-#{$ui} {
width: $ui-item-arrow-width;
height: $ui-item-arrow-height;
top: $ui-item-arrow-top - top($ui-item-border-width);
right: after($ui-item-arrow-horizontal-spacing) - right($ui-item-border-width);
margin: $ui-item-arrow-margin;
@if $enable-font-icons and ($ui-item-arrow-glyph != null) {
@include font-icon($ui-item-arrow-glyph);
color: $ui-item-arrow-glyph-color;
@if $ui-item-active-arrow-glyph-color != $ui-item-arrow-glyph-color {
.#{$prefix}menu-item-focus &,
.#{$prefix}menu-item-active & {
color: $ui-item-active-arrow-glyph-color;
}
}
} @else {
background-image: theme-background-image('menu/#{$ui}-menu-parent');
}
.#{$prefix}menu-item-focus &,
.#{$prefix}menu-item-active & {
top: $ui-item-arrow-top - top($ui-item-border-width);
right: after($ui-item-arrow-horizontal-spacing) - right($ui-item-border-width);
}
@if $include-rtl {
&.#{$prefix}rtl {
left: after($ui-item-arrow-horizontal-spacing);
right: auto;
@if $enable-font-icons and ($ui-item-arrow-glyph-rtl != null) {
@include font-icon($ui-item-arrow-glyph-rtl);
}
@else {
background-image: theme-background-image('menu/#{$ui}-menu-parent-left');
}
.#{$prefix}menu-item-focus &,
.#{$prefix}menu-item-active & {
left: after($ui-item-arrow-horizontal-spacing) - right($ui-item-border-width);
}
}
}
}
@if $include-ext-layout-container-boxoverflow-scroller {
@include extjs-box-scroller-ui(
$ui: $ui,
$type: 'menu',
$vertical-width: $ui-scroller-width,
$vertical-height: $ui-scroller-height,
$top-margin: $ui-scroller-top-margin,
$bottom-margin: $ui-scroller-bottom-margin,
$vertical-border-color: $ui-scroller-border-color,
$vertical-border-width: $ui-scroller-border-width,
$glyph-color: $ui-scroller-glyph-color,
$top-glyph: $ui-scroller-top-glyph,
$bottom-glyph: $ui-scroller-bottom-glyph,
$container-padding: $ui-padding,
$cursor: $ui-scroller-cursor,
$cursor-disabled: $ui-scroller-cursor-disabled,
$align: middle,
$opacity: $ui-scroller-opacity,
$opacity-over: $ui-scroller-opacity-over,
$opacity-pressed: $ui-scroller-opacity-pressed,
$opacity-disabled: $ui-scroller-opacity-disabled,
$classic: $ui-classic-scrollers,
$include-horizontal: false
);
}
// EXTJSIV-8846: partially transparent png images do not display correctly
// in winXP/IE8 when the image element has a transparent background.
// to fix this, we give the element the same background-color as the menu.
.#{$prefix}ie8 {
.#{$prefix}box-scroller-menu-#{$ui} {
background-color: $ui-background-color;
}
}
@if not is-null($ui-item-background-gradient) {
$stretch: slicer-background-stretch(menu-item-#{$ui}-active, bottom);
@include x-slicer(menu-item-#{$ui}-active);
}
}