menu.css
503 lines
| 8.5 KiB
| text/css
|
CssLexer
r547 | /* | |||
Copyright (c) 2009, Yahoo! Inc. All rights reserved. | ||||
Code licensed under the BSD License: | ||||
http://developer.yahoo.net/yui/license.txt | ||||
version: 2.8.0r4 | ||||
*/ | ||||
/* Menu & MenuBar styles */ | ||||
.yuimenu { | ||||
top: -999em; | ||||
left: -999em; | ||||
} | ||||
.yuimenubar { | ||||
position: static; | ||||
} | ||||
.yuimenu .yuimenu, | ||||
.yuimenubar .yuimenu { | ||||
position: absolute; | ||||
} | ||||
.yuimenubar li, | ||||
.yuimenu li { | ||||
list-style-type: none; | ||||
} | ||||
.yuimenubar ul, | ||||
.yuimenu ul, | ||||
.yuimenubar li, | ||||
.yuimenu li, | ||||
.yuimenu h6, | ||||
.yuimenubar h6 { | ||||
margin: 0; | ||||
padding: 0; | ||||
} | ||||
.yuimenuitemlabel, | ||||
.yuimenubaritemlabel { | ||||
text-align: left; | ||||
white-space: nowrap; | ||||
} | ||||
/* | ||||
The following style rule trigger the "hasLayout" property in | ||||
IE (http://msdn2.microsoft.com/en-us/library/ms533776.aspx) for a | ||||
MenuBar instance's <ul> element, allowing both to clear their floated | ||||
child <li> elements. | ||||
*/ | ||||
.yuimenubar ul { | ||||
*zoom: 1; | ||||
} | ||||
/* | ||||
Remove the "hasLayout" trigger for submenus of MenuBar instances as it | ||||
is unnecessary. | ||||
*/ | ||||
.yuimenubar .yuimenu ul { | ||||
*zoom: normal; | ||||
} | ||||
/* | ||||
The following style rule allows a MenuBar instance's <ul> element to clear | ||||
its floated <li> elements in Firefox, Safari and and Opera. | ||||
*/ | ||||
.yuimenubar>.bd>ul:after { | ||||
content: "."; | ||||
display: block; | ||||
clear: both; | ||||
visibility: hidden; | ||||
height: 0; | ||||
line-height: 0; | ||||
} | ||||
.yuimenubaritem { | ||||
float: left; | ||||
} | ||||
.yuimenubaritemlabel, | ||||
.yuimenuitemlabel { | ||||
display: block; | ||||
} | ||||
.yuimenuitemlabel .helptext { | ||||
font-style: normal; | ||||
display: block; | ||||
/* | ||||
The value for the left margin controls how much the help text is | ||||
offset from the text of the menu item. This value will need to | ||||
be customized depending on the longest text label of a menu item. | ||||
*/ | ||||
margin: -1em 0 0 10em; | ||||
} | ||||
/* | ||||
PLEASE NOTE: The <div> element used for a menu's shadow is appended | ||||
to its root element via JavaScript once it has been rendered. The | ||||
code that creates the shadow lives in the menu's public "onRender" | ||||
event handler that is a prototype method of YAHOO.widget.Menu. | ||||
Implementers wishing to remove a menu's shadow or add any other markup | ||||
required for a given skin for menu should override the "onRender" method. | ||||
*/ | ||||
.yui-menu-shadow { | ||||
position: absolute; | ||||
visibility: hidden; | ||||
z-index: -1; | ||||
} | ||||
.yui-menu-shadow-visible { | ||||
top: 2px; | ||||
right: -3px; | ||||
left: -3px; | ||||
bottom: -3px; | ||||
visibility: visible; | ||||
} | ||||
/* | ||||
There are two known issues with YAHOO.widget.Overlay (the superclass class of | ||||
Menu) that manifest in Gecko-based browsers on Mac OS X: | ||||
1) Elements with scrollbars will poke through Overlay instances floating | ||||
above them. | ||||
2) An Overlay's scrollbars and the scrollbars of its child nodes remain | ||||
visible when the Overlay is hidden. | ||||
To fix these bugs in Menu (a subclass of YAHOO.widget.Overlay): | ||||
1) The "overflow" property of a Menu instance's shadow element and child | ||||
nodes is toggled between "hidden" and "auto" (through the application | ||||
and removal of the "hide-scrollbars" and "show-scrollbars" CSS classes) | ||||
as its "visibility" configuration property is toggled between | ||||
"false" and "true." | ||||
2) The "display" property of <select> elements that are child nodes of the | ||||
Menu instance's root element is set to "none" when it is hidden. | ||||
PLEASE NOTE: | ||||
1) The "hide-scrollbars" and "show-scrollbars" CSS classes classes are | ||||
applied only for Gecko on Mac OS X and are added/removed to/from the | ||||
Overlay's root HTML element (DIV) via the "hideMacGeckoScrollbars" and | ||||
"showMacGeckoScrollbars" methods of YAHOO.widget.Overlay. | ||||
2) There may be instances where the CSS for a web page or application | ||||
contains style rules whose specificity override the rules implemented by | ||||
the Menu CSS files to fix this bug. In such cases, is necessary to | ||||
leverage the provided "hide-scrollbars" and "show-scrollbars" classes to | ||||
write custom style rules to guard against this bug. | ||||
** For more information on this issue, see: | ||||
+ https://bugzilla.mozilla.org/show_bug.cgi?id=187435 | ||||
+ YUILibrary bug #1723530 | ||||
*/ | ||||
.hide-scrollbars * { | ||||
overflow: hidden; | ||||
} | ||||
.hide-scrollbars select { | ||||
display: none; | ||||
} | ||||
/* | ||||
The following style rule (".yuimenu.show-scrollbars") overrides the | ||||
".show-scrollbars" rule defined in container-core.css which sets the | ||||
"overflow" property of a YAHOO.widget.Overlay instance's root HTML element to | ||||
"auto" when it is visible. Without this override, a Menu would have scrollbars | ||||
when one of its submenus is visible. | ||||
*/ | ||||
.yuimenu.show-scrollbars, | ||||
.yuimenubar.show-scrollbars { | ||||
overflow: visible; | ||||
} | ||||
.yuimenu.hide-scrollbars .yui-menu-shadow, | ||||
.yuimenubar.hide-scrollbars .yui-menu-shadow { | ||||
overflow: hidden; | ||||
} | ||||
.yuimenu.show-scrollbars .yui-menu-shadow, | ||||
.yuimenubar.show-scrollbars .yui-menu-shadow { | ||||
overflow: auto; | ||||
} | ||||
/* MenuBar style rules */ | ||||
.yuimenubar { | ||||
background-color: #f6f7ee; | ||||
} | ||||
/* Menu style rules */ | ||||
.yuimenu { | ||||
background-color: #f6f7ee; | ||||
border: solid 1px #c4c4be; | ||||
padding: 1px; | ||||
} | ||||
.yui-menu-shadow { | ||||
display: none; | ||||
} | ||||
.yuimenu ul { | ||||
border: solid 1px #c4c4be; | ||||
border-width: 1px 0 0 0; | ||||
padding: 10px 0; | ||||
} | ||||
.yuimenu .yui-menu-body-scrolled { | ||||
overflow: hidden; | ||||
} | ||||
/* Group titles */ | ||||
.yuimenu h6, | ||||
.yuimenubar h6 { | ||||
font-size: 100%; | ||||
font-weight: normal; | ||||
border: solid 1px #c4c4be; | ||||
color: #b9b9b9; | ||||
} | ||||
.yuimenubar h6 { | ||||
float: left; | ||||
padding: 4px 12px; | ||||
border-width: 0 1px 0 0; | ||||
} | ||||
.yuimenubar .yuimenu h6 { | ||||
float: none; | ||||
} | ||||
.yuimenu h6 { | ||||
border-width: 1px 0 0 0; | ||||
padding: 5px 10px 0 10px; | ||||
} | ||||
.yuimenu ul.first-of-type, | ||||
.yuimenu ul.hastitle, | ||||
.yuimenu h6.first-of-type { | ||||
border-width: 0; | ||||
} | ||||
/* Top and bottom scroll controls */ | ||||
.yuimenu .topscrollbar, | ||||
.yuimenu .bottomscrollbar { | ||||
height: 16px; | ||||
background-position: center center; | ||||
background-repeat: no-repeat; | ||||
} | ||||
.yuimenu .topscrollbar { | ||||
background-image: url(menu_up_arrow.png); | ||||
} | ||||
.yuimenu .topscrollbar_disabled { | ||||
background-image: url(menu_up_arrow_disabled.png); | ||||
} | ||||
.yuimenu .bottomscrollbar { | ||||
background-image: url(menu_down_arrow.png); | ||||
} | ||||
.yuimenu .bottomscrollbar_disabled { | ||||
background-image: url(menu_down_arrow_disabled.png); | ||||
} | ||||
/* MenuItem and MenuBarItem styles */ | ||||
.yuimenuitem { | ||||
/* | ||||
For IE: Used to collapse superfluous white space between <li> elements | ||||
that is triggered by the "display" property of the <a> elements being | ||||
set to "block." | ||||
*/ | ||||
*border-bottom: solid 1px #f6f7ee; | ||||
} | ||||
.yuimenuitemlabel, | ||||
.yuimenuitemlabel:visited, | ||||
.yuimenubaritemlabel, | ||||
.yuimenubaritemlabel:visited { | ||||
font-size: 85%; | ||||
color: #000; | ||||
text-decoration: none; | ||||
} | ||||
.yuimenuitemlabel { | ||||
padding: 2px 24px; | ||||
} | ||||
.yuimenubaritemlabel { | ||||
border-width: 0 0 0 1px; | ||||
border-style: solid; | ||||
border-color: #c4c4be; | ||||
padding: 4px 24px; | ||||
} | ||||
.yuimenubar li.first-of-type .yuimenubaritemlabel { | ||||
border-width: 0; | ||||
} | ||||
.yuimenubaritem-hassubmenu { | ||||
background: url(menubaritem_submenuindicator.png) right center no-repeat; | ||||
} | ||||
.yuimenuitem-hassubmenu { | ||||
background: url(menuitem_submenuindicator.png) right center no-repeat; | ||||
} | ||||
.yuimenuitem-checked { | ||||
background: url(menuitem_checkbox.png) left center no-repeat; | ||||
} | ||||
.yuimenuitemlabel .helptext { | ||||
margin-top: -1.1em; | ||||
*margin-top: -1.2em; /* For IE*/ | ||||
} | ||||
/* MenuItem states */ | ||||
/* Selected MenuItem */ | ||||
.yuimenubaritem-selected, | ||||
.yuimenuitem-selected { | ||||
background-color: #8c8ad0; | ||||
} | ||||
.yuimenubaritemlabel-selected, | ||||
.yuimenubaritemlabel-selected:visited, | ||||
.yuimenuitemlabel-selected, | ||||
.yuimenuitemlabel-selected:visited { | ||||
text-decoration: underline; | ||||
color: #fff; | ||||
} | ||||
.yuimenubaritem-hassubmenu-selected { | ||||
background-image: url(menubaritem_submenuindicator_selected.png); | ||||
} | ||||
.yuimenuitem-hassubmenu-selected { | ||||
background-image: url(menuitem_submenuindicator_selected.png); | ||||
} | ||||
.yuimenuitem-checked-selected { | ||||
background-image: url(menuitem_checkbox_selected.png); | ||||
} | ||||
/* Disabled MenuItem */ | ||||
.yuimenubaritemlabel-disabled, | ||||
.yuimenubaritemlabel-disabled:visited, | ||||
.yuimenuitemlabel-disabled, | ||||
.yuimenuitemlabel-disabled:visited { | ||||
cursor: default; | ||||
color: #b9b9b9; | ||||
} | ||||
.yuimenubaritem-hassubmenu-disabled { | ||||
background-image: url(menubaritem_submenuindicator_disabled.png); | ||||
} | ||||
.yuimenuitem-hassubmenu-disabled { | ||||
background-image: url(menuitem_submenuindicator_disabled.png); | ||||
} | ||||
.yuimenuitem-checked-disabled { | ||||
background-image: url(menuitem_checkbox_disabled.png); | ||||
} | ||||