_menu.scss (5040B)
1 /** 2 * Creates the base structure of a Menu 3 * @member Ext.menu.Menu 4 */ 5 @mixin extjs-menu { 6 .#{$prefix}menu-body { 7 @include no-select; 8 background: $menu-background-color !important; 9 padding: $menu-padding; 10 } 11 12 .#{$prefix}menu-item .#{$prefix}form-text { 13 user-select: text; 14 -webkit-user-select: text; 15 -o-user-select: text; 16 -ie-user-select: text; 17 -moz-user-select: text; 18 -ie-user-select: text; 19 } 20 21 .#{$prefix}menu-icon-separator { 22 position: absolute; 23 top: 0px; 24 left: $menu-item-indent; 25 z-index: 0; 26 border-left: solid 1px $menu-separator-border-color; 27 background-color: $menu-separator-background-color; 28 width: 2px; 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 .#{$prefix}ie7m & { 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 }