mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-05 20:14:41 +00:00
George Cushen
f4280ddb1c
BREAKING CHANGE Module paths moved to `github.com/HugoBlox/kit` with new names: - core `blox-tailwind` → `blox` - analytics → `analytics` - netlify → `integrations/netlify` - slides (reveal) → `slides` Update go.mod, module.yaml/params, scripts, tests, and v0.11 migration guide accordingly.
95 lines
2.7 KiB
CSS
95 lines
2.7 KiB
CSS
/* Match Tailwind lg (default 1024px): https://tailwindcss.com/docs/screens */
|
|
@media (max-width: 1024px) {
|
|
.hb-sidebar-container {
|
|
@apply fixed top-0 w-full bottom-0 z-[15] pt-[calc(var(--navbar-height))] overscroll-contain;
|
|
|
|
contain: layout style;
|
|
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
|
|
will-change: transform, opacity;
|
|
backface-visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.hb-sidebar-container {
|
|
@apply flex flex-col print:hidden lg:top-16 lg:shrink-0 lg:w-64 lg:self-start;
|
|
|
|
li > div {
|
|
@apply h-0;
|
|
}
|
|
|
|
li.open > div {
|
|
@apply h-auto pt-1;
|
|
}
|
|
|
|
li.open > a > span > svg > path {
|
|
@apply rotate-90;
|
|
}
|
|
}
|
|
|
|
.hb-sidebar-list {
|
|
@apply relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0;
|
|
}
|
|
|
|
.hb-sidebar-list::before {
|
|
background-color: var(--color-neutral-200);
|
|
}
|
|
|
|
.dark .hb-sidebar-list::before {
|
|
background-color: var(--color-neutral-700);
|
|
}
|
|
|
|
.hb-scrollbar {
|
|
@apply overflow-y-auto overflow-x-hidden p-4 grow;
|
|
|
|
scrollbar-width: thin;
|
|
scrollbar-color: oklch(55.55% 0 0 / 40%) transparent;
|
|
scrollbar-gutter: stable;
|
|
|
|
&::-webkit-scrollbar {
|
|
@apply w-3 h-3;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply rounded-[10px];
|
|
}
|
|
|
|
&:hover::-webkit-scrollbar-thumb {
|
|
border: 3px solid transparent;
|
|
background-color: var(--tw-shadow-color);
|
|
background-clip: content-box;
|
|
@apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
|
|
}
|
|
}
|
|
|
|
.hb-docs-link {
|
|
@apply flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50;
|
|
}
|
|
|
|
.dark .hb-docs-link:hover {
|
|
background-color: color-mix(in oklch, var(--color-primary-100) 5%, transparent);
|
|
}
|
|
|
|
.hb-sidebar-mobile-menu {
|
|
@apply [transition:background-color_0.5s_ease];
|
|
}
|
|
|
|
.hb-sidebar-mobile-toc {
|
|
@apply flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3;
|
|
}
|
|
|
|
.hb-sidebar-mobile-toc::before {
|
|
background-color: var(--color-neutral-200);
|
|
}
|
|
|
|
.dark .hb-sidebar-mobile-toc::before {
|
|
background-color: var(--color-neutral-800);
|
|
}
|
|
|
|
.hb-sidebar-custom-link {
|
|
@apply flex items-center justify-between gap-2 cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word];
|
|
}
|