]>
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: | |
7 | i)Context Menu | |
8 | ii)Drop down Menu | |
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 | |
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 | |
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; | |
1354d172 | 40 | background-image: url(@image-common-highlight); |
81bea17a AD |
41 | background-position:0 0; |
42 | background-repeat:repeat-x; | |
43 | } | |
44 | .dj_ie6 .claro .dijitMenuBar { | |
45 | background-image:none; | |
46 | } | |
47 | .claro .dijitMenu { | |
48 | background-repeat:repeat-y; | |
49 | background-color:@menu-background-color; | |
50 | border: 1px solid @popup-border-color; | |
51 | ||
52 | /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */ | |
53 | margin: -1px 0; | |
54 | } | |
55 | .dj_ie6 .claro .dijitMenu { | |
56 | margin: 0; /* above -1px makes top/bottom borders disappear on IE6 */ | |
57 | } | |
58 | .claro .dijitMenuBar .dijitMenuItem { | |
59 | padding: 6px 10px 7px; | |
60 | background-position:0 100px; | |
81bea17a AD |
61 | margin:-1px; |
62 | } | |
63 | .claro .dijitMenuItem { | |
1354d172 | 64 | background-image: url(@image-menu-highlight); |
81bea17a AD |
65 | background-position:0 -40px; |
66 | background-repeat:repeat-x; | |
1354d172 | 67 | color: @text-color; |
81bea17a AD |
68 | } |
69 | ||
70 | /* this prevents jiggling upon hover of a menu item */ | |
71 | .claro .dijitMenuTable { | |
72 | border-collapse:separate; | |
73 | border-spacing:0 0; | |
74 | padding:0; | |
75 | } | |
76 | .claro .dijitMenuItem td{ | |
77 | padding:1px; | |
78 | } | |
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; | |
85 | color:@text-color; | |
86 | padding: 5px 9px 6px; | |
87 | } | |
88 | .claro .dijitMenuPassive .dijitMenuItemActive{ | |
89 | background-position:0 -177px; | |
90 | } | |
91 | .dj_ie6 .claro .dijitMenuItem, | |
92 | .dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { | |
93 | background-image: none; | |
94 | } | |
95 | ||
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; | |
104 | } | |
105 | .dj_ie .claro .dijitMenuActive .dijitMenuItemHover, | |
106 | .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, | |
107 | .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, | |
108 | .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { | |
109 | padding-top: 6px; | |
110 | padding-bottom: 5px; | |
111 | margin-top: -3px; | |
112 | } | |
113 | .claro .dijitMenuActive .dijitMenuItemActive{ | |
114 | background-color: @pressed-background-color; | |
115 | background-position:0 -177px; | |
116 | } | |
117 | .claro .dijitMenuItemActive { | |
118 | background-position:0 -177px; | |
119 | } | |
120 | .claro td.dijitMenuItemIconCell { | |
121 | padding: 2px; | |
122 | margin: 0 0 0 4px; | |
123 | } | |
124 | .claro td.dijitMenuItemLabel { | |
125 | padding-top: 5px; | |
126 | padding-bottom: 5px; | |
127 | } | |
128 | .claro .dijitMenuExpand { | |
129 | width: 7px; | |
130 | height: 7px; | |
1354d172 | 131 | background-image: url(@image-arrow-sprite); |
81bea17a AD |
132 | background-position: -14px 0; |
133 | margin-right:3px; | |
134 | } | |
135 | .claro .dijitMenuItemDisabled .dijitMenuItemIconCell { | |
136 | opacity:1; | |
137 | } | |
138 | .claro .dijitMenuSeparatorTop { | |
139 | height: auto; | |
140 | margin-top:1px; /* prevents spacing above/below separator */ | |
141 | border-bottom: 1px solid @border-color | |
142 | } | |
143 | .claro .dijitMenuSeparatorBottom{ | |
144 | height: auto; | |
145 | margin-bottom:1px; | |
146 | } | |
147 | /* the checked menu item */ | |
148 | .claro .dijitCheckedMenuItemIconChar { | |
149 | display: none; | |
150 | } | |
151 | .claro .dijitCheckedMenuItemIcon { | |
1354d172 | 152 | background-image: url(@image-form-checkbox-and-radios); |
81bea17a AD |
153 | background-repeat:no-repeat; |
154 | background-position: -15px 50%; | |
155 | width:15px; | |
156 | height:16px; | |
157 | } | |
158 | .dj_ie6 .claro .dijitCheckedMenuItemIcon { | |
1354d172 | 159 | background-image: url(@image-form-checkbox-and-radios-ie6); |
81bea17a AD |
160 | } |
161 | .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { | |
162 | background-position: 0 50%; | |
163 | } | |
164 | ||
165 | /*ComboBox Menu*/ | |
166 | .claro .dijitComboBoxMenu { | |
167 | margin-left:0; | |
168 | background-image: none; | |
169 | } | |
170 | ||
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; | |
174 | border-style:solid; | |
175 | border-color: @select-dropdownitem-background-color; | |
176 | } | |
177 | .claro .dijitComboBoxMenu .dijitMenuItemSelected { | |
178 | color:@selected-text-color; | |
179 | border-color:@hovered-border-color; | |
180 | background-color:@hovered-background-color; | |
181 | } | |
1354d172 AD |
182 | .claro .dijitComboBoxMenu .dijitMenuItemHover { |
183 | color: #000000; | |
184 | border-color: #769dc0; | |
185 | background-color: #abd6ff; | |
186 | background-position: 0 0; | |
187 | } | |
81bea17a AD |
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? */ | |
191 | } | |
192 | .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { | |
193 | font-style: italic; | |
194 | } |