优化垂直导航栏样式

This commit is contained in:
jxxghp
2025-07-09 19:53:14 +08:00
parent d57c8aa305
commit 79ae772367
3 changed files with 20 additions and 13 deletions
@@ -28,10 +28,9 @@ $header: ".layout-navbar";
// Scrolled styles for sticky navbar
@at-root {
/* This html selector with not selector is required when:
dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
/* Only apply scrolled styles when window is actually scrolled,
not when dialog is opened without scroll
*/
html.v-overlay-scroll-blocked .layout-navbar-fixed,
&.window-scrolled.layout-navbar-fixed {
#{$header} {
@@ -43,6 +42,21 @@ $header: ".layout-navbar";
@extend %blurry-bg;
}
}
/* ️ Ensure header styles are preserved when dialog is opened,
regardless of scroll state
*/
html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed {
#{$header} {
@extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
@extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
}
.navbar-blur#{$header} {
@extend %blurry-bg;
}
}
}
}
@@ -1,6 +1,5 @@
%blurry-bg {
position: relative;
background: rgba(var(--v-theme-background), 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
@media (width > 768px) {