diff options
Diffstat (limited to 'lib/dijit/themes/claro/Menu.less')
| -rw-r--r-- | lib/dijit/themes/claro/Menu.less | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/lib/dijit/themes/claro/Menu.less b/lib/dijit/themes/claro/Menu.less new file mode 100644 index 000000000..1528df40b --- /dev/null +++ b/lib/dijit/themes/claro/Menu.less @@ -0,0 +1,188 @@ +/* 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 + +*/ + +@import "variables"; + +.claro .dijitMenuBar { + border: 1px solid @border-color; + margin: 0; + padding: 0; + background-color: @bar-background-color; + 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:@menu-background-color; + border: 1px solid @popup-border-color; + + /* 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:@unselected-text-color; + margin:-1px; +} +.claro .dijitMenuItem { + 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:0; +} +.claro .dijitMenuItem td{ + padding:1px; +} +/* hover over a MenuBarItem */ +.claro .dijitMenuPassive .dijitMenuItemHover, +.claro .dijitMenuPassive .dijitMenuItemSelected { + background-color: @hovered-background-color; + border:solid 1px @hovered-border-color; + background-position:0 0; + color:@text-color; + 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 @hovered-border-color; + padding: 5px 9px 6px; + background-color: @hovered-background-color; + background-position:0 0; + color:@hovered-text-color; +} +.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: @pressed-background-color; + 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 @border-color +} +.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: @textbox-padding; // Make drop down menu text line up with text in <input>. + border-width:1px 0 1px 0; + border-style:solid; + border-color: @select-dropdownitem-background-color; +} +.claro .dijitComboBoxMenu .dijitMenuItemSelected { + color:@selected-text-color; + border-color:@hovered-border-color; + background-color:@hovered-background-color; +} +.claro .dijitComboBoxMenuActive .dijitMenuItemSelected { + background-position:0 -177px; + background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ +} +.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { + font-style: italic; +} |