<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js">// private
|
$menu-icon-separator-indent: left($menu-padding) + $menu-item-icon-size + ($menu-item-icon-horizontal-spacing * 2);
|
// private
|
$menu-item-indent: ($menu-icon-separator-indent + $menu-separator-size + $menu-item-text-horizontal-spacing);
|
|
@if $menu-border-width != null {
|
.#{$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;
|
}
|
|
// Components used as menu items configured with "indent:true" are assigned a css class of x-menu-item-indent, unless
|
// the menu is configured with "plain: true"
|
.#{$prefix}menu-item-indent {
|
margin-left: $menu-item-indent;
|
}
|
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}menu-item-indent {
|
margin-left: 0;
|
margin-right: $menu-item-indent;
|
}
|
}
|
|
.#{$prefix}menu-item-active {
|
@include background-gradient($menu-item-active-background-color, $menu-item-background-gradient);
|
border-color: $menu-item-active-border-color;
|
@if $menu-item-active-border-radius != 0 {
|
@include border-radius($menu-item-active-border-radius);
|
}
|
|
// When active, the border takes the place of padding so that a border can appear
|
// without changing the overall size of the item.
|
// TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack.
|
@if $menu-item-border-width != 0 {
|
border-width: $menu-item-border-width;
|
border-style: solid;
|
padding: 0;
|
}
|
|
// Background linear gradient
|
@if not $supports-gradients or $compile-all {
|
.#{$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');
|
}
|
}
|
}
|
|
.#{$prefix}menu-item-link {
|
line-height: $menu-item-height - vertical($menu-item-border-width);
|
padding: 0 $menu-item-trailing-padding 0 $menu-item-indent;
|
|
// Otherwise, multi line menu items wrap into the padding area (icon space) in Webkit
|
display: inline-block;
|
}
|
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}menu-item-link {
|
padding: 0 $menu-item-indent 0 $menu-item-trailing-padding;
|
}
|
}
|
|
// Menu check items need padding at end to accommodate checkbox.
|
// Class is always x-right-check-item-text where "right" means "after"
|
.#{$prefix}right-check-item-text {
|
padding-right: $menu-check-item-padding;
|
}
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}right-check-item-text {
|
padding-left: $menu-check-item-padding;
|
padding-right: 0;
|
}
|
}
|
|
.#{$prefix}menu-item-icon {
|
width: $menu-item-icon-size;
|
height: $menu-item-icon-size;
|
top: $menu-item-icon-top;
|
left: $menu-item-icon-horizontal-spacing;
|
background-position: $menu-item-icon-background-position;
|
}
|
|
.#{$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;
|
}
|
// 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);
|
}
|
}
|
|
// Stop the addition of bordering to active items shifting the menu icon in bad IEs (and FF)
|
// TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack.
|
@if $menu-item-border-width != 0 {
|
.#{$prefix}gecko .#{$prefix}menu-item-active .#{$prefix}menu-item-icon,
|
.#{$prefix}quirks .#{$prefix}menu-item-active .#{$prefix}menu-item-icon,
|
.#{$prefix}ie9m .#{$prefix}menu-item-active .#{$prefix}menu-item-icon {
|
top: ($menu-item-icon-top - $menu-item-border-width);
|
left: ($menu-item-icon-horizontal-spacing - $menu-item-border-width);
|
}
|
}
|
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}menu-item-icon {
|
left: auto;
|
right: $menu-item-icon-horizontal-spacing;
|
}
|
|
// Stop the addition of bordering to active items shifting the menu icon in bad IEs (and FF)
|
// TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack.
|
@if $menu-item-border-width != 0 {
|
.#{$prefix}gecko .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-icon,
|
.#{$prefix}quirks .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-icon,
|
.#{$prefix}ie9m .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-icon {
|
left: auto;
|
right: ($menu-item-icon-horizontal-spacing - $menu-item-border-width);
|
}
|
}
|
}
|
|
// 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: round(($menu-item-height - vertical($menu-item-border-width) - $menu-item-icon-size) / 2);
|
right: $menu-item-icon-horizontal-spacing;
|
background-position: $menu-item-icon-background-position;
|
}
|
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}menu-item-icon-right {
|
right: auto;
|
left: $menu-item-icon-horizontal-spacing;
|
}
|
}
|
|
.#{$prefix}menu-item-text {
|
font-size: $menu-item-font-size;
|
color: $menu-text-color;
|
cursor: $menu-item-cursor; // needed to override cursor:default set by x-unselectable
|
margin-right: $menu-item-arrow-width + 4; // Leave space for a submenu arrow
|
}
|
|
// If inside a menu link item with RTL, switch the margin space for the submenu arrow
|
@if $include-rtl {
|
a.#{$prefix}rtl {
|
.#{$prefix}menu-item-text {
|
margin-right: 0;
|
margin-left: $menu-item-arrow-width + 4;
|
}
|
}
|
}
|
|
.#{$prefix}menu-item-checked {
|
.#{$prefix}menu-item-icon, .#{$prefix}menu-item-icon-right {
|
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-icon, .#{$prefix}menu-item-icon-right {
|
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: $menu-item-arrow-horizontal-spacing;
|
background-image: theme-background-image('menu/menu-parent');
|
}
|
|
// Stop the addition of bordering to active items shifting the arrow in bad IEs (and FF)
|
// TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack.
|
@if $menu-item-border-width != 0 {
|
.#{$prefix}gecko .#{$prefix}menu-item-active .#{$prefix}menu-item-arrow,
|
.#{$prefix}quirks .#{$prefix}menu-item-active .#{$prefix}menu-item-arrow,
|
.#{$prefix}ie9m .#{$prefix}menu-item-active .#{$prefix}menu-item-arrow {
|
top: ($menu-item-arrow-top - $menu-item-border-width);
|
right: ($menu-item-arrow-horizontal-spacing - $menu-item-border-width);
|
}
|
}
|
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}menu-item-arrow {
|
left: $menu-item-arrow-horizontal-spacing;
|
right: auto;
|
background-image: theme-background-image('menu/menu-parent-left');
|
}
|
|
// Stop the addition of bordering to active items shifting the arrow in bad IEs (and FF)
|
// TODO: When we drop IE6, use transparent borders on inactive items and no padding and remove this hack.
|
@if $menu-item-border-width != 0 {
|
.#{$prefix}gecko .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-arrow,
|
.#{$prefix}ie9m .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-arrow,
|
.#{$prefix}quirks .#{$prefix}menu-item-active .#{$prefix}rtl.#{$prefix}menu-item-arrow {
|
right: auto;
|
left: ($menu-item-arrow-horizontal-spacing - $menu-item-border-width);
|
}
|
}
|
}
|
|
.#{$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;
|
}
|
}
|
|
.#{$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;
|
}
|
}
|
}
|
}
|
|
// TODO: what is this for?
|
.#{$prefix}menu-date-item {
|
border-color: #99BBE8;
|
}
|
|
@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);
|
</pre>
|
</body>
|
</html>
|