1 | import {
|
2 | component_styles_default
|
3 | } from "./chunk.7IGWJVQF.js";
|
4 | import {
|
5 | r
|
6 | } from "./chunk.WWAD5WF4.js";
|
7 |
|
8 |
|
9 | var split_panel_styles_default = r`
|
10 | ${component_styles_default}
|
11 |
|
12 | :host {
|
13 | --divider-width: 4px;
|
14 | --divider-hit-area: 12px;
|
15 | --min: 0%;
|
16 | --max: 100%;
|
17 |
|
18 | display: grid;
|
19 | }
|
20 |
|
21 | .start,
|
22 | .end {
|
23 | overflow: hidden;
|
24 | }
|
25 |
|
26 | .divider {
|
27 | flex: 0 0 var(--divider-width);
|
28 | display: flex;
|
29 | position: relative;
|
30 | align-items: center;
|
31 | justify-content: center;
|
32 | background-color: var(--sl-color-neutral-200);
|
33 | color: var(--sl-color-neutral-900);
|
34 | z-index: 1;
|
35 | }
|
36 |
|
37 | .divider:focus {
|
38 | outline: none;
|
39 | }
|
40 |
|
41 | :host(:not([disabled])) .divider:focus-visible {
|
42 | background-color: var(--sl-color-primary-600);
|
43 | color: var(--sl-color-neutral-0);
|
44 | }
|
45 |
|
46 | :host([disabled]) .divider {
|
47 | cursor: not-allowed;
|
48 | }
|
49 |
|
50 | /* Horizontal */
|
51 | :host(:not([vertical], [disabled])) .divider {
|
52 | cursor: col-resize;
|
53 | }
|
54 |
|
55 | :host(:not([vertical])) .divider::after {
|
56 | display: flex;
|
57 | content: '';
|
58 | position: absolute;
|
59 | height: 100%;
|
60 | left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
|
61 | width: var(--divider-hit-area);
|
62 | }
|
63 |
|
64 | /* Vertical */
|
65 | :host([vertical]) {
|
66 | flex-direction: column;
|
67 | }
|
68 |
|
69 | :host([vertical]:not([disabled])) .divider {
|
70 | cursor: row-resize;
|
71 | }
|
72 |
|
73 | :host([vertical]) .divider::after {
|
74 | content: '';
|
75 | position: absolute;
|
76 | width: 100%;
|
77 | top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
|
78 | height: var(--divider-hit-area);
|
79 | }
|
80 | `;
|
81 |
|
82 | export {
|
83 | split_panel_styles_default
|
84 | };
|