lib/dijit/themes/claro/Menu.less

   1 /* Menu
   2
   3 There are three areas of styling for the Menu:
   4
   5  1. The menu
   6         There are three types of menus:
   7         i) Context Menu
   8         ii) Drop down Menu
   9         iii) Navigation Menu
  10         All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
  11         .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
  12   .dijitMenuTable - for padding - also affects Select widget
  13
  14  2. The menu bar
  15         .dijitMenuBar - for border, margins, padding, background-color of the menu bar
  16         .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem)
  17
  18  3. Menu items - items in the menu.
  19         .dijitMenuItem - for color
  20         .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected
  21         .dijitMenuItemActive - for background-color of an active (mousedown) menu item
  22         td.dijitMenuItemIconCell - for padding around a  menu item's icon
  23         td.dijitMenuItemLabel - for padding around a menu item's label
  24         .dijitMenuSeparatorTop - for border, top border, of the separator
  25         .dijitMenuSeparatorBottom - for bottom margin of the separator
  26
  27         Styles specific to ComboBox and FilteringSelect widgets:
  28         .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
  29         .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
  30
  31 */
  32
  33 @import "variables";
  34
  35 .claro .dijitMenuBar {
  36         border: 1px solid @border-color;
  37         margin: 0;
  38         padding: 0;
  39         background-color: @bar-background-color;
  40         .standard-gradient;
  41 }
  42
  43 .claro .dijitMenu {
  44         background-color:@menu-background-color;
  45         border: 1px solid @popup-border-color;
  46 }
  47
  48 .claro .dijitMenuItem {
  49         color: @text-color;
  50 }
  51 .claro .dijitMenuBar .dijitMenuItem {
  52         padding: 6px 10px 7px;
  53         margin:-1px;
  54 }
  55 .claro .dijitMenuBar .dijitMenuItemHover,
  56 .claro .dijitMenuBar .dijitMenuItemSelected {
  57         // on hover or selection of MenuBar item, add border and reduce padding to compensate
  58         border:solid 1px @hovered-border-color;
  59         padding: 5px 9px 6px;
  60 }
  61
  62 /* this prevents jiggling upon hover of a menu item */
  63 .claro .dijitMenuTable {
  64         border-collapse:separate;
  65         border-spacing:0 0;
  66         padding:0;
  67 }
  68
  69 .claro .dijitMenu .dijitMenuItem td,
  70 .claro .dijitComboBoxMenu .dijitMenuItem {
  71         padding: @textbox-padding;      // Make drop down menu text line up with text in <input>.
  72         border-width:1px 0 1px 0;
  73         border-style:solid;
  74         border-color: @select-dropdownitem-background-color;
  75 }
  76
  77 /* hover over a MenuItem or MenuBarItem */
  78 .claro .dijitMenu .dijitMenuItemHover td,
  79 .claro .dijitMenu .dijitMenuItemSelected td,
  80 .claro .dijitMenuItemHover,
  81 .claro .dijitComboBoxMenu .dijitMenuItemHover,
  82 .claro .dijitMenuItemSelected {
  83         // note: seems like the selected MenuItem should use @pressed-background-color
  84         // and .active-gradient, but claro didn't to that
  85         border-color: @hovered-border-color;
  86         background-color: @hovered-background-color;
  87         .standard-gradient;
  88 }
  89
  90 .claro .dijitMenuItemActive {
  91         // todo: seems like the selected MenuItem should come here
  92         // todo: seems like should use @pressed-background-color
  93         .active-gradient;
  94 }
  95 .dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
  96 .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
  97 .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
  98 .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
  99         // Selectivity set to override ComboBox rules below.
 100         // If this rule isn't present, on IE6 hovering an item in the ComboBox drop down causes two
 101         // items to be highlighted (except when hovering the first item in the list)
 102         padding-top: 6px;
 103         padding-bottom: 5px;
 104         margin-top: -3px;
 105 }
 106
 107 .claro td.dijitMenuItemIconCell {
 108         padding: 2px;
 109         margin: 0 0 0 4px;
 110 }
 111 .claro td.dijitMenuItemLabel {
 112         padding-top: 5px;
 113         padding-bottom: 5px;
 114 }
 115 .claro .dijitMenuExpand {
 116         width: 7px;
 117         height: 7px;
 118         background-image: url(@image-arrow-sprite);
 119         background-position: -14px 0;
 120         margin-right:3px;
 121         margin-bottom: 4px;
 122 }
 123 .claro .dijitMenuSeparatorTop {
 124         height: auto;
 125         margin-top:1px; /* prevents spacing above/below separator */
 126         border-bottom: 1px solid @border-color
 127 }
 128 .claro .dijitMenuSeparatorBottom{
 129         height: auto;
 130         margin-bottom:1px;
 131 }
 132 /* the checked menu item */
 133 .claro .dijitCheckedMenuItem .dijitMenuItemIcon,
 134 .claro .dijitRadioMenuItem .dijitMenuItemIcon {
 135         background-image: url(@image-form-checkbox-and-radios);
 136         background-repeat:no-repeat;
 137         background-position: -15px 50%; /* unchecked checkbox */
 138         width:15px;
 139         height:16px;
 140 }
 141 .dj_ie6 .claro .dijitCheckedMenuItem .dijitMenuItemIcon,
 142 .dj_ie6 .claro .dijitRadioMenuItem .dijitMenuItemIcon {
 143         background-image: url(@image-form-checkbox-and-radios-ie6);
 144 }
 145 .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
 146         background-position: 0 50%;     /* checked checkbox */
 147 }
 148 .claro .dijitRadioMenuItem .dijitMenuItemIcon {
 149   background-position: -105px 50%;      /* unfilled circle */
 150 }
 151 .claro .dijitRadioMenuItemChecked .dijitMenuItemIcon {
 152   background-position: -90px 50%;       /* filled circle */
 153 }
 154
 155 /*ComboBox Menu*/
 156 .claro .dijitComboBoxMenu {
 157         margin-left:0;
 158         background-image: none;
 159 }
 160
 161 .claro .dijitMenu .dijitMenuItemSelected td,
 162 .claro .dijitComboBoxMenu .dijitMenuItemSelected {
 163         // TODO: combine with above rules for selected items?
 164         // But the selected item in a Select drop down is different than when MenuBarItem "File" is highlighted
 165         // because the user is on the file menu?
 166         color:@selected-text-color;
 167         border-color:@hovered-border-color;
 168         background-color:@hovered-background-color;
 169 }
 170
 171 .claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
 172         background-color: @select-dropdownitem-hovered-background-color;        /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
 173 }
 174 .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
 175         font-style: italic;
 176 }