Menu.css 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. /* Menu
  2. There are three areas of styling for the Menu:
  3. 1. The menu
  4. There are three types of menus:
  5. i)Context Menu
  6. ii)Drop down Menu
  7. iii) Navigation Menu
  8. All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
  9. .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
  10. .dijitMenuTable - for padding - also affects Select widget
  11. 2. The menu bar
  12. .dijitMenuBar - for border, margins, padding, background-color of the menu bar
  13. .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem)
  14. 3. Menu items - items in the menu.
  15. .dijitMenuItem - for color
  16. .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected
  17. .dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item
  18. td.dijitMenuItemIconCell - for padding around a menu item's icon
  19. td.dijitMenuItemLabel - for padding around a menu item's label
  20. .dijitMenuSeparatorTop - for border, top border, of the separator
  21. .dijitMenuSeparatorBottom - for bottom margin of the separator
  22. Styles specific to ComboBox and FilteringSelect widgets:
  23. .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
  24. .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
  25. */
  26. .claro .dijitMenuBar {
  27. border: 1px solid #b5bcc7;
  28. margin: 0;
  29. padding: 0;
  30. background-color: #efefef;
  31. background-image: url("images/commonHighlight.png");
  32. background-position: 0 0;
  33. background-repeat: repeat-x;
  34. }
  35. .dj_ie6 .claro .dijitMenuBar {
  36. background-image: none;
  37. }
  38. .claro .dijitMenu {
  39. background-repeat: repeat-y;
  40. background-color: #ffffff;
  41. border: 1px solid #769dc0;
  42. /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
  43. margin: -1px 0;
  44. }
  45. .dj_ie6 .claro .dijitMenu {
  46. margin: 0;
  47. /* above -1px makes top/bottom borders disappear on IE6 */
  48. }
  49. .claro .dijitMenuBar .dijitMenuItem {
  50. padding: 6px 10px 7px;
  51. background-position: 0 100px;
  52. color: #4a4a4a;
  53. margin: -1px;
  54. }
  55. .claro .dijitMenuItem {
  56. background-image: url("images/menuHighlight.png");
  57. background-position: 0 -40px;
  58. background-repeat: repeat-x;
  59. }
  60. /* this prevents jiggling upon hover of a menu item */
  61. .claro .dijitMenuTable {
  62. border-collapse: separate;
  63. border-spacing: 0 0;
  64. padding: 0;
  65. }
  66. .claro .dijitMenuItem td {
  67. padding: 1px;
  68. }
  69. /* hover over a MenuBarItem */
  70. .claro .dijitMenuPassive .dijitMenuItemHover, .claro .dijitMenuPassive .dijitMenuItemSelected {
  71. background-color: #abd6ff;
  72. border: solid 1px #769dc0;
  73. background-position: 0 0;
  74. color: #000000;
  75. padding: 5px 9px 6px;
  76. }
  77. .claro .dijitMenuPassive .dijitMenuItemActive {
  78. background-position: 0 -177px;
  79. }
  80. .dj_ie6 .claro .dijitMenuItem, .dj_ie6 .claro .dijitMenuPassive .dijitMenuItem {
  81. background-image: none;
  82. }
  83. /* MenuBarItem that has been selected and menu drops down from it */
  84. .claro .dijitMenuActive .dijitMenuItemHover, .claro .dijitMenuActive .dijitMenuItemSelected {
  85. border: solid 1px #769dc0;
  86. padding: 5px 9px 6px;
  87. background-color: #abd6ff;
  88. background-position: 0 0;
  89. color: #000000;
  90. }
  91. .dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
  92. .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
  93. .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
  94. .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
  95. padding-top: 6px;
  96. padding-bottom: 5px;
  97. margin-top: -3px;
  98. }
  99. .claro .dijitMenuActive .dijitMenuItemActive {
  100. background-color: #7dbefa;
  101. background-position: 0 -177px;
  102. }
  103. .claro .dijitMenuItemActive {
  104. background-position: 0 -177px;
  105. }
  106. .claro td.dijitMenuItemIconCell {
  107. padding: 2px;
  108. margin: 0 0 0 4px;
  109. }
  110. .claro td.dijitMenuItemLabel {
  111. padding-top: 5px;
  112. padding-bottom: 5px;
  113. }
  114. .claro .dijitMenuExpand {
  115. width: 7px;
  116. height: 7px;
  117. background-image: url('images/spriteArrows.png');
  118. background-position: -14px 0;
  119. margin-right: 3px;
  120. }
  121. .claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
  122. opacity: 1;
  123. }
  124. .claro .dijitMenuSeparatorTop {
  125. height: auto;
  126. margin-top: 1px;
  127. /* prevents spacing above/below separator */
  128. border-bottom: 1px solid #b5bcc7;
  129. }
  130. .claro .dijitMenuSeparatorBottom {
  131. height: auto;
  132. margin-bottom: 1px;
  133. }
  134. /* the checked menu item */
  135. .claro .dijitCheckedMenuItemIconChar {
  136. display: none;
  137. }
  138. .claro .dijitCheckedMenuItemIcon {
  139. background-image: url('form/images/checkboxRadioButtonStates.png');
  140. background-repeat: no-repeat;
  141. background-position: -15px 50%;
  142. width: 15px;
  143. height: 16px;
  144. }
  145. .dj_ie6 .claro .dijitCheckedMenuItemIcon {
  146. background-image: url('form/images/checkboxAndRadioButtons_IE6.png');
  147. }
  148. .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
  149. background-position: 0 50%;
  150. }
  151. /*ComboBox Menu*/
  152. .claro .dijitComboBoxMenu {
  153. margin-left: 0;
  154. background-image: none;
  155. }
  156. .claro .dijitComboBoxMenu .dijitMenuItem {
  157. padding: 2px;
  158. border-width: 1px 0 1px 0;
  159. border-style: solid;
  160. border-color: #ffffff;
  161. }
  162. .claro .dijitComboBoxMenu .dijitMenuItemSelected {
  163. color: #000000;
  164. border-color: #769dc0;
  165. background-color: #abd6ff;
  166. }
  167. .claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
  168. background-position: 0 -177px;
  169. background-color: #7dbefa;
  170. /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
  171. }
  172. .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
  173. font-style: italic;
  174. }