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