Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix leaky styles #2775

Open
wants to merge 1 commit into
base: v3
Choose a base branch
from
Open

Fix leaky styles #2775

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 8 additions & 9 deletions packages/nextra-theme-docs/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,18 @@ body {
@apply _w-full dark:_text-gray-100;
}

a,
summary,
button,
input,
[tabindex]:not([tabindex='-1']) {
.nextra-focusable,
.nextra-landmark a,
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These classnames I am not particular about; rename to anything else if they are more consistent with existing styles

.nextra-landmark button,
.nextra-landmark input {
@apply _outline-none;
&:focus-visible {
@apply _outline-none;
@apply _ring-2 _ring-primary-200 _ring-offset-1 _ring-offset-primary-300 dark:_ring-primary-800 dark:_ring-offset-primary-700;
}
}

a,
summary {
.nextra-landmark a {
@apply _rounded;
}

Expand Down Expand Up @@ -82,7 +81,7 @@ summary {
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
article:before,
article::before,
.nextra-sidebar-container,
.nextra-sidebar-container.open,
body.resizing .nextra-sidebar-container {
Expand All @@ -91,7 +90,7 @@ summary {
}

/* Content Typography */
summary::-webkit-details-marker {
.nextra-summary::-webkit-details-marker {
@apply _hidden;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/nextra-theme-docs/src/components/back-to-top.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function BackToTop({
onClick={scrollToTop}
disabled={hidden}
className={cn(
'_flex _items-center _gap-1.5 _transition _opacity-100 disabled:_opacity-0',
'_flex _items-center _gap-1.5 _transition _opacity-100 disabled:_opacity-0 nextra-focusable',
className
)}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/nextra-theme-docs/src/components/banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function Banner(): ReactElement | null {
<button
type="button"
aria-label="Dismiss banner"
className="_w-8 _h-8 _opacity-80 hover:_opacity-100"
className="_w-8 _h-8 _opacity-80 hover:_opacity-100 nextra-focusable"
onClick={() => {
try {
localStorage.setItem(banner.key, '0')
Expand Down
2 changes: 1 addition & 1 deletion packages/nextra-theme-docs/src/components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { LocaleSwitch } from './locale-switch'
export function Footer({ menu }: { menu?: boolean }): ReactElement {
const themeConfig = useThemeConfig()
return (
<footer className="_bg-gray-100 _pb-[env(safe-area-inset-bottom)] dark:_bg-neutral-900 print:_bg-transparent">
<footer className="_bg-gray-100 _pb-[env(safe-area-inset-bottom)] dark:_bg-neutral-900 print:_bg-transparent nextra-landmark">
<div
className={cn(
'_mx-auto _flex _max-w-[90rem] _gap-2 _py-2 _px-4',
Expand Down
6 changes: 3 additions & 3 deletions packages/nextra-theme-docs/src/components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function NavbarMenu({
className={cn(
classes.link,
classes.inactive,
'max-md:_hidden _items-center _whitespace-nowrap _rounded _flex _gap-1'
'max-md:_hidden _items-center _whitespace-nowrap _rounded _flex _gap-1 nextra-focusable'
)}
>
{children}
Expand Down Expand Up @@ -91,7 +91,7 @@ export function Navbar({ items }: NavBarProps): ReactElement {
return (
<div className="nextra-nav-container _sticky _top-0 _z-20 _w-full _bg-transparent print:_hidden">
<div className="nextra-nav-container-blur" />
<nav className="_mx-auto _flex _h-[var(--nextra-navbar-height)] _max-w-[90rem] _items-center _justify-end _gap-4 _pl-[max(env(safe-area-inset-left),1.5rem)] _pr-[max(env(safe-area-inset-right),1.5rem)]">
<nav className="_mx-auto _flex _h-[var(--nextra-navbar-height)] _max-w-[90rem] _items-center _justify-end _gap-4 _pl-[max(env(safe-area-inset-left),1.5rem)] _pr-[max(env(safe-area-inset-right),1.5rem)] nextra-landmark">
{themeConfig.logoLink ? (
<NextLink
href={
Expand Down Expand Up @@ -175,7 +175,7 @@ export function Navbar({ items }: NavBarProps): ReactElement {
<button
type="button"
aria-label="Menu"
className="nextra-hamburger _rounded active:_bg-gray-400/20 md:_hidden"
className="nextra-hamburger _rounded active:_bg-gray-400/20 md:_hidden nextra-focusable"
onClick={() => setMenu(!menu)}
>
<MenuIcon className={cn({ open: menu })} />
Expand Down
2 changes: 1 addition & 1 deletion packages/nextra-theme-docs/src/components/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function Select({
ref={trigger}
title={title}
className={cn(
'_h-7 _rounded-md _px-2 _text-left _text-xs _font-medium _text-gray-600 _transition-colors dark:_text-gray-400',
'_h-7 _rounded-md _px-2 _text-left _text-xs _font-medium _text-gray-600 _transition-colors dark:_text-gray-400 nextra-focusable',
open
? '_bg-gray-200 _text-gray-900 dark:_bg-primary-100/10 dark:_text-gray-50'
: 'hover:_bg-gray-100 hover:_text-gray-900 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50',
Expand Down
4 changes: 2 additions & 2 deletions packages/nextra-theme-docs/src/components/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ function File({
href={`#${id}`}
className={cn(
classes.link,
'_flex _gap-2 before:_opacity-25 before:_content-["#"]',
'_flex _gap-2 before:_opacity-25 before:_content-["#"] nextra-focusable',
activeAnchor[id]?.isActive ? classes.active : classes.inactive
)}
onClick={() => {
Expand Down Expand Up @@ -469,7 +469,7 @@ export function Sidebar({
{themeConfig.sidebar.toggleButton && (
<button
title={showSidebar ? 'Hide sidebar' : 'Show sidebar'}
className="max-md:_hidden _h-7 _rounded-md _transition-colors _text-gray-600 dark:_text-gray-400 _px-2 hover:_bg-gray-100 hover:_text-gray-900 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50"
className="max-md:_hidden _h-7 _rounded-md _transition-colors _text-gray-600 dark:_text-gray-400 _px-2 hover:_bg-gray-100 hover:_text-gray-900 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 nextra-focusable"
onClick={() => {
setSidebar(!showSidebar)
setToggleAnimation(true)
Expand Down
2 changes: 1 addition & 1 deletion packages/nextra-theme-docs/src/components/toc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
activeAnchor[id]?.isActive
? '_text-primary-600 contrast-more:!_text-primary-600'
: '_text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300',
'contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _w-full _break-words'
'contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _w-full _break-words nextra-focusable'
)}
>
{removeLinks(value)}
Expand Down
6 changes: 3 additions & 3 deletions packages/nextra-theme-docs/src/mdx-components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const createHeading = (
<a
href={`#${id}`}
id={id}
className="subheading-anchor"
className="subheading-anchor nextra-focusable"
aria-label="Permalink for this section"
ref={obRef}
/>
Expand Down Expand Up @@ -151,7 +151,7 @@ function Summary({
}: ComponentProps<'summary'>): ReactElement {
return (
<summary
className="_flex _items-center _cursor-pointer _p-1 _transition-colors hover:_bg-gray-100 dark:hover:_bg-neutral-800"
className="_flex _items-center _cursor-pointer _p-1 _transition-colors hover:_bg-gray-100 dark:hover:_bg-neutral-800 nextra-summary nextra-focusable"
{...props}
>
{children}
Expand All @@ -174,7 +174,7 @@ export const Link = ({ href = '', className, ...props }: AnchorProps) => (
href={href}
newWindow={EXTERNAL_HREF_REGEX.test(href)}
className={cn(
'_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]',
'_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font] nextra-focusable',
className
)}
{...props}
Expand Down