novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: remove red focus rings from navigation header

Browse Source
This commit is contained in:
张翔
2026-02-27 11:46:07 +08:00
parent 5838b87700
commit f70d8dace9
1 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/header.tsx
+4 -6
View File
@@ -80,7 +80,7 @@ export function Header() {
<div className="flex items-center justify-between h-16">
<Link
href="/"
className="flex items-center group focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2 rounded-sm"
className="flex items-center group"
>
<img
src="/logo.svg"
@@ -97,7 +97,6 @@ export function Header() {
className={`
relative px-3 py-1.5 text-sm font-medium
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2 rounded-sm
${isActive(item)
? 'text-[#1C1C1C]'
: 'text-[#3D3D3D] hover:text-[#1C1C1C]'
@@ -109,7 +108,7 @@ export function Header() {
{isActive(item) && (
<motion.span
layoutId="activeNav"
className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#C41E3A] rounded-full"
className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#1C1C1C] rounded-full"
transition={{ type: "spring", stiffness: 380, damping: 30 }}
/>
)}
@@ -127,7 +126,7 @@ export function Header() {
</div>
<button
className="md:hidden p-2 -mr-2 text-[#3D3D3D] hover:text-[#1C1C1C] transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2 rounded-sm"
className="md:hidden p-2 -mr-2 text-[#3D3D3D] hover:text-[#1C1C1C] transition-colors"
onClick={() => setIsOpen(!isOpen)}
onKeyDown={handleKeyDown}
aria-expanded={isOpen}
@@ -179,9 +178,8 @@ export function Header() {
block px-4 py-3 text-base font-medium
transition-all duration-300
border-l-2
focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-inset
${isActive(item)
? 'text-[#1C1C1C] border-[#C41E3A] bg-[#FEF2F4]'
? 'text-[#1C1C1C] border-[#1C1C1C] bg-[#F5F5F5]'
: 'text-[#3D3D3D] border-transparent hover:text-[#1C1C1C] hover:bg-[#F5F5F5]'
}
`}