move styles for search results and mobile menu #1710
Conversation
|
| @@ -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', | |||
There was a problem hiding this comment.
basically, the searchbox doesn't shrink anymore, and this should make it work
There was a problem hiding this comment.
why do you use && and not &?
There was a problem hiding this comment.
also, what is the purpose of input:is(input)? higher priority? use !important
There was a problem hiding this comment.
or import nextra styles as layer https://nextra.site/docs/guide/advanced/customize-the-cascade-layers
There was a problem hiding this comment.
Yeah, specificity. I'm definitely moving to importing nextra styles as layer. This is a good idea.
There was a problem hiding this comment.
It looks better now, but I think it will be even better to change search classes from packages/components/style.css ?
There was a problem hiding this comment.
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.
hasparus
changed the title
This reverts commit 82f45b8.
packages/components/style.css
Outdated
| .light .hive-search-results .dark\:_text-gray-400:is(html[class~='dark'] *) { | ||
| @apply !text-green-800; | ||
| } | ||
|
|
||
| .light .hive-search-results .dark\:_text-gray-300:is(html[class~='dark'] *) { | ||
| @apply !text-green-1000; | ||
| } | ||
|
|
||
| .light .hive-search-results .dark\:_text-gray-300:is(html[class~='dark'] *) { | ||
| @apply !text-green-800; | ||
| } | ||
|
|
||
| .light .hive-search-results .dark\:_text-neutral-400:is(html[class~='dark'] *) { | ||
| color: rgb(107, 114, 128); | ||
| } | ||
|
|
||
| .light .hive-search-results, | ||
| .light .hive-search-results:is(html[class~='dark'] *) { | ||
| background-color: #fff; | ||
| border-color: #e5e7eb; | ||
| } | ||
|
|
||
| .light .hive-search-results .dark\:before\:_bg-neutral-800:is(html[class~='dark'] *):before { | ||
| background-color: rgb(229, 231, 235); | ||
| } |
There was a problem hiding this comment.
this is too overcomplicated and 100% will be broken in the future, import styles as layer https://nextra.site/docs/guide/advanced/customize-the-cascade-layers
hasparus
force-pushed
the
nextra-search-results
branch
from
017eb99
to
fb5a81b
Compare
hasparus
force-pushed
the
nextra-search-results
branch
from
1e8238e
to
144026e
Compare
Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
|
Merging because #1712 addressed the issues. |
Moving style overrides for Nextra's search results and mobile menu from Hive website in here, fixing what broke in the updates and trying to improve things I left messy when I was in a rush.
Made the mobile menu style overrides more civilized (as in, I don't use Tailwind classes in selectors anymore), the search results styles are still messy, but it should work.