Mercurial > kallithea
comparison pylons_app/public/js/yui/menu/assets/menu.css @ 0:564e40829f80
initial commit.
author | Marcin Kuzminski |
---|---|
date | Thu, 18 Feb 2010 13:01:57 +0100 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:564e40829f80 |
---|---|
1 /* | |
2 Copyright (c) 2009, Yahoo! Inc. All rights reserved. | |
3 Code licensed under the BSD License: | |
4 http://developer.yahoo.net/yui/license.txt | |
5 version: 2.8.0r4 | |
6 */ | |
7 /* Menu & MenuBar styles */ | |
8 | |
9 .yuimenu { | |
10 | |
11 top: -999em; | |
12 left: -999em; | |
13 | |
14 } | |
15 | |
16 .yuimenubar { | |
17 | |
18 position: static; | |
19 | |
20 } | |
21 | |
22 .yuimenu .yuimenu, | |
23 .yuimenubar .yuimenu { | |
24 | |
25 position: absolute; | |
26 | |
27 } | |
28 | |
29 .yuimenubar li, | |
30 .yuimenu li { | |
31 | |
32 list-style-type: none; | |
33 | |
34 } | |
35 | |
36 .yuimenubar ul, | |
37 .yuimenu ul, | |
38 .yuimenubar li, | |
39 .yuimenu li, | |
40 .yuimenu h6, | |
41 .yuimenubar h6 { | |
42 | |
43 margin: 0; | |
44 padding: 0; | |
45 | |
46 } | |
47 | |
48 .yuimenuitemlabel, | |
49 .yuimenubaritemlabel { | |
50 | |
51 text-align: left; | |
52 white-space: nowrap; | |
53 | |
54 } | |
55 | |
56 | |
57 /* | |
58 The following style rule trigger the "hasLayout" property in | |
59 IE (http://msdn2.microsoft.com/en-us/library/ms533776.aspx) for a | |
60 MenuBar instance's <ul> element, allowing both to clear their floated | |
61 child <li> elements. | |
62 */ | |
63 | |
64 .yuimenubar ul { | |
65 | |
66 *zoom: 1; | |
67 | |
68 } | |
69 | |
70 | |
71 /* | |
72 Remove the "hasLayout" trigger for submenus of MenuBar instances as it | |
73 is unnecessary. | |
74 */ | |
75 | |
76 .yuimenubar .yuimenu ul { | |
77 | |
78 *zoom: normal; | |
79 | |
80 } | |
81 | |
82 /* | |
83 The following style rule allows a MenuBar instance's <ul> element to clear | |
84 its floated <li> elements in Firefox, Safari and and Opera. | |
85 */ | |
86 | |
87 .yuimenubar>.bd>ul:after { | |
88 | |
89 content: "."; | |
90 display: block; | |
91 clear: both; | |
92 visibility: hidden; | |
93 height: 0; | |
94 line-height: 0; | |
95 | |
96 } | |
97 | |
98 .yuimenubaritem { | |
99 | |
100 float: left; | |
101 | |
102 } | |
103 | |
104 .yuimenubaritemlabel, | |
105 .yuimenuitemlabel { | |
106 | |
107 display: block; | |
108 | |
109 } | |
110 | |
111 .yuimenuitemlabel .helptext { | |
112 | |
113 font-style: normal; | |
114 display: block; | |
115 | |
116 /* | |
117 The value for the left margin controls how much the help text is | |
118 offset from the text of the menu item. This value will need to | |
119 be customized depending on the longest text label of a menu item. | |
120 */ | |
121 | |
122 margin: -1em 0 0 10em; | |
123 | |
124 } | |
125 | |
126 /* | |
127 PLEASE NOTE: The <div> element used for a menu's shadow is appended | |
128 to its root element via JavaScript once it has been rendered. The | |
129 code that creates the shadow lives in the menu's public "onRender" | |
130 event handler that is a prototype method of YAHOO.widget.Menu. | |
131 Implementers wishing to remove a menu's shadow or add any other markup | |
132 required for a given skin for menu should override the "onRender" method. | |
133 */ | |
134 | |
135 .yui-menu-shadow { | |
136 | |
137 position: absolute; | |
138 visibility: hidden; | |
139 z-index: -1; | |
140 | |
141 } | |
142 | |
143 .yui-menu-shadow-visible { | |
144 | |
145 top: 2px; | |
146 right: -3px; | |
147 left: -3px; | |
148 bottom: -3px; | |
149 visibility: visible; | |
150 | |
151 } | |
152 | |
153 | |
154 /* | |
155 | |
156 There are two known issues with YAHOO.widget.Overlay (the superclass class of | |
157 Menu) that manifest in Gecko-based browsers on Mac OS X: | |
158 | |
159 1) Elements with scrollbars will poke through Overlay instances floating | |
160 above them. | |
161 | |
162 2) An Overlay's scrollbars and the scrollbars of its child nodes remain | |
163 visible when the Overlay is hidden. | |
164 | |
165 To fix these bugs in Menu (a subclass of YAHOO.widget.Overlay): | |
166 | |
167 1) The "overflow" property of a Menu instance's shadow element and child | |
168 nodes is toggled between "hidden" and "auto" (through the application | |
169 and removal of the "hide-scrollbars" and "show-scrollbars" CSS classes) | |
170 as its "visibility" configuration property is toggled between | |
171 "false" and "true." | |
172 | |
173 2) The "display" property of <select> elements that are child nodes of the | |
174 Menu instance's root element is set to "none" when it is hidden. | |
175 | |
176 PLEASE NOTE: | |
177 | |
178 1) The "hide-scrollbars" and "show-scrollbars" CSS classes classes are | |
179 applied only for Gecko on Mac OS X and are added/removed to/from the | |
180 Overlay's root HTML element (DIV) via the "hideMacGeckoScrollbars" and | |
181 "showMacGeckoScrollbars" methods of YAHOO.widget.Overlay. | |
182 | |
183 2) There may be instances where the CSS for a web page or application | |
184 contains style rules whose specificity override the rules implemented by | |
185 the Menu CSS files to fix this bug. In such cases, is necessary to | |
186 leverage the provided "hide-scrollbars" and "show-scrollbars" classes to | |
187 write custom style rules to guard against this bug. | |
188 | |
189 ** For more information on this issue, see: | |
190 | |
191 + https://bugzilla.mozilla.org/show_bug.cgi?id=187435 | |
192 + YUILibrary bug #1723530 | |
193 | |
194 */ | |
195 | |
196 .hide-scrollbars * { | |
197 | |
198 overflow: hidden; | |
199 | |
200 } | |
201 | |
202 .hide-scrollbars select { | |
203 | |
204 display: none; | |
205 | |
206 } | |
207 | |
208 | |
209 /* | |
210 | |
211 The following style rule (".yuimenu.show-scrollbars") overrides the | |
212 ".show-scrollbars" rule defined in container-core.css which sets the | |
213 "overflow" property of a YAHOO.widget.Overlay instance's root HTML element to | |
214 "auto" when it is visible. Without this override, a Menu would have scrollbars | |
215 when one of its submenus is visible. | |
216 | |
217 */ | |
218 | |
219 .yuimenu.show-scrollbars, | |
220 .yuimenubar.show-scrollbars { | |
221 | |
222 overflow: visible; | |
223 | |
224 } | |
225 | |
226 .yuimenu.hide-scrollbars .yui-menu-shadow, | |
227 .yuimenubar.hide-scrollbars .yui-menu-shadow { | |
228 | |
229 overflow: hidden; | |
230 | |
231 } | |
232 | |
233 .yuimenu.show-scrollbars .yui-menu-shadow, | |
234 .yuimenubar.show-scrollbars .yui-menu-shadow { | |
235 | |
236 overflow: auto; | |
237 | |
238 } | |
239 | |
240 | |
241 /* MenuBar style rules */ | |
242 | |
243 .yuimenubar { | |
244 | |
245 background-color: #f6f7ee; | |
246 | |
247 } | |
248 | |
249 | |
250 | |
251 /* Menu style rules */ | |
252 | |
253 .yuimenu { | |
254 | |
255 background-color: #f6f7ee; | |
256 border: solid 1px #c4c4be; | |
257 padding: 1px; | |
258 | |
259 } | |
260 | |
261 .yui-menu-shadow { | |
262 | |
263 display: none; | |
264 | |
265 } | |
266 | |
267 .yuimenu ul { | |
268 | |
269 border: solid 1px #c4c4be; | |
270 border-width: 1px 0 0 0; | |
271 padding: 10px 0; | |
272 | |
273 } | |
274 | |
275 .yuimenu .yui-menu-body-scrolled { | |
276 | |
277 overflow: hidden; | |
278 | |
279 } | |
280 | |
281 | |
282 /* Group titles */ | |
283 | |
284 .yuimenu h6, | |
285 .yuimenubar h6 { | |
286 | |
287 font-size: 100%; | |
288 font-weight: normal; | |
289 border: solid 1px #c4c4be; | |
290 color: #b9b9b9; | |
291 | |
292 } | |
293 | |
294 .yuimenubar h6 { | |
295 | |
296 float: left; | |
297 padding: 4px 12px; | |
298 border-width: 0 1px 0 0; | |
299 | |
300 } | |
301 | |
302 .yuimenubar .yuimenu h6 { | |
303 | |
304 float: none; | |
305 | |
306 } | |
307 | |
308 .yuimenu h6 { | |
309 | |
310 border-width: 1px 0 0 0; | |
311 padding: 5px 10px 0 10px; | |
312 | |
313 } | |
314 | |
315 .yuimenu ul.first-of-type, | |
316 .yuimenu ul.hastitle, | |
317 .yuimenu h6.first-of-type { | |
318 | |
319 border-width: 0; | |
320 | |
321 } | |
322 | |
323 | |
324 | |
325 /* Top and bottom scroll controls */ | |
326 | |
327 .yuimenu .topscrollbar, | |
328 .yuimenu .bottomscrollbar { | |
329 | |
330 height: 16px; | |
331 background-position: center center; | |
332 background-repeat: no-repeat; | |
333 | |
334 } | |
335 | |
336 .yuimenu .topscrollbar { | |
337 | |
338 background-image: url(menu_up_arrow.png); | |
339 | |
340 } | |
341 | |
342 .yuimenu .topscrollbar_disabled { | |
343 | |
344 background-image: url(menu_up_arrow_disabled.png); | |
345 | |
346 } | |
347 | |
348 .yuimenu .bottomscrollbar { | |
349 | |
350 background-image: url(menu_down_arrow.png); | |
351 | |
352 } | |
353 | |
354 .yuimenu .bottomscrollbar_disabled { | |
355 | |
356 background-image: url(menu_down_arrow_disabled.png); | |
357 | |
358 } | |
359 | |
360 | |
361 /* MenuItem and MenuBarItem styles */ | |
362 | |
363 .yuimenuitem { | |
364 | |
365 /* | |
366 For IE: Used to collapse superfluous white space between <li> elements | |
367 that is triggered by the "display" property of the <a> elements being | |
368 set to "block." | |
369 */ | |
370 | |
371 *border-bottom: solid 1px #f6f7ee; | |
372 | |
373 } | |
374 | |
375 .yuimenuitemlabel, | |
376 .yuimenuitemlabel:visited, | |
377 .yuimenubaritemlabel, | |
378 .yuimenubaritemlabel:visited { | |
379 | |
380 font-size: 85%; | |
381 color: #000; | |
382 text-decoration: none; | |
383 | |
384 } | |
385 | |
386 .yuimenuitemlabel { | |
387 | |
388 padding: 2px 24px; | |
389 | |
390 } | |
391 | |
392 .yuimenubaritemlabel { | |
393 | |
394 border-width: 0 0 0 1px; | |
395 border-style: solid; | |
396 border-color: #c4c4be; | |
397 padding: 4px 24px; | |
398 | |
399 } | |
400 | |
401 .yuimenubar li.first-of-type .yuimenubaritemlabel { | |
402 | |
403 border-width: 0; | |
404 | |
405 } | |
406 | |
407 .yuimenubaritem-hassubmenu { | |
408 | |
409 background: url(menubaritem_submenuindicator.png) right center no-repeat; | |
410 | |
411 } | |
412 | |
413 .yuimenuitem-hassubmenu { | |
414 | |
415 background: url(menuitem_submenuindicator.png) right center no-repeat; | |
416 | |
417 } | |
418 | |
419 .yuimenuitem-checked { | |
420 | |
421 background: url(menuitem_checkbox.png) left center no-repeat; | |
422 | |
423 } | |
424 | |
425 .yuimenuitemlabel .helptext { | |
426 | |
427 margin-top: -1.1em; | |
428 *margin-top: -1.2em; /* For IE*/ | |
429 | |
430 } | |
431 | |
432 | |
433 | |
434 /* MenuItem states */ | |
435 | |
436 | |
437 /* Selected MenuItem */ | |
438 | |
439 .yuimenubaritem-selected, | |
440 .yuimenuitem-selected { | |
441 | |
442 background-color: #8c8ad0; | |
443 | |
444 } | |
445 | |
446 .yuimenubaritemlabel-selected, | |
447 .yuimenubaritemlabel-selected:visited, | |
448 .yuimenuitemlabel-selected, | |
449 .yuimenuitemlabel-selected:visited { | |
450 | |
451 text-decoration: underline; | |
452 color: #fff; | |
453 | |
454 } | |
455 | |
456 .yuimenubaritem-hassubmenu-selected { | |
457 | |
458 background-image: url(menubaritem_submenuindicator_selected.png); | |
459 | |
460 } | |
461 | |
462 .yuimenuitem-hassubmenu-selected { | |
463 | |
464 background-image: url(menuitem_submenuindicator_selected.png); | |
465 | |
466 } | |
467 | |
468 .yuimenuitem-checked-selected { | |
469 | |
470 background-image: url(menuitem_checkbox_selected.png); | |
471 | |
472 } | |
473 | |
474 | |
475 /* Disabled MenuItem */ | |
476 | |
477 .yuimenubaritemlabel-disabled, | |
478 .yuimenubaritemlabel-disabled:visited, | |
479 .yuimenuitemlabel-disabled, | |
480 .yuimenuitemlabel-disabled:visited { | |
481 | |
482 cursor: default; | |
483 color: #b9b9b9; | |
484 | |
485 } | |
486 | |
487 .yuimenubaritem-hassubmenu-disabled { | |
488 | |
489 background-image: url(menubaritem_submenuindicator_disabled.png); | |
490 | |
491 } | |
492 | |
493 .yuimenuitem-hassubmenu-disabled { | |
494 | |
495 background-image: url(menuitem_submenuindicator_disabled.png); | |
496 | |
497 } | |
498 | |
499 .yuimenuitem-checked-disabled { | |
500 | |
501 background-image: url(menuitem_checkbox_disabled.png); | |
502 | |
503 } |