TalexDreamSoul/teatea-pension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: polish kumo dialog and select styling

Browse Source
This commit is contained in:
admin
2026-07-02 09:45:21 -07:00
parent 22e61f5efe
commit 04f2dfc229
4 changed files with 49 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/ui/dialog.tsx
View File

@@ -17,6 +17,9 @@ type DialogProps = {
className?: string;
};
const kumoBackdropClassNames =
"fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0";
export function Dialog({
open,
title,
@@ -37,14 +40,16 @@ export function Dialog({
>
<KumoDialog
className={cn(
"flex max-h-[92svh] w-[min(calc(100vw-1.5rem),48rem)] flex-col overflow-hidden rounded-lg border border-kumo-line bg-kumo-base p-0 shadow-xl",
"dialog-panel-enter fixed left-1/2 top-1/2 z-50 flex max-h-[min(92svh,52rem)] w-[min(calc(100vw-1.5rem),48rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border border-kumo-line bg-kumo-base p-0 shadow-xl outline-none ring-1 ring-kumo-line",
"data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
className,
)}
data-kumo-backdrop-classes={kumoBackdropClassNames}
size="xl"
>
<header className="flex shrink-0 items-start justify-between gap-4 border-b border-kumo-line p-5">
<header className="flex shrink-0 items-start justify-between gap-4 border-b border-kumo-line bg-kumo-base p-5">
<div className="min-w-0">
<KumoDialog.Title>{title}</KumoDialog.Title>
<KumoDialog.Title className="text-lg font-semibold leading-7 text-kumo-strong">{title}</KumoDialog.Title>
{description ? <KumoDialog.Description className="mt-1">{description}</KumoDialog.Description> : null}
</div>
<Button aria-label="关闭弹窗" onClick={onClose} size="icon" type="button" variant="outline">