splitView.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /*
  2. * Copyright (C) 2011 Google Inc. All rights reserved.
  3. *
  4. * Redistribution and use in source and binary forms, with or without
  5. * modification, are permitted provided that the following conditions are
  6. * met:
  7. *
  8. * 1. Redistributions of source code must retain the above copyright
  9. * notice, this list of conditions and the following disclaimer.
  10. *
  11. * 2. Redistributions in binary form must reproduce the above
  12. * copyright notice, this list of conditions and the following disclaimer
  13. * in the documentation and/or other materials provided with the
  14. * distribution.
  15. *
  16. * THIS SOFTWARE IS PROVIDED BY GOOGLE INC. AND ITS CONTRIBUTORS
  17. * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  18. * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  19. * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GOOGLE INC.
  20. * OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  21. * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  22. * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  23. * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  24. * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  25. * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  26. * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  27. */
  28. .split-view {
  29. position: absolute;
  30. top: 0;
  31. bottom: 0;
  32. left: 0;
  33. right: 0;
  34. overflow: hidden;
  35. }
  36. .split-view-contents {
  37. position: absolute;
  38. overflow: auto;
  39. cursor: default;
  40. }
  41. .split-view-contents.maximized {
  42. width: 100%;
  43. height: 100%;
  44. }
  45. .split-view-vertical > .split-view-contents {
  46. top: 0;
  47. bottom: 0;
  48. }
  49. .split-view-vertical > .split-view-contents-first {
  50. left: 0;
  51. }
  52. .split-view-vertical > .split-view-contents-first.maximized {
  53. right: 0;
  54. }
  55. .split-view-vertical > .split-view-contents-second {
  56. right: 0;
  57. }
  58. .split-view-vertical > .split-view-contents-second.maximized {
  59. left: 0;
  60. }
  61. .split-view-horizontal > .split-view-contents {
  62. left: 0;
  63. right: 0;
  64. }
  65. .split-view-horizontal > .split-view-contents-first {
  66. top: 0;
  67. }
  68. .split-view-horizontal > .split-view-contents-first.maximized {
  69. bottom: 0;
  70. }
  71. .split-view-horizontal > .split-view-contents-second {
  72. bottom: 0;
  73. }
  74. .split-view-horizontal > .split-view-contents-second.maximized {
  75. top: 0;
  76. }
  77. .split-view-vertical > .split-view-sidebar.split-view-contents-first:not(.maximized) {
  78. border-right: 1px solid rgb(64%, 64%, 64%);
  79. }
  80. .split-view-vertical > .split-view-sidebar.split-view-contents-second:not(.maximized) {
  81. border-left: 1px solid rgb(64%, 64%, 64%);
  82. }
  83. .split-view-horizontal > .split-view-sidebar.split-view-contents-first:not(.maximized) {
  84. border-bottom: 1px solid rgb(64%, 64%, 64%);
  85. }
  86. .split-view-horizontal > .split-view-sidebar.split-view-contents-second:not(.maximized) {
  87. border-top: 1px solid rgb(64%, 64%, 64%);
  88. }
  89. .split-view-vertical > .split-view-resizer {
  90. position: absolute;
  91. top: 0;
  92. bottom: 0;
  93. width: 5px;
  94. z-index: 1500;
  95. cursor: ew-resize;
  96. }
  97. .split-view-horizontal > .split-view-resizer {
  98. position: absolute;
  99. left: 0;
  100. right: 0;
  101. height: 5px;
  102. z-index: 1500;
  103. cursor: ns-resize;
  104. }
  105. .sidebar-overlay {
  106. position: absolute;
  107. top: 0;
  108. bottom: 0;
  109. left: 0;
  110. z-index: 12;
  111. background-color: white;
  112. border-right: 1px solid gray;
  113. box-shadow: rgb(90,90,90) 20px 0 50px -25px;
  114. display: -webkit-flex;
  115. -webkit-flex-direction: column;
  116. }
  117. .sidebar-overlay-resizer {
  118. position: absolute;
  119. top: 0;
  120. bottom: 0;
  121. width: 5px;
  122. z-index: 500;
  123. cursor: ew-resize;
  124. }