menubutton.css 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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 buttons created by goog.ui.MenuButtonRenderer.
  9. *
  10. * @author attila@google.com (Attila Bodis)
  11. */
  12. /* State: resting. */
  13. .goog-menu-button {
  14. /* Client apps may override the URL at which they serve the image. */
  15. background: #ddd url(//ssl.gstatic.com/editor/button-bg.png) repeat-x top left;
  16. border: 0;
  17. color: #000;
  18. cursor: pointer;
  19. list-style: none;
  20. margin: 2px;
  21. outline: none;
  22. padding: 0;
  23. text-decoration: none;
  24. vertical-align: middle;
  25. }
  26. /* Pseudo-rounded corners. */
  27. .goog-menu-button-outer-box,
  28. .goog-menu-button-inner-box {
  29. border-style: solid;
  30. border-color: #aaa;
  31. vertical-align: top;
  32. }
  33. .goog-menu-button-outer-box {
  34. margin: 0;
  35. border-width: 1px 0;
  36. padding: 0;
  37. }
  38. .goog-menu-button-inner-box {
  39. margin: 0 -1px;
  40. border-width: 0 1px;
  41. padding: 3px 4px;
  42. }
  43. /* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */
  44. * html .goog-menu-button-inner-box {
  45. /* IE6 needs to have the box shifted to make the borders line up. */
  46. left: -1px;
  47. }
  48. /* Pre-IE7 BiDi fixes. */
  49. * html .goog-menu-button-rtl .goog-menu-button-outer-box {
  50. /* @noflip */ left: -1px;
  51. /* @noflip */ right: auto;
  52. }
  53. * html .goog-menu-button-rtl .goog-menu-button-inner-box {
  54. /* @noflip */ right: auto;
  55. }
  56. /* IE7-only hack; ignored by all other browsers. */
  57. *:first-child+html .goog-menu-button-inner-box {
  58. /* IE7 needs to have the box shifted to make the borders line up. */
  59. left: -1px;
  60. }
  61. /* IE7 BiDi fix. */
  62. *:first-child+html .goog-menu-button-rtl .goog-menu-button-inner-box {
  63. /* @noflip */ left: 1px;
  64. /* @noflip */ right: auto;
  65. }
  66. /* Safari-only hacks. */
  67. ::root .goog-menu-button,
  68. ::root .goog-menu-button-outer-box,
  69. ::root .goog-menu-button-inner-box {
  70. /* Required to make pseudo-rounded corners work on Safari. */
  71. line-height: 0;
  72. }
  73. ::root .goog-menu-button-caption,
  74. ::root .goog-menu-button-dropdown {
  75. /* Required to make pseudo-rounded corners work on Safari. */
  76. line-height: normal;
  77. }
  78. /* State: disabled. */
  79. .goog-menu-button-disabled {
  80. background-image: none !important;
  81. opacity: 0.3;
  82. -moz-opacity: 0.3;
  83. filter: alpha(opacity=30);
  84. }
  85. .goog-menu-button-disabled .goog-menu-button-outer-box,
  86. .goog-menu-button-disabled .goog-menu-button-inner-box,
  87. .goog-menu-button-disabled .goog-menu-button-caption,
  88. .goog-menu-button-disabled .goog-menu-button-dropdown {
  89. color: #333 !important;
  90. border-color: #999 !important;
  91. }
  92. /* Pre-IE7 IE hack; ignored by IE7 and all non-IE browsers. */
  93. * html .goog-menu-button-disabled {
  94. margin: 2px 1px !important;
  95. padding: 0 1px !important;
  96. }
  97. /* IE7-only hack; ignored by all other browsers. */
  98. *:first-child+html .goog-menu-button-disabled {
  99. margin: 2px 1px !important;
  100. padding: 0 1px !important;
  101. }
  102. /* State: hover. */
  103. .goog-menu-button-hover .goog-menu-button-outer-box,
  104. .goog-menu-button-hover .goog-menu-button-inner-box {
  105. border-color: #9cf #69e #69e #7af !important; /* Hover border wins. */
  106. }
  107. /* State: active, open. */
  108. .goog-menu-button-active,
  109. .goog-menu-button-open {
  110. background-color: #bbb;
  111. background-position: bottom left;
  112. }
  113. /* State: focused. */
  114. .goog-menu-button-focused .goog-menu-button-outer-box,
  115. .goog-menu-button-focused .goog-menu-button-inner-box {
  116. border-color: orange;
  117. }
  118. /* Caption style. */
  119. .goog-menu-button-caption {
  120. padding: 0 4px 0 0;
  121. vertical-align: top;
  122. }
  123. /* Dropdown arrow style. */
  124. .goog-menu-button-dropdown {
  125. height: 15px;
  126. width: 7px;
  127. /* Client apps may override the URL at which they serve the sprite. */
  128. background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -388px 0;
  129. vertical-align: top;
  130. }
  131. /* Pill (collapsed border) styles. */
  132. /* TODO(gboyer): Remove specific menu button styles and have any button support being a menu button. */
  133. .goog-menu-button-collapse-right,
  134. .goog-menu-button-collapse-right .goog-menu-button-outer-box,
  135. .goog-menu-button-collapse-right .goog-menu-button-inner-box {
  136. margin-right: 0;
  137. }
  138. .goog-menu-button-collapse-left,
  139. .goog-menu-button-collapse-left .goog-menu-button-outer-box,
  140. .goog-menu-button-collapse-left .goog-menu-button-inner-box {
  141. margin-left: 0;
  142. }
  143. .goog-menu-button-collapse-left .goog-menu-button-inner-box {
  144. border-left: 1px solid #fff;
  145. }
  146. .goog-menu-button-collapse-left.goog-menu-button-checked
  147. .goog-menu-button-inner-box {
  148. border-left: 1px solid #ddd;
  149. }