hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-14 05:58:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate empty and item docs to Basecoat APIs

Browse Source
This commit is contained in:
Ronan Berder
2026-06-03 18:59:21 +08:00
parent 317c490e0c
commit 7e7d509e90
164 changed files with 15779 additions and 2940 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/components/command.css
+91 -69
View File
@@ -3,12 +3,13 @@
.command-dialog {
@apply inset-y-0 opacity-0 transition-all transition-discrete;
&:is([open],:popover-open) {
&:is([open], :popover-open) {
@apply opacity-100;
&::backdrop {
@apply opacity-100;
}
> * {
@apply scale-100;
}
@@ -19,91 +20,112 @@
&::backdrop {
@apply opacity-0;
}
> * {
@apply scale-95;
}
}
}
&::backdrop {
@apply bg-black/50 opacity-0 transition-all transition-discrete;
@apply opacity-0 transition-all transition-discrete;
}
> * {
@apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border shadow-lg sm:max-w-lg max-h-[min(640px,calc(100%_-_2rem))];
@apply transition-all scale-95;
> button,
> form[method='dialog'] {
@apply absolute top-4 right-4;
}
> button,
> form[method='dialog'] > button {
@apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
}
@apply fixed top-[50%] left-[50%] z-50 flex max-h-[min(640px,calc(100%_-_2rem))] w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 scale-95 flex-col overflow-hidden transition-all sm:max-w-lg;
}
.command {
> header input {
@apply h-12;
}
[role='menu'] {
@apply px-2;
> * > :is(button, form[method='dialog']) {
@apply absolute;
}
[role='menuitem'] {
@apply py-3 px-2 [&_svg]:size-5;
}
[role='heading'] {
@apply px-2 py-1.5 font-medium text-muted-foreground;
}
}
> * > :is(button, form[method='dialog'] > button) {
@apply inline-flex items-center justify-center opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
> * > :is(button, form[method='dialog'] > button) > svg:not([class*='size-']) {
@apply size-4;
}
}
.command {
> header {
@apply flex items-center border-b px-3 gap-2;
@apply flex w-full flex-col overflow-hidden;
}
svg {
@apply size-4 shrink-0 opacity-50;
}
input {
@apply placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50;
}
}
[role='menu'] {
@apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
.command > header {
@apply flex items-center;
}
[role='menuitem'] {
@apply aria-hidden:hidden relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
.command > header svg {
@apply shrink-0;
}
&.active {
@apply bg-accent text-accent-foreground;
}
}
[role='heading'] {
@apply text-muted-foreground flex px-2 py-1.5 text-xs font-medium;
}
[role='group']:not(:has([role='menuitem']:not([aria-hidden='true']))) {
@apply hidden;
}
[role='separator'] {
@apply border-border -mx-1 my-1;
}
&:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
@apply flex items-center justify-center py-6 px-3 text-sm truncate -m-1;
}
&[data-empty]:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
@apply content-[attr(data-empty)];
}
&:not([data-empty]):not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
@apply content-['No_results_found'];
}
}
&:not([data-command-initialized]) [role='menuitem'] {
@apply hover:bg-accent hover:text-accent-foreground;
}
&:has(> header input:not(:placeholder-shown)) [role='separator'] {
@apply hidden;
}
.command > header input {
@apply w-full bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50;
}
.command [role='menu'] {
@apply overflow-x-hidden overflow-y-auto outline-hidden;
}
.command [role='menuitem'] {
@apply aria-hidden:hidden relative flex w-full cursor-default items-center truncate outline-hidden select-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
.command [role='menuitem'].active {
@apply bg-accent text-accent-foreground;
}
.command [role='group'] {
@apply overflow-hidden;
}
.command [role='group']:not(:has([role='menuitem']:not([aria-hidden='true']))) {
@apply hidden;
}
.command [role='heading'] {
@apply flex;
}
.command [role='separator'] {
@apply border-0;
}
.command [data-shortcut] {
@apply ms-auto;
}
.command [data-indicator] {
@apply ms-auto opacity-0;
}
.command [role='menuitem'][data-checked='true'] [data-indicator],
.command [role='menuitem'][aria-selected='true'] [data-indicator] {
@apply opacity-100;
}
.command [role='menuitem']:has([data-shortcut]) [data-indicator] {
@apply hidden;
}
.command [role='menu']:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
@apply flex items-center justify-center truncate;
}
.command [role='menu'][data-empty]:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
@apply content-[attr(data-empty)];
}
.command [role='menu']:not([data-empty]):not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
@apply content-['No_results_found'];
}
.command:not([data-command-initialized]) [role='menuitem']:not([aria-disabled='true']):not(:disabled):hover {
@apply bg-accent text-accent-foreground;
}
.command:has(> header input:not(:placeholder-shown)) [role='separator'] {
@apply hidden;
}
}