/**
* Creates the base structure of a Menu
* @member Ext.menu.Menu
*/
@mixin extjs-menu {
.#{$prefix}menu-body {
@include no-select;
background: $menu-background-color !important;
padding: $menu-padding;
}
.#{$prefix}menu-item .#{$prefix}form-text {
user-select: text;
-webkit-user-select: text;
-o-user-select: text;
-ie-user-select: text;
-moz-user-select: text;
-ie-user-select: text;
}
.#{$prefix}menu-icon-separator {
position: absolute;
top: 0px;
left: $menu-item-indent;
z-index: 0;
border-left: solid 1px $menu-separator-border-color;
background-color: $menu-separator-background-color;
width: 2px;
overflow: hidden;
}
.#{$prefix}menu-plain {
.#{$prefix}menu-icon-separator {
display: none;
}
}
.#{$prefix}menu-focus {
display: block;
position: absolute;
top: -10px;
left: -10px;
width: 0px;
height: 0px;
}
.#{$prefix}menu-item {
white-space: nowrap;
overflow: hidden;
z-index: 1;
}
.#{$prefix}menu-item-cmp {
margin-bottom: 1px;
}
.#{$prefix}menu-item-link {
display: block;
margin: 1px;
padding: $menu-link-padding;
text-decoration: none !important;
line-height: 16px;
cursor: default;
}
@if $include-opera {
.#{$prefix}opera {
// Opera 10.5 absolute positioning of submenu arrow has issues
// This will fix it, and not affect newer Operas
.#{$prefix}menu-item-link {
position: relative;
}
}
}
.#{$prefix}menu-item-icon {
width: 16px;
height: 16px;
position: absolute;
top: 5px;
left: 4px;
background: no-repeat center center;
}
// 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: 16px;
height: 16px;
position: absolute;
top: 6px;
right: 4px;
background: no-repeat center center;
}
.#{$prefix}menu-item-text {
font-size: ceil($font-size * .9);
color: $menu-text-color;
}
.#{$prefix}menu-item-checked {
.#{$prefix}menu-item-icon {
background-image: theme-background-image($theme-name, $menu-icon-checked);
}
.#{$prefix}menu-group-icon {
background-image: theme-background-image($theme-name, $menu-icon-group-checked);
}
}
.#{$prefix}menu-item-unchecked {
.#{$prefix}menu-item-icon {
background-image: theme-background-image($theme-name, $menu-icon-unchecked);
}
.#{$prefix}menu-group-icon {
background-image: none;
}
}
.#{$prefix}menu-item-separator {
height: 2px;
border-top: solid 1px $menu-separator-border-color;
background-color: $menu-separator-background-color;
margin: $menu-padding 0px;
overflow: hidden;
}
.#{$prefix}menu-item-arrow {
position: absolute;
width: 12px;
height: 9px;
top: 9px;
right: 0px;
background: no-repeat center center;
background-image: theme-background-image($theme-name, $menu-icon-arrow);
}
.#{$prefix}menu-item-indent {
margin-left: $menu-item-indent + $menu-padding + 2px; /* The 2px is the width of the seperator */
}
.#{$prefix}menu-item-active {
cursor: pointer;
.#{$prefix}menu-item-link {
@include background-gradient($menu-item-active-background-color, 'matte');
margin: 0px;
border: 1px solid $menu-item-active-border-color;
cursor: pointer;
@include border-radius(3px);
}
}
.#{$prefix}menu-item-disabled {
@include opacity(.5);
}
@if $include-ie {
.#{$prefix}ie {
.#{$prefix}menu-item-disabled {
.#{$prefix}menu-item-icon {
@include opacity(.5);
}
.#{$prefix}menu-item-text {
// IE opacity/cleartype bug workaround
background-color: transparent;
}
}
.#{$prefix}strict .#{$prefix}ie7m & {
.#{$prefix}menu-icon-separator {
width: 1px;
}
.#{$prefix}menu-item-separator {
height: 1px;
}
}
}
.#{$prefix}ie6,
.#{$prefix}ie7,
.#{$prefix}quirks .#{$prefix}ie8 {
.#{$prefix}menu-item-link {
padding-bottom: $menu-padding;
}
}
}
@if not $supports-gradients or $compile-all {
.#{$prefix}nlg {
.#{$prefix}menu-item-active .#{$prefix}menu-item-link {
background: $menu-item-active-background-color repeat-x left top;
background-image: theme-background-image($theme-name, $menu-item-active-background-image);
}
}
}
.#{$prefix}menu-date-item {
border-color: #99BBE8;
}
}
|