移除活跃Tab下划线渐变动画
- 删除 .nav-tab-active CSS 及 ::after 伪元素 - 移除 NavLink 中的 nav-tab-active 类名 - 活跃Tab仅保留左侧彩色竖条 + 背景高亮 Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>> )
This commit is contained in:
@@ -227,9 +227,9 @@ export default function AdminLayout() {
|
|||||||
to="/admin"
|
to="/admin"
|
||||||
end
|
end
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
`flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 pb-1 text-sm transition-all duration-300 ${
|
`flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 text-sm transition-all duration-300 ${
|
||||||
isActive
|
isActive
|
||||||
? 'border-press bg-press-wash/60 font-medium text-press nav-tab-active'
|
? 'border-press bg-press-wash/60 font-medium text-press'
|
||||||
: 'border-transparent text-ink-500 hover:bg-paper-100 hover:text-ink-900'
|
: 'border-transparent text-ink-500 hover:bg-paper-100 hover:text-ink-900'
|
||||||
}`
|
}`
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,25 +16,6 @@
|
|||||||
text-shadow: 0.5px 0.5px 0 currentColor;
|
text-shadow: 0.5px 0.5px 0 currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 活跃Tab下划线渐变动画 */
|
|
||||||
.nav-tab-active {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.nav-tab-active::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
width: 0;
|
|
||||||
height: 2px;
|
|
||||||
background: linear-gradient(90deg, transparent, #17140F, transparent);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.nav-tab-active::after {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 页面内容横向轻扫+淡入 */
|
/* 页面内容横向轻扫+淡入 */
|
||||||
.page-content-enter {
|
.page-content-enter {
|
||||||
animation: pageSlideIn 0.3s ease-out;
|
animation: pageSlideIn 0.3s ease-out;
|
||||||
|
|||||||
Reference in New Issue
Block a user