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

move styles for search results and mobile menu #1710

Merged
merged 21 commits into from
Oct 11, 2024
Merged

move styles for search results and mobile menu #1710

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
ba8f826
Add PRODUCTS_MENU_LIST
hasparus Oct 7, 2024
2d1505e
Replace --hive-meta-label-color and --hive-meta-lettermark-bg with Ta…
hasparus Oct 7, 2024
26b0b56
Make HiveNavigation better on screens between 1024px to 1170px
hasparus Oct 7, 2024
f9f125a
Fix styles for mobiles after Headless UI in Nextra
hasparus Oct 7, 2024
70974ef
Move styles for .nextra-sidebar-container
hasparus Oct 7, 2024
6e807a9
Fix a path
hasparus Oct 7, 2024
a6a1424
Move kbd style
hasparus Oct 7, 2024
de76804
Move styles
hasparus Oct 7, 2024
82f45b8
Add an absolute path to tailwind.config.ts
hasparus Oct 7, 2024
afd94bd
Revert "Add an absolute path to tailwind.config.ts"
hasparus Oct 7, 2024
ef724a1
Stop bundling styles to let the website have full control over colors
hasparus Oct 7, 2024
cf0584d
Add a missing type to PRODUCTS_MENU_LIST
hasparus Oct 7, 2024
3956402
Bump the margin between logo and navigation menu to 16px
hasparus Oct 7, 2024
258f43b
Fix a type error
hasparus Oct 7, 2024
679f5c5
Rename .hive-search-results to .nextra-search-results to stop using m…
hasparus Oct 9, 2024
fb5a81b
Update Nextra
hasparus Oct 9, 2024
7a49a4f
Update nextra-theme-docs
hasparus Oct 9, 2024
144026e
Bump Nextra to 3.0.8
hasparus Oct 9, 2024
a766c15
Remove redundant style
hasparus Oct 9, 2024
7ebe11f
Name and export withGuildDocs options to emit next.config.d.mts again
hasparus Oct 9, 2024
3eb4ced
Cascade layers (#1712)
hasparus Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/components/src/components/hive-navigation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,12 +146,12 @@ export function HiveNavigation({
{renderSlot(Search, {
// The && and :is(x) selector bump the specificity to 0-2-2 to override Nextra styles.
className: cn(
'relative ml-4 [&&_input:is(input)]:h-[48px] [&&_input:is(input)]:bg-white [&&_input:is(input)]:dark:bg-inherit [&&_input:is(input)]:rounded-lg [&&_input:is(input)]:border-green-200 [&&_input:is(input)]:pl-4 [&&_input:is(input)]:pr-8 [&&_kbd:is(kbd)]:absolute [&&_kbd:is(kbd)]:right-4 [&&_kbd:is(kbd)]:top-1/2 [&&_kbd:is(kbd)]:-translate-y-1/2 [&&_kbd:is(kbd)]:border-none [&&_kbd:is(kbd)]:bg-green-200 [&&_input:is(input)]:border dark:[&&_input:is(input)]:border-neutral-800 dark:[&&_kbd:is(kbd)]:bg-neutral-700 [&&_:is(input,kbd):is(input,kbd)]:text-green-700 dark:[&&_:is(input,kbd):is(input,kbd)]:text-neutral-300 [&&_kbd:is(kbd)]:my-0',
'relative ml-4 [&&_input:is(input)]:h-[48px] [&&_input:is(input)]:bg-white [&&_input:is(input)]:dark:bg-inherit [&&_input:is(input)]:rounded-lg [&&_input:is(input)]:border-green-200 [&&_input:is(input)]:pl-4 [&&_input:is(input)]:pr-8 [&&_kbd:is(kbd)]:absolute [&&_kbd:is(kbd)]:right-4 [&&_kbd:is(kbd)]:top-1/2 [&&_kbd:is(kbd)]:-translate-y-1/2 [&&_kbd:is(kbd)]:border-none [&&_kbd:is(kbd)]:bg-green-200 [&&_input:is(input)]:border dark:[&&_input:is(input)]:border-neutral-800 dark:[&&_kbd:is(kbd)]:bg-neutral-700 [&&_:is(input,kbd):is(input,kbd)]:text-green-700 dark:[&&_:is(input,kbd):is(input,kbd)]:text-neutral-300 [&&_kbd:is(kbd)]:my-0 [&&_input]:!w-full basis-64',
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

basically, the searchbox doesn't shrink anymore, and this should make it work

Copy link
Collaborator

Choose a reason for hiding this comment

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

why do you use && and not &?

Copy link
Collaborator

Choose a reason for hiding this comment

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

also, what is the purpose of input:is(input)? higher priority? use !important

Copy link
Collaborator

Choose a reason for hiding this comment

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

or import nextra styles as layer https://nextra.site/docs/guide/advanced/customize-the-cascade-layers

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yeah, specificity. I'm definitely moving to importing nextra styles as layer. This is a good idea.

Copy link
Collaborator

Choose a reason for hiding this comment

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

It looks better now, but I think it will be even better to change search classes from packages/components/style.css ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I kinda wanna avoid putting global styles in the CSS if we can pass a className with Tailwind somewhere. Here the Search component is rendered by our HiveNavigation, so we can style it through the parent.

),
})}

<CallToAction
className="ml-4 [@media(max-width:1170px)]:hidden"
className="ml-4 max-lg:hidden"
variant="tertiary"
href="https://the-guild.dev/contact"
target="_blank"
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/hive-navigation/navigation-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const NavigationMenuList = forwardRef<
<NavigationMenuPrimitive.List
ref={ref}
className={cn(
'group flex flex-1 list-none items-center rounded-lg border-beige-200 px-3 lg:border dark:border-neutral-700',
'group flex flex-1 list-none items-center rounded-lg border-beige-200 px-1.5 lg:border lg:px-3 dark:border-neutral-700',
className,
)}
{...rest}
Expand Down
Loading