diff options
Diffstat (limited to 'lib/dijit/themes/claro/Menu.less')
| -rw-r--r-- | lib/dijit/themes/claro/Menu.less | 87 |
1 files changed, 42 insertions, 45 deletions
diff --git a/lib/dijit/themes/claro/Menu.less b/lib/dijit/themes/claro/Menu.less index 9f4f86071..86ab7b91d 100644 --- a/lib/dijit/themes/claro/Menu.less +++ b/lib/dijit/themes/claro/Menu.less @@ -10,7 +10,7 @@ There are three areas of styling for the 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) @@ -43,24 +43,18 @@ There are three areas of styling for the Menu: .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; } @@ -71,31 +65,40 @@ There are three areas of styling for the Menu: 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; @@ -115,9 +118,7 @@ There are three areas of styling for the Menu: 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; @@ -129,21 +130,26 @@ There are three areas of styling for the Menu: 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*/ @@ -152,25 +158,16 @@ There are three areas of styling for the 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? */ } |