docs/resources/themes/stylesheets/ext4/default/widgets/_menu.scss

   1 /**
   2   * @class Ext.menu.*
   3   */
   4 @mixin extjs-menu {
   5     .#{$prefix}menu-body {
   6         @include no-select;
   7         background: $menu-background-color !important;
   8         padding: $menu-padding;
   9     }
  10
  11     .#{$prefix}menu-icon-separator {
  12         position: absolute;
  13         top: 0px;
  14         left: $menu-item-indent;
  15         z-index: 0;
  16         border-left: solid 1px $menu-separator-border-color;
  17         background-color: $menu-separator-background-color;
  18         width: 2px;
  19         height: 100%;
  20         overflow: hidden;
  21     }
  22
  23     .#{$prefix}menu-plain {
  24         .#{$prefix}menu-icon-separator {
  25             display: none;
  26         }
  27     }
  28
  29     .#{$prefix}menu-focus {
  30         display: block;
  31         position: absolute;
  32         top: -10px;
  33         left: -10px;
  34         width: 0px;
  35         height: 0px;
  36     }
  37
  38     .#{$prefix}menu-item {
  39         white-space: nowrap;
  40         overflow: hidden;
  41         z-index: 1;
  42     }
  43
  44     .#{$prefix}menu-item-cmp {
  45         margin-bottom: 1px;
  46     }
  47
  48     .#{$prefix}menu-item-link {
  49         display: block;
  50         padding: 0px $menu-padding;
  51         margin: 1px;
  52         text-decoration: none !important;
  53         line-height: 16px;
  54         cursor: default;
  55     }
  56
  57     @if $include-opera {
  58         .#{$prefix}opera {
  59             // Opera 10.5 absolute positioning of submenu arrow has issues
  60             // This will fix it, and not affect newer Operas
  61             .#{$prefix}menu-item-link {
  62                 position: relative;
  63             }
  64         }
  65     }
  66
  67     .#{$prefix}menu-item-icon {
  68         width: 16px;
  69         height: 16px;
  70         margin: 4px 11px 0px 2px;
  71         background: no-repeat center center;
  72     }
  73
  74     .#{$prefix}menu-item-text {
  75         position: relative;
  76         font-size: ceil($font-size * .9);
  77         color: $menu-text-color;
  78         top: -4px;
  79     }
  80
  81     .#{$prefix}menu-item-checked {
  82         .#{$prefix}menu-item-icon {
  83             background-image: theme-image($theme-name, $menu-icon-checked);
  84         }
  85         .#{$prefix}menu-group-icon {
  86             background-image: theme-image($theme-name, $menu-icon-group-checked);
  87         }
  88     }
  89
  90     .#{$prefix}menu-item-unchecked {
  91         .#{$prefix}menu-item-icon {
  92             background-image: theme-image($theme-name, $menu-icon-unchecked);
  93         }
  94         .#{$prefix}menu-group-icon {
  95             background-image: none;
  96         }
  97     }
  98
  99     .#{$prefix}menu-item-separator {
 100         height: 2px;
 101         border-top: solid 1px $menu-separator-border-color;
 102         background-color: $menu-separator-background-color;
 103         margin: $menu-padding 0px;
 104         overflow: hidden;
 105     }
 106
 107     .#{$prefix}menu-item-arrow {
 108         position: absolute;
 109         width: 12px;
 110         height: 9px;
 111         top: 9px;
 112         right: 0px;
 113         background: theme-image($theme-name, $menu-icon-arrow) no-repeat center center;
 114     }
 115
 116     .#{$prefix}menu-item-indent {
 117         margin-left: $menu-item-indent + $menu-padding + 2px; /* The 2px is the width of the seperator */
 118     }
 119
 120     .#{$prefix}menu-item-active {
 121         cursor: pointer;
 122
 123         .#{$prefix}menu-item-link {
 124             @include background-gradient($menu-item-active-background-color, 'matte');
 125             margin: 0px;
 126             border: 1px solid $menu-item-active-border-color;
 127             cursor: pointer;
 128         }
 129     }
 130
 131     .#{$prefix}menu-item-disabled {
 132         @include opacity(.5);
 133     }
 134
 135     @if $include-ie {
 136         .#{$prefix}ie {
 137             .#{$prefix}menu-item-link {
 138                 line-height: 17px;
 139                 padding-bottom: 1px;
 140             }
 141
 142             .#{$prefix}menu-item-disabled {
 143                 .#{$prefix}menu-item-icon {
 144                     @include opacity(.5);
 145                 }
 146
 147                 .#{$prefix}menu-item-text {
 148                     // IE opacity/cleartype bug workaround
 149                     background-color: $menu-background-color;
 150                 }
 151             }
 152
 153             .#{$prefix}strict & {
 154                 .#{$prefix}menu-icon-separator {
 155                     width: 1px;
 156                 }
 157
 158                 .#{$prefix}menu-item-separator {
 159                     height: 1px;
 160                 }
 161             }
 162         }
 163
 164         .#{$prefix}ie6,
 165         .#{$prefix}ie7,
 166         .#{$prefix}quirks .#{$prefix}ie8 {
 167             .#{$prefix}menu-item-link {
 168                 padding-bottom: $menu-padding;
 169             }
 170         }
 171     }
 172
 173     @if not $supports-gradients or $compile-all {
 174         .#{$prefix}nlg {
 175             .#{$prefix}menu-item-active .#{$prefix}menu-item-link {
 176                 background: $menu-item-active-background-color theme-image($theme-name, $menu-item-active-background-image) repeat-x left top;
 177             }
 178         }
 179     }
 180 }