diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/styles.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/styles.ts new file mode 100644 index 0000000000000..0ecfa01d62987 --- /dev/null +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/styles.ts @@ -0,0 +1,69 @@ +import { noop as css } from '../../../helpers/noop-template' + +const styles = css` + [data-nextjs-dialog-left-right] { + display: flex; + flex-direction: row; + align-content: center; + align-items: center; + justify-content: space-between; + } + [data-nextjs-dialog-left-right] > nav { + flex: 1; + display: flex; + align-items: center; + margin-right: var(--size-gap); + } + [data-nextjs-dialog-left-right] > nav > button { + display: inline-flex; + align-items: center; + justify-content: center; + + width: calc(var(--size-gap-double) + var(--size-gap)); + height: calc(var(--size-gap-double) + var(--size-gap)); + font-size: 0; + border: none; + background-color: rgba(255, 85, 85, 0.1); + color: var(--color-ansi-red); + cursor: pointer; + transition: background-color 0.25s ease; + } + [data-nextjs-dialog-left-right] > nav > button > svg { + width: auto; + height: calc(var(--size-gap) + var(--size-gap-half)); + } + [data-nextjs-dialog-left-right] > nav > button:hover { + background-color: rgba(255, 85, 85, 0.2); + } + [data-nextjs-dialog-left-right] > nav > button:disabled { + background-color: rgba(255, 85, 85, 0.1); + color: rgba(255, 85, 85, 0.4); + cursor: not-allowed; + } + + [data-nextjs-dialog-left-right] > nav > button:first-of-type { + border-radius: var(--size-gap-half) 0 0 var(--size-gap-half); + margin-right: 1px; + } + [data-nextjs-dialog-left-right] > nav > button:last-of-type { + border-radius: 0 var(--size-gap-half) var(--size-gap-half) 0; + } + + [data-nextjs-dialog-left-right] > button:last-of-type { + border: 0; + padding: 0; + + background-color: transparent; + appearance: none; + + opacity: 0.4; + transition: opacity 0.25s ease; + + color: var(--color-font); + } + [data-nextjs-dialog-left-right] > button:last-of-type:hover { + opacity: 0.7; + } +` + +export { styles } diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx index d278cc4f2e52c..894dc608f65ad 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx @@ -1,5 +1,6 @@ import { styles as codeFrame } from '../components/CodeFrame/styles' import { styles as dialog } from '../components/Dialog' +import { styles as pagination } from '../components/Errors/ErrorPagination/styles' import { styles as overlay } from '../components/Overlay/styles' import { styles as terminal } from '../components/Terminal/styles' import { styles as toast } from '../components/Toast' @@ -16,6 +17,7 @@ export function ComponentStyles() { ${overlay} ${toast} ${dialog} + ${pagination} ${codeFrame} ${terminal} ${buildErrorStyles}