41 lines
1,013 B
CSS
41 lines
1,013 B
CSS
|
@layer components {
|
||
|
|
.secondary-nav {
|
||
|
|
@apply border-line mt-sai mb-sai bg-surface-more z-nav max-h-screen min-h-0 w-60 shrink-0 flex-col gap-1 border-r border-solid;
|
||
|
|
|
||
|
|
.secondary-nav__nav-item:hover {
|
||
|
|
@apply bg-surface-less text-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondary-nav__nav-item--active {
|
||
|
|
@apply bg-primary text-primary-content;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
@apply bg-primary-bold text-primary-content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-fl-theme="clay"] .secondary-nav {
|
||
|
|
.secondary-nav__nav-item:hover {
|
||
|
|
background-color: color-mix(in srgb, var(--primary) 30%, transparent);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: var(--shadow-sm);
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondary-nav__nav-item--active {
|
||
|
|
background-color: var(--primary);
|
||
|
|
box-shadow: var(--shadow-sm), var(--shadow-inset);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: var(--content);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondary-nav__nav-item:active {
|
||
|
|
background-color: color-mix(in srgb, var(--primary) 50%, transparent);
|
||
|
|
transform: translateY(1px);
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|