Reactive-Resume/apps/client/components/build/RightSidebar/RightSidebar.module.scss

51 lines
1.1 KiB
SCSS

.container {
@apply h-screen w-[95vw] md:w-[70vw] lg:w-[50vw] xl:w-[30vw] 2xl:w-[28vw];
@apply bg-neutral-50 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-50;
@apply relative flex border-l-2 border-neutral-50/10;
nav {
@apply absolute inset-y-0 right-0;
@apply w-12 py-4 md:w-16 md:px-2;
@apply bg-neutral-100 shadow dark:bg-neutral-800;
@apply flex flex-col items-center justify-between;
hr {
@apply mt-2;
}
> div {
@apply grid gap-2;
}
.sections svg {
@apply opacity-75 transition-opacity hover:opacity-100;
}
}
main {
@apply overflow-y-scroll p-4;
@apply absolute inset-y-0 right-12 left-0 md:right-16;
> section {
@apply grid gap-4;
@apply pt-5 pb-7 first:pt-0;
@apply border-b border-neutral-900/10 last:border-b-0 dark:border-neutral-50/10;
hr {
@apply my-2;
}
}
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.footer {
@apply flex flex-col items-center justify-center gap-3 py-4;
@apply text-center text-xs leading-normal opacity-40;
}
}