55 lines
1.4 KiB
CSS
55 lines
1.4 KiB
CSS
.f-navbar {
|
|
@apply w-full shadow-sm sticky top-0 z-50 bg-[--f-navbar-background] text-[--f-text];
|
|
}
|
|
|
|
.f-navbar-inner {
|
|
@apply max-w-7xl mx-auto flex items-center justify-between py-1 px-4;
|
|
}
|
|
|
|
.f-navbar-links {
|
|
@apply gap-6;
|
|
}
|
|
|
|
.f-navbar-link {
|
|
@apply text-base text-[--f-navbar-link] hover:text-[--f-navbar-link-hover] transition-colors;
|
|
}
|
|
|
|
.f-mobile-toggle {
|
|
@apply text-3xl p-2 text-[--f-text] relative z-[70];
|
|
}
|
|
|
|
.f-mobile-menu {
|
|
@apply fixed right-4 bg-[--f-background] border border-[--f-border-color] p-4 flex flex-col gap-2 opacity-0 scale-95 -translate-y-2 pointer-events-none transition duration-200 divide-y divide-[--f-border-color];
|
|
top: calc(var(--f-navbar-height, 84px) + 0.75rem);
|
|
width: 18rem;
|
|
max-width: calc(100vw - 2rem);
|
|
z-index: 70;
|
|
max-height: calc(100vh - var(--f-navbar-height, 64px) - 2rem);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.f-mobile-menu.open {
|
|
@apply opacity-100 scale-100 translate-y-0 pointer-events-auto;
|
|
}
|
|
|
|
.f-mobile-link {
|
|
@apply text-base py-2 px-2
|
|
text-[--f-navbar-link]
|
|
hover:text-[--f-navbar-link-hover]
|
|
hover:bg-black/5 dark:hover:bg-white/5
|
|
transition;
|
|
}
|
|
|
|
.f-navbar-logo {
|
|
@apply block;
|
|
height: 60px; /* testowo: 44px / 40px jak chcesz ciaśniej */
|
|
width: auto;
|
|
}
|
|
|
|
.f-mobile-backdrop {
|
|
@apply fixed inset-0 bg-black/30 opacity-0 pointer-events-none transition-opacity duration-200 z-[60];
|
|
}
|
|
|
|
.f-mobile-backdrop.open {
|
|
@apply opacity-100 pointer-events-auto;
|
|
} |