3 There are three areas of styling for the Menu:
6 There are three types of menus:
10 All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
11 .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
12 .dijitMenuTable - for padding - also affects Select widget
15 .dijitMenuBar - for border, margins, padding, background-color of the menu bar
16 .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem)
18 3. Menu items - items in the menu.
19 .dijitMenuItem - for color
20 .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected
21 .dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item
22 td.dijitMenuItemIconCell - for padding around a menu item's icon
23 td.dijitMenuItemLabel - for padding around a menu item's label
24 .dijitMenuSeparatorTop - for border, top border, of the separator
25 .dijitMenuSeparatorBottom - for bottom margin of the separator
27 Styles specific to ComboBox and FilteringSelect widgets:
28 .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
29 .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
35 .claro .dijitMenuBar {
36 border: 1px solid @border-color;
39 background-color: @bar-background-color;
40 background-image: url(@image-common-highlight);
41 background-position:0 0;
42 background-repeat:repeat-x;
44 .dj_ie6 .claro .dijitMenuBar {
45 background-image:none;
48 background-repeat:repeat-y;
49 background-color:@menu-background-color;
50 border: 1px solid @popup-border-color;
52 /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
55 .dj_ie6 .claro .dijitMenu {
56 margin: 0; /* above -1px makes top/bottom borders disappear on IE6 */
58 .claro .dijitMenuBar .dijitMenuItem {
59 padding: 6px 10px 7px;
60 background-position:0 100px;
63 .claro .dijitMenuItem {
64 background-image: url(@image-menu-highlight);
65 background-position:0 -40px;
66 background-repeat:repeat-x;
70 /* this prevents jiggling upon hover of a menu item */
71 .claro .dijitMenuTable {
72 border-collapse:separate;
76 .claro .dijitMenuItem td{
79 /* hover over a MenuBarItem */
80 .claro .dijitMenuPassive .dijitMenuItemHover,
81 .claro .dijitMenuPassive .dijitMenuItemSelected {
82 background-color: @hovered-background-color;
83 border:solid 1px @hovered-border-color;
84 background-position:0 0;
88 .claro .dijitMenuPassive .dijitMenuItemActive{
89 background-position:0 -177px;
91 .dj_ie6 .claro .dijitMenuItem,
92 .dj_ie6 .claro .dijitMenuPassive .dijitMenuItem {
93 background-image: none;
96 /* MenuBarItem that has been selected and menu drops down from it */
97 .claro .dijitMenuActive .dijitMenuItemHover,
98 .claro .dijitMenuActive .dijitMenuItemSelected {
99 border:solid 1px @hovered-border-color;
100 padding: 5px 9px 6px;
101 background-color: @hovered-background-color;
102 background-position:0 0;
103 color:@hovered-text-color;
105 .dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
106 .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
107 .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
108 .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
113 .claro .dijitMenuActive .dijitMenuItemActive{
114 background-color: @pressed-background-color;
115 background-position:0 -177px;
117 .claro .dijitMenuItemActive {
118 background-position:0 -177px;
120 .claro td.dijitMenuItemIconCell {
124 .claro td.dijitMenuItemLabel {
128 .claro .dijitMenuExpand {
131 background-image: url(@image-arrow-sprite);
132 background-position: -14px 0;
135 .claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
138 .claro .dijitMenuSeparatorTop {
140 margin-top:1px; /* prevents spacing above/below separator */
141 border-bottom: 1px solid @border-color
143 .claro .dijitMenuSeparatorBottom{
147 /* the checked menu item */
148 .claro .dijitCheckedMenuItemIconChar {
151 .claro .dijitCheckedMenuItemIcon {
152 background-image: url(@image-form-checkbox-and-radios);
153 background-repeat:no-repeat;
154 background-position: -15px 50%;
158 .dj_ie6 .claro .dijitCheckedMenuItemIcon {
159 background-image: url(@image-form-checkbox-and-radios-ie6);
161 .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
162 background-position: 0 50%;
166 .claro .dijitComboBoxMenu {
168 background-image: none;
171 .claro .dijitComboBoxMenu .dijitMenuItem {
172 padding: @textbox-padding; // Make drop down menu text line up with text in <input>.
173 border-width:1px 0 1px 0;
175 border-color: @select-dropdownitem-background-color;
177 .claro .dijitComboBoxMenu .dijitMenuItemSelected {
178 color:@selected-text-color;
179 border-color:@hovered-border-color;
180 background-color:@hovered-background-color;
182 .claro .dijitComboBoxMenu .dijitMenuItemHover {
184 border-color: #769dc0;
185 background-color: #abd6ff;
186 background-position: 0 0;
188 .claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
189 background-position:0 -177px;
190 background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
192 .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {