tabbedPane.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. /*
  2. * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved.
  3. * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  4. * Copyright (C) 2011 Google Inc. All rights reserved.
  5. *
  6. * Redistribution and use in source and binary forms, with or without
  7. * modification, are permitted provided that the following conditions are
  8. * met:
  9. *
  10. * 1. Redistributions of source code must retain the above copyright
  11. * notice, this list of conditions and the following disclaimer.
  12. *
  13. * 2. Redistributions in binary form must reproduce the above
  14. * copyright notice, this list of conditions and the following disclaimer
  15. * in the documentation and/or other materials provided with the
  16. * distribution.
  17. *
  18. * THIS SOFTWARE IS PROVIDED BY GOOGLE INC. AND ITS CONTRIBUTORS
  19. * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20. * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21. * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GOOGLE INC.
  22. * OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23. * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24. * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25. * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26. * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27. * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28. * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29. */
  30. .tabbed-pane {
  31. -webkit-flex-direction: column;
  32. display: -webkit-flex;
  33. height: 100%;
  34. }
  35. .tabbed-pane-content {
  36. -webkit-flex: 1;
  37. position: relative;
  38. overflow: auto;
  39. }
  40. .tabbed-pane-content.has-no-tabs {
  41. background-color: lightgray;
  42. }
  43. .tabbed-pane-header {
  44. height: 23px;
  45. border-bottom: 1px solid rgb(163, 163, 163);
  46. overflow: hidden;
  47. width: 100%;
  48. }
  49. .tabbed-pane-header-contents {
  50. margin: 0 10px;
  51. }
  52. .tabbed-pane-header-tabs {
  53. float: left;
  54. }
  55. .tabbed-pane-header-tab {
  56. float: left;
  57. margin-top: 2px;
  58. padding: 2px 4px 2px 4px;
  59. height: 21px;
  60. border: 1px solid transparent;
  61. border-bottom: none;
  62. line-height: 15px;
  63. white-space: nowrap;
  64. text-overflow: ellipsis;
  65. overflow: hidden;
  66. }
  67. .tabbed-pane-header-tab.measuring {
  68. visibility: hidden;
  69. }
  70. .tabbed-pane-header-tab.selected {
  71. background-color: white;
  72. border: 1px solid rgb(163, 163, 163);
  73. border-bottom: none;
  74. }
  75. .tabbed-pane-header-tab-close-button {
  76. position: relative;
  77. bottom: 0;
  78. opacity: 0;
  79. padding-left: 3px;
  80. font-size: 14px;
  81. color: rgb(80, 80, 80);
  82. line-height: 12px;
  83. }
  84. .tabbed-pane-header-tab:hover .tabbed-pane-header-tab-close-button {
  85. opacity: 0.5;
  86. }
  87. .tabbed-pane-header-tab:hover .tabbed-pane-header-tab-close-button:hover {
  88. opacity: 1.0;
  89. }
  90. .tabbed-pane-header-tab:hover .tabbed-pane-header-tab-close-button:active {
  91. opacity: 0.7;
  92. }
  93. .tabbed-pane-header-tab.selected .tabbed-pane-header-tab-close-button {
  94. opacity: 0.5;
  95. }
  96. .tabbed-pane-header-tab.selected .tabbed-pane-header-tab-close-button:hover {
  97. opacity: 1.0;
  98. }
  99. .tabbed-pane-header-tab.selected .tabbed-pane-header-tab-close-button:active {
  100. opacity: 0.7;
  101. }
  102. .tabbed-pane-header-tabs-drop-down-container {
  103. float: left;
  104. position: relative;
  105. font-size: 16px;
  106. vertical-align: bottom;
  107. top: 3px;
  108. padding-left: 3px;
  109. }
  110. .tabbed-pane-header-tabs-drop-down-container.measuring {
  111. visibility: hidden;
  112. }
  113. .tabbed-pane-header-tabs-drop-down {
  114. position: relative;
  115. opacity: 0.7;
  116. color: rgb(30, 30, 30);
  117. }
  118. .tabbed-pane-header-tabs-drop-down:hover {
  119. opacity: 1.0;
  120. }
  121. .tabbed-pane-header-tabs-drop-down:active {
  122. opacity: 0.8;
  123. }
  124. select.tabbed-pane-header-tabs-drop-down-select {
  125. position: absolute;
  126. top: 0px;
  127. right: 0px;
  128. bottom: 0px;
  129. left: 0px;
  130. opacity: 0;
  131. border: none;
  132. margin: 0;
  133. -webkit-appearance: none;
  134. }