mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
Prepare 1.0.0-beta.3
This commit is contained in:
Ronan Berder
+10
-10
@@ -20,11 +20,11 @@
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--chart-1: #93c5fd;
|
||||
--chart-2: #3b82f6;
|
||||
--chart-3: #2563eb;
|
||||
--chart-4: #1d4ed8;
|
||||
--chart-5: #1e40af;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
@@ -64,11 +64,11 @@
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--chart-1: #93c5fd;
|
||||
--chart-2: #3b82f6;
|
||||
--chart-3: #2563eb;
|
||||
--chart-4: #1d4ed8;
|
||||
--chart-5: #1e40af;
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "tailwindcss" source(none);
|
||||
@reference "./basecoat.css";
|
||||
@import "./basecoat-compat.css";
|
||||
@@ -0,0 +1 @@
|
||||
@import "./compat/legacy.css";
|
||||
@@ -15,12 +15,12 @@
|
||||
@import "./components/field.css";
|
||||
@import "./components/checkbox.css";
|
||||
@import "./components/input.css";
|
||||
@import "./components/input-group.css";
|
||||
@import "./components/item.css";
|
||||
@import "./components/kbd.css";
|
||||
@import "./components/label.css";
|
||||
@import "./components/native-select.css";
|
||||
@import "./components/popover.css";
|
||||
@import "./components/progress.css";
|
||||
@import "./components/radio.css";
|
||||
@import "./components/range.css";
|
||||
@import "./components/select.css";
|
||||
@@ -30,5 +30,6 @@
|
||||
@import "./components/table.css";
|
||||
@import "./components/tabs.css";
|
||||
@import "./components/textarea.css";
|
||||
@import "./components/input-group.css";
|
||||
@import "./components/toast.css";
|
||||
@import "./components/tooltip.css";
|
||||
|
||||
@@ -0,0 +1,429 @@
|
||||
/* Legacy Basecoat class API compatibility.
|
||||
This layer preserves pre-1.0 visual classes for the default Basecoat style only. */
|
||||
|
||||
@layer components {
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
@apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button */
|
||||
@layer components {
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
@apply rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive {
|
||||
@apply h-9 gap-1.5 px-2.5;
|
||||
}
|
||||
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive {
|
||||
@apply h-6 gap-1 px-2 text-xs rounded-[min(var(--radius-md),8px)] [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive {
|
||||
@apply h-8 gap-1 px-2.5 rounded-[min(var(--radius-md),10px)];
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive {
|
||||
@apply h-10 gap-1.5 px-2.5;
|
||||
}
|
||||
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive {
|
||||
@apply size-9;
|
||||
}
|
||||
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive {
|
||||
@apply size-6 rounded-[min(var(--radius-md),8px)] [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive {
|
||||
@apply size-8 rounded-[min(var(--radius-md),10px)];
|
||||
}
|
||||
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-xs-secondary,
|
||||
.btn-sm-secondary,
|
||||
.btn-lg-secondary,
|
||||
.btn-icon-secondary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-lg-icon-secondary {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
|
||||
}
|
||||
|
||||
.btn-outline,
|
||||
.btn-xs-outline,
|
||||
.btn-sm-outline,
|
||||
.btn-lg-outline,
|
||||
.btn-icon-outline,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-lg-icon-outline {
|
||||
@apply border-border bg-background shadow-xs hover:bg-muted hover:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-ghost,
|
||||
.btn-xs-ghost,
|
||||
.btn-sm-ghost,
|
||||
.btn-lg-ghost,
|
||||
.btn-icon-ghost,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-lg-icon-ghost {
|
||||
@apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-xs-link,
|
||||
.btn-sm-link,
|
||||
.btn-lg-link,
|
||||
.btn-icon-link,
|
||||
.btn-xs-icon-link,
|
||||
.btn-sm-icon-link,
|
||||
.btn-lg-icon-link {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon-destructive {
|
||||
@apply bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Badge legacy aliases */
|
||||
@layer components {
|
||||
.badge-primary,
|
||||
.badge-secondary,
|
||||
.badge-destructive,
|
||||
.badge-outline,
|
||||
.badge-ghost,
|
||||
.badge-link {
|
||||
@apply inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none;
|
||||
@apply h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3!;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
@apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;
|
||||
}
|
||||
|
||||
.badge-destructive {
|
||||
@apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
|
||||
}
|
||||
|
||||
.badge-ghost {
|
||||
@apply hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50;
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Alert legacy aliases */
|
||||
@layer components {
|
||||
.alert-destructive {
|
||||
@apply relative w-full;
|
||||
@apply grid gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4;
|
||||
@apply text-destructive bg-card;
|
||||
}
|
||||
|
||||
.alert-destructive:has(> footer) {
|
||||
@apply pe-18;
|
||||
}
|
||||
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply min-h-4 font-medium;
|
||||
}
|
||||
|
||||
.alert-destructive:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply col-start-2;
|
||||
}
|
||||
|
||||
.alert-destructive > section {
|
||||
@apply grid justify-items-start gap-1 text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
|
||||
ul {
|
||||
@apply list-inside list-disc;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-destructive > footer {
|
||||
@apply absolute top-2.5 end-3;
|
||||
}
|
||||
}
|
||||
|
||||
/* Card legacy aliases */
|
||||
@layer components {
|
||||
.card-sm {
|
||||
@apply flex flex-col;
|
||||
@apply ring-foreground/10 bg-card text-card-foreground overflow-hidden rounded-xl text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl;
|
||||
@apply gap-4 py-4;
|
||||
|
||||
> header {
|
||||
@apply @container/card-header grid auto-rows-min items-start has-[>[data-slot=card-action],>.card-action]:grid-cols-[1fr_auto] has-[>p]:grid-rows-[auto_auto];
|
||||
@apply gap-1 rounded-t-xl px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
> header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-sm leading-normal font-medium;
|
||||
}
|
||||
|
||||
> header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
> header > :is([data-slot='card-action'], .card-action) {
|
||||
@apply col-start-2 row-span-2 row-start-1 self-start justify-self-end;
|
||||
}
|
||||
|
||||
> section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
> footer {
|
||||
@apply flex items-center rounded-b-xl px-4 [.border-t]:pt-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Avatar legacy aliases */
|
||||
@layer components {
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
@apply relative inline-flex shrink-0 select-none appearance-none border-0 bg-transparent p-0 align-middle outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten;
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
@apply absolute inset-0 aspect-square size-full rounded-[inherit] object-cover;
|
||||
}
|
||||
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
@apply flex size-full items-center justify-center rounded-[inherit] bg-muted text-muted-foreground;
|
||||
}
|
||||
|
||||
.avatar-sm > span:not([data-badge]) {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
@apply absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none;
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
.avatar-sm > [data-badge] {
|
||||
@apply size-2 [&>svg]:hidden;
|
||||
}
|
||||
|
||||
.avatar-lg > [data-badge] {
|
||||
@apply size-3 [&>svg]:size-2;
|
||||
}
|
||||
|
||||
.avatar-group > :is(.avatar-sm, .avatar-lg) {
|
||||
@apply ring-2 ring-background;
|
||||
}
|
||||
}
|
||||
@@ -1,22 +1,18 @@
|
||||
/* Alert */
|
||||
@layer components {
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
.alert {
|
||||
@apply relative w-full;
|
||||
}
|
||||
|
||||
.alert:has(> footer),
|
||||
.alert-destructive:has(> footer) {
|
||||
@apply pe-18;
|
||||
.alert:has(> footer) {
|
||||
@apply pe-[4.5rem];
|
||||
}
|
||||
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply min-h-4;
|
||||
}
|
||||
|
||||
.alert > section,
|
||||
.alert-destructive > section {
|
||||
.alert > section {
|
||||
@apply grid justify-items-start gap-1;
|
||||
|
||||
ul {
|
||||
@@ -24,8 +20,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
.alert > footer {
|
||||
@apply absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,34 +1,26 @@
|
||||
/* Avatar */
|
||||
@layer components {
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
.avatar {
|
||||
@apply relative inline-flex shrink-0 select-none appearance-none border-0 bg-transparent p-0 align-middle outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten;
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
.avatar > img {
|
||||
@apply absolute inset-0 aspect-square size-full rounded-[inherit] object-cover;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
.avatar > span:not([data-badge]) {
|
||||
@apply flex size-full items-center justify-center rounded-[inherit] text-sm;
|
||||
}
|
||||
|
||||
.avatar-sm > span:not([data-badge]) {
|
||||
.avatar[data-size='sm'] > span:not([data-badge]) {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
.avatar > [data-badge] {
|
||||
@apply absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none;
|
||||
}
|
||||
|
||||
.avatar-sm > [data-badge] {
|
||||
.avatar[data-size='sm'] > [data-badge] {
|
||||
@apply size-2 [&>svg]:hidden;
|
||||
}
|
||||
|
||||
@@ -36,7 +28,7 @@
|
||||
@apply size-2.5 [&>svg]:size-2;
|
||||
}
|
||||
|
||||
.avatar-lg > [data-badge] {
|
||||
.avatar[data-size='lg'] > [data-badge] {
|
||||
@apply size-3 [&>svg]:size-2;
|
||||
}
|
||||
|
||||
@@ -44,7 +36,7 @@
|
||||
@apply flex -space-x-2;
|
||||
}
|
||||
|
||||
.avatar-group > :is(.avatar, .avatar-sm, .avatar-lg),
|
||||
.avatar-group > .avatar,
|
||||
.avatar-group > [data-count] {
|
||||
@apply ring-2 ring-background;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
/* Badge */
|
||||
@layer components {
|
||||
.badge,
|
||||
.badge-primary,
|
||||
.badge-secondary,
|
||||
.badge-destructive,
|
||||
.badge-outline,
|
||||
.badge-ghost,
|
||||
.badge-link {
|
||||
.badge {
|
||||
@apply inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
@apply relative z-10;
|
||||
}
|
||||
|
||||
> :is(hr[role='separator'], .button-group-separator) {
|
||||
> hr[role='separator'] {
|
||||
@apply relative w-px h-auto self-stretch shrink-0 border-0 my-px mx-0;
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
&[data-orientation='vertical'] {
|
||||
@apply flex-col;
|
||||
|
||||
> :is(hr[role='separator'], .button-group-separator) {
|
||||
> hr[role='separator'] {
|
||||
@apply w-auto h-px mx-px my-0;
|
||||
}
|
||||
|
||||
@@ -51,8 +51,4 @@
|
||||
.button-group > :is(span, label, output) {
|
||||
@apply flex items-center [&_svg]:pointer-events-none;
|
||||
}
|
||||
|
||||
.button-group-separator {
|
||||
@apply relative self-stretch shrink-0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,61 +1,6 @@
|
||||
/* Button */
|
||||
@layer components {
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn {
|
||||
@apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
/* Card */
|
||||
@layer components {
|
||||
.card,
|
||||
.card-sm {
|
||||
.card {
|
||||
@apply flex flex-col;
|
||||
|
||||
> header {
|
||||
|
||||
@@ -24,8 +24,16 @@
|
||||
@apply border-0;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
|
||||
@apply ms-auto shrink-0 text-end;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-shortcut] {
|
||||
@apply ms-auto;
|
||||
@apply ps-8;
|
||||
}
|
||||
|
||||
.dropdown-menu :is(kbd:last-child, .kbd:last-child):not([data-shortcut]) {
|
||||
@apply ms-8;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-indicator] {
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
@apply flex w-full max-w-sm min-w-0 flex-col items-center text-balance;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
.empty > header > p {
|
||||
@apply [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,29 +10,26 @@
|
||||
}
|
||||
|
||||
.field {
|
||||
@apply flex w-full flex-col data-[invalid=true]:text-destructive [&>*]:w-full [&>.sr-only]:w-auto;
|
||||
@apply flex w-full flex-col data-invalid:text-destructive data-[invalid=true]:text-destructive [&>*]:w-full [&>.sr-only]:w-auto;
|
||||
|
||||
&[data-orientation='horizontal'] {
|
||||
@apply flex-row items-center [&>label]:flex-auto has-[>section]:items-start has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px [&_p]:text-balance;
|
||||
@apply flex-row items-center [&>*]:w-auto [&>label]:flex-auto has-[>section]:items-start has-[>section]:[&>section]:flex-1 has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px [&_p]:text-balance;
|
||||
}
|
||||
|
||||
&[data-orientation='responsive'] {
|
||||
@apply flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:has-[>section]:items-start @md/field-group:[&>label]:flex-auto @md/field-group:has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px;
|
||||
}
|
||||
|
||||
section,
|
||||
.field-content {
|
||||
section {
|
||||
@apply flex flex-1 flex-col leading-snug;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
.field-title {
|
||||
h3 {
|
||||
@apply flex w-fit items-center;
|
||||
}
|
||||
|
||||
[role='alert'],
|
||||
.field-error {
|
||||
[role='alert'] {
|
||||
@apply font-normal;
|
||||
|
||||
ul {
|
||||
@@ -42,6 +39,7 @@
|
||||
}
|
||||
|
||||
.field > label,
|
||||
.field > section > label,
|
||||
label:has(> .field) {
|
||||
@apply w-fit;
|
||||
}
|
||||
@@ -59,7 +57,6 @@
|
||||
@apply flex-col;
|
||||
}
|
||||
|
||||
.field-description,
|
||||
.fieldset legend + p,
|
||||
.field > p,
|
||||
.field section > p {
|
||||
@@ -67,8 +64,7 @@
|
||||
}
|
||||
|
||||
.field > p,
|
||||
.field section > p,
|
||||
.field-description {
|
||||
.field section > p {
|
||||
@apply last:mt-0 nth-last-2:-mt-1;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
/* Input Group */
|
||||
@layer components {
|
||||
.input-group {
|
||||
@apply relative isolate flex w-full min-w-0 items-center overflow-hidden outline-none;
|
||||
@apply relative isolate flex w-full min-w-0 items-center outline-none;
|
||||
|
||||
&[data-orientation='vertical'] {
|
||||
&[data-orientation='vertical'],
|
||||
&:has(> [data-align='block-start']),
|
||||
&:has(> [data-align='block-end']) {
|
||||
@apply h-auto flex-col items-stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group > :is(input, textarea, select, [data-control]) {
|
||||
@apply text-foreground placeholder:text-muted-foreground block min-w-0 flex-1 appearance-none rounded-none border-0 bg-transparent shadow-none outline-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 disabled:bg-transparent;
|
||||
@apply text-foreground placeholder:text-muted-foreground block min-w-0 flex-1 appearance-none rounded-none border-0 bg-transparent shadow-none outline-none ring-0 focus-visible:ring-0 aria-invalid:ring-0;
|
||||
}
|
||||
|
||||
.input-group > :is(input, select, [data-control]) {
|
||||
@@ -20,10 +22,20 @@
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(input, select, [data-control]) {
|
||||
.input-group:is([data-orientation='vertical'], :has(> [data-align='block-start']), :has(> [data-align='block-end'])) > :is(input, select, [data-control]) {
|
||||
@apply h-auto flex-none;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> footer[data-align='end']) > :is(input, select, [data-control]),
|
||||
.input-group:has(> [data-align='block-end']) > :is(input, select, [data-control]) {
|
||||
@apply pt-3;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> header[data-align='start']) > :is(input, select, [data-control]),
|
||||
.input-group:has(> [data-align='block-start']) > :is(input, select, [data-control]) {
|
||||
@apply pb-3;
|
||||
}
|
||||
|
||||
.input-group > textarea {
|
||||
@apply field-sizing-content min-h-20 w-full resize-none;
|
||||
}
|
||||
@@ -40,11 +52,23 @@
|
||||
@apply pointer-events-none;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start'] {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start'], [data-align='block-start']) {
|
||||
@apply order-first;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end'] {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end'], [data-align='block-end']) {
|
||||
@apply order-last;
|
||||
}
|
||||
|
||||
.input-group > :is([data-align='block-start'], [data-align='block-end']) {
|
||||
@apply w-full justify-start;
|
||||
}
|
||||
|
||||
.input-group > button:is([data-align='start'], [data-align='inline-start']) {
|
||||
@apply ms-1;
|
||||
}
|
||||
|
||||
.input-group > button:is([data-align='end'], [data-align='inline-end']) {
|
||||
@apply me-1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
@apply flex shrink-0 items-center justify-center [&_svg]:pointer-events-none;
|
||||
}
|
||||
|
||||
.item > figure:has(img) {
|
||||
.item > figure:has(> img) {
|
||||
@apply overflow-hidden [&_img]:size-full [&_img]:object-cover;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,8 +3,4 @@
|
||||
.kbd {
|
||||
@apply pointer-events-none inline-flex items-center justify-center select-none;
|
||||
}
|
||||
|
||||
.kbd-group {
|
||||
@apply inline-flex items-center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
/* Label */
|
||||
@layer components {
|
||||
.field > label,
|
||||
.field > section > label,
|
||||
.label {
|
||||
@apply flex items-center select-none peer-disabled:pointer-events-none;
|
||||
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
/* Progress */
|
||||
@layer components {
|
||||
.progress {
|
||||
@apply flex w-full items-center overflow-hidden;
|
||||
}
|
||||
|
||||
.progress:dir(rtl) {
|
||||
@apply flex-row-reverse;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
@apply h-full transition-all;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
@layer theme, base, components, utilities;
|
||||
@import "tailwindcss" source("../pages");
|
||||
|
||||
.theme-neutral {
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
}
|
||||
|
||||
:root {
|
||||
--landing-demo-surface-radius: 0.375rem;
|
||||
--chart-bar-radius: 6px;
|
||||
}
|
||||
|
||||
[data-style-variant="nova"] {
|
||||
--landing-demo-surface-radius: 0.5rem;
|
||||
}
|
||||
|
||||
[data-style-variant="maia"],
|
||||
[data-style-variant="luma"],
|
||||
[data-style-variant="rhea"] {
|
||||
--landing-demo-surface-radius: 1rem;
|
||||
}
|
||||
|
||||
[data-style-variant="lyra"],
|
||||
[data-style-variant="sera"] {
|
||||
--landing-demo-surface-radius: 0;
|
||||
--chart-bar-radius: 0;
|
||||
}
|
||||
|
||||
.landing-demo-surface {
|
||||
border-radius: var(--landing-demo-surface-radius);
|
||||
}
|
||||
|
||||
.theme-neutral .card > footer,
|
||||
.theme-neutral hr {
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.landing-demo-chart-bar {
|
||||
border-start-start-radius: var(--chart-bar-radius);
|
||||
border-start-end-radius: var(--chart-bar-radius);
|
||||
}
|
||||
+145
-299
@@ -1,247 +1,64 @@
|
||||
/* Button */
|
||||
@layer components {
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn {
|
||||
@apply rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive {
|
||||
@apply h-9 gap-1.5 px-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2.5;
|
||||
}
|
||||
.btn:not([data-size]),
|
||||
.btn[data-size='default'] {
|
||||
@apply h-9 gap-1.5 px-3 has-[[data-icon='inline-end']]:pr-2.5 has-[[data-icon='inline-start']]:pl-2.5;
|
||||
}
|
||||
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive {
|
||||
@apply h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='xs'] {
|
||||
@apply h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive {
|
||||
@apply h-8 gap-1 px-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='sm'] {
|
||||
@apply h-8 gap-1 px-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive {
|
||||
@apply h-10 gap-1.5 px-4;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-3;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-3;
|
||||
}
|
||||
.btn[data-size='lg'] {
|
||||
@apply h-10 gap-1.5 px-4 has-[[data-icon='inline-end']]:pr-3 has-[[data-icon='inline-start']]:pl-3;
|
||||
}
|
||||
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive {
|
||||
.btn[data-size='icon'] {
|
||||
@apply size-9;
|
||||
}
|
||||
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive {
|
||||
.btn[data-size='icon-xs'] {
|
||||
@apply size-6 [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive {
|
||||
.btn[data-size='icon-sm'] {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-size='icon-lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary {
|
||||
.btn:not([data-variant]),
|
||||
.btn[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-xs-secondary,
|
||||
.btn-sm-secondary,
|
||||
.btn-lg-secondary,
|
||||
.btn-icon-secondary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-lg-icon-secondary {
|
||||
.btn[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
|
||||
}
|
||||
|
||||
.btn-outline,
|
||||
.btn-xs-outline,
|
||||
.btn-sm-outline,
|
||||
.btn-lg-outline,
|
||||
.btn-icon-outline,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-lg-icon-outline {
|
||||
.btn[data-variant='outline'] {
|
||||
@apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-transparent dark:hover:bg-input/30 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-ghost,
|
||||
.btn-xs-ghost,
|
||||
.btn-sm-ghost,
|
||||
.btn-lg-ghost,
|
||||
.btn-icon-ghost,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-lg-icon-ghost {
|
||||
.btn[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-xs-link,
|
||||
.btn-sm-link,
|
||||
.btn-lg-link,
|
||||
.btn-icon-link,
|
||||
.btn-xs-icon-link,
|
||||
.btn-sm-icon-link,
|
||||
.btn-lg-icon-link {
|
||||
.btn[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
||||
}
|
||||
|
||||
@@ -250,8 +67,8 @@
|
||||
@apply has-[>.button-group]:gap-2;
|
||||
}
|
||||
|
||||
.button-group:has(> :is(.btn-outline, .btn-icon-outline, .btn-xs-outline, .btn-xs-icon-outline, .btn-sm-outline, .btn-sm-icon-outline, .btn-lg-outline, .btn-lg-icon-outline)),
|
||||
.button-group:has(> .select > button:is(.btn-outline, .btn-icon-outline, .btn-xs-outline, .btn-xs-icon-outline, .btn-sm-outline, .btn-sm-icon-outline, .btn-lg-outline, .btn-lg-icon-outline)) {
|
||||
.button-group:has(> .btn[data-variant='outline']),
|
||||
.button-group:has(> .select > button.btn[data-variant='outline']) {
|
||||
> .input,
|
||||
> .select > button {
|
||||
@apply border-border focus-visible:border-ring;
|
||||
@@ -276,8 +93,7 @@
|
||||
@apply bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.button-group > hr[role='separator'],
|
||||
.button-group-separator {
|
||||
.button-group > hr[role='separator'] {
|
||||
@apply bg-input;
|
||||
}
|
||||
|
||||
@@ -389,8 +205,7 @@
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
.alert {
|
||||
@apply grid gap-0.5 rounded-2xl border px-4 py-3 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -398,35 +213,33 @@
|
||||
@apply bg-card text-card-foreground;
|
||||
}
|
||||
|
||||
.alert-destructive {
|
||||
.alert[data-variant='destructive'] {
|
||||
@apply text-destructive bg-card [&>svg]:text-current;
|
||||
}
|
||||
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
|
||||
:is(.alert, .alert-destructive):has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply col-start-2;
|
||||
}
|
||||
.alert > section {
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert-destructive > section {
|
||||
.alert[data-variant='destructive'] > section {
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
.alert[data-variant='destructive'] > footer {
|
||||
@apply top-2.5 end-3;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
.avatar {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -434,29 +247,23 @@
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
.avatar[data-size='sm'] {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
.avatar[data-size='lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
.avatar > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
.avatar > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
.avatar > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -464,47 +271,41 @@
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.badge,
|
||||
.badge-primary,
|
||||
.badge-secondary,
|
||||
.badge-destructive,
|
||||
.badge-outline,
|
||||
.badge-ghost,
|
||||
.badge-link {
|
||||
@apply h-5 gap-1 rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3!;
|
||||
.badge {
|
||||
@apply h-5 gap-1 rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3!;
|
||||
}
|
||||
|
||||
.badge,
|
||||
.badge-primary {
|
||||
.badge:not([data-variant]),
|
||||
.badge[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
.badge[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
.badge[data-variant='outline'] {
|
||||
@apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;
|
||||
}
|
||||
|
||||
.badge-destructive {
|
||||
.badge[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
|
||||
}
|
||||
|
||||
.badge-ghost {
|
||||
.badge[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50;
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
.badge[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
@@ -598,7 +399,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -658,7 +459,7 @@
|
||||
|
||||
*:not(select).select [role='option'].active,
|
||||
*:not(select).select [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
*:not(select).select [role='group'] {
|
||||
@@ -716,7 +517,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
@apply bg-muted text-foreground;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-variant='destructive'] {
|
||||
@@ -752,11 +553,11 @@
|
||||
@apply bg-border/50 -mx-1.5 my-1.5 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-shortcut] {
|
||||
@apply text-muted-foreground text-xs tracking-widest;
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-muted-foreground font-sans text-xs tracking-widest;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) [data-shortcut] {
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-accent-foreground;
|
||||
}
|
||||
|
||||
@@ -780,8 +581,7 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
.card {
|
||||
@apply bg-card text-card-foreground ring-foreground/5 dark:ring-foreground/10 overflow-hidden rounded-4xl text-sm shadow-md ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-4xl [&>img:last-child]:rounded-b-4xl;
|
||||
}
|
||||
|
||||
@@ -789,48 +589,47 @@
|
||||
@apply gap-6 py-6;
|
||||
}
|
||||
|
||||
.card-sm {
|
||||
.card[data-size='sm'] {
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
.card > header {
|
||||
@apply gap-1.5 rounded-t-4xl px-6 [.border-b]:pb-6;
|
||||
}
|
||||
|
||||
.card-sm > header {
|
||||
.card[data-size='sm'] > header {
|
||||
@apply px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title),
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-base font-medium;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
.card > section {
|
||||
@apply px-6;
|
||||
}
|
||||
|
||||
.card-sm > section {
|
||||
.card[data-size='sm'] > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
.card > footer {
|
||||
@apply rounded-b-4xl px-6 [.border-t]:pt-6;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
.card[data-size='sm'] > footer {
|
||||
@apply px-4 [.border-t]:pt-4;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.chart {
|
||||
--chart-bar-radius: 6px;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
@apply border-border/50 bg-background text-foreground gap-1.5 rounded-2xl border px-2.5 py-1.5 text-xs shadow-xl;
|
||||
}
|
||||
@@ -923,8 +722,7 @@
|
||||
@apply gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
|
||||
}
|
||||
|
||||
.fieldset > legend,
|
||||
.field-legend {
|
||||
.fieldset > legend {
|
||||
@apply mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base;
|
||||
}
|
||||
|
||||
@@ -933,6 +731,8 @@
|
||||
@apply gap-7;
|
||||
|
||||
&[role='radiogroup'],
|
||||
&:has(> .field > input[type='checkbox']:not([role='switch'])),
|
||||
&:has(> .field > input[type='radio']),
|
||||
&[data-slot='checkbox-group'],
|
||||
&[data-slot='radio-group'] {
|
||||
@apply gap-3;
|
||||
@@ -945,15 +745,15 @@
|
||||
}
|
||||
|
||||
.field {
|
||||
@apply data-[invalid=true]:text-destructive gap-3;
|
||||
@apply data-invalid:text-destructive data-[invalid=true]:text-destructive gap-3;
|
||||
}
|
||||
|
||||
.field > section,
|
||||
.field-content {
|
||||
.field > section {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
.field > label,
|
||||
.field > section > label,
|
||||
label:has(> .field) {
|
||||
@apply has-[:checked]:bg-input/30 gap-2 leading-snug in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
@@ -976,18 +776,25 @@
|
||||
@apply p-4;
|
||||
}
|
||||
.field h2,
|
||||
.field h3,
|
||||
.field-title {
|
||||
.field h3 {
|
||||
@apply gap-2 leading-snug text-sm font-medium in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
|
||||
.fieldset legend + p,
|
||||
.field > p,
|
||||
.field section > p,
|
||||
.field-description {
|
||||
.field section > p {
|
||||
@apply text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5;
|
||||
}
|
||||
|
||||
.fieldset > legend[data-variant='label'] {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.fieldset > legend:not([data-variant]) + p,
|
||||
.fieldset > legend[data-variant='legend'] + p {
|
||||
@apply -mt-1.5;
|
||||
}
|
||||
|
||||
.field-separator {
|
||||
@apply -my-2 h-5 text-sm in-data-[variant=outline]:-mb-2;
|
||||
}
|
||||
@@ -996,8 +803,7 @@
|
||||
@apply text-muted-foreground px-2;
|
||||
}
|
||||
|
||||
.field [role="alert"],
|
||||
.field-error {
|
||||
.field [role="alert"] {
|
||||
@apply text-destructive text-sm;
|
||||
}
|
||||
|
||||
@@ -1006,23 +812,22 @@
|
||||
@apply h-9 has-[>textarea]:h-auto rounded-4xl border border-transparent bg-input/50 transition-[color,box-shadow,background-color] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/30 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20 has-[>textarea]:rounded-2xl dark:has-[[aria-invalid=true]]:ring-destructive/40;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] {
|
||||
@apply rounded-3xl;
|
||||
}
|
||||
|
||||
.input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] {
|
||||
@apply rounded-3xl;
|
||||
}
|
||||
.input-group > :is(input, select, [data-control]) {
|
||||
@apply px-3 py-1 text-sm;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='start']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='end']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='end'], [data-align='inline-end'])) > :is(input, select, [data-control]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
|
||||
@@ -1035,33 +840,66 @@
|
||||
@apply gap-2 py-2 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start'] {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']) {
|
||||
@apply ps-3;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end'] {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']) {
|
||||
@apply pe-3;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> button) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> button) {
|
||||
@apply -ms-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> button) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> button) {
|
||||
@apply -me-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> kbd) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> kbd) {
|
||||
@apply -ms-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> kbd) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> kbd) {
|
||||
@apply -me-0.5;
|
||||
}
|
||||
.input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
|
||||
@apply px-3;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'] {
|
||||
@apply px-3 pt-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'] {
|
||||
@apply px-3 pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply px-3 pt-3;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply px-3 pb-3;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply pt-3.5;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply pb-3.5;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
|
||||
@apply pb-3.5;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
|
||||
@apply pt-3.5;
|
||||
}
|
||||
|
||||
|
||||
.input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
|
||||
@apply rounded-3xl bg-muted-foreground/10 px-1.5;
|
||||
}
|
||||
@@ -1096,7 +934,7 @@
|
||||
@apply text-lg font-medium tracking-tight;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
.empty > header > p {
|
||||
@apply text-muted-foreground text-sm/relaxed;
|
||||
}
|
||||
|
||||
@@ -1147,15 +985,15 @@
|
||||
@apply [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.item > figure:has(img) {
|
||||
.item > figure:has(> img) {
|
||||
@apply size-10 overflow-hidden rounded-xl;
|
||||
}
|
||||
|
||||
.item[data-size='sm'] > figure:has(img) {
|
||||
.item[data-size='sm'] > figure:has(> img) {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.item[data-size='xs'] > figure:has(img) {
|
||||
.item[data-size='xs'] > figure:has(> img) {
|
||||
@apply size-6 rounded-lg;
|
||||
}
|
||||
|
||||
@@ -1205,16 +1043,16 @@
|
||||
@apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5.5 w-fit min-w-5.5 gap-1 rounded-lg px-1.5 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.kbd-group {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.field > label,
|
||||
.label {
|
||||
@apply gap-2 text-sm leading-none font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
.field > section > label {
|
||||
@apply gap-2 text-sm leading-snug font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar nav {
|
||||
@apply bg-sidebar text-sidebar-foreground;
|
||||
@@ -1304,6 +1142,14 @@
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-xl px-3 text-sm focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
/* Progress */
|
||||
.progress {
|
||||
@apply bg-muted h-3 rounded-full;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton {
|
||||
|
||||
+150
-295
@@ -1,247 +1,64 @@
|
||||
/* Button */
|
||||
@layer components {
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn {
|
||||
@apply rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[1px] aria-invalid:border-destructive aria-invalid:ring-[1px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive {
|
||||
@apply h-8 gap-1.5 px-2.5;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn:not([data-size]),
|
||||
.btn[data-size='default'] {
|
||||
@apply h-8 gap-1.5 px-2.5 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive {
|
||||
@apply h-6 gap-1 px-2 text-xs rounded-none [&_svg:not([class*='size-'])]:size-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
.btn[data-size='xs'] {
|
||||
@apply h-6 gap-1 px-2 text-xs rounded-none [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-1.5 has-[[data-icon='inline-start']]:pl-1.5;
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive {
|
||||
@apply h-7 gap-1 px-2.5 rounded-none [&_svg:not([class*='size-'])]:size-3.5;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
.btn[data-size='sm'] {
|
||||
@apply h-7 gap-1 px-2.5 rounded-none [&_svg:not([class*='size-'])]:size-3.5 has-[[data-icon='inline-end']]:pr-1.5 has-[[data-icon='inline-start']]:pl-1.5;
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive {
|
||||
@apply h-9 gap-1.5 px-2.5;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='lg'] {
|
||||
@apply h-9 gap-1.5 px-2.5 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive {
|
||||
.btn[data-size='icon'] {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive {
|
||||
.btn[data-size='icon-xs'] {
|
||||
@apply size-6 rounded-none [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive {
|
||||
.btn[data-size='icon-sm'] {
|
||||
@apply size-7 rounded-none;
|
||||
}
|
||||
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-size='icon-lg'] {
|
||||
@apply size-9;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary {
|
||||
.btn:not([data-variant]),
|
||||
.btn[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-xs-secondary,
|
||||
.btn-sm-secondary,
|
||||
.btn-lg-secondary,
|
||||
.btn-icon-secondary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-lg-icon-secondary {
|
||||
.btn[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
|
||||
}
|
||||
|
||||
.btn-outline,
|
||||
.btn-xs-outline,
|
||||
.btn-sm-outline,
|
||||
.btn-lg-outline,
|
||||
.btn-icon-outline,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-lg-icon-outline {
|
||||
.btn[data-variant='outline'] {
|
||||
@apply border-border bg-background hover:bg-muted hover:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-ghost,
|
||||
.btn-xs-ghost,
|
||||
.btn-sm-ghost,
|
||||
.btn-lg-ghost,
|
||||
.btn-icon-ghost,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-lg-icon-ghost {
|
||||
.btn[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-xs-link,
|
||||
.btn-sm-link,
|
||||
.btn-lg-link,
|
||||
.btn-icon-link,
|
||||
.btn-xs-icon-link,
|
||||
.btn-sm-icon-link,
|
||||
.btn-lg-icon-link {
|
||||
.btn[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
||||
}
|
||||
|
||||
@@ -268,8 +85,7 @@
|
||||
@apply bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.button-group > hr[role='separator'],
|
||||
.button-group-separator {
|
||||
.button-group > hr[role='separator'] {
|
||||
@apply bg-input;
|
||||
}
|
||||
|
||||
@@ -381,8 +197,7 @@
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
.alert {
|
||||
@apply grid gap-0.5 rounded-none border px-2.5 py-2 text-start text-xs has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 [&>svg]:row-span-2 [&>svg]:translate-y-0 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -390,35 +205,33 @@
|
||||
@apply bg-card text-card-foreground;
|
||||
}
|
||||
|
||||
.alert-destructive {
|
||||
.alert[data-variant='destructive'] {
|
||||
@apply text-destructive bg-card [&>svg]:text-current;
|
||||
}
|
||||
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
|
||||
:is(.alert, .alert-destructive):has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply col-start-2;
|
||||
}
|
||||
.alert > section {
|
||||
@apply text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-2;
|
||||
}
|
||||
|
||||
.alert-destructive > section {
|
||||
.alert[data-variant='destructive'] > section {
|
||||
@apply text-destructive/90 text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-2;
|
||||
}
|
||||
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
.alert[data-variant='destructive'] > footer {
|
||||
@apply top-[calc(--spacing(1.25))] end-[calc(--spacing(1.25))];
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
.avatar {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -426,29 +239,23 @@
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
.avatar[data-size='sm'] {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
.avatar[data-size='lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
.avatar > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
.avatar > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
.avatar > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -456,47 +263,41 @@
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-xs [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.badge,
|
||||
.badge-primary,
|
||||
.badge-secondary,
|
||||
.badge-destructive,
|
||||
.badge-outline,
|
||||
.badge-ghost,
|
||||
.badge-link {
|
||||
@apply h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3!;
|
||||
.badge {
|
||||
@apply h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3!;
|
||||
}
|
||||
|
||||
.badge,
|
||||
.badge-primary {
|
||||
.badge:not([data-variant]),
|
||||
.badge[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
.badge[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
.badge[data-variant='outline'] {
|
||||
@apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;
|
||||
}
|
||||
|
||||
.badge-destructive {
|
||||
.badge[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
|
||||
}
|
||||
|
||||
.badge-ghost {
|
||||
.badge[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50;
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
.badge[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
@@ -590,7 +391,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='separator'] {
|
||||
@@ -646,7 +447,7 @@
|
||||
|
||||
*:not(select).select [role='option'].active,
|
||||
*:not(select).select [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
*:not(select).select [role='group'] {
|
||||
@@ -700,7 +501,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
@apply bg-muted text-foreground;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-variant='destructive'] {
|
||||
@@ -736,11 +537,11 @@
|
||||
@apply bg-border -mx-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-shortcut] {
|
||||
@apply text-muted-foreground text-xs tracking-widest;
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-muted-foreground font-sans text-xs tracking-widest;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) [data-shortcut] {
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-accent-foreground;
|
||||
}
|
||||
|
||||
@@ -764,8 +565,7 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
.card {
|
||||
@apply ring-foreground/10 bg-card text-card-foreground overflow-hidden rounded-none text-xs/relaxed ring-1 has-[>footer]:pb-0 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-none [&>img:last-child]:rounded-none;
|
||||
}
|
||||
|
||||
@@ -773,52 +573,51 @@
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card-sm {
|
||||
.card[data-size='sm'] {
|
||||
@apply gap-2 py-3;
|
||||
}
|
||||
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
.card > header {
|
||||
@apply gap-1 rounded-none px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
.card-sm > header {
|
||||
.card[data-size='sm'] > header {
|
||||
@apply px-3 [.border-b]:pb-3;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title),
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card[data-size='sm'] > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-xs/relaxed;
|
||||
}
|
||||
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
.card > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card-sm > section {
|
||||
.card[data-size='sm'] > section {
|
||||
@apply px-3;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
.card > footer {
|
||||
@apply rounded-none border-t p-4;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
.card[data-size='sm'] > footer {
|
||||
@apply p-3;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.chart {
|
||||
--chart-bar-radius: 0;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
@apply border-border/50 bg-background text-foreground gap-1.5 rounded-none border px-2.5 py-1.5 text-xs shadow-xl;
|
||||
}
|
||||
@@ -911,8 +710,7 @@
|
||||
@apply gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
|
||||
}
|
||||
|
||||
.fieldset > legend,
|
||||
.field-legend {
|
||||
.fieldset > legend {
|
||||
@apply mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm;
|
||||
}
|
||||
|
||||
@@ -921,6 +719,8 @@
|
||||
@apply gap-5;
|
||||
|
||||
&[role='radiogroup'],
|
||||
&:has(> .field > input[type='checkbox']:not([role='switch'])),
|
||||
&:has(> .field > input[type='radio']),
|
||||
&[data-slot='checkbox-group'],
|
||||
&[data-slot='radio-group'] {
|
||||
@apply gap-3;
|
||||
@@ -933,15 +733,15 @@
|
||||
}
|
||||
|
||||
.field {
|
||||
@apply data-[invalid=true]:text-destructive gap-2;
|
||||
@apply data-invalid:text-destructive data-[invalid=true]:text-destructive gap-2;
|
||||
}
|
||||
|
||||
.field > section,
|
||||
.field-content {
|
||||
.field > section {
|
||||
@apply gap-0.5;
|
||||
}
|
||||
|
||||
.field > label,
|
||||
.field > section > label,
|
||||
label:has(> .field) {
|
||||
@apply has-[:checked]:bg-primary/5 has-[:checked]:border-primary/30 dark:has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10 gap-2 leading-snug in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
@@ -964,18 +764,25 @@
|
||||
@apply p-2;
|
||||
}
|
||||
.field h2,
|
||||
.field h3,
|
||||
.field-title {
|
||||
.field h3 {
|
||||
@apply gap-2 text-xs/relaxed in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
|
||||
.fieldset legend + p,
|
||||
.field > p,
|
||||
.field section > p,
|
||||
.field-description {
|
||||
.field section > p {
|
||||
@apply text-muted-foreground text-start text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5;
|
||||
}
|
||||
|
||||
.fieldset > legend[data-variant='label'] {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.fieldset > legend:not([data-variant]) + p,
|
||||
.fieldset > legend[data-variant='legend'] + p {
|
||||
@apply -mt-1.5;
|
||||
}
|
||||
|
||||
.field-separator {
|
||||
@apply -my-2 h-5 text-xs in-data-[variant=outline]:-mb-2;
|
||||
}
|
||||
@@ -984,8 +791,7 @@
|
||||
@apply text-muted-foreground px-2;
|
||||
}
|
||||
|
||||
.field [role="alert"],
|
||||
.field-error {
|
||||
.field [role="alert"] {
|
||||
@apply text-destructive text-xs;
|
||||
}
|
||||
|
||||
@@ -996,18 +802,18 @@
|
||||
|
||||
|
||||
.input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
|
||||
@apply opacity-50;
|
||||
@apply bg-input/50 opacity-50 dark:bg-input/80;
|
||||
}
|
||||
|
||||
.input-group > :is(input, select, [data-control]) {
|
||||
@apply px-2.5 py-1 text-xs;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='start']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='end']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='end'], [data-align='inline-end'])) > :is(input, select, [data-control]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
|
||||
@@ -1020,33 +826,74 @@
|
||||
@apply gap-2 py-1.5 text-xs font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start'] {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end'] {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']) {
|
||||
@apply pe-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> button) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> button) {
|
||||
@apply -ms-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> button) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> button) {
|
||||
@apply -me-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> kbd) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> kbd) {
|
||||
@apply -ms-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> kbd) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> kbd) {
|
||||
@apply -me-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'] {
|
||||
@apply px-2.5 pt-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'] {
|
||||
@apply px-2.5 pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'].border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'].border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
.input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
|
||||
@apply px-2.5;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply px-2.5 pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply px-2.5 pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
|
||||
.input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
|
||||
@apply rounded-none;
|
||||
}
|
||||
@@ -1081,7 +928,7 @@
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
.empty > header > p {
|
||||
@apply text-muted-foreground text-xs/relaxed;
|
||||
}
|
||||
|
||||
@@ -1132,15 +979,15 @@
|
||||
@apply [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.item > figure:has(img) {
|
||||
.item > figure:has(> img) {
|
||||
@apply size-10 overflow-hidden rounded-none;
|
||||
}
|
||||
|
||||
.item[data-size='sm'] > figure:has(img) {
|
||||
.item[data-size='sm'] > figure:has(> img) {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.item[data-size='xs'] > figure:has(img) {
|
||||
.item[data-size='xs'] > figure:has(> img) {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
@@ -1190,16 +1037,16 @@
|
||||
@apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-none px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.kbd-group {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.field > label,
|
||||
.label {
|
||||
@apply gap-2 text-xs leading-none in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
.field > section > label {
|
||||
@apply gap-2 text-xs leading-snug in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar nav {
|
||||
@apply bg-sidebar text-sidebar-foreground;
|
||||
@@ -1289,6 +1136,14 @@
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 text-xs focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
/* Progress */
|
||||
.progress {
|
||||
@apply bg-muted h-1 rounded-none;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton {
|
||||
|
||||
+143
-297
@@ -1,247 +1,64 @@
|
||||
/* Button */
|
||||
@layer components {
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn {
|
||||
@apply rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive {
|
||||
@apply h-9 gap-1.5 px-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2.5;
|
||||
}
|
||||
.btn:not([data-size]),
|
||||
.btn[data-size='default'] {
|
||||
@apply h-9 gap-1.5 px-3 has-[[data-icon='inline-end']]:pr-2.5 has-[[data-icon='inline-start']]:pl-2.5;
|
||||
}
|
||||
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive {
|
||||
@apply h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='xs'] {
|
||||
@apply h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive {
|
||||
@apply h-8 gap-1 px-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='sm'] {
|
||||
@apply h-8 gap-1 px-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive {
|
||||
@apply h-10 gap-1.5 px-4;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-3;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-3;
|
||||
}
|
||||
.btn[data-size='lg'] {
|
||||
@apply h-10 gap-1.5 px-4 has-[[data-icon='inline-end']]:pr-3 has-[[data-icon='inline-start']]:pl-3;
|
||||
}
|
||||
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive {
|
||||
.btn[data-size='icon'] {
|
||||
@apply size-9;
|
||||
}
|
||||
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive {
|
||||
.btn[data-size='icon-xs'] {
|
||||
@apply size-6 [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive {
|
||||
.btn[data-size='icon-sm'] {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-size='icon-lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary {
|
||||
.btn:not([data-variant]),
|
||||
.btn[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-xs-secondary,
|
||||
.btn-sm-secondary,
|
||||
.btn-lg-secondary,
|
||||
.btn-icon-secondary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-lg-icon-secondary {
|
||||
.btn[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
|
||||
}
|
||||
|
||||
.btn-outline,
|
||||
.btn-xs-outline,
|
||||
.btn-sm-outline,
|
||||
.btn-lg-outline,
|
||||
.btn-icon-outline,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-lg-icon-outline {
|
||||
.btn[data-variant='outline'] {
|
||||
@apply border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-ghost,
|
||||
.btn-xs-ghost,
|
||||
.btn-sm-ghost,
|
||||
.btn-lg-ghost,
|
||||
.btn-icon-ghost,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-lg-icon-ghost {
|
||||
.btn[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-xs-link,
|
||||
.btn-sm-link,
|
||||
.btn-lg-link,
|
||||
.btn-icon-link,
|
||||
.btn-xs-icon-link,
|
||||
.btn-sm-icon-link,
|
||||
.btn-lg-icon-link {
|
||||
.btn[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
||||
}
|
||||
|
||||
@@ -268,8 +85,7 @@
|
||||
@apply bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.button-group > hr[role='separator'],
|
||||
.button-group-separator {
|
||||
.button-group > hr[role='separator'] {
|
||||
@apply bg-input;
|
||||
}
|
||||
|
||||
@@ -381,8 +197,7 @@
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
.alert {
|
||||
@apply grid gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -390,35 +205,33 @@
|
||||
@apply bg-card text-card-foreground;
|
||||
}
|
||||
|
||||
.alert-destructive {
|
||||
.alert[data-variant='destructive'] {
|
||||
@apply text-destructive bg-card [&>svg]:text-current;
|
||||
}
|
||||
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
|
||||
:is(.alert, .alert-destructive):has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply col-start-2;
|
||||
}
|
||||
.alert > section {
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert-destructive > section {
|
||||
.alert[data-variant='destructive'] > section {
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
.alert[data-variant='destructive'] > footer {
|
||||
@apply top-2.5 end-3;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
.avatar {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -426,29 +239,23 @@
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
.avatar[data-size='sm'] {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
.avatar[data-size='lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
.avatar > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
.avatar > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
.avatar > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -456,47 +263,41 @@
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.badge,
|
||||
.badge-primary,
|
||||
.badge-secondary,
|
||||
.badge-destructive,
|
||||
.badge-outline,
|
||||
.badge-ghost,
|
||||
.badge-link {
|
||||
@apply h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3!;
|
||||
.badge {
|
||||
@apply h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3!;
|
||||
}
|
||||
|
||||
.badge,
|
||||
.badge-primary {
|
||||
.badge:not([data-variant]),
|
||||
.badge[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
.badge[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
.badge[data-variant='outline'] {
|
||||
@apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30;
|
||||
}
|
||||
|
||||
.badge-destructive {
|
||||
.badge[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
|
||||
}
|
||||
|
||||
.badge-ghost {
|
||||
.badge[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50;
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
.badge[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
@@ -590,7 +391,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -650,7 +451,7 @@
|
||||
|
||||
*:not(select).select [role='option'].active,
|
||||
*:not(select).select [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
*:not(select).select [role='group'] {
|
||||
@@ -704,7 +505,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
@apply bg-muted text-foreground;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-variant='destructive'] {
|
||||
@@ -740,11 +541,11 @@
|
||||
@apply bg-border/50 -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-shortcut] {
|
||||
@apply text-muted-foreground text-xs tracking-widest;
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-muted-foreground font-sans text-xs tracking-widest;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) [data-shortcut] {
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-accent-foreground;
|
||||
}
|
||||
|
||||
@@ -768,8 +569,7 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
.card {
|
||||
@apply ring-foreground/10 bg-card text-card-foreground overflow-hidden rounded-2xl text-sm ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl;
|
||||
}
|
||||
|
||||
@@ -777,48 +577,47 @@
|
||||
@apply gap-6 py-6;
|
||||
}
|
||||
|
||||
.card-sm {
|
||||
.card[data-size='sm'] {
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
.card > header {
|
||||
@apply gap-2 rounded-t-xl px-6 [.border-b]:pb-6;
|
||||
}
|
||||
|
||||
.card-sm > header {
|
||||
.card[data-size='sm'] > header {
|
||||
@apply px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title),
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-base font-medium;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
.card > section {
|
||||
@apply px-6;
|
||||
}
|
||||
|
||||
.card-sm > section {
|
||||
.card[data-size='sm'] > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
.card > footer {
|
||||
@apply rounded-b-xl px-6 [.border-t]:pt-6;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
.card[data-size='sm'] > footer {
|
||||
@apply px-4 [.border-t]:pt-4;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.chart {
|
||||
--chart-bar-radius: 6px;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
@apply border-border/50 bg-background text-foreground gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl;
|
||||
}
|
||||
@@ -911,8 +710,7 @@
|
||||
@apply gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
|
||||
}
|
||||
|
||||
.fieldset > legend,
|
||||
.field-legend {
|
||||
.fieldset > legend {
|
||||
@apply mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base;
|
||||
}
|
||||
|
||||
@@ -921,6 +719,8 @@
|
||||
@apply gap-7;
|
||||
|
||||
&[role='radiogroup'],
|
||||
&:has(> .field > input[type='checkbox']:not([role='switch'])),
|
||||
&:has(> .field > input[type='radio']),
|
||||
&[data-slot='checkbox-group'],
|
||||
&[data-slot='radio-group'] {
|
||||
@apply gap-3;
|
||||
@@ -933,15 +733,15 @@
|
||||
}
|
||||
|
||||
.field {
|
||||
@apply data-[invalid=true]:text-destructive gap-3;
|
||||
@apply data-invalid:text-destructive data-[invalid=true]:text-destructive gap-3;
|
||||
}
|
||||
|
||||
.field > section,
|
||||
.field-content {
|
||||
.field > section {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
.field > label,
|
||||
.field > section > label,
|
||||
label:has(> .field) {
|
||||
@apply has-[:checked]:bg-primary/5 has-[:checked]:border-primary/30 dark:has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10 gap-2 leading-snug in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
@@ -964,18 +764,25 @@
|
||||
@apply p-4;
|
||||
}
|
||||
.field h2,
|
||||
.field h3,
|
||||
.field-title {
|
||||
.field h3 {
|
||||
@apply gap-2 leading-snug text-sm font-medium in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
|
||||
.fieldset legend + p,
|
||||
.field > p,
|
||||
.field section > p,
|
||||
.field-description {
|
||||
.field section > p {
|
||||
@apply text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5;
|
||||
}
|
||||
|
||||
.fieldset > legend[data-variant='label'] {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.fieldset > legend:not([data-variant]) + p,
|
||||
.fieldset > legend[data-variant='legend'] + p {
|
||||
@apply -mt-1.5;
|
||||
}
|
||||
|
||||
.field-separator {
|
||||
@apply -my-2 h-5 text-sm in-data-[variant=outline]:-mb-2;
|
||||
}
|
||||
@@ -984,8 +791,7 @@
|
||||
@apply text-muted-foreground px-2;
|
||||
}
|
||||
|
||||
.field [role="alert"],
|
||||
.field-error {
|
||||
.field [role="alert"] {
|
||||
@apply text-destructive text-sm;
|
||||
}
|
||||
|
||||
@@ -994,23 +800,22 @@
|
||||
@apply h-9 has-[>textarea]:h-auto rounded-4xl border border-input bg-input/30 transition-colors focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-[3px] has-[[aria-invalid=true]]:ring-destructive/20 has-[>textarea]:rounded-xl dark:has-[[aria-invalid=true]]:ring-destructive/40;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] {
|
||||
@apply rounded-2xl;
|
||||
}
|
||||
|
||||
.input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] {
|
||||
@apply rounded-2xl;
|
||||
}
|
||||
.input-group > :is(input, select, [data-control]) {
|
||||
@apply px-3 py-1 text-sm;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='start']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='end']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='end'], [data-align='inline-end'])) > :is(input, select, [data-control]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
|
||||
@@ -1023,33 +828,66 @@
|
||||
@apply gap-2 py-2 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start'] {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']) {
|
||||
@apply ps-3;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end'] {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']) {
|
||||
@apply pe-3;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> button) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> button) {
|
||||
@apply -ms-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> button) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> button) {
|
||||
@apply -me-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> kbd) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> kbd) {
|
||||
@apply -ms-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> kbd) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> kbd) {
|
||||
@apply -me-0.5;
|
||||
}
|
||||
.input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
|
||||
@apply px-3;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'] {
|
||||
@apply px-3 pt-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'] {
|
||||
@apply px-3 pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply px-3 pt-3;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply px-3 pb-3;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply pt-3;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply pb-3;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
|
||||
@apply pb-3;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
|
||||
@apply pt-3;
|
||||
}
|
||||
|
||||
|
||||
.input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
|
||||
@apply rounded-4xl bg-muted-foreground/10 px-1.5;
|
||||
}
|
||||
@@ -1084,7 +922,7 @@
|
||||
@apply text-lg font-medium tracking-tight;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
.empty > header > p {
|
||||
@apply text-muted-foreground text-sm/relaxed;
|
||||
}
|
||||
|
||||
@@ -1135,15 +973,15 @@
|
||||
@apply [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.item > figure:has(img) {
|
||||
.item > figure:has(> img) {
|
||||
@apply size-10 overflow-hidden rounded-lg;
|
||||
}
|
||||
|
||||
.item[data-size='sm'] > figure:has(img) {
|
||||
.item[data-size='sm'] > figure:has(> img) {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.item[data-size='xs'] > figure:has(img) {
|
||||
.item[data-size='xs'] > figure:has(> img) {
|
||||
@apply size-6 rounded-md;
|
||||
}
|
||||
|
||||
@@ -1193,16 +1031,16 @@
|
||||
@apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.kbd-group {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.field > label,
|
||||
.label {
|
||||
@apply gap-2 text-sm leading-none font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
.field > section > label {
|
||||
@apply gap-2 text-sm leading-snug font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar nav {
|
||||
@apply bg-sidebar text-sidebar-foreground;
|
||||
@@ -1292,6 +1130,14 @@
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
/* Progress */
|
||||
.progress {
|
||||
@apply bg-muted h-3 rounded-4xl;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton {
|
||||
|
||||
+148
-294
@@ -1,247 +1,64 @@
|
||||
/* Button */
|
||||
@layer components {
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn {
|
||||
@apply rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[2px] aria-invalid:border-destructive aria-invalid:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive {
|
||||
@apply h-7 gap-1 px-2 text-xs/relaxed;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
.btn:not([data-size]),
|
||||
.btn[data-size='default'] {
|
||||
@apply h-7 gap-1 px-2 text-xs/relaxed has-[[data-icon='inline-end']]:pr-1.5 has-[[data-icon='inline-start']]:pl-1.5;
|
||||
}
|
||||
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive {
|
||||
@apply h-5 gap-1 px-2 text-[0.625rem] rounded-sm [&_svg:not([class*='size-'])]:size-2.5;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
.btn[data-size='xs'] {
|
||||
@apply h-5 gap-1 px-2 text-[0.625rem] rounded-sm [&_svg:not([class*='size-'])]:size-2.5 has-[[data-icon='inline-end']]:pr-1.5 has-[[data-icon='inline-start']]:pl-1.5;
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive {
|
||||
@apply h-6 gap-1 px-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
.btn[data-size='sm'] {
|
||||
@apply h-6 gap-1 px-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-1.5 has-[[data-icon='inline-start']]:pl-1.5;
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive {
|
||||
@apply h-8 gap-1 px-2.5 text-xs/relaxed;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='lg'] {
|
||||
@apply h-8 gap-1 px-2.5 text-xs/relaxed has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive {
|
||||
.btn[data-size='icon'] {
|
||||
@apply size-7 [&_svg:not([class*='size-'])]:size-3.5;
|
||||
}
|
||||
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive {
|
||||
.btn[data-size='icon-xs'] {
|
||||
@apply size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5;
|
||||
}
|
||||
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive {
|
||||
.btn[data-size='icon-sm'] {
|
||||
@apply size-6 [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-size='icon-lg'] {
|
||||
@apply size-8 [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary {
|
||||
.btn:not([data-variant]),
|
||||
.btn[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-xs-secondary,
|
||||
.btn-sm-secondary,
|
||||
.btn-lg-secondary,
|
||||
.btn-icon-secondary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-lg-icon-secondary {
|
||||
.btn[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
|
||||
}
|
||||
|
||||
.btn-outline,
|
||||
.btn-xs-outline,
|
||||
.btn-sm-outline,
|
||||
.btn-lg-outline,
|
||||
.btn-icon-outline,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-lg-icon-outline {
|
||||
.btn[data-variant='outline'] {
|
||||
@apply border-border hover:bg-input/50 hover:text-foreground dark:border-input dark:bg-input/30 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-ghost,
|
||||
.btn-xs-ghost,
|
||||
.btn-sm-ghost,
|
||||
.btn-lg-ghost,
|
||||
.btn-icon-ghost,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-lg-icon-ghost {
|
||||
.btn[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-xs-link,
|
||||
.btn-sm-link,
|
||||
.btn-lg-link,
|
||||
.btn-icon-link,
|
||||
.btn-xs-icon-link,
|
||||
.btn-sm-icon-link,
|
||||
.btn-lg-icon-link {
|
||||
.btn[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
||||
}
|
||||
|
||||
@@ -268,8 +85,7 @@
|
||||
@apply bg-muted gap-2 rounded-md border px-2.5 text-xs/relaxed font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.button-group > hr[role='separator'],
|
||||
.button-group-separator {
|
||||
.button-group > hr[role='separator'] {
|
||||
@apply bg-input;
|
||||
}
|
||||
|
||||
@@ -381,8 +197,7 @@
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
.alert {
|
||||
@apply grid gap-0.5 rounded-lg border px-2 py-1.5 text-start text-xs/relaxed has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-3.5;
|
||||
}
|
||||
|
||||
@@ -390,35 +205,33 @@
|
||||
@apply bg-card text-card-foreground;
|
||||
}
|
||||
|
||||
.alert-destructive {
|
||||
.alert[data-variant='destructive'] {
|
||||
@apply text-destructive bg-card [&>svg]:text-current;
|
||||
}
|
||||
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
|
||||
:is(.alert, .alert-destructive):has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply col-start-2;
|
||||
}
|
||||
.alert > section {
|
||||
@apply text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert-destructive > section {
|
||||
.alert[data-variant='destructive'] > section {
|
||||
@apply text-destructive/90 text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
.alert[data-variant='destructive'] > footer {
|
||||
@apply top-1.5 end-2;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
.avatar {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -426,29 +239,23 @@
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
.avatar[data-size='sm'] {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
.avatar[data-size='lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
.avatar > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
.avatar > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
.avatar > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -456,47 +263,41 @@
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-xs/relaxed [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.badge,
|
||||
.badge-primary,
|
||||
.badge-secondary,
|
||||
.badge-destructive,
|
||||
.badge-outline,
|
||||
.badge-ghost,
|
||||
.badge-link {
|
||||
@apply h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-2.5!;
|
||||
.badge {
|
||||
@apply h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all [&>svg]:size-2.5!;
|
||||
}
|
||||
|
||||
.badge,
|
||||
.badge-primary {
|
||||
.badge:not([data-variant]),
|
||||
.badge[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
.badge[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
.badge[data-variant='outline'] {
|
||||
@apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 dark:bg-input/30;
|
||||
}
|
||||
|
||||
.badge-destructive {
|
||||
.badge[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
|
||||
}
|
||||
|
||||
.badge-ghost {
|
||||
.badge[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50;
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
.badge[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
@@ -590,7 +391,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -654,7 +455,7 @@
|
||||
|
||||
*:not(select).select [role='option'].active,
|
||||
*:not(select).select [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
*:not(select).select [role='group'] {
|
||||
@@ -708,7 +509,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
@apply bg-muted text-foreground;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-variant='destructive'] {
|
||||
@@ -744,11 +545,11 @@
|
||||
@apply bg-border/50 -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-shortcut] {
|
||||
@apply text-muted-foreground text-[0.625rem] tracking-widest;
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-muted-foreground font-sans text-[0.625rem] tracking-widest;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) [data-shortcut] {
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-accent-foreground;
|
||||
}
|
||||
|
||||
@@ -772,8 +573,7 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
.card {
|
||||
@apply ring-foreground/10 bg-card text-card-foreground overflow-hidden rounded-lg text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-lg [&>img:last-child]:rounded-b-lg;
|
||||
}
|
||||
|
||||
@@ -781,48 +581,47 @@
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card-sm {
|
||||
.card[data-size='sm'] {
|
||||
@apply gap-3 py-3;
|
||||
}
|
||||
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
.card > header {
|
||||
@apply gap-1 rounded-t-lg px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
.card-sm > header {
|
||||
.card[data-size='sm'] > header {
|
||||
@apply px-3 [.border-b]:pb-3;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title),
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-xs/relaxed;
|
||||
}
|
||||
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
.card > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card-sm > section {
|
||||
.card[data-size='sm'] > section {
|
||||
@apply px-3;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
.card > footer {
|
||||
@apply rounded-b-lg px-4 [.border-t]:pt-4;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
.card[data-size='sm'] > footer {
|
||||
@apply px-3 [.border-t]:pt-3;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.chart {
|
||||
--chart-bar-radius: 6px;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
@apply border-border/50 bg-background text-foreground gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl;
|
||||
}
|
||||
@@ -915,8 +714,7 @@
|
||||
@apply gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
|
||||
}
|
||||
|
||||
.fieldset > legend,
|
||||
.field-legend {
|
||||
.fieldset > legend {
|
||||
@apply mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm;
|
||||
}
|
||||
|
||||
@@ -925,6 +723,8 @@
|
||||
@apply gap-4;
|
||||
|
||||
&[role='radiogroup'],
|
||||
&:has(> .field > input[type='checkbox']:not([role='switch'])),
|
||||
&:has(> .field > input[type='radio']),
|
||||
&[data-slot='checkbox-group'],
|
||||
&[data-slot='radio-group'] {
|
||||
@apply gap-3;
|
||||
@@ -937,15 +737,15 @@
|
||||
}
|
||||
|
||||
.field {
|
||||
@apply data-[invalid=true]:text-destructive gap-2;
|
||||
@apply data-invalid:text-destructive data-[invalid=true]:text-destructive gap-2;
|
||||
}
|
||||
|
||||
.field > section,
|
||||
.field-content {
|
||||
.field > section {
|
||||
@apply gap-0.5;
|
||||
}
|
||||
|
||||
.field > label,
|
||||
.field > section > label,
|
||||
label:has(> .field) {
|
||||
@apply has-[:checked]:bg-primary/5 dark:has-[:checked]:bg-primary/10 gap-2 leading-snug in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
@@ -968,18 +768,25 @@
|
||||
@apply p-2;
|
||||
}
|
||||
.field h2,
|
||||
.field h3,
|
||||
.field-title {
|
||||
.field h3 {
|
||||
@apply gap-2 text-xs/relaxed font-medium in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
|
||||
.fieldset legend + p,
|
||||
.field > p,
|
||||
.field section > p,
|
||||
.field-description {
|
||||
.field section > p {
|
||||
@apply text-muted-foreground text-start text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5;
|
||||
}
|
||||
|
||||
.fieldset > legend[data-variant='label'] {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.fieldset > legend:not([data-variant]) + p,
|
||||
.fieldset > legend[data-variant='legend'] + p {
|
||||
@apply -mt-1.5;
|
||||
}
|
||||
|
||||
.field-separator {
|
||||
@apply -my-2 h-5 text-xs/relaxed in-data-[variant=outline]:-mb-2;
|
||||
}
|
||||
@@ -988,8 +795,7 @@
|
||||
@apply text-muted-foreground px-2;
|
||||
}
|
||||
|
||||
.field [role="alert"],
|
||||
.field-error {
|
||||
.field [role="alert"] {
|
||||
@apply text-destructive text-xs/relaxed;
|
||||
}
|
||||
|
||||
@@ -1002,16 +808,15 @@
|
||||
.input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
.input-group > :is(input, select, [data-control]) {
|
||||
@apply px-2 py-0.5 text-xs/relaxed;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='start']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='end']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='end'], [data-align='inline-end'])) > :is(input, select, [data-control]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
|
||||
@@ -1024,33 +829,74 @@
|
||||
@apply gap-1 py-2 text-xs/relaxed font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-3.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start'] {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end'] {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']) {
|
||||
@apply pe-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> button) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> button) {
|
||||
@apply -ms-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> button) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> button) {
|
||||
@apply -me-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> kbd) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> kbd) {
|
||||
@apply -ms-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> kbd) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> kbd) {
|
||||
@apply -me-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'] {
|
||||
@apply px-2.5 pt-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'] {
|
||||
@apply px-2.5 pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'].border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'].border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
.input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
|
||||
@apply px-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply px-2 pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply px-2 pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
|
||||
.input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
|
||||
@apply rounded-[calc(var(--radius-sm)-2px)] bg-muted-foreground/10 px-1 text-[0.625rem];
|
||||
}
|
||||
@@ -1085,7 +931,7 @@
|
||||
@apply text-sm font-medium tracking-tight;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
.empty > header > p {
|
||||
@apply text-muted-foreground text-xs/relaxed;
|
||||
}
|
||||
|
||||
@@ -1136,15 +982,15 @@
|
||||
@apply [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.item > figure:has(img) {
|
||||
.item > figure:has(> img) {
|
||||
@apply size-8 overflow-hidden rounded-sm;
|
||||
}
|
||||
|
||||
.item[data-size='sm'] > figure:has(img) {
|
||||
.item[data-size='sm'] > figure:has(> img) {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.item[data-size='xs'] > figure:has(img) {
|
||||
.item[data-size='xs'] > figure:has(> img) {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
@@ -1194,16 +1040,16 @@
|
||||
@apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-xs px-1 font-sans text-[0.625rem] font-medium [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.kbd-group {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.field > label,
|
||||
.label {
|
||||
@apply gap-2 text-xs/relaxed leading-none font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
.field > section > label {
|
||||
@apply gap-2 text-xs/relaxed font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar nav {
|
||||
@apply bg-sidebar text-sidebar-foreground;
|
||||
@@ -1293,6 +1139,14 @@
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-xs focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
/* Progress */
|
||||
.progress {
|
||||
@apply bg-muted h-1 rounded-md;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton {
|
||||
|
||||
+150
-295
@@ -1,247 +1,64 @@
|
||||
/* Button */
|
||||
@layer components {
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn {
|
||||
@apply rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive {
|
||||
@apply h-8 gap-1.5 px-2.5;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn:not([data-size]),
|
||||
.btn[data-size='default'] {
|
||||
@apply h-8 gap-1.5 px-2.5 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive {
|
||||
@apply h-6 gap-1 px-2 text-xs rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
.btn[data-size='xs'] {
|
||||
@apply h-6 gap-1 px-2 text-xs rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-1.5 has-[[data-icon='inline-start']]:pl-1.5;
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive {
|
||||
@apply h-7 gap-1 px-2.5 text-[0.8rem] rounded-[min(var(--radius-md),12px)] [&_svg:not([class*='size-'])]:size-3.5;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
.btn[data-size='sm'] {
|
||||
@apply h-7 gap-1 px-2.5 text-[0.8rem] rounded-[min(var(--radius-md),12px)] [&_svg:not([class*='size-'])]:size-3.5 has-[[data-icon='inline-end']]:pr-1.5 has-[[data-icon='inline-start']]:pl-1.5;
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive {
|
||||
@apply h-9 gap-1.5 px-2.5;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='lg'] {
|
||||
@apply h-9 gap-1.5 px-2.5 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive {
|
||||
.btn[data-size='icon'] {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive {
|
||||
.btn[data-size='icon-xs'] {
|
||||
@apply size-6 rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive {
|
||||
.btn[data-size='icon-sm'] {
|
||||
@apply size-7 rounded-[min(var(--radius-md),12px)];
|
||||
}
|
||||
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-size='icon-lg'] {
|
||||
@apply size-9;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary {
|
||||
.btn:not([data-variant]),
|
||||
.btn[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-xs-secondary,
|
||||
.btn-sm-secondary,
|
||||
.btn-lg-secondary,
|
||||
.btn-icon-secondary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-lg-icon-secondary {
|
||||
.btn[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
|
||||
}
|
||||
|
||||
.btn-outline,
|
||||
.btn-xs-outline,
|
||||
.btn-sm-outline,
|
||||
.btn-lg-outline,
|
||||
.btn-icon-outline,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-lg-icon-outline {
|
||||
.btn[data-variant='outline'] {
|
||||
@apply border-border bg-background hover:bg-muted hover:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-ghost,
|
||||
.btn-xs-ghost,
|
||||
.btn-sm-ghost,
|
||||
.btn-lg-ghost,
|
||||
.btn-icon-ghost,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-lg-icon-ghost {
|
||||
.btn[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-xs-link,
|
||||
.btn-sm-link,
|
||||
.btn-lg-link,
|
||||
.btn-icon-link,
|
||||
.btn-xs-icon-link,
|
||||
.btn-sm-icon-link,
|
||||
.btn-lg-icon-link {
|
||||
.btn[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
||||
}
|
||||
|
||||
@@ -268,8 +85,7 @@
|
||||
@apply bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.button-group > hr[role='separator'],
|
||||
.button-group-separator {
|
||||
.button-group > hr[role='separator'] {
|
||||
@apply bg-input;
|
||||
}
|
||||
|
||||
@@ -381,8 +197,7 @@
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
.alert {
|
||||
@apply grid gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -390,35 +205,33 @@
|
||||
@apply bg-card text-card-foreground;
|
||||
}
|
||||
|
||||
.alert-destructive {
|
||||
.alert[data-variant='destructive'] {
|
||||
@apply text-destructive bg-card [&>svg]:text-current;
|
||||
}
|
||||
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
|
||||
:is(.alert, .alert-destructive):has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply col-start-2;
|
||||
}
|
||||
.alert > section {
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert-destructive > section {
|
||||
.alert[data-variant='destructive'] > section {
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
.alert[data-variant='destructive'] > footer {
|
||||
@apply top-2 end-2;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
.avatar {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -426,29 +239,23 @@
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
.avatar[data-size='sm'] {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
.avatar[data-size='lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
.avatar > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
.avatar > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
.avatar > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -456,47 +263,41 @@
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.badge,
|
||||
.badge-primary,
|
||||
.badge-secondary,
|
||||
.badge-destructive,
|
||||
.badge-outline,
|
||||
.badge-ghost,
|
||||
.badge-link {
|
||||
@apply h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3!;
|
||||
.badge {
|
||||
@apply h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3!;
|
||||
}
|
||||
|
||||
.badge,
|
||||
.badge-primary {
|
||||
.badge:not([data-variant]),
|
||||
.badge[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
.badge[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
.badge[data-variant='outline'] {
|
||||
@apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;
|
||||
}
|
||||
|
||||
.badge-destructive {
|
||||
.badge[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
|
||||
}
|
||||
|
||||
.badge-ghost {
|
||||
.badge[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50;
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
.badge[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
@@ -590,7 +391,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -650,7 +451,7 @@
|
||||
|
||||
*:not(select).select [role='option'].active,
|
||||
*:not(select).select [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
*:not(select).select [role='group'] {
|
||||
@@ -704,7 +505,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
@apply bg-muted text-foreground;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-variant='destructive'] {
|
||||
@@ -740,11 +541,11 @@
|
||||
@apply bg-border -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-shortcut] {
|
||||
@apply text-muted-foreground text-xs tracking-widest;
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-muted-foreground font-sans text-xs tracking-widest;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) [data-shortcut] {
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-accent-foreground;
|
||||
}
|
||||
|
||||
@@ -768,8 +569,7 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
.card {
|
||||
@apply ring-foreground/10 bg-card text-card-foreground overflow-hidden rounded-xl text-sm ring-1 has-[>footer]:pb-0 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl;
|
||||
}
|
||||
|
||||
@@ -777,52 +577,51 @@
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card-sm {
|
||||
.card[data-size='sm'] {
|
||||
@apply gap-3 py-3;
|
||||
}
|
||||
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
.card > header {
|
||||
@apply gap-1 rounded-t-xl px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
.card-sm > header {
|
||||
.card[data-size='sm'] > header {
|
||||
@apply px-3 [.border-b]:pb-3;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title),
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-base leading-snug font-medium;
|
||||
}
|
||||
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card[data-size='sm'] > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
.card > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card-sm > section {
|
||||
.card[data-size='sm'] > section {
|
||||
@apply px-3;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
.card > footer {
|
||||
@apply bg-muted/50 rounded-b-xl border-t p-4;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
.card[data-size='sm'] > footer {
|
||||
@apply p-3;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.chart {
|
||||
--chart-bar-radius: 6px;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
@apply border-border/50 bg-background text-foreground gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl;
|
||||
}
|
||||
@@ -915,8 +714,7 @@
|
||||
@apply gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
|
||||
}
|
||||
|
||||
.fieldset > legend,
|
||||
.field-legend {
|
||||
.fieldset > legend {
|
||||
@apply mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base;
|
||||
}
|
||||
|
||||
@@ -925,6 +723,8 @@
|
||||
@apply gap-5;
|
||||
|
||||
&[role='radiogroup'],
|
||||
&:has(> .field > input[type='checkbox']:not([role='switch'])),
|
||||
&:has(> .field > input[type='radio']),
|
||||
&[data-slot='checkbox-group'],
|
||||
&[data-slot='radio-group'] {
|
||||
@apply gap-3;
|
||||
@@ -937,15 +737,15 @@
|
||||
}
|
||||
|
||||
.field {
|
||||
@apply data-[invalid=true]:text-destructive gap-2;
|
||||
@apply data-invalid:text-destructive data-[invalid=true]:text-destructive gap-2;
|
||||
}
|
||||
|
||||
.field > section,
|
||||
.field-content {
|
||||
.field > section {
|
||||
@apply gap-0.5;
|
||||
}
|
||||
|
||||
.field > label,
|
||||
.field > section > label,
|
||||
label:has(> .field) {
|
||||
@apply has-[:checked]:bg-primary/5 has-[:checked]:border-primary/30 dark:has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10 gap-2 leading-snug in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
@@ -968,18 +768,25 @@
|
||||
@apply p-2.5;
|
||||
}
|
||||
.field h2,
|
||||
.field h3,
|
||||
.field-title {
|
||||
.field h3 {
|
||||
@apply gap-2 leading-snug text-sm font-medium in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
|
||||
.fieldset legend + p,
|
||||
.field > p,
|
||||
.field section > p,
|
||||
.field-description {
|
||||
.field section > p {
|
||||
@apply text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5;
|
||||
}
|
||||
|
||||
.fieldset > legend[data-variant='label'] {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.fieldset > legend:not([data-variant]) + p,
|
||||
.fieldset > legend[data-variant='legend'] + p {
|
||||
@apply -mt-1.5;
|
||||
}
|
||||
|
||||
.field-separator {
|
||||
@apply -my-2 h-5 text-sm in-data-[variant=outline]:-mb-2;
|
||||
}
|
||||
@@ -988,8 +795,7 @@
|
||||
@apply text-muted-foreground px-2;
|
||||
}
|
||||
|
||||
.field [role="alert"],
|
||||
.field-error {
|
||||
.field [role="alert"] {
|
||||
@apply text-destructive text-sm;
|
||||
}
|
||||
|
||||
@@ -1000,18 +806,18 @@
|
||||
|
||||
|
||||
.input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
|
||||
@apply opacity-50;
|
||||
@apply bg-input/50 opacity-50 dark:bg-input/80;
|
||||
}
|
||||
|
||||
.input-group > :is(input, select, [data-control]) {
|
||||
@apply px-2.5 py-1 text-sm;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='start']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='end']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='end'], [data-align='inline-end'])) > :is(input, select, [data-control]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
|
||||
@@ -1024,33 +830,74 @@
|
||||
@apply gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start'] {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end'] {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']) {
|
||||
@apply pe-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> button) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> button) {
|
||||
@apply -ms-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> button) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> button) {
|
||||
@apply -me-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> kbd) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> kbd) {
|
||||
@apply -ms-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> kbd) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> kbd) {
|
||||
@apply -me-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'] {
|
||||
@apply px-2.5 pt-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'] {
|
||||
@apply px-2.5 pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'].border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'].border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
.input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
|
||||
@apply px-2.5;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply px-2.5 pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply px-2.5 pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
|
||||
.input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
|
||||
@apply rounded-[calc(var(--radius)-5px)];
|
||||
}
|
||||
@@ -1085,7 +932,7 @@
|
||||
@apply text-sm font-medium tracking-tight;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
.empty > header > p {
|
||||
@apply text-muted-foreground text-sm/relaxed;
|
||||
}
|
||||
|
||||
@@ -1136,15 +983,15 @@
|
||||
@apply [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.item > figure:has(img) {
|
||||
.item > figure:has(> img) {
|
||||
@apply size-10 overflow-hidden rounded-sm;
|
||||
}
|
||||
|
||||
.item[data-size='sm'] > figure:has(img) {
|
||||
.item[data-size='sm'] > figure:has(> img) {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.item[data-size='xs'] > figure:has(img) {
|
||||
.item[data-size='xs'] > figure:has(> img) {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
@@ -1194,16 +1041,16 @@
|
||||
@apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.kbd-group {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.field > label,
|
||||
.label {
|
||||
@apply gap-2 text-sm leading-none font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
.field > section > label {
|
||||
@apply gap-2 text-sm leading-snug font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar nav {
|
||||
@apply bg-sidebar text-sidebar-foreground;
|
||||
@@ -1293,6 +1140,14 @@
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
/* Progress */
|
||||
.progress {
|
||||
@apply bg-muted h-1 rounded-full;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton {
|
||||
|
||||
+150
-296
@@ -1,247 +1,64 @@
|
||||
/* Button */
|
||||
@layer components {
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn {
|
||||
@apply rounded-2xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive {
|
||||
@apply h-8 gap-1.5 px-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2.5;
|
||||
}
|
||||
.btn:not([data-size]),
|
||||
.btn[data-size='default'] {
|
||||
@apply h-8 gap-1.5 px-3 has-[[data-icon='inline-end']]:pr-2.5 has-[[data-icon='inline-start']]:pl-2.5;
|
||||
}
|
||||
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive {
|
||||
@apply h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='xs'] {
|
||||
@apply h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive {
|
||||
@apply h-7 gap-1 px-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='sm'] {
|
||||
@apply h-7 gap-1 px-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive {
|
||||
@apply h-9 gap-1.5 px-4;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-3;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-3;
|
||||
}
|
||||
.btn[data-size='lg'] {
|
||||
@apply h-9 gap-1.5 px-4 has-[[data-icon='inline-end']]:pr-3 has-[[data-icon='inline-start']]:pl-3;
|
||||
}
|
||||
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive {
|
||||
.btn[data-size='icon'] {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive {
|
||||
.btn[data-size='icon-xs'] {
|
||||
@apply size-6 [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive {
|
||||
.btn[data-size='icon-sm'] {
|
||||
@apply size-7;
|
||||
}
|
||||
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-size='icon-lg'] {
|
||||
@apply size-9;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary {
|
||||
.btn:not([data-variant]),
|
||||
.btn[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-xs-secondary,
|
||||
.btn-sm-secondary,
|
||||
.btn-lg-secondary,
|
||||
.btn-icon-secondary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-lg-icon-secondary {
|
||||
.btn[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
|
||||
}
|
||||
|
||||
.btn-outline,
|
||||
.btn-xs-outline,
|
||||
.btn-sm-outline,
|
||||
.btn-lg-outline,
|
||||
.btn-icon-outline,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-lg-icon-outline {
|
||||
.btn[data-variant='outline'] {
|
||||
@apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-transparent dark:hover:bg-input/30 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-ghost,
|
||||
.btn-xs-ghost,
|
||||
.btn-sm-ghost,
|
||||
.btn-lg-ghost,
|
||||
.btn-icon-ghost,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-lg-icon-ghost {
|
||||
.btn[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-xs-link,
|
||||
.btn-sm-link,
|
||||
.btn-lg-link,
|
||||
.btn-icon-link,
|
||||
.btn-xs-icon-link,
|
||||
.btn-sm-icon-link,
|
||||
.btn-lg-icon-link {
|
||||
.btn[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
||||
}
|
||||
|
||||
@@ -250,8 +67,8 @@
|
||||
@apply has-[>.button-group]:gap-2;
|
||||
}
|
||||
|
||||
.button-group:has(> :is(.btn-outline, .btn-icon-outline, .btn-xs-outline, .btn-xs-icon-outline, .btn-sm-outline, .btn-sm-icon-outline, .btn-lg-outline, .btn-lg-icon-outline)),
|
||||
.button-group:has(> .select > button:is(.btn-outline, .btn-icon-outline, .btn-xs-outline, .btn-xs-icon-outline, .btn-sm-outline, .btn-sm-icon-outline, .btn-lg-outline, .btn-lg-icon-outline)) {
|
||||
.button-group:has(> .btn[data-variant='outline']),
|
||||
.button-group:has(> .select > button.btn[data-variant='outline']) {
|
||||
> .input,
|
||||
> .select > button {
|
||||
@apply border-border focus-visible:border-ring;
|
||||
@@ -276,8 +93,7 @@
|
||||
@apply bg-muted gap-2 rounded-2xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.button-group > hr[role='separator'],
|
||||
.button-group-separator {
|
||||
.button-group > hr[role='separator'] {
|
||||
@apply bg-input;
|
||||
}
|
||||
|
||||
@@ -389,8 +205,7 @@
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
.alert {
|
||||
@apply grid gap-0.5 rounded-2xl border px-4 py-3 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -398,35 +213,33 @@
|
||||
@apply bg-card text-card-foreground;
|
||||
}
|
||||
|
||||
.alert-destructive {
|
||||
.alert[data-variant='destructive'] {
|
||||
@apply text-destructive bg-card [&>svg]:text-current;
|
||||
}
|
||||
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
|
||||
:is(.alert, .alert-destructive):has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply col-start-2;
|
||||
}
|
||||
.alert > section {
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert-destructive > section {
|
||||
.alert[data-variant='destructive'] > section {
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
.alert[data-variant='destructive'] > footer {
|
||||
@apply top-2.5 end-3;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
.avatar {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -434,29 +247,23 @@
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
.avatar[data-size='sm'] {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
.avatar[data-size='lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
.avatar > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
.avatar > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
.avatar > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -464,47 +271,41 @@
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.badge,
|
||||
.badge-primary,
|
||||
.badge-secondary,
|
||||
.badge-destructive,
|
||||
.badge-outline,
|
||||
.badge-ghost,
|
||||
.badge-link {
|
||||
@apply h-5 gap-1 rounded-2xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3!;
|
||||
.badge {
|
||||
@apply h-5 gap-1 rounded-2xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3!;
|
||||
}
|
||||
|
||||
.badge,
|
||||
.badge-primary {
|
||||
.badge:not([data-variant]),
|
||||
.badge[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
.badge[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
.badge[data-variant='outline'] {
|
||||
@apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;
|
||||
}
|
||||
|
||||
.badge-destructive {
|
||||
.badge[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
|
||||
}
|
||||
|
||||
.badge-ghost {
|
||||
.badge[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50;
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
.badge[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
@@ -598,7 +399,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -658,7 +459,7 @@
|
||||
|
||||
*:not(select).select [role='option'].active,
|
||||
*:not(select).select [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
*:not(select).select [role='group'] {
|
||||
@@ -716,7 +517,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
@apply bg-muted text-foreground;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-variant='destructive'] {
|
||||
@@ -752,11 +553,11 @@
|
||||
@apply bg-border/50 -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-shortcut] {
|
||||
@apply text-muted-foreground text-xs tracking-widest;
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-muted-foreground font-sans text-xs tracking-widest;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) [data-shortcut] {
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-accent-foreground;
|
||||
}
|
||||
|
||||
@@ -780,8 +581,7 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
.card {
|
||||
@apply bg-card text-card-foreground ring-foreground/5 dark:ring-foreground/10 overflow-hidden rounded-[min(var(--radius-4xl),24px)] text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-[min(var(--radius-4xl),24px)] [&>img:last-child]:rounded-b-[min(var(--radius-4xl),24px)];
|
||||
}
|
||||
|
||||
@@ -789,48 +589,47 @@
|
||||
@apply gap-5 py-5;
|
||||
}
|
||||
|
||||
.card-sm {
|
||||
.card[data-size='sm'] {
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
.card > header {
|
||||
@apply gap-1.5 rounded-t-[min(var(--radius-4xl),24px)] px-5 [.border-b]:pb-5;
|
||||
}
|
||||
|
||||
.card-sm > header {
|
||||
.card[data-size='sm'] > header {
|
||||
@apply px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title),
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-base font-medium;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
.card > section {
|
||||
@apply px-5;
|
||||
}
|
||||
|
||||
.card-sm > section {
|
||||
.card[data-size='sm'] > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
.card > footer {
|
||||
@apply rounded-b-[min(var(--radius-4xl),24px)] px-5 [.border-t]:pt-5;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
.card[data-size='sm'] > footer {
|
||||
@apply px-4 [.border-t]:pt-4;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.chart {
|
||||
--chart-bar-radius: 6px;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
@apply border-border/50 bg-background text-foreground gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl;
|
||||
}
|
||||
@@ -923,8 +722,7 @@
|
||||
@apply gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
|
||||
}
|
||||
|
||||
.fieldset > legend,
|
||||
.field-legend {
|
||||
.fieldset > legend {
|
||||
@apply mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base;
|
||||
}
|
||||
|
||||
@@ -933,6 +731,8 @@
|
||||
@apply gap-6;
|
||||
|
||||
&[role='radiogroup'],
|
||||
&:has(> .field > input[type='checkbox']:not([role='switch'])),
|
||||
&:has(> .field > input[type='radio']),
|
||||
&[data-slot='checkbox-group'],
|
||||
&[data-slot='radio-group'] {
|
||||
@apply gap-3;
|
||||
@@ -945,15 +745,15 @@
|
||||
}
|
||||
|
||||
.field {
|
||||
@apply data-[invalid=true]:text-destructive gap-3;
|
||||
@apply data-invalid:text-destructive data-[invalid=true]:text-destructive gap-3;
|
||||
}
|
||||
|
||||
.field > section,
|
||||
.field-content {
|
||||
.field > section {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
.field > label,
|
||||
.field > section > label,
|
||||
label:has(> .field) {
|
||||
@apply has-[:checked]:bg-input/30 gap-2 leading-snug in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
@@ -976,18 +776,25 @@
|
||||
@apply p-4;
|
||||
}
|
||||
.field h2,
|
||||
.field h3,
|
||||
.field-title {
|
||||
.field h3 {
|
||||
@apply gap-2 leading-snug text-sm font-medium in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
|
||||
.fieldset legend + p,
|
||||
.field > p,
|
||||
.field section > p,
|
||||
.field-description {
|
||||
.field section > p {
|
||||
@apply text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5;
|
||||
}
|
||||
|
||||
.fieldset > legend[data-variant='label'] {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.fieldset > legend:not([data-variant]) + p,
|
||||
.fieldset > legend[data-variant='legend'] + p {
|
||||
@apply -mt-1.5;
|
||||
}
|
||||
|
||||
.field-separator {
|
||||
@apply -my-2 h-5 text-sm in-data-[variant=outline]:-mb-2;
|
||||
}
|
||||
@@ -996,8 +803,7 @@
|
||||
@apply text-muted-foreground px-2;
|
||||
}
|
||||
|
||||
.field [role="alert"],
|
||||
.field-error {
|
||||
.field [role="alert"] {
|
||||
@apply text-destructive text-sm;
|
||||
}
|
||||
|
||||
@@ -1010,16 +816,15 @@
|
||||
.input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
.input-group > :is(input, select, [data-control]) {
|
||||
@apply px-2.5 py-1 text-sm;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='start']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='end']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='end'], [data-align='inline-end'])) > :is(input, select, [data-control]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
|
||||
@@ -1032,33 +837,74 @@
|
||||
@apply gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start'] {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end'] {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']) {
|
||||
@apply pe-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> button) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> button) {
|
||||
@apply -ms-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> button) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> button) {
|
||||
@apply -me-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> kbd) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> kbd) {
|
||||
@apply -ms-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> kbd) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> kbd) {
|
||||
@apply -me-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'] {
|
||||
@apply px-2.5 pt-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'] {
|
||||
@apply px-2.5 pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'].border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'].border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
.input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
|
||||
@apply px-2.5;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply px-2.5 pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply px-2.5 pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
|
||||
.input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
|
||||
@apply rounded-2xl bg-muted-foreground/10 px-1.5;
|
||||
}
|
||||
@@ -1093,7 +939,7 @@
|
||||
@apply text-lg font-medium tracking-tight;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
.empty > header > p {
|
||||
@apply text-muted-foreground text-sm/relaxed;
|
||||
}
|
||||
|
||||
@@ -1144,15 +990,15 @@
|
||||
@apply [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.item > figure:has(img) {
|
||||
.item > figure:has(> img) {
|
||||
@apply size-10 overflow-hidden rounded-xl;
|
||||
}
|
||||
|
||||
.item[data-size='sm'] > figure:has(img) {
|
||||
.item[data-size='sm'] > figure:has(> img) {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.item[data-size='xs'] > figure:has(img) {
|
||||
.item[data-size='xs'] > figure:has(> img) {
|
||||
@apply size-6 rounded-lg;
|
||||
}
|
||||
|
||||
@@ -1202,16 +1048,16 @@
|
||||
@apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-lg px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.kbd-group {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.field > label,
|
||||
.label {
|
||||
@apply gap-2 text-sm leading-none font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
.field > section > label {
|
||||
@apply gap-2 text-sm leading-snug font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar nav {
|
||||
@apply bg-sidebar text-sidebar-foreground;
|
||||
@@ -1301,6 +1147,14 @@
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-xl px-3 text-sm focus-visible:ring-3 [&>svg]:size-4;
|
||||
}
|
||||
/* Progress */
|
||||
.progress {
|
||||
@apply bg-muted h-2 rounded-2xl;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton {
|
||||
|
||||
+144
-298
@@ -1,247 +1,64 @@
|
||||
/* Button */
|
||||
@layer components {
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn {
|
||||
@apply rounded-none border border-transparent bg-clip-padding text-xs font-semibold uppercase tracking-widest focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[2px] aria-invalid:border-destructive aria-invalid:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-3.5;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive {
|
||||
@apply h-10 gap-1.5 px-6;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-4;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-4;
|
||||
}
|
||||
.btn:not([data-size]),
|
||||
.btn[data-size='default'] {
|
||||
@apply h-10 gap-1.5 px-6 has-[[data-icon='inline-end']]:pr-4 has-[[data-icon='inline-start']]:pl-4;
|
||||
}
|
||||
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive {
|
||||
@apply h-7 gap-1 px-3 [&_svg:not([class*='size-'])]:size-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='xs'] {
|
||||
@apply h-7 gap-1 px-3 [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive {
|
||||
@apply h-9 gap-1 px-4;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-3;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-3;
|
||||
}
|
||||
.btn[data-size='sm'] {
|
||||
@apply h-9 gap-1 px-4 has-[[data-icon='inline-end']]:pr-3 has-[[data-icon='inline-start']]:pl-3;
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive {
|
||||
@apply h-11 gap-1.5 px-8;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-5;
|
||||
}
|
||||
.btn[data-size='lg'] {
|
||||
@apply h-11 gap-1.5 px-8 has-[[data-icon='inline-end']]:pr-5 has-[[data-icon='inline-start']]:pl-5;
|
||||
}
|
||||
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive {
|
||||
.btn[data-size='icon'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive {
|
||||
.btn[data-size='icon-xs'] {
|
||||
@apply size-7 [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive {
|
||||
.btn[data-size='icon-sm'] {
|
||||
@apply size-9;
|
||||
}
|
||||
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-size='icon-lg'] {
|
||||
@apply size-11;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary {
|
||||
.btn:not([data-variant]),
|
||||
.btn[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-xs-secondary,
|
||||
.btn-sm-secondary,
|
||||
.btn-lg-secondary,
|
||||
.btn-icon-secondary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-lg-icon-secondary {
|
||||
.btn[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
|
||||
}
|
||||
|
||||
.btn-outline,
|
||||
.btn-xs-outline,
|
||||
.btn-sm-outline,
|
||||
.btn-lg-outline,
|
||||
.btn-icon-outline,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-lg-icon-outline {
|
||||
.btn[data-variant='outline'] {
|
||||
@apply border-border bg-transparent hover:bg-muted hover:text-foreground dark:hover:bg-input/30 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-ghost,
|
||||
.btn-xs-ghost,
|
||||
.btn-sm-ghost,
|
||||
.btn-lg-ghost,
|
||||
.btn-icon-ghost,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-lg-icon-ghost {
|
||||
.btn[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-xs-link,
|
||||
.btn-sm-link,
|
||||
.btn-lg-link,
|
||||
.btn-icon-link,
|
||||
.btn-xs-icon-link,
|
||||
.btn-sm-icon-link,
|
||||
.btn-lg-icon-link {
|
||||
.btn[data-variant='link'] {
|
||||
@apply text-primary underline underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
||||
}
|
||||
|
||||
@@ -254,8 +71,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-group:has(> :is(.btn-outline, .btn-icon-outline, .btn-xs-outline, .btn-xs-icon-outline, .btn-sm-outline, .btn-sm-icon-outline, .btn-lg-outline, .btn-lg-icon-outline)),
|
||||
.button-group:has(> .select > button:is(.btn-outline, .btn-icon-outline, .btn-xs-outline, .btn-xs-icon-outline, .btn-sm-outline, .btn-sm-icon-outline, .btn-lg-outline, .btn-lg-icon-outline)) {
|
||||
.button-group:has(> .btn[data-variant='outline']),
|
||||
.button-group:has(> .select > button.btn[data-variant='outline']) {
|
||||
> .input,
|
||||
> .select > button {
|
||||
@apply border-border focus-visible:border-ring;
|
||||
@@ -284,8 +101,7 @@
|
||||
@apply gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase [&_svg:not([class*='size-'])]:size-3.5;
|
||||
}
|
||||
|
||||
.button-group > hr[role='separator'],
|
||||
.button-group-separator {
|
||||
.button-group > hr[role='separator'] {
|
||||
@apply bg-input;
|
||||
}
|
||||
|
||||
@@ -397,8 +213,7 @@
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
.alert {
|
||||
@apply grid gap-1 bg-background border px-4 py-3 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4 relative after:-inset-y-px after:-start-px after:w-0.5 after:absolute;
|
||||
}
|
||||
|
||||
@@ -406,35 +221,33 @@
|
||||
@apply bg-card text-card-foreground after:bg-foreground;
|
||||
}
|
||||
|
||||
.alert-destructive {
|
||||
.alert[data-variant='destructive'] {
|
||||
@apply text-destructive bg-card [&>svg]:text-current after:bg-destructive;
|
||||
}
|
||||
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply font-semibold text-sm;
|
||||
}
|
||||
|
||||
|
||||
:is(.alert, .alert-destructive):has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply col-start-2;
|
||||
}
|
||||
.alert > section {
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert-destructive > section {
|
||||
.alert[data-variant='destructive'] > section {
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
.alert[data-variant='destructive'] > footer {
|
||||
@apply top-2.5 end-3;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
.avatar {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -442,29 +255,23 @@
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
.avatar[data-size='sm'] {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
.avatar[data-size='lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
.avatar > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
.avatar > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
.avatar > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -472,47 +279,41 @@
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.badge,
|
||||
.badge-primary,
|
||||
.badge-secondary,
|
||||
.badge-destructive,
|
||||
.badge-outline,
|
||||
.badge-ghost,
|
||||
.badge-link {
|
||||
@apply gap-1.5 rounded-none border-0 bg-transparent px-0 py-0 text-[0.625rem] font-semibold uppercase tracking-widest transition-colors has-data-[icon=inline-end]:pe-0 has-data-[icon=inline-start]:ps-0 [&>svg]:size-3!;
|
||||
.badge {
|
||||
@apply gap-1.5 rounded-none border-0 bg-transparent px-0 py-0 text-[0.625rem] font-semibold uppercase tracking-widest transition-colors [&>svg]:size-3!;
|
||||
}
|
||||
|
||||
.badge,
|
||||
.badge-primary {
|
||||
.badge:not([data-variant]),
|
||||
.badge[data-variant='primary'] {
|
||||
@apply text-foreground [a]:hover:text-foreground/70;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
.badge[data-variant='secondary'] {
|
||||
@apply text-muted-foreground [a]:hover:text-foreground;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
.badge[data-variant='outline'] {
|
||||
@apply text-foreground [a]:hover:text-foreground/70;
|
||||
}
|
||||
|
||||
.badge-destructive {
|
||||
.badge[data-variant='destructive'] {
|
||||
@apply text-destructive [a]:hover:text-destructive/70 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
||||
}
|
||||
|
||||
.badge-ghost {
|
||||
.badge[data-variant='ghost'] {
|
||||
@apply text-muted-foreground hover:text-foreground;
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
.badge[data-variant='link'] {
|
||||
@apply text-foreground underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
@@ -606,7 +407,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -666,7 +467,7 @@
|
||||
|
||||
*:not(select).select [role='option'].active,
|
||||
*:not(select).select [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
*:not(select).select [role='group'] {
|
||||
@@ -724,7 +525,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
@apply bg-muted text-foreground;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-variant='destructive'] {
|
||||
@@ -760,11 +561,11 @@
|
||||
@apply bg-border/50 -mx-1.5 my-1.5 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-shortcut] {
|
||||
@apply text-muted-foreground text-xs tracking-widest;
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-muted-foreground font-sans text-xs tracking-widest;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) [data-shortcut] {
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-accent-foreground;
|
||||
}
|
||||
|
||||
@@ -788,8 +589,7 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
.card {
|
||||
@apply bg-card text-card-foreground ring-foreground/5 overflow-hidden text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-none [&>img:last-child]:rounded-none;
|
||||
}
|
||||
|
||||
@@ -797,48 +597,47 @@
|
||||
@apply gap-8 py-8;
|
||||
}
|
||||
|
||||
.card-sm {
|
||||
.card[data-size='sm'] {
|
||||
@apply gap-5 py-5;
|
||||
}
|
||||
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
.card > header {
|
||||
@apply gap-1.5 rounded-none px-8 [.border-b]:pb-8;
|
||||
}
|
||||
|
||||
.card-sm > header {
|
||||
.card[data-size='sm'] > header {
|
||||
@apply px-5 [.border-b]:pb-5;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title),
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-lg font-semibold tracking-wider uppercase;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm leading-relaxed;
|
||||
}
|
||||
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
.card > section {
|
||||
@apply px-8;
|
||||
}
|
||||
|
||||
.card-sm > section {
|
||||
.card[data-size='sm'] > section {
|
||||
@apply px-5;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
.card > footer {
|
||||
@apply px-8 [.border-t]:pt-8;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
.card[data-size='sm'] > footer {
|
||||
@apply px-5 [.border-t]:pt-5;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.chart {
|
||||
--chart-bar-radius: 0;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
@apply border-border/50 bg-background text-foreground gap-1.5 rounded-none border px-2.5 py-1.5 text-xs shadow-xl;
|
||||
}
|
||||
@@ -935,8 +734,7 @@
|
||||
@apply gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
|
||||
}
|
||||
|
||||
.fieldset > legend,
|
||||
.field-legend {
|
||||
.fieldset > legend {
|
||||
@apply mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs;
|
||||
}
|
||||
|
||||
@@ -945,6 +743,8 @@
|
||||
@apply gap-10;
|
||||
|
||||
&[role='radiogroup'],
|
||||
&:has(> .field > input[type='checkbox']:not([role='switch'])),
|
||||
&:has(> .field > input[type='radio']),
|
||||
&[data-slot='checkbox-group'],
|
||||
&[data-slot='radio-group'] {
|
||||
@apply gap-3;
|
||||
@@ -957,15 +757,15 @@
|
||||
}
|
||||
|
||||
.field {
|
||||
@apply data-[invalid=true]:text-destructive gap-3;
|
||||
@apply data-invalid:text-destructive data-[invalid=true]:text-destructive gap-3;
|
||||
}
|
||||
|
||||
.field > section,
|
||||
.field-content {
|
||||
.field > section {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
.field > label,
|
||||
.field > section > label,
|
||||
label:has(> .field) {
|
||||
@apply has-[:checked]:bg-primary/5 has-[:checked]:border-primary/30 dark:has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10 gap-2 in-data-[disabled=true]:opacity-50 leading-relaxed;
|
||||
}
|
||||
@@ -988,18 +788,25 @@
|
||||
@apply p-4;
|
||||
}
|
||||
.field h2,
|
||||
.field h3,
|
||||
.field-title {
|
||||
.field h3 {
|
||||
@apply gap-2 in-data-[disabled=true]:opacity-50 leading-normal font-semibold uppercase text-xs;
|
||||
}
|
||||
|
||||
.fieldset legend + p,
|
||||
.field > p,
|
||||
.field section > p,
|
||||
.field-description {
|
||||
.field section > p {
|
||||
@apply text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5 normal-case tracking-normal;
|
||||
}
|
||||
|
||||
.fieldset > legend[data-variant='label'] {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.fieldset > legend:not([data-variant]) + p,
|
||||
.fieldset > legend[data-variant='legend'] + p {
|
||||
@apply -mt-1.5;
|
||||
}
|
||||
|
||||
.field-separator {
|
||||
@apply -my-2 h-5 text-sm in-data-[variant=outline]:-mb-2;
|
||||
}
|
||||
@@ -1008,8 +815,7 @@
|
||||
@apply text-muted-foreground px-2;
|
||||
}
|
||||
|
||||
.field [role="alert"],
|
||||
.field-error {
|
||||
.field [role="alert"] {
|
||||
@apply text-destructive text-sm;
|
||||
}
|
||||
|
||||
@@ -1022,16 +828,15 @@
|
||||
.input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
.input-group > :is(input, select, [data-control]) {
|
||||
@apply px-0 py-1 text-sm;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='start']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='end']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='end'], [data-align='inline-end'])) > :is(input, select, [data-control]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
|
||||
@@ -1044,25 +849,58 @@
|
||||
@apply gap-2 py-2 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-3.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> button) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> button) {
|
||||
@apply -ms-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> button) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> button) {
|
||||
@apply -me-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> kbd) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> kbd) {
|
||||
@apply -ms-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> kbd) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> kbd) {
|
||||
@apply -me-0.5;
|
||||
}
|
||||
.input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
|
||||
@apply px-0;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'] {
|
||||
@apply px-0 pt-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'] {
|
||||
@apply px-0 pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply px-0 pt-3;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply px-0 pb-3;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply pt-3.5;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply pb-3.5;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
|
||||
@apply pb-3.5;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
|
||||
@apply pt-3.5;
|
||||
}
|
||||
|
||||
|
||||
.input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
|
||||
@apply rounded-none bg-muted-foreground/10 px-1.5;
|
||||
}
|
||||
@@ -1097,7 +935,7 @@
|
||||
@apply text-lg font-semibold tracking-wider uppercase;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
.empty > header > p {
|
||||
@apply text-muted-foreground mt-0.5 text-sm/relaxed;
|
||||
}
|
||||
|
||||
@@ -1148,15 +986,15 @@
|
||||
@apply [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.item > figure:has(img) {
|
||||
.item > figure:has(> img) {
|
||||
@apply size-10 overflow-hidden rounded-none;
|
||||
}
|
||||
|
||||
.item[data-size='sm'] > figure:has(img) {
|
||||
.item[data-size='sm'] > figure:has(> img) {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.item[data-size='xs'] > figure:has(img) {
|
||||
.item[data-size='xs'] > figure:has(> img) {
|
||||
@apply size-6 rounded-none;
|
||||
}
|
||||
|
||||
@@ -1206,20 +1044,20 @@
|
||||
@apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5.5 w-fit min-w-5.5 gap-1 rounded-none px-1.5 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.kbd-group {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.field > label,
|
||||
.label {
|
||||
@apply gap-2 font-semibold leading-relaxed in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 uppercase text-xs tracking-wide;
|
||||
}
|
||||
|
||||
:is(.field > label, .label):has(input[type='checkbox']),
|
||||
:is(.field > label, .label):has(input[type='radio']),
|
||||
:is(.field > label, .label):has(input[role='switch']),
|
||||
:is(input[type='checkbox'], input[type='radio'], input[role='switch']) + :is(.field > label, .label) {
|
||||
.field > section > label {
|
||||
@apply gap-2 font-semibold leading-relaxed in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 uppercase text-xs tracking-wide;
|
||||
}
|
||||
|
||||
:is(.field > label, .field > section > label, .label):has(input[type='checkbox']),
|
||||
:is(.field > label, .field > section > label, .label):has(input[type='radio']),
|
||||
:is(.field > label, .field > section > label, .label):has(input[role='switch']),
|
||||
:is(input[type='checkbox'], input[type='radio'], input[role='switch']) + :is(.field > label, .field > section > label, .label) {
|
||||
@apply text-sm font-normal normal-case tracking-normal;
|
||||
}
|
||||
|
||||
@@ -1312,6 +1150,14 @@
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-3 text-sm focus-visible:ring-2 [&>svg]:size-3.5;
|
||||
}
|
||||
/* Progress */
|
||||
.progress {
|
||||
@apply bg-muted h-0.5 rounded-none;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton {
|
||||
|
||||
+149
-295
@@ -1,247 +1,64 @@
|
||||
/* Button */
|
||||
@layer components {
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn {
|
||||
@apply rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive {
|
||||
@apply h-9 gap-1.5 px-2.5;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn:not([data-size]),
|
||||
.btn[data-size='default'] {
|
||||
@apply h-9 gap-1.5 px-2.5 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive {
|
||||
@apply h-6 gap-1 px-2 text-xs rounded-[min(var(--radius-md),8px)] [&_svg:not([class*='size-'])]:size-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
.btn[data-size='xs'] {
|
||||
@apply h-6 gap-1 px-2 text-xs rounded-[min(var(--radius-md),8px)] [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-1.5 has-[[data-icon='inline-start']]:pl-1.5;
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive {
|
||||
@apply h-8 gap-1 px-2.5 rounded-[min(var(--radius-md),10px)];
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
.btn[data-size='sm'] {
|
||||
@apply h-8 gap-1 px-2.5 rounded-[min(var(--radius-md),10px)] has-[[data-icon='inline-end']]:pr-1.5 has-[[data-icon='inline-start']]:pl-1.5;
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive {
|
||||
@apply h-10 gap-1.5 px-2.5;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='lg'] {
|
||||
@apply h-10 gap-1.5 px-2.5 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive {
|
||||
.btn[data-size='icon'] {
|
||||
@apply size-9;
|
||||
}
|
||||
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive {
|
||||
.btn[data-size='icon-xs'] {
|
||||
@apply size-6 rounded-[min(var(--radius-md),8px)] [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive {
|
||||
.btn[data-size='icon-sm'] {
|
||||
@apply size-8 rounded-[min(var(--radius-md),10px)];
|
||||
}
|
||||
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-size='icon-lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary {
|
||||
.btn:not([data-variant]),
|
||||
.btn[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-xs-secondary,
|
||||
.btn-sm-secondary,
|
||||
.btn-lg-secondary,
|
||||
.btn-icon-secondary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-lg-icon-secondary {
|
||||
.btn[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
|
||||
}
|
||||
|
||||
.btn-outline,
|
||||
.btn-xs-outline,
|
||||
.btn-sm-outline,
|
||||
.btn-lg-outline,
|
||||
.btn-icon-outline,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-lg-icon-outline {
|
||||
.btn[data-variant='outline'] {
|
||||
@apply border-border bg-background shadow-xs hover:bg-muted hover:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-ghost,
|
||||
.btn-xs-ghost,
|
||||
.btn-sm-ghost,
|
||||
.btn-lg-ghost,
|
||||
.btn-icon-ghost,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-lg-icon-ghost {
|
||||
.btn[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-xs-link,
|
||||
.btn-sm-link,
|
||||
.btn-lg-link,
|
||||
.btn-icon-link,
|
||||
.btn-xs-icon-link,
|
||||
.btn-sm-icon-link,
|
||||
.btn-lg-icon-link {
|
||||
.btn[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
||||
}
|
||||
|
||||
@@ -268,8 +85,7 @@
|
||||
@apply bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.button-group > hr[role='separator'],
|
||||
.button-group-separator {
|
||||
.button-group > hr[role='separator'] {
|
||||
@apply bg-input;
|
||||
}
|
||||
|
||||
@@ -381,8 +197,7 @@
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
.alert {
|
||||
@apply grid gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -390,35 +205,33 @@
|
||||
@apply bg-card text-card-foreground;
|
||||
}
|
||||
|
||||
.alert-destructive {
|
||||
.alert[data-variant='destructive'] {
|
||||
@apply text-destructive bg-card [&>svg]:text-current;
|
||||
}
|
||||
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
|
||||
:is(.alert, .alert-destructive):has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply col-start-2;
|
||||
}
|
||||
.alert > section {
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert-destructive > section {
|
||||
.alert[data-variant='destructive'] > section {
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
.alert[data-variant='destructive'] > footer {
|
||||
@apply top-2.5 end-3;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
.avatar {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -426,29 +239,23 @@
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
.avatar[data-size='sm'] {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
.avatar[data-size='lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
.avatar > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
.avatar > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
.avatar > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -456,47 +263,41 @@
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.badge,
|
||||
.badge-primary,
|
||||
.badge-secondary,
|
||||
.badge-destructive,
|
||||
.badge-outline,
|
||||
.badge-ghost,
|
||||
.badge-link {
|
||||
@apply h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3!;
|
||||
.badge {
|
||||
@apply h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3!;
|
||||
}
|
||||
|
||||
.badge,
|
||||
.badge-primary {
|
||||
.badge:not([data-variant]),
|
||||
.badge[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
.badge[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
.badge[data-variant='outline'] {
|
||||
@apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;
|
||||
}
|
||||
|
||||
.badge-destructive {
|
||||
.badge[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
|
||||
}
|
||||
|
||||
.badge-ghost {
|
||||
.badge[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50;
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
.badge[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
@@ -590,7 +391,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -650,7 +451,7 @@
|
||||
|
||||
*:not(select).select [role='option'].active,
|
||||
*:not(select).select [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
*:not(select).select [role='group'] {
|
||||
@@ -704,7 +505,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
@apply bg-muted text-foreground;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-variant='destructive'] {
|
||||
@@ -740,11 +541,11 @@
|
||||
@apply bg-border -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-shortcut] {
|
||||
@apply text-muted-foreground text-xs tracking-widest;
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-muted-foreground font-sans text-xs tracking-widest;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) [data-shortcut] {
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-accent-foreground;
|
||||
}
|
||||
|
||||
@@ -768,8 +569,7 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
.card {
|
||||
@apply ring-foreground/10 bg-card text-card-foreground overflow-hidden rounded-xl text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl;
|
||||
}
|
||||
|
||||
@@ -777,52 +577,51 @@
|
||||
@apply gap-6 py-6;
|
||||
}
|
||||
|
||||
.card-sm {
|
||||
.card[data-size='sm'] {
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
.card > header {
|
||||
@apply gap-1 rounded-t-xl px-6 [.border-b]:pb-6;
|
||||
}
|
||||
|
||||
.card-sm > header {
|
||||
.card[data-size='sm'] > header {
|
||||
@apply px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title),
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-base leading-normal font-medium;
|
||||
}
|
||||
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card[data-size='sm'] > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
.card > section {
|
||||
@apply px-6;
|
||||
}
|
||||
|
||||
.card-sm > section {
|
||||
.card[data-size='sm'] > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
.card > footer {
|
||||
@apply rounded-b-xl px-6 [.border-t]:pt-6;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
.card[data-size='sm'] > footer {
|
||||
@apply px-4 [.border-t]:pt-4;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.chart {
|
||||
--chart-bar-radius: 6px;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
@apply border-border/50 bg-background text-foreground gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl;
|
||||
}
|
||||
@@ -915,8 +714,7 @@
|
||||
@apply gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
|
||||
}
|
||||
|
||||
.fieldset > legend,
|
||||
.field-legend {
|
||||
.fieldset > legend {
|
||||
@apply mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base;
|
||||
}
|
||||
|
||||
@@ -925,6 +723,8 @@
|
||||
@apply gap-7;
|
||||
|
||||
&[role='radiogroup'],
|
||||
&:has(> .field > input[type='checkbox']:not([role='switch'])),
|
||||
&:has(> .field > input[type='radio']),
|
||||
&[data-slot='checkbox-group'],
|
||||
&[data-slot='radio-group'] {
|
||||
@apply gap-3;
|
||||
@@ -937,15 +737,15 @@
|
||||
}
|
||||
|
||||
.field {
|
||||
@apply data-[invalid=true]:text-destructive gap-3;
|
||||
@apply data-invalid:text-destructive data-[invalid=true]:text-destructive gap-3;
|
||||
}
|
||||
|
||||
.field > section,
|
||||
.field-content {
|
||||
.field > section {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
.field > label,
|
||||
.field > section > label,
|
||||
label:has(> .field) {
|
||||
@apply has-[:checked]:bg-primary/5 has-[:checked]:border-primary/30 dark:has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10 gap-2 leading-snug in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
@@ -968,18 +768,25 @@
|
||||
@apply p-3;
|
||||
}
|
||||
.field h2,
|
||||
.field h3,
|
||||
.field-title {
|
||||
.field h3 {
|
||||
@apply gap-2 leading-snug text-sm font-medium in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
|
||||
.fieldset legend + p,
|
||||
.field > p,
|
||||
.field section > p,
|
||||
.field-description {
|
||||
.field section > p {
|
||||
@apply text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5;
|
||||
}
|
||||
|
||||
.fieldset > legend[data-variant='label'] {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.fieldset > legend:not([data-variant]) + p,
|
||||
.fieldset > legend[data-variant='legend'] + p {
|
||||
@apply -mt-1.5;
|
||||
}
|
||||
|
||||
.field-separator {
|
||||
@apply -my-2 h-5 text-sm in-data-[variant=outline]:-mb-2;
|
||||
}
|
||||
@@ -988,8 +795,7 @@
|
||||
@apply text-muted-foreground px-2;
|
||||
}
|
||||
|
||||
.field [role="alert"],
|
||||
.field-error {
|
||||
.field [role="alert"] {
|
||||
@apply text-destructive text-sm;
|
||||
}
|
||||
|
||||
@@ -1002,16 +808,15 @@
|
||||
.input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
.input-group > :is(input, select, [data-control]) {
|
||||
@apply px-2.5 py-1 text-sm;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='start']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='end']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='end'], [data-align='inline-end'])) > :is(input, select, [data-control]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
|
||||
@@ -1024,33 +829,74 @@
|
||||
@apply gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start'] {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end'] {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']) {
|
||||
@apply pe-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> button) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> button) {
|
||||
@apply -ms-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> button) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> button) {
|
||||
@apply -me-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> kbd) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> kbd) {
|
||||
@apply -ms-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> kbd) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> kbd) {
|
||||
@apply -me-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'] {
|
||||
@apply px-2.5 pt-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'] {
|
||||
@apply px-2.5 pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'].border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'].border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
.input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
|
||||
@apply px-2.5;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply px-2.5 pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply px-2.5 pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
|
||||
.input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
|
||||
@apply rounded-[calc(var(--radius)-5px)];
|
||||
}
|
||||
@@ -1085,7 +931,7 @@
|
||||
@apply text-lg font-medium tracking-tight;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
.empty > header > p {
|
||||
@apply text-muted-foreground text-sm/relaxed;
|
||||
}
|
||||
|
||||
@@ -1136,15 +982,15 @@
|
||||
@apply [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.item > figure:has(img) {
|
||||
.item > figure:has(> img) {
|
||||
@apply size-10 overflow-hidden rounded-sm;
|
||||
}
|
||||
|
||||
.item[data-size='sm'] > figure:has(img) {
|
||||
.item[data-size='sm'] > figure:has(> img) {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.item[data-size='xs'] > figure:has(img) {
|
||||
.item[data-size='xs'] > figure:has(> img) {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
@@ -1194,16 +1040,16 @@
|
||||
@apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.kbd-group {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.field > label,
|
||||
.label {
|
||||
@apply gap-2 text-sm leading-none font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
.field > section > label {
|
||||
@apply gap-2 text-sm leading-snug font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar nav {
|
||||
@apply bg-sidebar text-sidebar-foreground;
|
||||
@@ -1293,6 +1139,14 @@
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
/* Progress */
|
||||
.progress {
|
||||
@apply bg-muted h-1.5 rounded-full;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton {
|
||||
|
||||
Reference in New Issue
Block a user