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)
.claro .dijitMenu {
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 .dijitMenuItem {
color: @text-color;
}
-.claro .dijitMenuBar .dijitMenuItem {
+.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
+ // on hover or selection of MenuBar item, add border and reduce padding to compensate
border:solid 1px @hovered-border-color;
padding: 5px 9px 6px;
}
border-spacing:0 0;
padding:0;
}
-.claro .dijitMenuItem td{
- padding:1px;
+
+.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 .dijitSelectMenu .dijitMenuItemHover td,
-.claro .dijitSelectMenu .dijitMenuItemSelected td,
+.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
+ // 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;
+ // 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)
+ // 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;
background-image: url(@image-arrow-sprite);
background-position: -14px 0;
margin-right:3px;
-}
-.claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
- opacity:1;
+ margin-bottom: 4px;
}
.claro .dijitMenuSeparatorTop {
height: auto;
margin-bottom:1px;
}
/* the checked menu item */
-.claro .dijitCheckedMenuItemIconChar {
- display: none;
-}
-.claro .dijitCheckedMenuItemIcon {
+.claro .dijitCheckedMenuItem .dijitMenuItemIcon,
+.claro .dijitRadioMenuItem .dijitMenuItemIcon {
background-image: url(@image-form-checkbox-and-radios);
background-repeat:no-repeat;
- background-position: -15px 50%;
+ background-position: -15px 50%; /* unchecked checkbox */
width:15px;
height:16px;
}
-.dj_ie6 .claro .dijitCheckedMenuItemIcon {
+.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%;
+ 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*/
background-image: none;
}
-.claro .dijitSelectMenu .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;
-}
-.claro .dijitSelectMenu .dijitMenuItemSelected td,
+.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 .dijitSelectMenu .dijitMenuItemHover td,
-.claro .dijitComboBoxMenu .dijitMenuItemHover {
- color: #000000;
- border-color: #769dc0;
- background-color: #abd6ff;
-}
+
.claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
}
git.wh0rd.org / tt-rss.git / blobdiff