]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* Menu |
2 | ||
3 | There are three areas of styling for the Menu: | |
4 | ||
5 | 1. The menu | |
6 | There are three types of menus: | |
f0cfe83e AD |
7 | i) Context Menu |
8 | ii) Drop down Menu | |
81bea17a AD |
9 | iii) Navigation Menu |
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 | |
13 | ||
14 | 2. The menu bar | |
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) | |
17 | ||
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 | |
f0cfe83e | 21 | .dijitMenuItemActive - for background-color of an active (mousedown) menu item |
81bea17a AD |
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 | |
26 | ||
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 | |
30 | ||
31 | */ | |
32 | ||
33 | @import "variables"; | |
34 | ||
35 | .claro .dijitMenuBar { | |
36 | border: 1px solid @border-color; | |
37 | margin: 0; | |
38 | padding: 0; | |
39 | background-color: @bar-background-color; | |
f0cfe83e | 40 | .standard-gradient; |
81bea17a | 41 | } |
f0cfe83e | 42 | |
81bea17a | 43 | .claro .dijitMenu { |
81bea17a AD |
44 | background-color:@menu-background-color; |
45 | border: 1px solid @popup-border-color; | |
46 | ||
47 | /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */ | |
48 | margin: -1px 0; | |
49 | } | |
50 | .dj_ie6 .claro .dijitMenu { | |
51 | margin: 0; /* above -1px makes top/bottom borders disappear on IE6 */ | |
52 | } | |
f0cfe83e AD |
53 | |
54 | .claro .dijitMenuItem { | |
55 | color: @text-color; | |
56 | } | |
81bea17a AD |
57 | .claro .dijitMenuBar .dijitMenuItem { |
58 | padding: 6px 10px 7px; | |
81bea17a | 59 | margin:-1px; |
f0cfe83e AD |
60 | } |
61 | .claro .dijitMenuBar .dijitMenuItemHover, | |
62 | .claro .dijitMenuBar .dijitMenuItemSelected { | |
63 | // on hover or selection of MenuBar item, add border and reduce padding to compensate | |
64 | border:solid 1px @hovered-border-color; | |
65 | padding: 5px 9px 6px; | |
81bea17a AD |
66 | } |
67 | ||
68 | /* this prevents jiggling upon hover of a menu item */ | |
69 | .claro .dijitMenuTable { | |
70 | border-collapse:separate; | |
71 | border-spacing:0 0; | |
72 | padding:0; | |
73 | } | |
74 | .claro .dijitMenuItem td{ | |
75 | padding:1px; | |
76 | } | |
f0cfe83e AD |
77 | /* hover over a MenuItem or MenuBarItem */ |
78 | .claro .dijitSelectMenu .dijitMenuItemHover td, | |
79 | .claro .dijitSelectMenu .dijitMenuItemSelected td, | |
80 | .claro .dijitMenuItemHover, | |
81 | .claro .dijitMenuItemSelected { | |
82 | // note: seems like the selected MenuItem should use @pressed-background-color | |
83 | // and .active-gradient, but claro didn't to that | |
81bea17a | 84 | background-color: @hovered-background-color; |
f0cfe83e | 85 | .standard-gradient; |
81bea17a | 86 | } |
f0cfe83e AD |
87 | .claro .dijitMenuItemActive { |
88 | // todo: seems like the selected MenuItem should come here | |
89 | // todo: seems like should use @pressed-background-color | |
90 | .active-gradient; | |
81bea17a AD |
91 | } |
92 | .dj_ie .claro .dijitMenuActive .dijitMenuItemHover, | |
93 | .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, | |
94 | .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, | |
95 | .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { | |
f0cfe83e AD |
96 | // Selectivity set to override ComboBox rules below. |
97 | // If this rule isn't present, on IE6 hovering an item in the ComboBox drop down causes two | |
98 | // items to be highlighted (except when hovering the first item in the list) | |
81bea17a AD |
99 | padding-top: 6px; |
100 | padding-bottom: 5px; | |
101 | margin-top: -3px; | |
102 | } | |
f0cfe83e | 103 | |
81bea17a | 104 | .claro td.dijitMenuItemIconCell { |
f0cfe83e AD |
105 | padding: 2px; |
106 | margin: 0 0 0 4px; | |
81bea17a AD |
107 | } |
108 | .claro td.dijitMenuItemLabel { | |
109 | padding-top: 5px; | |
110 | padding-bottom: 5px; | |
111 | } | |
112 | .claro .dijitMenuExpand { | |
113 | width: 7px; | |
114 | height: 7px; | |
1354d172 | 115 | background-image: url(@image-arrow-sprite); |
81bea17a AD |
116 | background-position: -14px 0; |
117 | margin-right:3px; | |
118 | } | |
119 | .claro .dijitMenuItemDisabled .dijitMenuItemIconCell { | |
120 | opacity:1; | |
121 | } | |
122 | .claro .dijitMenuSeparatorTop { | |
123 | height: auto; | |
124 | margin-top:1px; /* prevents spacing above/below separator */ | |
125 | border-bottom: 1px solid @border-color | |
126 | } | |
127 | .claro .dijitMenuSeparatorBottom{ | |
128 | height: auto; | |
129 | margin-bottom:1px; | |
130 | } | |
131 | /* the checked menu item */ | |
132 | .claro .dijitCheckedMenuItemIconChar { | |
133 | display: none; | |
134 | } | |
135 | .claro .dijitCheckedMenuItemIcon { | |
1354d172 | 136 | background-image: url(@image-form-checkbox-and-radios); |
81bea17a AD |
137 | background-repeat:no-repeat; |
138 | background-position: -15px 50%; | |
139 | width:15px; | |
140 | height:16px; | |
141 | } | |
142 | .dj_ie6 .claro .dijitCheckedMenuItemIcon { | |
1354d172 | 143 | background-image: url(@image-form-checkbox-and-radios-ie6); |
81bea17a AD |
144 | } |
145 | .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { | |
146 | background-position: 0 50%; | |
147 | } | |
148 | ||
149 | /*ComboBox Menu*/ | |
150 | .claro .dijitComboBoxMenu { | |
151 | margin-left:0; | |
152 | background-image: none; | |
153 | } | |
154 | ||
f0cfe83e | 155 | .claro .dijitSelectMenu .dijitMenuItem td, |
81bea17a AD |
156 | .claro .dijitComboBoxMenu .dijitMenuItem { |
157 | padding: @textbox-padding; // Make drop down menu text line up with text in <input>. | |
158 | border-width:1px 0 1px 0; | |
159 | border-style:solid; | |
160 | border-color: @select-dropdownitem-background-color; | |
161 | } | |
f0cfe83e | 162 | .claro .dijitSelectMenu .dijitMenuItemSelected td, |
81bea17a AD |
163 | .claro .dijitComboBoxMenu .dijitMenuItemSelected { |
164 | color:@selected-text-color; | |
165 | border-color:@hovered-border-color; | |
166 | background-color:@hovered-background-color; | |
167 | } | |
f0cfe83e | 168 | .claro .dijitSelectMenu .dijitMenuItemHover td, |
1354d172 AD |
169 | .claro .dijitComboBoxMenu .dijitMenuItemHover { |
170 | color: #000000; | |
171 | border-color: #769dc0; | |
172 | background-color: #abd6ff; | |
1354d172 | 173 | } |
81bea17a | 174 | .claro .dijitComboBoxMenuActive .dijitMenuItemSelected { |
81bea17a AD |
175 | background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ |
176 | } | |
177 | .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { | |
178 | font-style: italic; | |
179 | } |