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 bacgkround-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         background-image: url("images/commonHighlight.png");
  41         background-position:0 0;
  42         background-repeat:repeat-x;
  43 }
  44 .dj_ie6 .claro .dijitMenuBar {
  45         background-image:none;
  46 }
  47 .claro .dijitMenu {
  48         background-repeat:repeat-y;
  49         background-color:@menu-background-color;
  50         border: 1px solid @popup-border-color;
  51
  52         /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
  53         margin: -1px 0;
  54 }
  55 .dj_ie6 .claro .dijitMenu {
  56         margin: 0;      /* above -1px makes top/bottom borders disappear on IE6 */
  57 }
  58 .claro .dijitMenuBar .dijitMenuItem {
  59         padding: 6px 10px 7px;
  60         background-position:0 100px;
  61         color:@unselected-text-color;
  62         margin:-1px;
  63 }
  64 .claro .dijitMenuItem {
  65         background-image: url("images/menuHighlight.png");
  66         background-position:0 -40px;
  67         background-repeat:repeat-x;
  68 }
  69
  70 /* this prevents jiggling upon hover of a menu item */
  71 .claro .dijitMenuTable {
  72         border-collapse:separate;
  73         border-spacing:0 0;
  74         padding:0;
  75 }
  76 .claro .dijitMenuItem td{
  77         padding:1px;
  78 }
  79 /* hover over a MenuBarItem */
  80 .claro .dijitMenuPassive .dijitMenuItemHover,
  81 .claro .dijitMenuPassive .dijitMenuItemSelected {
  82         background-color: @hovered-background-color;
  83         border:solid 1px @hovered-border-color;
  84         background-position:0 0;
  85         color:@text-color;
  86         padding: 5px 9px 6px;
  87 }
  88 .claro .dijitMenuPassive .dijitMenuItemActive{
  89         background-position:0 -177px;
  90 }
  91 .dj_ie6 .claro .dijitMenuItem,
  92 .dj_ie6 .claro .dijitMenuPassive .dijitMenuItem {
  93         background-image: none;
  94 }
  95
  96 /* MenuBarItem that has been selected and menu drops down from it */
  97 .claro .dijitMenuActive .dijitMenuItemHover,
  98 .claro .dijitMenuActive .dijitMenuItemSelected {
  99         border:solid 1px @hovered-border-color;
 100         padding: 5px 9px 6px;
 101         background-color: @hovered-background-color;
 102         background-position:0 0;
 103         color:@hovered-text-color;
 104 }
 105 .dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
 106 .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
 107 .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
 108 .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
 109         padding-top: 6px;
 110         padding-bottom: 5px;
 111         margin-top: -3px;
 112 }
 113 .claro .dijitMenuActive .dijitMenuItemActive{
 114         background-color: @pressed-background-color;
 115         background-position:0 -177px;
 116 }
 117 .claro .dijitMenuItemActive {
 118         background-position:0 -177px;
 119 }
 120 .claro td.dijitMenuItemIconCell {
 121  padding: 2px;
 122  margin: 0 0 0 4px;
 123 }
 124 .claro td.dijitMenuItemLabel {
 125         padding-top: 5px;
 126         padding-bottom: 5px;
 127 }
 128 .claro .dijitMenuExpand {
 129         width: 7px;
 130         height: 7px;
 131         background-image: url('images/spriteArrows.png');
 132         background-position: -14px 0;
 133         margin-right:3px;
 134 }
 135 .claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
 136         opacity:1;
 137 }
 138 .claro .dijitMenuSeparatorTop {
 139         height: auto;
 140         margin-top:1px; /* prevents spacing above/below separator */
 141         border-bottom: 1px solid @border-color
 142 }
 143 .claro .dijitMenuSeparatorBottom{
 144         height: auto;
 145         margin-bottom:1px;
 146 }
 147 /* the checked menu item */
 148 .claro .dijitCheckedMenuItemIconChar {
 149         display: none;
 150 }
 151 .claro .dijitCheckedMenuItemIcon {
 152         background-image: url('form/images/checkboxRadioButtonStates.png');
 153         background-repeat:no-repeat;
 154         background-position: -15px 50%;
 155         width:15px;
 156         height:16px;
 157 }
 158 .dj_ie6 .claro .dijitCheckedMenuItemIcon {
 159         background-image: url('form/images/checkboxAndRadioButtons_IE6.png');
 160 }
 161 .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
 162         background-position: 0 50%;
 163 }
 164
 165 /*ComboBox Menu*/
 166 .claro .dijitComboBoxMenu {
 167         margin-left:0;
 168         background-image: none;
 169 }
 170
 171 .claro .dijitComboBoxMenu .dijitMenuItem {
 172         padding: @textbox-padding;      // Make drop down menu text line up with text in <input>.
 173         border-width:1px 0 1px 0;
 174         border-style:solid;
 175         border-color: @select-dropdownitem-background-color;
 176 }
 177 .claro .dijitComboBoxMenu .dijitMenuItemSelected {
 178         color:@selected-text-color;
 179         border-color:@hovered-border-color;
 180         background-color:@hovered-background-color;
 181 }
 182 .claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
 183         background-position:0 -177px;
 184         background-color: @select-dropdownitem-hovered-background-color;        /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
 185 }
 186 .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
 187         font-style: italic;
 188 }