roundedtab.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. /*
  2. * Copyright 2008 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. /* Author: attila@google.com (Attila Bodis) */
  8. /*
  9. * Styles used by goog.ui.RoundedTabRenderer.
  10. */
  11. .goog-rounded-tab {
  12. border: 0;
  13. cursor: default;
  14. padding: 0;
  15. }
  16. .goog-tab-bar-top .goog-rounded-tab,
  17. .goog-tab-bar-bottom .goog-rounded-tab {
  18. float: left;
  19. margin: 0 4px 0 0;
  20. }
  21. .goog-tab-bar-start .goog-rounded-tab,
  22. .goog-tab-bar-end .goog-rounded-tab {
  23. margin: 0 0 4px 0;
  24. }
  25. .goog-rounded-tab-caption {
  26. border: 0;
  27. color: #fff;
  28. margin: 0;
  29. padding: 4px 8px;
  30. }
  31. .goog-rounded-tab-caption,
  32. .goog-rounded-tab-inner-edge,
  33. .goog-rounded-tab-outer-edge {
  34. background: #036;
  35. border-right: 1px solid #003;
  36. }
  37. .goog-rounded-tab-inner-edge,
  38. .goog-rounded-tab-outer-edge {
  39. font-size: 1px;
  40. height: 1px;
  41. overflow: hidden;
  42. }
  43. /* State: Hover */
  44. .goog-rounded-tab-hover .goog-rounded-tab-caption,
  45. .goog-rounded-tab-hover .goog-rounded-tab-inner-edge,
  46. .goog-rounded-tab-hover .goog-rounded-tab-outer-edge {
  47. background-color: #69c;
  48. border-right: 1px solid #369;
  49. }
  50. /* State: Disabled */
  51. .goog-rounded-tab-disabled .goog-rounded-tab-caption,
  52. .goog-rounded-tab-disabled .goog-rounded-tab-inner-edge,
  53. .goog-rounded-tab-disabled .goog-rounded-tab-outer-edge {
  54. background: #ccc;
  55. border-right: 1px solid #ccc;
  56. }
  57. /* State: Selected */
  58. .goog-rounded-tab-selected .goog-rounded-tab-caption,
  59. .goog-rounded-tab-selected .goog-rounded-tab-inner-edge,
  60. .goog-rounded-tab-selected .goog-rounded-tab-outer-edge {
  61. background: #369 !important; /* Selected trumps hover. */
  62. border-right: 1px solid #036 !important;
  63. }
  64. /*
  65. * Styles for horizontal (top or bottom) tabs.
  66. */
  67. .goog-tab-bar-top .goog-rounded-tab {
  68. vertical-align: bottom;
  69. }
  70. .goog-tab-bar-bottom .goog-rounded-tab {
  71. vertical-align: top;
  72. }
  73. .goog-tab-bar-top .goog-rounded-tab-outer-edge,
  74. .goog-tab-bar-bottom .goog-rounded-tab-outer-edge {
  75. margin: 0 3px;
  76. }
  77. .goog-tab-bar-top .goog-rounded-tab-inner-edge,
  78. .goog-tab-bar-bottom .goog-rounded-tab-inner-edge {
  79. margin: 0 1px;
  80. }
  81. /*
  82. * Styles for vertical (start or end) tabs.
  83. */
  84. .goog-tab-bar-start .goog-rounded-tab-table,
  85. .goog-tab-bar-end .goog-rounded-tab-table {
  86. width: 100%;
  87. }
  88. .goog-tab-bar-start .goog-rounded-tab-inner-edge {
  89. margin-left: 1px;
  90. }
  91. .goog-tab-bar-start .goog-rounded-tab-outer-edge {
  92. margin-left: 3px;
  93. }
  94. .goog-tab-bar-end .goog-rounded-tab-inner-edge {
  95. margin-right: 1px;
  96. }
  97. .goog-tab-bar-end .goog-rounded-tab-outer-edge {
  98. margin-right: 3px;
  99. }
  100. /*
  101. * Overrides for start tabs.
  102. */
  103. .goog-tab-bar-start .goog-rounded-tab-table,
  104. .goog-tab-bar-end .goog-rounded-tab-table {
  105. width: 12ex; /* TODO(attila): Make this work for variable width. */
  106. }
  107. .goog-tab-bar-start .goog-rounded-tab-caption,
  108. .goog-tab-bar-start .goog-rounded-tab-inner-edge,
  109. .goog-tab-bar-start .goog-rounded-tab-outer-edge {
  110. border-left: 1px solid #003;
  111. border-right: 0;
  112. }
  113. .goog-tab-bar-start .goog-rounded-tab-hover .goog-rounded-tab-caption,
  114. .goog-tab-bar-start .goog-rounded-tab-hover .goog-rounded-tab-inner-edge,
  115. .goog-tab-bar-start .goog-rounded-tab-hover .goog-rounded-tab-outer-edge {
  116. border-left: 1px solid #369 !important;
  117. border-right: 0 !important;
  118. }
  119. .goog-tab-bar-start .goog-rounded-tab-selected .goog-rounded-tab-outer-edge,
  120. .goog-tab-bar-start .goog-rounded-tab-selected .goog-rounded-tab-inner-edge,
  121. .goog-tab-bar-start .goog-rounded-tab-selected .goog-rounded-tab-caption {
  122. border-left: 1px solid #036 !important;
  123. border-right: 0 !important;
  124. }
  125. .goog-tab-bar-start .goog-rounded-tab-disabled .goog-rounded-tab-outer-edge,
  126. .goog-tab-bar-start .goog-rounded-tab-disabled .goog-rounded-tab-inner-edge,
  127. .goog-tab-bar-start .goog-rounded-tab-disabled .goog-rounded-tab-caption {
  128. border-left: 1px solid #ccc !important;
  129. border-right: 0 !important;
  130. }