@layer components { [data-coco][data-component="app-sidebar-nav-item"] { @apply bg-background-dark-2 text-content-dark-muted text-center no-underline transition-colors flex-none; @apply flex items-center justify-center px-4 w-full flex-col; &[href] { @apply hover:text-content-light-1; } .nav-item-icon { @apply block mx-auto transition-colors; @apply w-6 h-6; } .nav-item-label { @apply block font-semibold text-label-xxs transition-colors mt-0.5; } &.emphasised { .nav-item-icon { @apply sm:text-content-primary-inverse-vivid; } } &.active { @apply text-content-light-1; } &:hover { .nav-item-icon { @apply text-content-light-1; } &.emphasised .nav-item-icon { @apply sm:text-content-primary-inverse-vivid; } .nav-item-label { @apply text-content-light-1; } } @media screen(sm) { @apply sidebar-nav-item-vertical-condensed; } @media screen(lg) { @apply sidebar-nav-item-vertical; } @media screen(letterbox) { @apply sidebar-nav-item-vertical-condensed; } } .sidebar-nav-menu { @apply bg-content-dark-2 shadow-md sm:rounded-r-md overflow-hidden divide-y divide-content-dark-muted/20; [data-placement="bottom"] & { @apply rounded-b-md; } [data-placement="top"] & { @apply rounded-t-md; } .sidebar-nav-menu-select { @apply focus:ring-0 bg-transparent hover:bg-content-dark-1 active:bg-content-dark-1 border-0 text-content-light-2 w-full font-semibold; } .sidebar-nav-menu-item { @apply flex w-full items-center p-3 text-center no-underline bg-content-dark-2 text-content-dark-muted transition; } .coco-link.sidebar-nav-menu-item { @apply hover:bg-content-dark-1; } .sidebar-nav-menu-item-text { @apply truncate min-w-0 font-semibold text-content-light-1 transition-colors; } .sidebar-nav-menu-item-qualifier { @apply ml-auto text-label-sm flex-none pl-4; } @apply sidebar-nav-menu-large; @media screen(sm) { @apply sidebar-nav-menu-small; } @media screen(lg) { @apply sidebar-nav-menu-large; } @media screen(letterbox) { @apply sidebar-nav-menu-small; } } } @layer utilities { .sidebar-nav-item-vertical-condensed { @apply block px-2 py-4; &[href] { @apply hover:bg-content-dark-1; } .nav-item-icon { @apply w-7 h-7; } .nav-item-label { @apply mt-1 text-label-xxs; } &.active { @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1; } } .sidebar-nav-item-vertical { @apply py-5; &[href] { @apply hover:bg-content-dark-1; } .nav-item-icon { @apply w-8 h-8; } .nav-item-label { @apply text-label-xs; } &.active { @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1; } } .sidebar-nav-menu-small { .sidebar-nav-menu-select { @apply text-sm; } .sidebar-nav-menu-item { @apply text-sm; width: 240px; } } .sidebar-nav-menu-large { .sidebar-nav-menu-select { @apply text-base; } .sidebar-nav-menu-item { @apply text-base; width: 280px; } } }