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
29.split-view {
30    display: flex;
31    overflow: hidden;
32}
33
34.split-view-contents {
35    overflow: auto;
36    display: flex;
37    position: relative;
38    flex-direction: column;
39}
40
41.split-view-sidebar {
42    flex: none;
43}
44
45.split-view-main, .split-view-sidebar.maximized {
46    flex: auto;
47}
48
49.split-view.hbox > .split-view-resizer {
50    position: absolute;
51    top: 0;
52    bottom: 0;
53    width: 6px;
54    z-index: 500;
55}
56
57.split-view.vbox > .split-view-resizer {
58    position: absolute;
59    left: 0;
60    right: 0;
61    height: 6px;
62    z-index: 500;
63}
64
65.split-view-resizer-border {
66    pointer-events: none;
67}
68
69.split-view.vbox > .split-view-resizer > .split-view-resizer-border {
70    width: 100%;
71    margin-top: 3px;
72    height: 1px;
73    border-top: 1px solid rgb(64%, 64%, 64%);
74}
75
76.split-view.hbox > .split-view-resizer > .split-view-resizer-border {
77    height: 100%;
78    margin-left: 3px;
79    width: 1px;
80    border-left: 1px solid rgb(64%, 64%, 64%);
81}
82
83.split-view button.sidebar-show-hide-button {
84    position: absolute;
85    background-image: none;
86    height: 16px;
87    width: 16px;
88    border: none;
89    z-index: 10;
90}
91
92.split-view button.left-sidebar-show-hide-button,
93.split-view button.top-sidebar-show-hide-button {
94    top: 4px;
95    left: 4px;
96}
97
98.split-view button.left-sidebar-show-hide-button:active,
99.split-view button.top-sidebar-show-hide-button:active {
100    top: 5px;
101    left: 3px;
102}
103
104.split-view button.right-sidebar-show-hide-button {
105    top: 4px;
106    right:2px;
107}
108
109.split-view button.right-sidebar-show-hide-button:active {
110    top: 5px;
111    right: 1px;
112}
113
114.split-view button.bottom-sidebar-show-hide-button {
115    bottom: 0px;
116    right: 1px;
117}
118
119.split-view button.bottom-sidebar-show-hide-button:active {
120    bottom: 0;
121    right: 0;
122}
123
124.split-view button.left-sidebar-show-hide-button.toggled-show > .glyph {
125    -webkit-mask-position: -168px -76px; /* |> */
126}
127
128.split-view button.left-sidebar-show-hide-button.toggled-hide > .glyph {
129    -webkit-mask-position: -199px -76px; /* |< */
130}
131
132.split-view button.right-sidebar-show-hide-button.toggled-show > .glyph {
133    -webkit-mask-position: -296px -76px; /* <| */
134}
135
136.split-view button.right-sidebar-show-hide-button.toggled-hide > .glyph {
137    -webkit-mask-position: -264px -76px; /* >| */
138}
139
140.split-view button.top-sidebar-show-hide-button.toggled-show > .glyph {
141    -webkit-mask-position: -168px -76px; /* |> */
142    -webkit-transform: rotate(90deg);
143}
144
145.split-view button.top-sidebar-show-hide-button.toggled-hide > .glyph {
146    -webkit-mask-position: -199px -76px; /* |< */
147    -webkit-transform: rotate(90deg);
148}
149
150.split-view button.bottom-sidebar-show-hide-button.toggled-show > .glyph {
151    -webkit-mask-position: -296px -76px; /* <| */
152    -webkit-transform: rotate(90deg);
153}
154
155.split-view button.bottom-sidebar-show-hide-button.toggled-hide > .glyph {
156    -webkit-mask-position: -264px -76px; /* >| */
157    -webkit-transform: rotate(90deg);
158}
159