191 lines
5.6 KiB
CSS
191 lines
5.6 KiB
CSS
/* Menu
|
|
|
|
There are three areas of styling for the Menu:
|
|
|
|
1. The menu
|
|
There are three types of menus:
|
|
i)Context Menu
|
|
ii)Drop down Menu
|
|
iii) Navigation Menu
|
|
All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
|
|
.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
|
|
.dijitMenuTable - for padding - also affects Select widget
|
|
|
|
2. The menu bar
|
|
.dijitMenuBar - for border, margins, padding, background-color of the menu bar
|
|
.dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem)
|
|
|
|
3. Menu items - items in the menu.
|
|
.dijitMenuItem - for color
|
|
.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected
|
|
.dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item
|
|
td.dijitMenuItemIconCell - for padding around a menu item's icon
|
|
td.dijitMenuItemLabel - for padding around a menu item's label
|
|
.dijitMenuSeparatorTop - for border, top border, of the separator
|
|
.dijitMenuSeparatorBottom - for bottom margin of the separator
|
|
|
|
Styles specific to ComboBox and FilteringSelect widgets:
|
|
.dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
|
|
.dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
|
|
|
|
*/
|
|
.claro .dijitMenuBar {
|
|
border: 1px solid #b5bcc7;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #efefef;
|
|
background-image: url("images/commonHighlight.png");
|
|
background-position: 0 0;
|
|
background-repeat: repeat-x;
|
|
}
|
|
.dj_ie6 .claro .dijitMenuBar {
|
|
background-image: none;
|
|
}
|
|
.claro .dijitMenu {
|
|
background-repeat: repeat-y;
|
|
background-color: #ffffff;
|
|
border: 1px solid #759dc0;
|
|
/* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
|
|
|
|
margin: -1px 0;
|
|
}
|
|
.dj_ie6 .claro .dijitMenu {
|
|
margin: 0;
|
|
/* above -1px makes top/bottom borders disappear on IE6 */
|
|
|
|
}
|
|
.claro .dijitMenuBar .dijitMenuItem {
|
|
padding: 6px 10px 7px;
|
|
background-position: 0 100px;
|
|
margin: -1px;
|
|
}
|
|
.claro .dijitMenuItem {
|
|
background-image: url("images/menuHighlight.png");
|
|
background-position: 0 -40px;
|
|
background-repeat: repeat-x;
|
|
color: #000000;
|
|
}
|
|
/* this prevents jiggling upon hover of a menu item */
|
|
.claro .dijitMenuTable {
|
|
border-collapse: separate;
|
|
border-spacing: 0 0;
|
|
padding: 0;
|
|
}
|
|
.claro .dijitMenuItem td {
|
|
padding: 1px;
|
|
}
|
|
/* hover over a MenuBarItem */
|
|
.claro .dijitMenuPassive .dijitMenuItemHover, .claro .dijitMenuPassive .dijitMenuItemSelected {
|
|
background-color: #abd6ff;
|
|
border: solid 1px #759dc0;
|
|
background-position: 0 0;
|
|
color: #000000;
|
|
padding: 5px 9px 6px;
|
|
}
|
|
.claro .dijitMenuPassive .dijitMenuItemActive {
|
|
background-position: 0 -177px;
|
|
}
|
|
.dj_ie6 .claro .dijitMenuItem, .dj_ie6 .claro .dijitMenuPassive .dijitMenuItem {
|
|
background-image: none;
|
|
}
|
|
/* MenuBarItem that has been selected and menu drops down from it */
|
|
.claro .dijitMenuActive .dijitMenuItemHover, .claro .dijitMenuActive .dijitMenuItemSelected {
|
|
border: solid 1px #759dc0;
|
|
padding: 5px 9px 6px;
|
|
background-color: #abd6ff;
|
|
background-position: 0 0;
|
|
color: #000000;
|
|
}
|
|
.dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
|
|
.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
|
|
.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
|
|
.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
|
|
padding-top: 6px;
|
|
padding-bottom: 5px;
|
|
margin-top: -3px;
|
|
}
|
|
.claro .dijitMenuActive .dijitMenuItemActive {
|
|
background-color: #7dbdfa;
|
|
background-position: 0 -177px;
|
|
}
|
|
.claro .dijitMenuItemActive {
|
|
background-position: 0 -177px;
|
|
}
|
|
.claro td.dijitMenuItemIconCell {
|
|
padding: 2px;
|
|
margin: 0 0 0 4px;
|
|
}
|
|
.claro td.dijitMenuItemLabel {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
.claro .dijitMenuExpand {
|
|
width: 7px;
|
|
height: 7px;
|
|
background-image: url("images/spriteArrows.png");
|
|
background-position: -14px 0;
|
|
margin-right: 3px;
|
|
}
|
|
.claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
|
|
opacity: 1;
|
|
}
|
|
.claro .dijitMenuSeparatorTop {
|
|
height: auto;
|
|
margin-top: 1px;
|
|
/* prevents spacing above/below separator */
|
|
|
|
border-bottom: 1px solid #b5bcc7;
|
|
}
|
|
.claro .dijitMenuSeparatorBottom {
|
|
height: auto;
|
|
margin-bottom: 1px;
|
|
}
|
|
/* the checked menu item */
|
|
.claro .dijitCheckedMenuItemIconChar {
|
|
display: none;
|
|
}
|
|
.claro .dijitCheckedMenuItemIcon {
|
|
background-image: url("form/images/checkboxRadioButtonStates.png");
|
|
background-repeat: no-repeat;
|
|
background-position: -15px 50%;
|
|
width: 15px;
|
|
height: 16px;
|
|
}
|
|
.dj_ie6 .claro .dijitCheckedMenuItemIcon {
|
|
background-image: url("form/images/checkboxAndRadioButtons_IE6.png");
|
|
}
|
|
.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
|
|
background-position: 0 50%;
|
|
}
|
|
/*ComboBox Menu*/
|
|
.claro .dijitComboBoxMenu {
|
|
margin-left: 0;
|
|
background-image: none;
|
|
}
|
|
.claro .dijitComboBoxMenu .dijitMenuItem {
|
|
padding: 2px;
|
|
border-width: 1px 0 1px 0;
|
|
border-style: solid;
|
|
border-color: #ffffff;
|
|
}
|
|
.claro .dijitComboBoxMenu .dijitMenuItemSelected {
|
|
color: #000000;
|
|
border-color: #759dc0;
|
|
background-color: #abd6ff;
|
|
}
|
|
.claro .dijitComboBoxMenu .dijitMenuItemHover {
|
|
color: #000000;
|
|
border-color: #769dc0;
|
|
background-color: #abd6ff;
|
|
background-position: 0 0;
|
|
}
|
|
.claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
|
|
background-position: 0 -177px;
|
|
background-color: #7dbdfa;
|
|
/* TODO: why is this a different color than normal .dijitMenuItemSelected? */
|
|
|
|
}
|
|
.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
|
|
font-style: italic;
|
|
}
|