Skip to content

Commit 0824de0

Browse files
atomiksatomiks
authored
[menu] Optimize submenu hover pointer-events (#4231)
1 parent e53d7c6 commit 0824de0

File tree

8 files changed

+652
-33
lines changed

8 files changed

+652
-33
lines changed

‎docs/src/app/(private)/experiments/menu/pointer-events-scope.module.css‎

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
.root {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 1rem;
5+
max-width: 1200px;
6+
}
7+
8+
.controls {
9+
display: flex;
10+
flex-wrap: wrap;
11+
gap: 0.75rem 1rem;
12+
align-items: end;
13+
padding: 0.75rem;
14+
border: 1px solid var(--color-gray-200);
15+
border-radius: 0.5rem;
16+
}
17+
18+
.field {
19+
display: flex;
20+
flex-direction: column;
21+
gap: 0.35rem;
22+
min-width: 8rem;
23+
}
24+
25+
.fieldLabel {
26+
font-size: 0.8125rem;
27+
color: var(--color-gray-700);
28+
}
29+
30+
.modeGroup {
31+
display: inline-flex;
32+
border: 1px solid var(--color-gray-300);
33+
border-radius: 0.375rem;
34+
overflow: hidden;
35+
}
36+
37+
.modeButton {
38+
box-sizing: border-box;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
height: 2.5rem;
43+
margin: 0;
44+
outline: 0;
45+
border: 0;
46+
border-inline-end: 1px solid var(--color-gray-300);
47+
background: var(--color-gray-50);
48+
color: var(--color-gray-900);
49+
font-family: inherit;
50+
font-size: 1rem;
51+
font-weight: 500;
52+
line-height: 1.5rem;
53+
padding: 0 0.875rem;
54+
user-select: none;
55+
}
56+
57+
.modeButton:last-child {
58+
border-inline-end: 0;
59+
}
60+
61+
.modeButton[data-active='true'] {
62+
background: var(--color-gray-900);
63+
color: var(--color-gray-50);
64+
}
65+
66+
.numberInput {
67+
border: 1px solid var(--color-gray-300);
68+
border-radius: 0.375rem;
69+
padding: 0.35rem 0.5rem;
70+
max-width: 7rem;
71+
}
72+
73+
.stats {
74+
display: flex;
75+
flex-wrap: wrap;
76+
gap: 0.75rem 1rem;
77+
font-size: 0.9rem;
78+
}
79+
80+
.stat {
81+
border: 1px solid var(--color-gray-200);
82+
border-radius: 0.375rem;
83+
padding: 0.45rem 0.6rem;
84+
background: var(--color-gray-50);
85+
}
86+
87+
.statusValue {
88+
display: inline-block;
89+
min-width: 6ch;
90+
}
91+
92+
.canvas {
93+
display: grid;
94+
grid-template-columns: 1fr minmax(360px, 42%);
95+
gap: 1rem;
96+
min-height: 70vh;
97+
}
98+
99+
.outside {
100+
position: relative;
101+
min-height: 60vh;
102+
max-height: 70vh;
103+
overflow: auto;
104+
border: 1px solid var(--color-gray-200);
105+
border-radius: 0.5rem;
106+
padding: 0.5rem;
107+
}
108+
109+
.outsideSurface {
110+
position: relative;
111+
min-height: 1650px;
112+
}
113+
114+
.hitTestMesh {
115+
position: absolute;
116+
inset: 0;
117+
z-index: 2;
118+
}
119+
120+
.hitTestNode {
121+
position: absolute;
122+
left: var(--mesh-left);
123+
top: var(--mesh-top);
124+
width: var(--mesh-width);
125+
height: var(--mesh-height);
126+
transform: translate(-50%, -50%) rotate(var(--mesh-rotate));
127+
border: 1px solid var(--color-gray-300);
128+
border-radius: 999px;
129+
background: rgb(17 24 39 / 4%);
130+
margin: 0;
131+
padding: 0;
132+
}
133+
134+
.hitTestNodeInner {
135+
display: grid;
136+
place-items: center;
137+
width: 100%;
138+
height: 100%;
139+
border-radius: inherit;
140+
outline: 1px solid rgb(17 24 39 / 10%);
141+
}
142+
143+
.hitTestNodeCore {
144+
width: 40%;
145+
height: 40%;
146+
border-radius: 999px;
147+
background: rgb(17 24 39 / 15%);
148+
}
149+
150+
.outsideGrid {
151+
position: relative;
152+
z-index: 1;
153+
display: grid;
154+
grid-template-columns: repeat(4, minmax(0, 1fr));
155+
gap: 0.35rem;
156+
}
157+
158+
.tile {
159+
border: 1px solid var(--color-gray-200);
160+
border-radius: 0.25rem;
161+
padding: 0.25rem 0.35rem;
162+
font-size: 0.75rem;
163+
color: var(--color-gray-700);
164+
background: white;
165+
}
166+
167+
.menuWrap {
168+
position: relative;
169+
border: 1px solid var(--color-gray-200);
170+
border-radius: 0.5rem;
171+
min-height: 60vh;
172+
max-height: 70vh;
173+
overflow: hidden;
174+
background: white;
175+
}
176+
177+
.menuHeader {
178+
padding: 0.65rem 0.8rem;
179+
border-bottom: 1px solid var(--color-gray-200);
180+
background: var(--color-gray-50);
181+
font-size: 0.9rem;
182+
}
183+
184+
.menuBody {
185+
padding: 0.75rem;
186+
}
187+
188+
.rootTrigger {
189+
box-sizing: border-box;
190+
display: flex;
191+
align-items: center;
192+
justify-content: center;
193+
height: 2.5rem;
194+
padding: 0 0.875rem;
195+
margin: 0;
196+
outline: 0;
197+
border: 1px solid var(--color-gray-200);
198+
border-radius: 0.375rem;
199+
background-color: var(--color-gray-50);
200+
font-family: inherit;
201+
font-size: 1rem;
202+
font-weight: 500;
203+
line-height: 1.5rem;
204+
color: var(--color-gray-900);
205+
user-select: none;
206+
}
207+
208+
@media (hover: hover) {
209+
.rootTrigger:hover:not([data-disabled]) {
210+
background-color: var(--color-gray-100);
211+
}
212+
}
213+
214+
.rootTrigger:active:not([data-disabled]) {
215+
background-color: var(--color-gray-200);
216+
box-shadow: inset 0 1px 3px var(--color-gray-200);
217+
border-top-color: var(--color-gray-300);
218+
}
219+
220+
.rootTrigger:focus-visible {
221+
outline: 2px solid var(--color-blue);
222+
outline-offset: -1px;
223+
}
224+
225+
.rootTrigger[data-disabled] {
226+
color: var(--color-gray-500);
227+
}
228+
229+
.positioner {
230+
z-index: 2;
231+
}
232+
233+
.menuRow {
234+
border-radius: 0.35rem;
235+
padding: 0.45rem 0.55rem;
236+
cursor: default;
237+
display: flex;
238+
justify-content: space-between;
239+
align-items: center;
240+
font-size: 0.875rem;
241+
user-select: none;
242+
}
243+
244+
.menuRow[data-highlighted],
245+
.menuRow[data-popup-open] {
246+
background: var(--color-gray-900);
247+
color: var(--color-gray-50);
248+
}
249+
250+
.popup {
251+
width: min(360px, 80vw);
252+
max-height: calc(70vh - 6rem);
253+
overflow: auto;
254+
border: 1px solid var(--color-gray-300);
255+
border-radius: 0.375rem;
256+
background: white;
257+
box-shadow:
258+
0 10px 15px -3px rgb(0 0 0 / 18%),
259+
0 4px 6px -4px rgb(0 0 0 / 15%);
260+
}
261+
262+
.submenuPopup {
263+
width: min(240px, 60vw);
264+
max-height: calc(70vh - 3.4rem);
265+
overflow: auto;
266+
border: 1px solid var(--color-gray-300);
267+
border-radius: 0.375rem;
268+
background: white;
269+
box-shadow:
270+
0 10px 15px -3px rgb(0 0 0 / 18%),
271+
0 4px 6px -4px rgb(0 0 0 / 15%);
272+
}
273+
274+
.popupTitle {
275+
font-size: 0.8rem;
276+
color: var(--color-gray-700);
277+
padding: 0.45rem 0.6rem;
278+
border-bottom: 1px solid var(--color-gray-200);
279+
background: var(--color-gray-50);
280+
}
281+
282+
.popupList {
283+
list-style: none;
284+
margin: 0;
285+
padding: 0.3rem;
286+
}
287+
288+
.popupItem {
289+
border-radius: 0.3rem;
290+
padding: 0.35rem 0.45rem;
291+
font-size: 0.8rem;
292+
}
293+
294+
.popupItem:hover {
295+
background: var(--color-gray-100);
296+
}
297+
298+
@media (max-width: 980px) {
299+
.canvas {
300+
grid-template-columns: 1fr;
301+
}
302+
}

0 commit comments

Comments
 (0)