Skip to content

Commit 26f6133

Browse files
authored
[DevOverlay] fix: restore pagination style (vercel#74296)
### Why? This PR restores the pagination style, which was accidentally omitted at vercel#74097. #### Before ![Screenshot 2024-12-25 at 8.37.33 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/dQEaKpg78raP6UllhQTZ/4c164615-3f55-4423-9049-7e1827b454be.png) #### After ![Screenshot 2024-12-25 at 8.37.07 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/dQEaKpg78raP6UllhQTZ/c3693982-7592-40c5-bf46-bf9c0379af22.png)
1 parent cefc220 commit 26f6133

File tree

2 files changed

+71
-0
lines changed
  • packages/next/src/client/components/react-dev-overlay/_experimental/internal

2 files changed

+71
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { noop as css } from '../../../helpers/noop-template'
2+
3+
const styles = css`
4+
[data-nextjs-dialog-left-right] {
5+
display: flex;
6+
flex-direction: row;
7+
align-content: center;
8+
align-items: center;
9+
justify-content: space-between;
10+
}
11+
[data-nextjs-dialog-left-right] > nav {
12+
flex: 1;
13+
display: flex;
14+
align-items: center;
15+
margin-right: var(--size-gap);
16+
}
17+
[data-nextjs-dialog-left-right] > nav > button {
18+
display: inline-flex;
19+
align-items: center;
20+
justify-content: center;
21+
22+
width: calc(var(--size-gap-double) + var(--size-gap));
23+
height: calc(var(--size-gap-double) + var(--size-gap));
24+
font-size: 0;
25+
border: none;
26+
background-color: rgba(255, 85, 85, 0.1);
27+
color: var(--color-ansi-red);
28+
cursor: pointer;
29+
transition: background-color 0.25s ease;
30+
}
31+
[data-nextjs-dialog-left-right] > nav > button > svg {
32+
width: auto;
33+
height: calc(var(--size-gap) + var(--size-gap-half));
34+
}
35+
[data-nextjs-dialog-left-right] > nav > button:hover {
36+
background-color: rgba(255, 85, 85, 0.2);
37+
}
38+
[data-nextjs-dialog-left-right] > nav > button:disabled {
39+
background-color: rgba(255, 85, 85, 0.1);
40+
color: rgba(255, 85, 85, 0.4);
41+
cursor: not-allowed;
42+
}
43+
44+
[data-nextjs-dialog-left-right] > nav > button:first-of-type {
45+
border-radius: var(--size-gap-half) 0 0 var(--size-gap-half);
46+
margin-right: 1px;
47+
}
48+
[data-nextjs-dialog-left-right] > nav > button:last-of-type {
49+
border-radius: 0 var(--size-gap-half) var(--size-gap-half) 0;
50+
}
51+
52+
[data-nextjs-dialog-left-right] > button:last-of-type {
53+
border: 0;
54+
padding: 0;
55+
56+
background-color: transparent;
57+
appearance: none;
58+
59+
opacity: 0.4;
60+
transition: opacity 0.25s ease;
61+
62+
color: var(--color-font);
63+
}
64+
[data-nextjs-dialog-left-right] > button:last-of-type:hover {
65+
opacity: 0.7;
66+
}
67+
`
68+
69+
export { styles }

packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { styles as codeFrame } from '../components/CodeFrame/styles'
22
import { styles as dialog } from '../components/Dialog'
3+
import { styles as pagination } from '../components/Errors/ErrorPagination/styles'
34
import { styles as overlay } from '../components/Overlay/styles'
45
import { styles as terminal } from '../components/Terminal/styles'
56
import { styles as toast } from '../components/Toast'
@@ -16,6 +17,7 @@ export function ComponentStyles() {
1617
${overlay}
1718
${toast}
1819
${dialog}
20+
${pagination}
1921
${codeFrame}
2022
${terminal}
2123
${buildErrorStyles}

0 commit comments

Comments
 (0)