custombutton.css 4.2 KB

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