diff options
Diffstat (limited to 'lib/dijit/themes/claro/Menu.css')
| -rw-r--r-- | lib/dijit/themes/claro/Menu.css | 235 |
1 files changed, 138 insertions, 97 deletions
diff --git a/lib/dijit/themes/claro/Menu.css b/lib/dijit/themes/claro/Menu.css index 4bb0be6e0..c55176d54 100644 --- a/lib/dijit/themes/claro/Menu.css +++ b/lib/dijit/themes/claro/Menu.css @@ -1,143 +1,184 @@ +/* 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: 0px; - padding: 0px; - background-color: #e6e6e7; - background-image: url("images/commonHighlight.png"); - background-position:0px 0px; - background-repeat:repeat-x; + 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; + background-image: none; } .claro .dijitMenu { - background-repeat:repeat-y; - background-color:#fff; - border: 1px solid #769dc0; - - margin: -1px 0; -} -.claro .dijitMenuBar .dijitMenuItem { - padding: 6px 10px 7px; - background-position:0px 100px; - color:#4a4a4a; - margin:-1px; -} + background-repeat: repeat-y; + background-color: #ffffff; + border: 1px solid #769dc0; + /* 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; + color: #4a4a4a; + margin: -1px; +} .claro .dijitMenuItem { - background-image: url("images/menuHighlight.png"); - background-position:0px -40px; - background-repeat:repeat-x; + background-image: url("images/menuHighlight.png"); + background-position: 0 -40px; + background-repeat: repeat-x; } +/* this prevents jiggling upon hover of a menu item */ .claro .dijitMenuTable { - border-collapse:separate; - border-spacing:0 0; - padding:0px; -} -.claro .dijitMenuItem td{ - padding:1px; -} -.claro .dijitMenuPassive .dijitMenuItemHover, -.claro .dijitMenuPassive .dijitMenuItemSelected { - background-color: #abd6ff; - border:solid 1px #769dc0; - background-position:0px 0px; - color:#000; - padding: 5px 9px 6px; -} -.claro .dijitMenuPassive .dijitMenuItemActive{ - background-position:0px -177px; -} -.dj_ie6 .claro .dijitMenuItem, -.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { - background-image: none; -} -.claro .dijitMenuActive .dijitMenuItemHover, -.claro .dijitMenuActive .dijitMenuItemSelected { - border:solid 1px #769dc0; - padding: 5px 9px 6px; - background-color: #9dcfff; - background-position:0px 0px; - color:#000; + 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 #769dc0; + 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 #769dc0; + 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; + padding-top: 6px; + padding-bottom: 5px; + margin-top: -3px; } -.claro .dijitMenuActive .dijitMenuItemActive{ - background-color: #7dbefa; - background-position:0px -177px; +.claro .dijitMenuActive .dijitMenuItemActive { + background-color: #7dbefa; + background-position: 0 -177px; } .claro .dijitMenuItemActive { - background-position:0px -177px; + background-position: 0 -177px; } .claro td.dijitMenuItemIconCell { - padding: 2px; - margin: 0px 0px 0px 4px; + padding: 2px; + margin: 0 0 0 4px; } .claro td.dijitMenuItemLabel { - padding-top: 5px; - padding-bottom: 5px; + padding-top: 5px; + padding-bottom: 5px; } .claro .dijitMenuExpand { - width: 7px; - height: 7px; - background-image: url('images/spriteArrows.png'); - background-position: -14px 0px; - margin-right:3px; + width: 7px; + height: 7px; + background-image: url('images/spriteArrows.png'); + background-position: -14px 0; + margin-right: 3px; } .claro .dijitMenuItemDisabled .dijitMenuItemIconCell { - opacity:1; + opacity: 1; } .claro .dijitMenuSeparatorTop { - height: auto; - margin-top:1px; - border-bottom: 1px solid #b5bcc7 + height: auto; + margin-top: 1px; + /* prevents spacing above/below separator */ + + border-bottom: 1px solid #b5bcc7; } -.claro .dijitMenuSeparatorBottom{ - height: auto; - margin-bottom:1px; +.claro .dijitMenuSeparatorBottom { + height: auto; + margin-bottom: 1px; } +/* the checked menu item */ .claro .dijitCheckedMenuItemIconChar { - display: none; + display: none; } .claro .dijitCheckedMenuItemIcon { - background-image: url('form/images/checkboxRadioButtonStates.png'); - background-repeat:no-repeat; - background-position: -15px 50%; - width:15px; - height:16px; + 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'); + background-image: url('form/images/checkboxAndRadioButtons_IE6.png'); } .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { - background-position: 0 50%; + background-position: 0 50%; } +/*ComboBox Menu*/ .claro .dijitComboBoxMenu { - margin-left:0px; - background-image: none; + margin-left: 0; + background-image: none; } -.claro .dijitComboBoxMenu .dijitMenuItem{ - padding:2px 0px; - text-indent:6px; - border-width:1px 0px 1px 0px; - border-style:solid; - border-color:#fff; +.claro .dijitComboBoxMenu .dijitMenuItem { + padding: 2px; + border-width: 1px 0 1px 0; + border-style: solid; + border-color: #ffffff; } .claro .dijitComboBoxMenu .dijitMenuItemSelected { - color:#000; - border-color:#768dc0; - background-color:#abd6ff; + color: #000000; + border-color: #769dc0; + background-color: #abd6ff; } .claro .dijitComboBoxMenuActive .dijitMenuItemSelected { - background-position:0px -177px; - background-color:#7dbefa; + background-position: 0 -177px; + background-color: #7dbefa; + /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ + } .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { - font-style: italic; + font-style: italic; } |