/auiplugin/src/main/resources/css/atlassian/tabs.css

https://bitbucket.org/grasmith/aui-archive · CSS · 184 lines · 154 code · 20 blank · 10 comment · 0 complexity · 30e7abd5d332ab262dda2efc62b6e317 MD5 · raw file

  1. /*! AUI Tabs */
  2. /* temp override */
  3. .aui-tabs {
  4. font-size: 14px;
  5. line-height: 1.46; /* 20px equiv line-height */
  6. }
  7. /* Functional style */
  8. .aui-tabs > .tabs-pane {
  9. display: none;
  10. }
  11. .aui-tabs > .tabs-pane.active-pane {
  12. display: block;
  13. }
  14. /* Common styles - Vertical and Horizontal */
  15. .aui-tabs > .tabs-menu > .menu-item > a strong {
  16. background: transparent;
  17. font-weight: normal;
  18. text-overflow: ellipsis;
  19. white-space: nowrap;
  20. cursor: pointer; /* set explicitly to avoid ie bug */
  21. }
  22. .aui-tabs > .tabs-menu > .menu-item.active-tab > a,
  23. .aui-tabs > .tabs-menu > .menu-item.active-tab > a strong {
  24. font-weight: bold;
  25. }
  26. .aui-tabs > .tabs-menu .menu-item a,
  27. .aui-tabs > .tabs-menu .menu-item a:link,
  28. .aui-tabs > .tabs-menu .menu-item a:visited {
  29. background: #f5f5f5;
  30. color: #333;
  31. }
  32. .aui-tabs > .tabs-menu .menu-item a:focus,
  33. .aui-tabs > .tabs-menu .menu-item a:hover {
  34. background: #e6e6e6;
  35. color: #000;
  36. }
  37. .aui-tabs > .tabs-menu .menu-item a:active {
  38. background: #3b73af;
  39. color: #fff;
  40. }
  41. .aui-tabs > .tabs-menu .menu-item.active-tab a,
  42. .aui-tabs > .tabs-menu .menu-item.active-tab a:link,
  43. .aui-tabs > .tabs-menu .menu-item.active-tab a:visited,
  44. .aui-tabs > .tabs-menu .menu-item.active-tab a:focus,
  45. .aui-tabs > .tabs-menu .menu-item.active-tab a:hover,
  46. .aui-tabs > .tabs-menu .menu-item.active-tab a:active {
  47. background: #fff;
  48. color: #333;
  49. }
  50. /* Vertical Tabs - PDL colours but spacing still to be tweaked */
  51. .aui-tabs.vertical-tabs > .tabs-menu {
  52. position: relative;
  53. float: left;
  54. width: 11em;
  55. z-index: 5;
  56. list-style-type: none;
  57. margin: 0;
  58. padding: 0;
  59. }
  60. .aui-tabs.vertical-tabs > .tabs-menu > .menu-item {
  61. border: 1px solid #ddd;
  62. border-right: none;
  63. margin: -1px 0 0 0;
  64. }
  65. .aui-tabs.vertical-tabs > .tabs-menu > .menu-item:first-child {
  66. margin-top: 1em;
  67. }
  68. .aui-tabs.vertical-tabs > .tabs-menu > .menu-item.active-tab {
  69. margin-left: -0.5em;
  70. margin-right: -1px;
  71. }
  72. .aui-tabs.vertical-tabs > .tabs-menu > .menu-item.active-tab > a > strong {
  73. padding: 4px 10px;
  74. }
  75. .aui-tabs.vertical-tabs > .tabs-menu > .menu-item > a {
  76. display: block;
  77. text-decoration: none;
  78. }
  79. .aui-tabs.vertical-tabs > .tabs-menu > .menu-item > a > strong {
  80. display: block;
  81. overflow: hidden;
  82. padding: 3px 10px 4px 10px;
  83. }
  84. .aui-tabs.vertical-tabs > .tabs-menu > .menu-item strong {
  85. padding-right: 0;
  86. }
  87. .aui-tabs.vertical-tabs > .tabs-pane {
  88. background: #fff;
  89. border: 1px solid #ddd;
  90. -webkit-border-radius: 3px;
  91. -moz-border-radius: 3px;
  92. border-radius: 3px;
  93. margin: 0 0 0 11em;
  94. padding: 20px;
  95. position: relative;
  96. z-index: 1;
  97. }
  98. /* Horizontal Tabs - PDL */
  99. .aui-tabs.horizontal-tabs > .tabs-menu {
  100. border-bottom: 1px solid #ddd;
  101. display: inline-block;
  102. margin: 0;
  103. padding: 0;
  104. width: 100%;
  105. }
  106. .aui-tabs.horizontal-tabs > .tabs-menu > .menu-item {
  107. display: block;
  108. float: left;
  109. margin: 0;
  110. background: #f7f7f7;
  111. }
  112. .aui-tabs.horizontal-tabs > .tabs-menu > .menu-item:first-child {
  113. margin-left: 20px;
  114. }
  115. .aui-tabs.horizontal-tabs > .tabs-menu > .menu-item:first-child a {
  116. border-radius: 3px 0 0 0;
  117. border-left: 1px solid #ddd;
  118. }
  119. /* last-child ok because IE8 doesn't do border radius anyway */
  120. .aui-tabs.horizontal-tabs > .tabs-menu > .menu-item:last-child a {
  121. border-radius: 0 3px 0 0;
  122. }
  123. .aui-tabs.horizontal-tabs > .tabs-menu > .menu-item > a,
  124. .aui-tabs.aui-tabs-disabled.horizontal-tabs > .tabs-menu > .menu-item > a:focus,
  125. .aui-tabs.aui-tabs-disabled.horizontal-tabs > .tabs-menu > .menu-item > a:hover,
  126. .aui-tabs.aui-tabs-disabled.horizontal-tabs > .tabs-menu > .menu-item > a:active {
  127. display: block;
  128. border-right: 1px solid #ddd;
  129. border-top: 1px solid #ddd;
  130. padding: 4px 10px 3px 10px;
  131. text-decoration: none;
  132. }
  133. .aui-tabs.horizontal-tabs > .tabs-menu > .menu-item.active-tab a,
  134. .aui-tabs.aui-tabs-disabled.horizontal-tabs > .tabs-menu > .active-tab > a:focus,
  135. .aui-tabs.aui-tabs-disabled.horizontal-tabs > .tabs-menu > .active-tab > a:hover,
  136. .aui-tabs.aui-tabs-disabled.horizontal-tabs > .tabs-menu > .active-tab > a:active {
  137. background: #fff;
  138. border-bottom: 1px solid #fff;
  139. margin-bottom: -1px;
  140. position: relative;
  141. }
  142. .aui-tabs.horizontal-tabs > .tabs-menu > .active-tab > a,
  143. .aui-tabs.horizontal-tabs > .tabs-menu > .active-tab > a strong {
  144. font-weight: bold;
  145. }
  146. /* Disabled/Page Tabs */
  147. .aui-tabs.aui-tabs-disabled > .tabs-menu > .menu-item > a {
  148. cursor: default;
  149. }
  150. /* reloadable tabs (active tab has different cursor affordance) */
  151. .active-tab.reloadable-tab a,
  152. .active-tab.reloadable-tab a strong { cursor: pointer !important; }
  153. /* legacy tabs override - deprecated, to be remove in aui 5.0 */
  154. .aui-tabs.vertical-tabs.aui-legacystyle2011 > .tabs-menu .menu-item strong {
  155. text-overflow: clip;
  156. }
  157. .aui-tabs.vertical-tabs.aui-legacystyle2011 > .tabs-menu .menu-item.active-tab {
  158. margin-right: 0;
  159. }
  160. .aui-tabs.vertical-tabs.aui-legacystyle2011 > .tabs-pane {
  161. -webkit-border-radius: 0;
  162. -moz-border-radius: 0;
  163. border-radius: 0;
  164. }