SplitBox.css (2525B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 .split-box { 6 display: flex; 7 flex: 1; 8 min-width: 0; 9 height: 100%; 10 width: 100%; 11 } 12 13 .split-box.vert { 14 flex-direction: row; 15 } 16 17 .split-box.horz { 18 flex-direction: column; 19 } 20 21 .split-box > .uncontrolled { 22 display: flex; 23 flex: 1; 24 min-width: 0; 25 overflow: auto; 26 } 27 28 .split-box > .controlled { 29 display: flex; 30 overflow: auto; 31 } 32 33 .split-box > .splitter { 34 background-image: none; 35 border: 0; 36 border-style: solid; 37 border-color: transparent; 38 background-color: var(--theme-splitter-color); 39 background-clip: content-box; 40 position: relative; 41 42 box-sizing: border-box; 43 44 /* Positive z-index positions the splitter on top of its siblings and makes 45 it clickable on both sides. */ 46 z-index: 1; 47 48 /* opt-out of forced colors because the transparent borders are turned into 49 opaque ones in High Contrast Mode. --theme-splitter-color has specific value 50 in High Contrast Mode so we should be fine */ 51 forced-color-adjust: none; 52 } 53 54 .split-box.vert > .splitter { 55 min-width: var(--devtools-vertical-splitter-min-width); 56 57 border-inline-start-width: var(--devtools-splitter-inline-start-width); 58 border-inline-end-width: var(--devtools-splitter-inline-end-width); 59 60 margin-inline-start: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px); 61 margin-inline-end: calc(-1 * var(--devtools-splitter-inline-end-width)); 62 63 cursor: ew-resize; 64 } 65 66 .split-box.horz > .splitter { 67 /* Emphasize the horizontal splitter width and color */ 68 min-height: var(--devtools-emphasized-horizontal-splitter-min-height); 69 70 background-color: var(--theme-emphasized-splitter-color); 71 72 border-top-width: var(--devtools-splitter-top-width); 73 border-bottom-width: var(--devtools-splitter-bottom-width); 74 75 margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px); 76 margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width)); 77 78 cursor: ns-resize; 79 } 80 81 /* Emphasized splitter has the hover style. */ 82 .split-box.horz > .splitter:hover { 83 background-color: var(--theme-emphasized-splitter-color-hover); 84 } 85 86 .split-box.disabled { 87 pointer-events: none; 88 } 89 90 /** 91 * Make sure splitter panels are not processing any mouse 92 * events. This is good for performance during splitter 93 * bar dragging. 94 */ 95 .split-box.dragging > .controlled, 96 .split-box.dragging > .uncontrolled { 97 pointer-events: none; 98 }