mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 13:48:28 +00:00
Fixing #107
This commit is contained in:
Ronan Berder
+134
-130
@@ -381,42 +381,44 @@
|
||||
}
|
||||
|
||||
/* Button Group */
|
||||
.button-group {
|
||||
@apply inline-flex w-fit items-stretch isolate;
|
||||
|
||||
> *:focus-visible,
|
||||
> :is(.dropdown-menu, .popover, .select) > button:focus-visible {
|
||||
@apply relative z-10;
|
||||
}
|
||||
|
||||
> hr[role='separator'] {
|
||||
@apply w-0 h-auto self-stretch border border-input shrink-0 m-0;
|
||||
}
|
||||
|
||||
&:not([data-orientation='vertical']) {
|
||||
> *:not(:first-child),
|
||||
> :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
|
||||
@apply rounded-l-none border-l-0;
|
||||
@layer components {
|
||||
.button-group {
|
||||
@apply inline-flex w-fit items-stretch isolate;
|
||||
|
||||
> *:focus-visible,
|
||||
> :is(.dropdown-menu, .popover, .select) > button:focus-visible {
|
||||
@apply relative z-10;
|
||||
}
|
||||
> *:not(:last-child),
|
||||
> :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
|
||||
@apply rounded-r-none;
|
||||
}
|
||||
}
|
||||
&[data-orientation='vertical'] {
|
||||
@apply flex-col;
|
||||
|
||||
> hr[role='separator'] {
|
||||
@apply w-auto h-px;
|
||||
@apply w-0 h-auto self-stretch border border-input shrink-0 m-0;
|
||||
}
|
||||
|
||||
> *:not(:first-child),
|
||||
> :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
|
||||
@apply rounded-t-none border-t-0;
|
||||
}
|
||||
> *:not(:last-child),
|
||||
> :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
|
||||
@apply rounded-b-none;
|
||||
|
||||
&:not([data-orientation='vertical']) {
|
||||
> *:not(:first-child),
|
||||
> :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
|
||||
@apply rounded-l-none border-l-0;
|
||||
}
|
||||
> *:not(:last-child),
|
||||
> :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
|
||||
@apply rounded-r-none;
|
||||
}
|
||||
}
|
||||
&[data-orientation='vertical'] {
|
||||
@apply flex-col;
|
||||
|
||||
> hr[role='separator'] {
|
||||
@apply w-auto h-px;
|
||||
}
|
||||
|
||||
> *:not(:first-child),
|
||||
> :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
|
||||
@apply rounded-t-none border-t-0;
|
||||
}
|
||||
> *:not(:last-child),
|
||||
> :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
|
||||
@apply rounded-b-none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -988,119 +990,121 @@
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
&:not([data-sidebar-initialized]) {
|
||||
@apply max-md:hidden;
|
||||
}
|
||||
&:not([aria-hidden]),
|
||||
&[aria-hidden=false] {
|
||||
@apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
|
||||
}
|
||||
nav {
|
||||
@apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 z-50 transition-transform ease-in-out duration-300;
|
||||
}
|
||||
& + * {
|
||||
@apply transition-[margin] ease-in-out duration-300;
|
||||
}
|
||||
&:not([data-side]),
|
||||
&[data-side=left] {
|
||||
@layer components {
|
||||
.sidebar {
|
||||
&:not([data-sidebar-initialized]) {
|
||||
@apply max-md:hidden;
|
||||
}
|
||||
&:not([aria-hidden]),
|
||||
&[aria-hidden=false] {
|
||||
@apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
|
||||
}
|
||||
nav {
|
||||
@apply left-0 border-r;
|
||||
@apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 z-50 transition-transform ease-in-out duration-300;
|
||||
}
|
||||
& + * {
|
||||
@apply relative md:ml-(--sidebar-width);
|
||||
@apply transition-[margin] ease-in-out duration-300;
|
||||
}
|
||||
&[aria-hidden=true] {
|
||||
&:not([data-side]),
|
||||
&[data-side=left] {
|
||||
nav {
|
||||
@apply -translate-x-full;
|
||||
@apply left-0 border-r;
|
||||
}
|
||||
& + * {
|
||||
@apply md:ml-0;
|
||||
@apply relative md:ml-(--sidebar-width);
|
||||
}
|
||||
&[aria-hidden=true] {
|
||||
nav {
|
||||
@apply -translate-x-full;
|
||||
}
|
||||
& + * {
|
||||
@apply md:ml-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-side=right] {
|
||||
nav {
|
||||
@apply right-0 border-l;
|
||||
}
|
||||
& + * {
|
||||
@apply relative md:mr-(--sidebar-width);
|
||||
}
|
||||
&[aria-hidden=true] {
|
||||
nav {
|
||||
@apply translate-x-full;
|
||||
}
|
||||
& + * {
|
||||
@apply md:mr-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-side=right] {
|
||||
nav {
|
||||
@apply right-0 border-l;
|
||||
}
|
||||
& + * {
|
||||
@apply relative md:mr-(--sidebar-width);
|
||||
}
|
||||
&[aria-hidden=true] {
|
||||
nav {
|
||||
@apply translate-x-full;
|
||||
> header,
|
||||
> footer {
|
||||
@apply flex flex-col gap-2 p-2;
|
||||
}
|
||||
& + * {
|
||||
@apply md:mr-0;
|
||||
[role=separator] {
|
||||
@apply border-sidebar-border mx-2 w-auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
nav {
|
||||
> header,
|
||||
> footer {
|
||||
@apply flex flex-col gap-2 p-2;
|
||||
}
|
||||
[role=separator] {
|
||||
@apply border-sidebar-border mx-2 w-auto;
|
||||
}
|
||||
> section {
|
||||
@apply flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto;
|
||||
> section {
|
||||
@apply flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto;
|
||||
|
||||
> [role=group] {
|
||||
@apply relative flex w-full min-w-0 flex-col p-2;
|
||||
}
|
||||
h3 {
|
||||
@apply text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0;
|
||||
}
|
||||
ul {
|
||||
@apply flex w-full min-w-0 flex-col gap-1;
|
||||
|
||||
li {
|
||||
@apply relative;
|
||||
|
||||
> a,
|
||||
> details > summary {
|
||||
@apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&[aria-current=page]]:bg-sidebar-accent [&[aria-current=page]]:font-medium [&[aria-current=page]]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0;
|
||||
|
||||
&:not([data-variant]),
|
||||
&[data-variant=default] {
|
||||
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
&[data-variant=outline] {
|
||||
@apply bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))];
|
||||
}
|
||||
&:not([data-size]),
|
||||
&[data-size=default] {
|
||||
@apply h-8 text-sm;
|
||||
}
|
||||
&[data-size=sm] {
|
||||
@apply h-7 text-xs;
|
||||
}
|
||||
&[data-size=lg] {
|
||||
@apply h-12 text-sm group-data-[collapsible=icon]:p-0!;
|
||||
}
|
||||
}
|
||||
> details {
|
||||
&:not([open]) {
|
||||
> summary {
|
||||
&::after {
|
||||
@apply -rotate-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
> summary {
|
||||
&::after {
|
||||
@apply content-[''] block size-3.5 bg-primary ml-auto transition-transform ease-linear;
|
||||
@apply mask-[image:var(--chevron-down-icon)] mask-size-[1rem] mask-no-repeat mask-center;
|
||||
}
|
||||
}
|
||||
&::details-content {
|
||||
@apply px-3.5;
|
||||
}
|
||||
}
|
||||
> [role=group] {
|
||||
@apply relative flex w-full min-w-0 flex-col p-2;
|
||||
}
|
||||
h3 {
|
||||
@apply text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0;
|
||||
}
|
||||
ul {
|
||||
@apply border-sidebar-border flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 w-full;
|
||||
@apply flex w-full min-w-0 flex-col gap-1;
|
||||
|
||||
li {
|
||||
@apply relative;
|
||||
|
||||
> a,
|
||||
> details > summary {
|
||||
@apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&[aria-current=page]]:bg-sidebar-accent [&[aria-current=page]]:font-medium [&[aria-current=page]]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0;
|
||||
|
||||
&:not([data-variant]),
|
||||
&[data-variant=default] {
|
||||
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
&[data-variant=outline] {
|
||||
@apply bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))];
|
||||
}
|
||||
&:not([data-size]),
|
||||
&[data-size=default] {
|
||||
@apply h-8 text-sm;
|
||||
}
|
||||
&[data-size=sm] {
|
||||
@apply h-7 text-xs;
|
||||
}
|
||||
&[data-size=lg] {
|
||||
@apply h-12 text-sm group-data-[collapsible=icon]:p-0!;
|
||||
}
|
||||
}
|
||||
> details {
|
||||
&:not([open]) {
|
||||
> summary {
|
||||
&::after {
|
||||
@apply -rotate-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
> summary {
|
||||
&::after {
|
||||
@apply content-[''] block size-3.5 bg-primary ml-auto transition-transform ease-linear;
|
||||
@apply mask-[image:var(--chevron-down-icon)] mask-size-[1rem] mask-no-repeat mask-center;
|
||||
}
|
||||
}
|
||||
&::details-content {
|
||||
@apply px-3.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
@apply border-sidebar-border flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 w-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user