menuitem.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. /*
  2. * Copyright 2009 The Closure Library Authors. All Rights Reserved.
  3. *
  4. * Use of this source code is governed by the Apache License, Version 2.0.
  5. * See the COPYING file for details.
  6. */
  7. /*
  8. * Standard styling for menus created by goog.ui.MenuItemRenderer.
  9. *
  10. * @author attila@google.com (Attila Bodis)
  11. */
  12. /**
  13. * State: resting.
  14. *
  15. * NOTE(mleibman,chrishenry):
  16. * The RTL support in Closure is provided via two mechanisms -- "rtl" CSS
  17. * classes and BiDi flipping done by the CSS compiler. Closure supports RTL
  18. * with or without the use of the CSS compiler. In order for them not
  19. * to conflict with each other, the "rtl" CSS classes need to have the @noflip
  20. * annotation. The non-rtl counterparts should ideally have them as well, but,
  21. * since .goog-menuitem existed without .goog-menuitem-rtl for so long before
  22. * being added, there is a risk of people having templates where they are not
  23. * rendering the .goog-menuitem-rtl class when in RTL and instead rely solely
  24. * on the BiDi flipping by the CSS compiler. That's why we're not adding the
  25. * @noflip to .goog-menuitem.
  26. */
  27. .goog-menuitem {
  28. color: #000;
  29. font: normal 13px Arial, sans-serif;
  30. list-style: none;
  31. margin: 0;
  32. /* 28px on the left for icon or checkbox; 7em on the right for shortcut. */
  33. padding: 4px 7em 4px 28px;
  34. white-space: nowrap;
  35. }
  36. /* BiDi override for the resting state. */
  37. /* @noflip */
  38. .goog-menuitem.goog-menuitem-rtl {
  39. /* Flip left/right padding for BiDi. */
  40. padding-left: 7em;
  41. padding-right: 28px;
  42. }
  43. /* If a menu doesn't have checkable items or items with icons, remove padding. */
  44. .goog-menu-nocheckbox .goog-menuitem,
  45. .goog-menu-noicon .goog-menuitem {
  46. padding-left: 12px;
  47. }
  48. /*
  49. * If a menu doesn't have items with shortcuts, leave just enough room for
  50. * submenu arrows, if they are rendered.
  51. */
  52. .goog-menu-noaccel .goog-menuitem {
  53. padding-right: 20px;
  54. }
  55. .goog-menuitem-content {
  56. color: #000;
  57. font: normal 13px Arial, sans-serif;
  58. }
  59. /* State: disabled. */
  60. .goog-menuitem-disabled .goog-menuitem-accel,
  61. .goog-menuitem-disabled .goog-menuitem-content {
  62. color: #ccc !important;
  63. }
  64. .goog-menuitem-disabled .goog-menuitem-icon {
  65. opacity: 0.3;
  66. -moz-opacity: 0.3;
  67. filter: alpha(opacity=30);
  68. }
  69. /* State: hover. */
  70. .goog-menuitem-highlight,
  71. .goog-menuitem-hover {
  72. background-color: #d6e9f8;
  73. /* Use an explicit top and bottom border so that the selection is visible
  74. * in high contrast mode. */
  75. border-color: #d6e9f8;
  76. border-style: dotted;
  77. border-width: 1px 0;
  78. padding-bottom: 3px;
  79. padding-top: 3px;
  80. }
  81. /* State: selected/checked. */
  82. .goog-menuitem-checkbox,
  83. .goog-menuitem-icon {
  84. background-repeat: no-repeat;
  85. height: 16px;
  86. left: 6px;
  87. position: absolute;
  88. right: auto;
  89. vertical-align: middle;
  90. width: 16px;
  91. }
  92. /* BiDi override for the selected/checked state. */
  93. /* @noflip */
  94. .goog-menuitem-rtl .goog-menuitem-checkbox,
  95. .goog-menuitem-rtl .goog-menuitem-icon {
  96. /* Flip left/right positioning. */
  97. left: auto;
  98. right: 6px;
  99. }
  100. .goog-option-selected .goog-menuitem-checkbox,
  101. .goog-option-selected .goog-menuitem-icon {
  102. /* Client apps may override the URL at which they serve the sprite. */
  103. background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;
  104. }
  105. /* Keyboard shortcut ("accelerator") style. */
  106. .goog-menuitem-accel {
  107. color: #999;
  108. /* Keyboard shortcuts are untranslated; always left-to-right. */
  109. /* @noflip */ direction: ltr;
  110. left: auto;
  111. padding: 0 6px;
  112. position: absolute;
  113. right: 0;
  114. text-align: right;
  115. }
  116. /* BiDi override for shortcut style. */
  117. /* @noflip */
  118. .goog-menuitem-rtl .goog-menuitem-accel {
  119. /* Flip left/right positioning and text alignment. */
  120. left: 0;
  121. right: auto;
  122. text-align: left;
  123. }
  124. /* Mnemonic styles. */
  125. .goog-menuitem-mnemonic-hint {
  126. text-decoration: underline;
  127. }
  128. .goog-menuitem-mnemonic-separator {
  129. color: #999;
  130. font-size: 12px;
  131. padding-left: 4px;
  132. }