Skip to content

Commit 6ed8a7a

Browse files
benfacebenface
committed
Fix nav styles in Firefox, which doesn’t support style queries
1 parent c042efe commit 6ed8a7a

File tree

1 file changed

+43
-14
lines changed

1 file changed

+43
-14
lines changed

‎website/src/components/Navigation.tsx‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -127,11 +127,16 @@ export const NavigationItem = ({
127127
`}
128128
/>
129129
<span
130+
/**
131+
* TODO: When all browsers support style queries, get rid of this and use `@style-[--docs-navigation-item-expanded=0]`
132+
* instead of `not-data-[expanded]` below.
133+
*/
134+
data-expanded={expanded || undefined}
130135
className={`
131136
w-px flex-1 bg-white/8 transition duration-150
132-
@style-[--docs-navigation-item-expanded=0]:@style-[--docs-navigation-item-last:1]:@style-[--docs-previous-navigation-item-last:1]:opacity-0
133-
@style-[--docs-navigation-item-expanded=0]:@style-[--docs-navigation-item-last:1]:@style-[--docs-previous-navigation-item-last:1]:delay-150
134-
@style-[--docs-navigation-item-expanded=0]:@style-[--docs-navigation-item-last:1]:@style-[--docs-previous-navigation-item-last:1]:duration-300
137+
@style-[--docs-navigation-item-last:1]:@style-[--docs-previous-navigation-item-last:1]:not-data-[expanded]:opacity-0
138+
@style-[--docs-navigation-item-last:1]:@style-[--docs-previous-navigation-item-last:1]:not-data-[expanded]:delay-150
139+
@style-[--docs-navigation-item-last:1]:@style-[--docs-previous-navigation-item-last:1]:not-data-[expanded]:duration-300
135140
`}
136141
/>
137142
</span>
@@ -173,7 +178,6 @@ export const NavigationItem = ({
173178
<NavigationList
174179
key={expanded ? 'expanded' : 'collapsed'}
175180
className={`
176-
[--docs-previous-navigation-item-expanded:var(--docs-navigation-item-expanded)]
177181
[--docs-previous-navigation-item-first:var(--docs-navigation-item-first)]
178182
[--docs-previous-navigation-item-last:var(--docs-navigation-item-last)]
179183
group-data-[depth=1]/navigation-list:ps-4
@@ -186,51 +190,76 @@ export const NavigationItem = ({
186190
<span className="absolute inset-y-0 start-3.5 z-10 w-[17px] translate-x-[0.5px] rtl:translate-x-[-0.5px]">
187191
<svg
188192
viewBox="0 0 17 17"
193+
/**
194+
* TODO: When all browsers support style queries, get rid of this and use `@style-[--docs-navigation-item-expanded=0]`
195+
* instead of `not-data-[expanded]` below.
196+
*/
197+
data-expanded={expanded || undefined}
189198
className={`
190199
absolute -top-2 start-0 z-10 aspect-square w-full origin-[start] bg-background fill-none stroke-white/8 transition duration-150
191200
safari:delay-150
192-
@style-[--docs-navigation-item-expanded=0]:opacity-0
193-
@style-[--docs-navigation-item-expanded=0]:safari:delay-0
201+
not-data-[expanded]:opacity-0
202+
not-data-[expanded]:safari:delay-0
194203
rtl:-scale-x-100
195204
`}
196205
>
197206
<path
198207
d="M 0.5 0 C 0.5 13, 16.5 4, 16.5 17"
208+
/**
209+
* TODO: When all browsers support style queries, get rid of this and use `@style-[--docs-navigation-item-expanded=1]`
210+
* instead of `data-[expanded]` below.
211+
*/
212+
data-expanded={expanded || undefined}
199213
className={`
200214
transition-all duration-150
201215
[d:path('M_0.5_0_C_0.5_13,_0.5_4,_0.5_17')]
202-
@style-[--docs-navigation-item-expanded=1]:delay-150
203-
@style-[--docs-navigation-item-expanded=1]:[d:path('M_0.5_0_C_0.5_13,_16.5_4,_16.5_17')]
216+
data-[expanded]:delay-150
217+
data-[expanded]:[d:path('M_0.5_0_C_0.5_13,_16.5_4,_16.5_17')]
204218
`}
205219
/>
206220
</svg>
207221
<span
222+
/**
223+
* TODO: When all browsers support style queries, get rid of this and use `@style-[--docs-navigation-item-expanded=1]`
224+
* instead of `data-[expanded]` below.
225+
*/
226+
data-expanded={expanded || undefined}
208227
className={`
209228
absolute inset-y-0 start-0 w-px bg-white/8 transition delay-75 duration-75
210-
@style-[--docs-navigation-item-expanded=1]:opacity-0
211-
@style-[--docs-navigation-item-expanded=1]:delay-150
229+
data-[expanded]:opacity-0
230+
data-[expanded]:delay-150
212231
`}
213232
/>
214233
<svg
215234
viewBox="0 0 17 17"
235+
/**
236+
* TODO: When all browsers support style queries, get rid of this and use `@style-[--docs-navigation-item-expanded=0]`
237+
* instead of `not-data-[expanded]` below.
238+
*/
239+
data-expanded={expanded || undefined}
216240
className={`
217241
absolute -bottom-2 start-0 aspect-square w-full origin-[start] bg-background fill-none stroke-white/8 transition duration-150
218242
safari:delay-150
243+
not-data-[expanded]:opacity-0
244+
not-data-[expanded]:safari:delay-0
219245
nearest-group-[:has(ul:not(:scope_ul_*,[inert]_*)>li:last-child[data-expanded])]/navigation-item:opacity-0
220246
nearest-group-[:has(ul:not(:scope_ul_*,[inert]_*)>li:last-child[data-expanded])]/navigation-item:delay-150
221-
@style-[--docs-navigation-item-expanded=0]:opacity-0
222247
@style-[--docs-navigation-item-last=1]:opacity-0
223-
@style-[--docs-navigation-item-expanded=0]:safari:delay-0
224248
rtl:-scale-x-100
225249
`}
226250
>
227251
<path
228252
d="M 16.5 0 C 16.5 13, 0.5 4, 0.5 17"
253+
/**
254+
* TODO: When all browsers support style queries, get rid of this and use `@style-[--docs-navigation-item-expanded=1]`
255+
* instead of `data-[expanded]` below.
256+
*/
257+
data-expanded={expanded || undefined}
229258
className={`
230259
transition-all duration-150
231260
[d:path('M_0.5_0_C_0.5_13,_0.5_4,_0.5_17')]
232-
@style-[--docs-navigation-item-expanded=1]:delay-150
233-
@style-[--docs-navigation-item-expanded=1]:[d:path('M_16.5_0_C_16.5_13,_0.5_4,_0.5_17')]
261+
data-[expanded]:delay-150
262+
data-[expanded]:[d:path('M_16.5_0_C_16.5_13,_0.5_4,_0.5_17')]
234263
`}
235264
/>
236265
</svg>

0 commit comments

Comments
 (0)