50 lines
1.3 KiB
CSS
50 lines
1.3 KiB
CSS
|
@layer components {
|
||
|
|
.primary-nav {
|
||
|
|
@apply ml-sai mt-sai mb-sai z-popover bg-surface border-line relative isolate hidden w-14 shrink-0 flex-col border-r border-solid pt-2 md:flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-nav__nav-item {
|
||
|
|
@apply text-content relative mx-auto my-1 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full transition-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-nav__nav-item:hover,
|
||
|
|
.primary-nav__nav-item--active {
|
||
|
|
@apply bg-surface-more rounded-2xl;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-nav__nav-item::after {
|
||
|
|
content: "";
|
||
|
|
@apply absolute top-1/2 -left-1 h-0 w-1 -translate-y-1/2 rounded-r;
|
||
|
|
background-color: var(--content);
|
||
|
|
transition: height 150ms ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-nav__nav-item:hover::after {
|
||
|
|
@apply h-5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-nav__nav-item--active::after {
|
||
|
|
@apply h-10;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-fl-theme="clay"] .primary-nav {
|
||
|
|
.primary-nav__nav-item:hover {
|
||
|
|
background-color: color-mix(in srgb, var(--primary) 30%, transparent);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: var(--shadow-sm);
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-nav__nav-item--active {
|
||
|
|
background-color: var(--primary);
|
||
|
|
color: var(--primary-content);
|
||
|
|
box-shadow: var(--shadow-sm), var(--shadow-inset);
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-nav__nav-item:active {
|
||
|
|
background-color: color-mix(in srgb, var(--primary) 50%, transparent);
|
||
|
|
transform: translateY(1px);
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|