Automated build for v0.01
This commit is contained in:
Fmstrat
176
lib/dijit/themes/claro/Menu.less
Normal file
176
lib/dijit/themes/claro/Menu.less
Normal file
@ -0,0 +1,176 @@
|
||||
/* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user