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

PoC for new components, including select

Browse Source
This commit is contained in:
Ronan Berder
2025-06-12 10:37:19 +08:00
parent cdc52a810e
commit 3b0b38a4cf
38 changed files with 1551 additions and 1041 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/basecoat.css
+54 -30
View File
@@ -446,37 +446,56 @@
/* Dialog */
@layer components {
.dialog {
[role='dialog'] {
@apply fixed inset-0 z-50 bg-black/50 opacity-0 invisible transition-all;
@apply inset-y-0 opacity-0 transition-all transition-discrete;
&:not([inert]),
&[inert='false'] {
@apply opacity-100 visible;
> article {
@apply opacity-100 scale-100 visible;
}
&:is([open],:popover-open) {
@apply opacity-100;
&::backdrop {
@apply opacity-100;
}
> article {
@apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg opacity-0 scale-95 invisible transition-all max-h-[calc(100%-2rem)];
@apply scale-100;
}
> header {
@apply flex flex-col gap-2 text-center sm:text-left;
@starting-style {
@apply opacity-0;
> h2 {
@apply text-lg leading-none font-semibold;
}
> p {
@apply text-muted-foreground text-sm;
}
&::backdrop {
@apply opacity-0;
}
> section {
@apply flex-1 -mx-6 px-6;
> article {
@apply scale-95;
}
> footer {
@apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
}
}
&::backdrop {
@apply bg-black/50 opacity-0 transition-all transition-discrete;
}
> article {
@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 gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%-2rem)];
@apply transition-all scale-95;
> header {
@apply flex flex-col gap-2 text-center sm:text-left;
> h2 {
@apply text-lg leading-none font-semibold;
}
> p {
@apply text-muted-foreground text-sm;
}
}
> section {
@apply flex-1 -mx-6 px-6;
}
> footer {
@apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
}
> form[method='dialog'] {
@apply absolute top-4 right-4;
> button {
@apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 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 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;
}
}
}
@@ -531,7 +550,9 @@
}
/* Popover */
@layer components {
@import "./components/popover.css";
/* @layer components {
.popover {
@apply relative inline-flex;
@@ -625,7 +646,7 @@
[role='separator'] {
@apply border-border -mx-1 my-1;
}
/* Combobox */
// Combobox
> header {
@apply flex h-9 items-center gap-2 border-b px-3 -mx-1 -mt-1 mb-1;
@@ -647,7 +668,7 @@
}
}
}
}
} */
/* Radio */
@layer components {
@@ -713,7 +734,7 @@
/* Select */
@layer components {
.form select,
.select {
select.select {
@apply appearance-none border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-9 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9;
@apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.75rem] bg-size-[1rem];
@@ -726,7 +747,7 @@
/* Sidebar */
.sidebar {
&[data-uninitialized] {
&:not([data-sidebar-initialized]) {
@apply max-md:hidden;
}
&:not([aria-hidden]),
@@ -734,7 +755,10 @@
@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 transition-transform ease-in-out duration-300 z-50;
@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] {
@@ -742,7 +766,7 @@
@apply left-0 border-r;
}
& + * {
@apply relative md:ml-(--sidebar-width) transition-[margin] ease-in-out duration-300;
@apply relative md:ml-(--sidebar-width);
}
&[aria-hidden=true] {
nav {
@@ -758,7 +782,7 @@
@apply right-0 border-l;
}
& + * {
@apply relative md:mr-(--sidebar-width) transition-[margin] ease-in-out duration-300;
@apply relative md:mr-(--sidebar-width);
}
&[aria-hidden=true] {
nav {