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             @include border-radius(3px);
 129         }
 130     }
 131
 132     .#{$prefix}menu-item-disabled {
 133         @include opacity(.5);
 134     }
 135
 136     @if $include-ie {
 137         .#{$prefix}ie {
 138             .#{$prefix}menu-item-link {
 139                 line-height: 17px;
 140                 padding-bottom: 1px;
 141             }
 142
 143             .#{$prefix}menu-item-disabled {
 144                 .#{$prefix}menu-item-icon {
 145                     @include opacity(.5);
 146                 }
 147
 148                 .#{$prefix}menu-item-text {
 149                     // IE opacity/cleartype bug workaround
 150                     background-color: $menu-background-color;
 151                 }
 152             }
 153
 154             .#{$prefix}strict & {
 155                 .#{$prefix}menu-icon-separator {
 156                     width: 1px;
 157                 }
 158
 159                 .#{$prefix}menu-item-separator {
 160                     height: 1px;
 161                 }
 162             }
 163         }
 164
 165         .#{$prefix}ie6,
 166         .#{$prefix}ie7,
 167         .#{$prefix}quirks .#{$prefix}ie8 {
 168             .#{$prefix}menu-item-link {
 169                 padding-bottom: $menu-padding;
 170             }
 171         }
 172     }
 173
 174     @if not $supports-gradients or $compile-all {
 175         .#{$prefix}nlg {
 176             .#{$prefix}menu-item-active .#{$prefix}menu-item-link {
 177                 background: $menu-item-active-background-color theme-image($theme-name, $menu-item-active-background-image) repeat-x left top;
 178             }
 179         }
 180     }
 181
 182     .#{$prefix}menu-date-item {
 183         border-color: #99BBE8;
 184     }
 185 }