96 lines
2.3 KiB
CSS
96 lines
2.3 KiB
CSS
/* part: split — two panes and a draggable divider.
|
|
*
|
|
* USE WHEN: two regions the reader should be able to resize. Nest for three or more.
|
|
* NEEDS: nothing
|
|
*
|
|
* ADD: paste this into the page, then run `make theme bake`.
|
|
* <div class="split-pane horizontal" data-split data-size="1" data-min=".3" data-max="3">
|
|
* <div class="split-first">…</div>
|
|
* <div class="split-divider"></div>
|
|
* <div class="split-second">…</div>
|
|
* </div>
|
|
*
|
|
* Derived from common/ui/src/components/SplitPane.vue. Used by every consumer:
|
|
* mpr 7 sites, mts 4, unt and nvi one each.
|
|
*
|
|
* TOKENS: --text-dim
|
|
*
|
|
* Needs split.js for the drag. Without it the CSS still lays the panes out —
|
|
* the divider is simply inert, which is the right failure: a page with no
|
|
* script gets a fixed split, not a broken one.
|
|
*
|
|
* MARKUP
|
|
* <div class="split-pane horizontal" data-split data-size="1.4"
|
|
* data-min="0.4" data-max="4">
|
|
* <div class="split-first">…</div>
|
|
* <div class="split-divider"></div>
|
|
* <div class="split-second">…</div>
|
|
* </div>
|
|
*
|
|
* WHAT WAS LEFT OUT, and why — measured across all four consumers:
|
|
* `resizable={false}` passed by nobody, ever. A page that wants a fixed
|
|
* split omits the divider element.
|
|
* `anchor="second"` kept: one real user (mpr App.vue:199), three lines.
|
|
* px mode kept: mpr uses it, mts does not.
|
|
*
|
|
* The SFC's `> :deep(*) { width:100%; height:100% }` becomes a plain child
|
|
* selector here. Same rule, no scoping compiler.
|
|
*/
|
|
|
|
.split-pane {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.split-pane.horizontal {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.split-pane.vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.split-first,
|
|
.split-second {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Children fill their pane. */
|
|
.split-first > *,
|
|
.split-second > * {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.split-divider {
|
|
flex-shrink: 0;
|
|
background: transparent;
|
|
transition: background 0.15s;
|
|
touch-action: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.split-divider:hover,
|
|
.split-divider.dragging {
|
|
background: var(--text-dim);
|
|
}
|
|
|
|
.split-pane.horizontal > .split-divider {
|
|
width: 4px;
|
|
cursor: col-resize;
|
|
margin: 0 -2px;
|
|
}
|
|
|
|
.split-pane.vertical > .split-divider {
|
|
height: 4px;
|
|
cursor: row-resize;
|
|
margin: -2px 0;
|
|
}
|