UNPKG

1.64 kBJavaScriptView Raw
1import {
2 component_styles_default
3} from "./chunk.7IGWJVQF.js";
4import {
5 r
6} from "./chunk.WWAD5WF4.js";
7
8// src/components/split-panel/split-panel.styles.ts
9var 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
82export {
83 split_panel_styles_default
84};