lib/dijit/themes/claro/Menu.css

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