/** * @class Ext.menu.* */ @mixin extjs-menu { .#{$prefix}menu { // @include box-shadow(#CACAC9 0 0 4px); @include border-top-right-radius(4px); @include border-bottom-right-radius(4px); @include border-bottom-left-radius(4px); background: $menu-background-color !important; // padding: $menu-padding; // border: 1px solid #fff; // border-top: 0; &.x-panel { // background: transparent; } .#{$prefix}menu-body { @extend .no-select; } } .#{$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; height: 100%!important; 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; &:last-child { // background:red; //// .#{$prefix}menu-item-link { //// @include border-top-right-radius(4px); //// } // } .x-menu-item-link { @include border-bottom-radius(4px); } } } .#{$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; } .#{$prefix}menu-item-text { font-size: ceil($font-size * .9); color: $menu-text-color; font-weight:bold; } .#{$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, $base-gradient); background: $menu-item-active-background-color; margin: 0px; // border: 1px solid $menu-item-active-border-color; cursor: pointer; // @include border-radius(2px); // @todo ie6ify // @include box-shadow(rgba(#000, .4) 0 1px 3px); } .#{$prefix}menu-item-text { color: $menu-item-active-color; } } .#{$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; } }