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 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 .claro .dijitMenuBar {
  33   border: 1px solid #b5bcc7;
  34   margin: 0;
  35   padding: 0;
  36   background-color: #efefef;
  37   background-image: url("images/standardGradient.png");
  38   background-repeat: repeat-x;
  39   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  40   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  41   background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  42   background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  43   _background-image: none;
  44 }
  45 .claro .dijitMenu {
  46   background-color: #ffffff;
  47   border: 1px solid #759dc0;
  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 .dijitMenuItem {
  58   color: #000000;
  59 }
  60 .claro .dijitMenuBar .dijitMenuItem {
  61   padding: 6px 10px 7px;
  62   margin: -1px;
  63 }
  64 .claro .dijitMenuBar .dijitMenuItemHover, .claro .dijitMenuBar .dijitMenuItemSelected {
  65   border: solid 1px #759dc0;
  66   padding: 5px 9px 6px;
  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   background-color: #abd6ff;
  83   background-image: url("images/standardGradient.png");
  84   background-repeat: repeat-x;
  85   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  86   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  87   background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  88   background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  89   _background-image: none;
  90 }
  91 .claro .dijitMenuItemActive {
  92   background-image: url("images/activeGradient.png");
  93   background-repeat: repeat-x;
  94   background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
  95   background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
  96   background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
  97   background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
  98   _background-image: none;
  99 }
 100 .dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
 101 .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
 102 .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
 103 .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
 104   padding-top: 6px;
 105   padding-bottom: 5px;
 106   margin-top: -3px;
 107 }
 108 .claro td.dijitMenuItemIconCell {
 109   padding: 2px;
 110   margin: 0 0 0 4px;
 111 }
 112 .claro td.dijitMenuItemLabel {
 113   padding-top: 5px;
 114   padding-bottom: 5px;
 115 }
 116 .claro .dijitMenuExpand {
 117   width: 7px;
 118   height: 7px;
 119   background-image: url("images/spriteArrows.png");
 120   background-position: -14px 0;
 121   margin-right: 3px;
 122 }
 123 .claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
 124   opacity: 1;
 125 }
 126 .claro .dijitMenuSeparatorTop {
 127   height: auto;
 128   margin-top: 1px;
 129   /* prevents spacing above/below separator */
 130
 131   border-bottom: 1px solid #b5bcc7;
 132 }
 133 .claro .dijitMenuSeparatorBottom {
 134   height: auto;
 135   margin-bottom: 1px;
 136 }
 137 /* the checked menu item */
 138 .claro .dijitCheckedMenuItemIconChar {
 139   display: none;
 140 }
 141 .claro .dijitCheckedMenuItemIcon {
 142   background-image: url("form/images/checkboxRadioButtonStates.png");
 143   background-repeat: no-repeat;
 144   background-position: -15px 50%;
 145   width: 15px;
 146   height: 16px;
 147 }
 148 .dj_ie6 .claro .dijitCheckedMenuItemIcon {
 149   background-image: url("form/images/checkboxAndRadioButtons_IE6.png");
 150 }
 151 .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
 152   background-position: 0 50%;
 153 }
 154 /*ComboBox Menu*/
 155 .claro .dijitComboBoxMenu {
 156   margin-left: 0;
 157   background-image: none;
 158 }
 159 .claro .dijitSelectMenu .dijitMenuItem td, .claro .dijitComboBoxMenu .dijitMenuItem {
 160   padding: 2px;
 161   border-width: 1px 0 1px 0;
 162   border-style: solid;
 163   border-color: #ffffff;
 164 }
 165 .claro .dijitSelectMenu .dijitMenuItemSelected td, .claro .dijitComboBoxMenu .dijitMenuItemSelected {
 166   color: #000000;
 167   border-color: #759dc0;
 168   background-color: #abd6ff;
 169 }
 170 .claro .dijitSelectMenu .dijitMenuItemHover td, .claro .dijitComboBoxMenu .dijitMenuItemHover {
 171   color: #000000;
 172   border-color: #769dc0;
 173   background-color: #abd6ff;
 174 }
 175 .claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
 176   background-color: #7dbdfa;
 177   /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
 178
 179 }
 180 .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
 181   font-style: italic;
 182 }