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