UNPKG

dijit

Version:

Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u

177 lines (158 loc) 5.94 kB
/* 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 background-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; .standard-gradient; } .claro .dijitMenu { background-color:@menu-background-color; border: 1px solid @popup-border-color; } .claro .dijitMenuItem { color: @text-color; } .claro .dijitMenuBar .dijitMenuItem { padding: 6px 10px 7px; margin:-1px; } .claro .dijitMenuBar .dijitMenuItemHover, .claro .dijitMenuBar .dijitMenuItemSelected { // on hover or selection of MenuBar item, add border and reduce padding to compensate border:solid 1px @hovered-border-color; padding: 5px 9px 6px; } /* this prevents jiggling upon hover of a menu item */ .claro .dijitMenuTable { border-collapse:separate; border-spacing:0 0; padding:0; } .claro .dijitMenu .dijitMenuItem td, .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; } /* hover over a MenuItem or MenuBarItem */ .claro .dijitMenu .dijitMenuItemHover td, .claro .dijitMenu .dijitMenuItemSelected td, .claro .dijitMenuItemHover, .claro .dijitComboBoxMenu .dijitMenuItemHover, .claro .dijitMenuItemSelected { // note: seems like the selected MenuItem should use @pressed-background-color // and .active-gradient, but claro didn't to that border-color: @hovered-border-color; background-color: @hovered-background-color; .standard-gradient; } .claro .dijitMenuItemActive { // todo: seems like the selected MenuItem should come here // todo: seems like should use @pressed-background-color .active-gradient; } .dj_ie .claro .dijitMenuActive .dijitMenuItemHover, .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { // Selectivity set to override ComboBox rules below. // If this rule isn't present, on IE6 hovering an item in the ComboBox drop down causes two // items to be highlighted (except when hovering the first item in the list) padding-top: 6px; padding-bottom: 5px; margin-top: -3px; } .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(@image-arrow-sprite); background-position: -14px 0; margin-right:3px; margin-bottom: 4px; } .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 .dijitCheckedMenuItem .dijitMenuItemIcon, .claro .dijitRadioMenuItem .dijitMenuItemIcon { background-image: url(@image-form-checkbox-and-radios); background-repeat:no-repeat; background-position: -15px 50%; /* unchecked checkbox */ width:15px; height:16px; } .dj_ie6 .claro .dijitCheckedMenuItem .dijitMenuItemIcon, .dj_ie6 .claro .dijitRadioMenuItem .dijitMenuItemIcon { background-image: url(@image-form-checkbox-and-radios-ie6); } .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { background-position: 0 50%; /* checked checkbox */ } .claro .dijitRadioMenuItem .dijitMenuItemIcon { background-position: -105px 50%; /* unfilled circle */ } .claro .dijitRadioMenuItemChecked .dijitMenuItemIcon { background-position: -90px 50%; /* filled circle */ } /*ComboBox Menu*/ .claro .dijitComboBoxMenu { margin-left:0; background-image: none; } .claro .dijitMenu .dijitMenuItemSelected td, .claro .dijitComboBoxMenu .dijitMenuItemSelected { // TODO: combine with above rules for selected items? // But the selected item in a Select drop down is different than when MenuBarItem "File" is highlighted // because the user is on the file menu? color:@selected-text-color; border-color:@hovered-border-color; background-color:@hovered-background-color; } .claro .dijitComboBoxMenuActive .dijitMenuItemSelected { background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ } .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { font-style: italic; }