mirror of
https://github.com/vercel/commerce.git
synced 2025-05-18 07:26:59 +00:00
Search now with Geist Colors
This commit is contained in:
parent
f46891991e
commit
677bba308d
@ -23,6 +23,7 @@
|
||||
height: 100%;
|
||||
left: 30% !important;
|
||||
top: 30% !important;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.productName {
|
||||
|
@ -80,7 +80,7 @@ const CartItem = ({
|
||||
{...rest}
|
||||
>
|
||||
<div className="flex flex-row space-x-4 py-4">
|
||||
<div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer">
|
||||
<div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer z-0">
|
||||
<Link href={`/product/${item.path}`}>
|
||||
<Image
|
||||
onClick={() => closeSidebarIfPresent()}
|
||||
|
@ -1,11 +1,11 @@
|
||||
.root {
|
||||
@apply relative h-full flex flex-col min-h-full w-full;
|
||||
@apply relative h-full flex flex-col min-h-full w-full overflow-y-auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply sticky top-0 pl-4 py-4 pr-6
|
||||
flex items-center justify-between
|
||||
bg-accent-0 box-border w-full;
|
||||
bg-accent-0 box-border w-full z-10;
|
||||
min-height: 66px;
|
||||
}
|
||||
|
||||
|
@ -4,7 +4,6 @@
|
||||
|
||||
.sidebar {
|
||||
@apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
|
@ -96,7 +96,7 @@ export default function Search({
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleClick(e, 'categories')}
|
||||
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
|
||||
className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true"
|
||||
@ -126,7 +126,7 @@ export default function Search({
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
|
||||
<div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
|
||||
<div
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
@ -135,7 +135,7 @@ export default function Search({
|
||||
<ul>
|
||||
<li
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
|
||||
{
|
||||
underline: !activeCategory?.name,
|
||||
}
|
||||
@ -158,7 +158,7 @@ export default function Search({
|
||||
<li
|
||||
key={cat.path}
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
|
||||
{
|
||||
underline: activeCategory?.id === cat.id,
|
||||
}
|
||||
@ -194,7 +194,7 @@ export default function Search({
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleClick(e, 'brands')}
|
||||
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
|
||||
className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-8 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true"
|
||||
@ -224,7 +224,7 @@ export default function Search({
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
|
||||
<div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
|
||||
<div
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
@ -233,7 +233,7 @@ export default function Search({
|
||||
<ul>
|
||||
<li
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
|
||||
{
|
||||
underline: !activeBrand?.name,
|
||||
}
|
||||
@ -259,7 +259,7 @@ export default function Search({
|
||||
<li
|
||||
key={node.path}
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
|
||||
{
|
||||
// @ts-ignore Shopify - Fix this types
|
||||
underline: activeBrand?.entityId === node.entityId,
|
||||
@ -367,7 +367,7 @@ export default function Search({
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleClick(e, 'sort')}
|
||||
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
|
||||
className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true"
|
||||
@ -393,7 +393,7 @@ export default function Search({
|
||||
activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
|
||||
<div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
|
||||
<div
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
@ -402,7 +402,7 @@ export default function Search({
|
||||
<ul>
|
||||
<li
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
|
||||
{
|
||||
underline: !sort,
|
||||
}
|
||||
@ -423,7 +423,7 @@ export default function Search({
|
||||
<li
|
||||
key={key}
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
|
||||
'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
|
||||
{
|
||||
underline: sort === key,
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user