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         /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
  48         margin: -1px 0;
  49 }
  50 .dj_ie6 .claro .dijitMenu {
  51         margin: 0;      /* above -1px makes top/bottom borders disappear on IE6 */
  52 }
  53
  54 .claro .dijitMenuItem {
  55         color: @text-color;
  56 }
  57 .claro .dijitMenuBar .dijitMenuItem {
  58         padding: 6px 10px 7px;
  59         margin:-1px;
  60 }
  61 .claro .dijitMenuBar .dijitMenuItemHover,
  62 .claro .dijitMenuBar .dijitMenuItemSelected {
  63     // on hover or selection of MenuBar item, add border and reduce padding to compensate
  64         border:solid 1px @hovered-border-color;
  65         padding: 5px 9px 6px;
  66 }
  67
  68 /* this prevents jiggling upon hover of a menu item */
  69 .claro .dijitMenuTable {
  70         border-collapse:separate;
  71         border-spacing:0 0;
  72         padding:0;
  73 }
  74 .claro .dijitMenuItem td{
  75         padding:1px;
  76 }
  77 /* hover over a MenuItem or MenuBarItem */
  78 .claro .dijitSelectMenu .dijitMenuItemHover td,
  79 .claro .dijitSelectMenu .dijitMenuItemSelected td,
  80 .claro .dijitMenuItemHover,
  81 .claro .dijitMenuItemSelected {
  82     // note: seems like the selected MenuItem should use @pressed-background-color
  83     // and .active-gradient, but claro didn't to that
  84         background-color: @hovered-background-color;
  85         .standard-gradient;
  86 }
  87 .claro .dijitMenuItemActive {
  88     // todo: seems like the selected MenuItem should come here
  89     // todo: seems like should use @pressed-background-color
  90     .active-gradient;
  91 }
  92 .dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
  93 .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
  94 .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
  95 .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
  96     // Selectivity set to override ComboBox rules below.
  97     // If this rule isn't present, on IE6 hovering an item in the ComboBox drop down causes two
  98     // items to be highlighted (except when hovering the first item in the list)
  99         padding-top: 6px;
 100         padding-bottom: 5px;
 101         margin-top: -3px;
 102 }
 103
 104 .claro td.dijitMenuItemIconCell {
 105         padding: 2px;
 106         margin: 0 0 0 4px;
 107 }
 108 .claro td.dijitMenuItemLabel {
 109         padding-top: 5px;
 110         padding-bottom: 5px;
 111 }
 112 .claro .dijitMenuExpand {
 113         width: 7px;
 114         height: 7px;
 115         background-image: url(@image-arrow-sprite);
 116         background-position: -14px 0;
 117         margin-right:3px;
 118 }
 119 .claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
 120         opacity:1;
 121 }
 122 .claro .dijitMenuSeparatorTop {
 123         height: auto;
 124         margin-top:1px; /* prevents spacing above/below separator */
 125         border-bottom: 1px solid @border-color
 126 }
 127 .claro .dijitMenuSeparatorBottom{
 128         height: auto;
 129         margin-bottom:1px;
 130 }
 131 /* the checked menu item */
 132 .claro .dijitCheckedMenuItemIconChar {
 133         display: none;
 134 }
 135 .claro .dijitCheckedMenuItemIcon {
 136         background-image: url(@image-form-checkbox-and-radios);
 137         background-repeat:no-repeat;
 138         background-position: -15px 50%;
 139         width:15px;
 140         height:16px;
 141 }
 142 .dj_ie6 .claro .dijitCheckedMenuItemIcon {
 143         background-image: url(@image-form-checkbox-and-radios-ie6);
 144 }
 145 .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
 146         background-position: 0 50%;
 147 }
 148
 149 /*ComboBox Menu*/
 150 .claro .dijitComboBoxMenu {
 151         margin-left:0;
 152         background-image: none;
 153 }
 154
 155 .claro .dijitSelectMenu .dijitMenuItem td,
 156 .claro .dijitComboBoxMenu .dijitMenuItem {
 157         padding: @textbox-padding;      // Make drop down menu text line up with text in <input>.
 158         border-width:1px 0 1px 0;
 159         border-style:solid;
 160         border-color: @select-dropdownitem-background-color;
 161 }
 162 .claro .dijitSelectMenu .dijitMenuItemSelected td,
 163 .claro .dijitComboBoxMenu .dijitMenuItemSelected {
 164         color:@selected-text-color;
 165         border-color:@hovered-border-color;
 166         background-color:@hovered-background-color;
 167 }
 168 .claro .dijitSelectMenu .dijitMenuItemHover td,
 169 .claro .dijitComboBoxMenu .dijitMenuItemHover {
 170         color: #000000;
 171         border-color: #769dc0;
 172         background-color: #abd6ff;
 173 }
 174 .claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
 175         background-color: @select-dropdownitem-hovered-background-color;        /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
 176 }
 177 .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
 178         font-style: italic;
 179 }