Skip to content

Commit 629af02

Browse files
tomkptomkp
committed
Improve SplitPane styling with CSS variables and dark mode support.
1 parent 312dde8 commit 629af02

1 file changed

Lines changed: 69 additions & 70 deletions

File tree

‎styles.css‎

Lines changed: 69 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,43 @@
22
* Default styles for react-split-pane v3
33
*
44
* You can import these styles or create your own.
5+
*
6+
* Customize by overriding CSS custom properties:
7+
*
8+
* .my-split-pane {
9+
* --split-pane-divider-size: 8px;
10+
* --split-pane-divider-color: #e0e0e0;
11+
* --split-pane-focus-color: #ff5722;
12+
* }
513
*/
614

15+
:root {
16+
/* Divider dimensions */
17+
--split-pane-divider-size: 11px;
18+
--split-pane-divider-hit-area: 5px;
19+
20+
/* Divider colors */
21+
--split-pane-divider-color: rgba(0, 0, 0, 0.05);
22+
--split-pane-divider-color-hover: rgba(0, 0, 0, 0.15);
23+
--split-pane-divider-border-hover: rgba(0, 0, 0, 0.1);
24+
25+
/* Focus state */
26+
--split-pane-focus-color: #2196f3;
27+
--split-pane-focus-bg: rgba(33, 150, 243, 0.1);
28+
29+
/* Animation */
30+
--split-pane-transition-duration: 0.2s;
31+
}
32+
33+
/* Dark theme defaults */
34+
@media (prefers-color-scheme: dark) {
35+
:root {
36+
--split-pane-divider-color: rgba(255, 255, 255, 0.05);
37+
--split-pane-divider-color-hover: rgba(255, 255, 255, 0.15);
38+
--split-pane-divider-border-hover: rgba(255, 255, 255, 0.1);
39+
}
40+
}
41+
742
.split-pane {
843
position: relative;
944
overflow: hidden;
@@ -19,99 +54,63 @@
1954
z-index: 1;
2055
box-sizing: border-box;
2156
background-clip: padding-box;
22-
transition: background-color 0.2s ease;
57+
background-color: var(--split-pane-divider-color);
58+
transition: background-color var(--split-pane-transition-duration) ease;
59+
}
60+
61+
.split-pane-divider:hover {
62+
background-color: var(--split-pane-divider-color-hover);
63+
}
64+
65+
.split-pane-divider:focus {
66+
outline: 2px solid var(--split-pane-focus-color);
67+
outline-offset: -2px;
68+
background-color: var(--split-pane-focus-bg);
69+
}
70+
71+
.split-pane-divider:focus:not(:focus-visible) {
72+
outline: none;
2373
}
2474

2575
/* Horizontal layout (vertical divider) */
2676
.split-pane-divider.horizontal {
27-
width: 11px;
28-
margin: 0 -5px;
29-
border-left: 5px solid transparent;
30-
border-right: 5px solid transparent;
77+
width: var(--split-pane-divider-size);
78+
margin: 0 calc(var(--split-pane-divider-hit-area) * -1);
79+
border-left: var(--split-pane-divider-hit-area) solid transparent;
80+
border-right: var(--split-pane-divider-hit-area) solid transparent;
3181
cursor: col-resize;
32-
background-color: rgba(0, 0, 0, 0.05);
3382
}
3483

3584
.split-pane-divider.horizontal:hover {
36-
background-color: rgba(0, 0, 0, 0.15);
37-
border-left-color: rgba(0, 0, 0, 0.1);
38-
border-right-color: rgba(0, 0, 0, 0.1);
39-
}
40-
41-
.split-pane-divider.horizontal:focus {
42-
outline: 2px solid #2196f3;
43-
outline-offset: -2px;
44-
background-color: rgba(33, 150, 243, 0.1);
85+
border-left-color: var(--split-pane-divider-border-hover);
86+
border-right-color: var(--split-pane-divider-border-hover);
4587
}
4688

4789
/* Vertical layout (horizontal divider) */
4890
.split-pane-divider.vertical {
49-
height: 11px;
50-
margin: -5px 0;
51-
border-top: 5px solid transparent;
52-
border-bottom: 5px solid transparent;
91+
height: var(--split-pane-divider-size);
92+
margin: calc(var(--split-pane-divider-hit-area) * -1) 0;
93+
border-top: var(--split-pane-divider-hit-area) solid transparent;
94+
border-bottom: var(--split-pane-divider-hit-area) solid transparent;
5395
cursor: row-resize;
54-
background-color: rgba(0, 0, 0, 0.05);
5596
}
5697

5798
.split-pane-divider.vertical:hover {
58-
background-color: rgba(0, 0, 0, 0.15);
59-
border-top-color: rgba(0, 0, 0, 0.1);
60-
border-bottom-color: rgba(0, 0, 0, 0.1);
61-
}
62-
63-
.split-pane-divider.vertical:focus {
64-
outline: 2px solid #2196f3;
65-
outline-offset: -2px;
66-
background-color: rgba(33, 150, 243, 0.1);
67-
}
68-
69-
/* Disabled state */
70-
.split-pane-divider:focus:not(:focus-visible) {
71-
outline: none;
72-
}
73-
74-
/* Dark theme support */
75-
@media (prefers-color-scheme: dark) {
76-
.split-pane-divider.horizontal,
77-
.split-pane-divider.vertical {
78-
background-color: rgba(255, 255, 255, 0.05);
79-
}
80-
81-
.split-pane-divider.horizontal:hover,
82-
.split-pane-divider.vertical:hover {
83-
background-color: rgba(255, 255, 255, 0.15);
84-
}
85-
86-
.split-pane-divider.horizontal:hover {
87-
border-left-color: rgba(255, 255, 255, 0.1);
88-
border-right-color: rgba(255, 255, 255, 0.1);
89-
}
90-
91-
.split-pane-divider.vertical:hover {
92-
border-top-color: rgba(255, 255, 255, 0.1);
93-
border-bottom-color: rgba(255, 255, 255, 0.1);
94-
}
99+
border-top-color: var(--split-pane-divider-border-hover);
100+
border-bottom-color: var(--split-pane-divider-border-hover);
95101
}
96102

97103
/* Minimal theme (1px divider) */
98-
.split-pane-divider.minimal.horizontal {
99-
width: 1px;
100-
margin: 0;
104+
.split-pane-divider.minimal {
105+
--split-pane-divider-size: 1px;
106+
--split-pane-divider-hit-area: 0px;
107+
--split-pane-divider-color: rgba(0, 0, 0, 0.12);
101108
border: none;
102-
background-color: rgba(0, 0, 0, 0.12);
103-
}
104-
105-
.split-pane-divider.minimal.vertical {
106-
height: 1px;
107109
margin: 0;
108-
border: none;
109-
background-color: rgba(0, 0, 0, 0.12);
110110
}
111111

112112
@media (prefers-color-scheme: dark) {
113-
.split-pane-divider.minimal.horizontal,
114-
.split-pane-divider.minimal.vertical {
115-
background-color: rgba(255, 255, 255, 0.12);
113+
.split-pane-divider.minimal {
114+
--split-pane-divider-color: rgba(255, 255, 255, 0.12);
116115
}
117116
}

0 commit comments

Comments
 (0)