mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 05:38:18 +00:00
Prepare 1.0 docs and style migration
This commit is contained in:
Ronan Berder
+32
-6
@@ -36,9 +36,10 @@
|
||||
--sidebar-width: 16rem;
|
||||
--sidebar-mobile-width: 18rem;
|
||||
--scrollbar-track: transparent;
|
||||
--scrollbar-thumb: rgba(0, 0, 0, 0.3);
|
||||
--scrollbar-width: 6px;
|
||||
--scrollbar-radius: 6px;
|
||||
--scrollbar-thumb: var(--border);
|
||||
--scrollbar-width: 0.625rem;
|
||||
--scrollbar-thin-width: 0.375rem;
|
||||
--scrollbar-radius: 9999px;
|
||||
--chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground */
|
||||
--chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground + 50% opacity */
|
||||
--check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>'); /* --muted-foreground */
|
||||
@@ -76,7 +77,6 @@
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.439 0 0);
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.3);
|
||||
--chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground */
|
||||
--chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground + 50% opacity */
|
||||
--check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');/* --muted-foreground */
|
||||
@@ -132,11 +132,12 @@
|
||||
@apply bg-background text-foreground overscroll-none antialiased;
|
||||
}
|
||||
.scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: var(--scrollbar-width);
|
||||
height: var(--scrollbar-width);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track);
|
||||
@@ -144,7 +145,32 @@
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: var(--scrollbar-radius);
|
||||
border: 1px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: var(--scrollbar-track);
|
||||
}
|
||||
}
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: var(--scrollbar-thin-width);
|
||||
height: var(--scrollbar-thin-width);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: var(--scrollbar-radius);
|
||||
border: 1px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: var(--scrollbar-track);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
/* Components */
|
||||
@import "./components/alert.css";
|
||||
@import "./components/avatar.css";
|
||||
@import "./components/badge.css";
|
||||
@import "./components/button.css";
|
||||
@import "./components/button-group.css";
|
||||
@import "./components/card.css";
|
||||
@import "./components/chart.css";
|
||||
@import "./components/collapsible.css";
|
||||
@import "./components/command.css";
|
||||
@import "./components/combobox.css";
|
||||
|
||||
@@ -5,6 +5,11 @@
|
||||
@apply relative w-full;
|
||||
}
|
||||
|
||||
.alert:has(> footer),
|
||||
.alert-destructive:has(> footer) {
|
||||
@apply pe-18;
|
||||
}
|
||||
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply min-h-4;
|
||||
@@ -18,4 +23,9 @@
|
||||
@apply list-inside list-disc;
|
||||
}
|
||||
}
|
||||
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
@apply absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
/* Avatar */
|
||||
@layer components {
|
||||
.avatar,
|
||||
.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;
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > 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]) {
|
||||
@apply flex size-full items-center justify-center rounded-[inherit] text-sm;
|
||||
}
|
||||
|
||||
.avatar-sm > span:not([data-badge]) {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.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;
|
||||
}
|
||||
|
||||
.avatar-sm > [data-badge] {
|
||||
@apply size-2 [&>svg]:hidden;
|
||||
}
|
||||
|
||||
.avatar > [data-badge] {
|
||||
@apply size-2.5 [&>svg]:size-2;
|
||||
}
|
||||
|
||||
.avatar-lg > [data-badge] {
|
||||
@apply size-3 [&>svg]:size-2;
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
@apply flex -space-x-2;
|
||||
}
|
||||
|
||||
.avatar-group > :is(.avatar, .avatar-sm, .avatar-lg),
|
||||
.avatar-group > [data-count] {
|
||||
@apply ring-2 ring-background;
|
||||
}
|
||||
|
||||
.avatar-group > [data-count] {
|
||||
@apply relative flex shrink-0 items-center justify-center;
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,10 @@
|
||||
@layer components {
|
||||
.button-group {
|
||||
@apply isolate inline-flex w-fit items-stretch;
|
||||
|
||||
&:has(> :is(.dropdown-menu, .popover, .select) > [data-popover][aria-hidden='false']) {
|
||||
@apply relative z-50;
|
||||
}
|
||||
|
||||
> .input {
|
||||
@apply flex-1;
|
||||
@@ -44,7 +48,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-group-text {
|
||||
.button-group > :is(span, label, output) {
|
||||
@apply flex items-center [&_svg]:pointer-events-none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
/* Card */
|
||||
@layer components {
|
||||
.card {
|
||||
.card,
|
||||
.card-sm {
|
||||
@apply flex flex-col;
|
||||
|
||||
> header {
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/* Chart */
|
||||
@layer components {
|
||||
.chart {
|
||||
@apply relative flex aspect-video w-full justify-center text-xs;
|
||||
}
|
||||
|
||||
.chart > canvas {
|
||||
@apply block size-full;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
@apply pointer-events-none fixed z-50 grid min-w-32 -translate-x-1/2 translate-y-2 items-start transition-[left,top,opacity] duration-150 ease-out;
|
||||
}
|
||||
|
||||
.chart-tooltip[hidden] {
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
.chart-tooltip-items {
|
||||
@apply grid gap-1.5;
|
||||
}
|
||||
|
||||
.chart-tooltip-item {
|
||||
@apply flex w-full flex-wrap items-center gap-2;
|
||||
}
|
||||
|
||||
.chart-tooltip-indicator {
|
||||
@apply size-2.5 shrink-0 rounded-[2px];
|
||||
background-color: var(--chart-indicator-color);
|
||||
}
|
||||
|
||||
.chart-legend-indicator {
|
||||
@apply size-2 shrink-0 rounded-[2px];
|
||||
background-color: var(--chart-indicator-color);
|
||||
}
|
||||
|
||||
.chart-tooltip-label {
|
||||
@apply text-muted-foreground leading-none;
|
||||
}
|
||||
|
||||
.chart-tooltip-value {
|
||||
@apply ms-auto font-mono font-medium leading-none tabular-nums;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
@apply flex flex-wrap items-center justify-center gap-4 pt-3;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
@apply flex items-center gap-1.5 text-xs;
|
||||
}
|
||||
|
||||
.chart-legend-item[aria-pressed='false'] {
|
||||
@apply opacity-70;
|
||||
}
|
||||
}
|
||||
+105
-14
@@ -272,7 +272,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-group-text {
|
||||
.button-group > :is(span, label, output) {
|
||||
@apply bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -391,7 +391,7 @@
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
@apply grid gap-0.5 rounded-2xl border px-4 py-3 text-start text-sm has-[>[data-action]]:relative has-[>[data-action]]:pe-18 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 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;
|
||||
}
|
||||
|
||||
.alert {
|
||||
@@ -419,9 +419,57 @@
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > [data-action],
|
||||
.alert-destructive > [data-action] {
|
||||
@apply absolute top-2.5 end-3;
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
@apply top-2.5 end-3;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
.avatar-group > [data-count] {
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
@@ -732,28 +780,71 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
@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;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-card text-card-foreground ring-foreground/5 dark:ring-foreground/10 gap-6 overflow-hidden rounded-4xl py-6 text-sm shadow-md ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 [&>img:first-child]:rounded-t-4xl [&>img:last-child]:rounded-b-4xl;
|
||||
@apply gap-6 py-6;
|
||||
}
|
||||
|
||||
.card > header {
|
||||
@apply gap-1.5 rounded-t-4xl px-6 in-data-[size=sm]:px-4 [.border-b]:pb-6 in-data-[size=sm]:[.border-b]:pb-4;
|
||||
.card-sm {
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
@apply gap-1.5 rounded-t-4xl px-6 [.border-b]:pb-6;
|
||||
}
|
||||
|
||||
.card-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) {
|
||||
@apply text-base font-medium;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
.card > section {
|
||||
@apply px-6 in-data-[size=sm]:px-4;
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
@apply px-6;
|
||||
}
|
||||
|
||||
.card > footer {
|
||||
@apply rounded-b-4xl px-6 in-data-[size=sm]:px-4 [.border-t]:pt-6 in-data-[size=sm]:[.border-t]:pt-4;
|
||||
.card-sm > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
@apply rounded-b-4xl px-6 [.border-t]:pt-6;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
@apply px-4 [.border-t]:pt-4;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.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;
|
||||
}
|
||||
|
||||
.chart-tooltip-title {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
@apply text-foreground;
|
||||
}
|
||||
|
||||
.chart-legend-item[aria-pressed='false'] {
|
||||
@apply text-muted-foreground;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
|
||||
+110
-15
@@ -264,7 +264,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-group-text {
|
||||
.button-group > :is(span, label, output) {
|
||||
@apply bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -383,7 +383,7 @@
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
@apply grid gap-0.5 rounded-none border px-2.5 py-2 text-start text-xs has-[>[data-action]]:relative has-[>[data-action]]:pe-18 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;
|
||||
@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;
|
||||
}
|
||||
|
||||
.alert {
|
||||
@@ -411,9 +411,57 @@
|
||||
@apply text-destructive/90 text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-2;
|
||||
}
|
||||
|
||||
.alert > [data-action],
|
||||
.alert-destructive > [data-action] {
|
||||
@apply absolute top-[calc(--spacing(1.25))] end-[calc(--spacing(1.25))];
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
@apply top-[calc(--spacing(1.25))] end-[calc(--spacing(1.25))];
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
.avatar-group > [data-count] {
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-xs [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
@@ -716,28 +764,75 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
@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;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-none py-4 text-xs/relaxed ring-1 has-[>footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-[>footer]:pb-0 [&>img:first-child]:rounded-none [&>img:last-child]:rounded-none;
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header {
|
||||
@apply gap-1 rounded-none px-4 in-data-[size=sm]:px-3 [.border-b]:pb-4 in-data-[size=sm]:[.border-b]:pb-3;
|
||||
.card-sm {
|
||||
@apply gap-2 py-3;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-sm font-medium in-data-[size=sm]:text-sm;
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
@apply gap-1 rounded-none px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
.card-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) {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.card-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) {
|
||||
@apply text-muted-foreground text-xs/relaxed;
|
||||
}
|
||||
|
||||
.card > section {
|
||||
@apply px-4 in-data-[size=sm]:px-3;
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer {
|
||||
@apply rounded-none border-t p-4 in-data-[size=sm]:p-3;
|
||||
.card-sm > section {
|
||||
@apply px-3;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
@apply rounded-none border-t p-4;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
@apply p-3;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.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;
|
||||
}
|
||||
|
||||
.chart-tooltip-title {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
@apply text-foreground;
|
||||
}
|
||||
|
||||
.chart-legend-item[aria-pressed='false'] {
|
||||
@apply text-muted-foreground;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
|
||||
+105
-14
@@ -264,7 +264,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-group-text {
|
||||
.button-group > :is(span, label, output) {
|
||||
@apply bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -383,7 +383,7 @@
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
@apply grid gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-[>[data-action]]:relative has-[>[data-action]]:pe-18 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 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;
|
||||
}
|
||||
|
||||
.alert {
|
||||
@@ -411,9 +411,57 @@
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > [data-action],
|
||||
.alert-destructive > [data-action] {
|
||||
@apply absolute top-2.5 end-3;
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
@apply top-2.5 end-3;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
.avatar-group > [data-count] {
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
@@ -720,28 +768,71 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
@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;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-2xl py-6 text-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl;
|
||||
@apply gap-6 py-6;
|
||||
}
|
||||
|
||||
.card > header {
|
||||
@apply gap-2 rounded-t-xl px-6 in-data-[size=sm]:px-4 [.border-b]:pb-6 in-data-[size=sm]:[.border-b]:pb-4;
|
||||
.card-sm {
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
@apply gap-2 rounded-t-xl px-6 [.border-b]:pb-6;
|
||||
}
|
||||
|
||||
.card-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) {
|
||||
@apply text-base font-medium;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
.card > section {
|
||||
@apply px-6 in-data-[size=sm]:px-4;
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
@apply px-6;
|
||||
}
|
||||
|
||||
.card > footer {
|
||||
@apply rounded-b-xl px-6 in-data-[size=sm]:px-4 [.border-t]:pt-6 in-data-[size=sm]:[.border-t]:pt-4;
|
||||
.card-sm > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
@apply rounded-b-xl px-6 [.border-t]:pt-6;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
@apply px-4 [.border-t]:pt-4;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.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;
|
||||
}
|
||||
|
||||
.chart-tooltip-title {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
@apply text-foreground;
|
||||
}
|
||||
|
||||
.chart-legend-item[aria-pressed='false'] {
|
||||
@apply text-muted-foreground;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
|
||||
+105
-14
@@ -264,7 +264,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-group-text {
|
||||
.button-group > :is(span, label, output) {
|
||||
@apply bg-muted gap-2 rounded-md border px-2.5 text-xs/relaxed font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -383,7 +383,7 @@
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
@apply grid gap-0.5 rounded-lg border px-2 py-1.5 text-start text-xs/relaxed has-[>[data-action]]:relative has-[>[data-action]]:pe-18 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;
|
||||
@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;
|
||||
}
|
||||
|
||||
.alert {
|
||||
@@ -411,9 +411,57 @@
|
||||
@apply text-destructive/90 text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > [data-action],
|
||||
.alert-destructive > [data-action] {
|
||||
@apply absolute top-1.5 end-2;
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
@apply top-1.5 end-2;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
.avatar-group > [data-count] {
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-xs/relaxed [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
@@ -724,28 +772,71 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
@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;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-4 text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 [&>img:first-child]:rounded-t-lg [&>img:last-child]:rounded-b-lg;
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header {
|
||||
@apply gap-1 rounded-t-lg px-4 in-data-[size=sm]:px-3 [.border-b]:pb-4 in-data-[size=sm]:[.border-b]:pb-3;
|
||||
.card-sm {
|
||||
@apply gap-3 py-3;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
@apply gap-1 rounded-t-lg px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
.card-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) {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-xs/relaxed;
|
||||
}
|
||||
|
||||
.card > section {
|
||||
@apply px-4 in-data-[size=sm]:px-3;
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer {
|
||||
@apply rounded-b-lg px-4 in-data-[size=sm]:px-3 [.border-t]:pt-4 in-data-[size=sm]:[.border-t]:pt-3;
|
||||
.card-sm > section {
|
||||
@apply px-3;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
@apply rounded-b-lg px-4 [.border-t]:pt-4;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
@apply px-3 [.border-t]:pt-3;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.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;
|
||||
}
|
||||
|
||||
.chart-tooltip-title {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
@apply text-foreground;
|
||||
}
|
||||
|
||||
.chart-legend-item[aria-pressed='false'] {
|
||||
@apply text-muted-foreground;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
|
||||
+110
-15
@@ -264,7 +264,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-group-text {
|
||||
.button-group > :is(span, label, output) {
|
||||
@apply bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -383,7 +383,7 @@
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
@apply grid gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-[>[data-action]]:relative has-[>[data-action]]:pe-18 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;
|
||||
@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;
|
||||
}
|
||||
|
||||
.alert {
|
||||
@@ -411,9 +411,57 @@
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > [data-action],
|
||||
.alert-destructive > [data-action] {
|
||||
@apply absolute top-2 end-2;
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
@apply top-2 end-2;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
.avatar-group > [data-count] {
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
@@ -720,28 +768,75 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
@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;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-[>footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-[>footer]:pb-0 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl;
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header {
|
||||
@apply gap-1 rounded-t-xl px-4 in-data-[size=sm]:px-3 [.border-b]:pb-4 in-data-[size=sm]:[.border-b]:pb-3;
|
||||
.card-sm {
|
||||
@apply gap-3 py-3;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-base leading-snug font-medium in-data-[size=sm]:text-sm;
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
@apply gap-1 rounded-t-xl px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
.card-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) {
|
||||
@apply text-base leading-snug font-medium;
|
||||
}
|
||||
|
||||
.card-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) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
.card > section {
|
||||
@apply px-4 in-data-[size=sm]:px-3;
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer {
|
||||
@apply bg-muted/50 rounded-b-xl border-t p-4 in-data-[size=sm]:p-3;
|
||||
.card-sm > section {
|
||||
@apply px-3;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
@apply bg-muted/50 rounded-b-xl border-t p-4;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
@apply p-3;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.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;
|
||||
}
|
||||
|
||||
.chart-tooltip-title {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
@apply text-foreground;
|
||||
}
|
||||
|
||||
.chart-legend-item[aria-pressed='false'] {
|
||||
@apply text-muted-foreground;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
|
||||
+105
-14
@@ -272,7 +272,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-group-text {
|
||||
.button-group > :is(span, label, output) {
|
||||
@apply bg-muted gap-2 rounded-2xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -391,7 +391,7 @@
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
@apply grid gap-0.5 rounded-2xl border px-4 py-3 text-start text-sm has-[>[data-action]]:relative has-[>[data-action]]:pe-18 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 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;
|
||||
}
|
||||
|
||||
.alert {
|
||||
@@ -419,9 +419,57 @@
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > [data-action],
|
||||
.alert-destructive > [data-action] {
|
||||
@apply absolute top-2.5 end-3;
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
@apply top-2.5 end-3;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
.avatar-group > [data-count] {
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
@@ -732,28 +780,71 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
@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)];
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-card text-card-foreground ring-foreground/5 dark:ring-foreground/10 gap-5 overflow-hidden rounded-[min(var(--radius-4xl),24px)] py-5 text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 [&>img:first-child]:rounded-t-[min(var(--radius-4xl),24px)] [&>img:last-child]:rounded-b-[min(var(--radius-4xl),24px)];
|
||||
@apply gap-5 py-5;
|
||||
}
|
||||
|
||||
.card > header {
|
||||
@apply gap-1.5 rounded-t-[min(var(--radius-4xl),24px)] px-5 in-data-[size=sm]:px-4 [.border-b]:pb-5 in-data-[size=sm]:[.border-b]:pb-4;
|
||||
.card-sm {
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
@apply gap-1.5 rounded-t-[min(var(--radius-4xl),24px)] px-5 [.border-b]:pb-5;
|
||||
}
|
||||
|
||||
.card-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) {
|
||||
@apply text-base font-medium;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
.card > section {
|
||||
@apply px-5 in-data-[size=sm]:px-4;
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
@apply px-5;
|
||||
}
|
||||
|
||||
.card > footer {
|
||||
@apply rounded-b-[min(var(--radius-4xl),24px)] px-5 in-data-[size=sm]:px-4 [.border-t]:pt-5 in-data-[size=sm]:[.border-t]:pt-4;
|
||||
.card-sm > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
@apply rounded-b-[min(var(--radius-4xl),24px)] px-5 [.border-t]:pt-5;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
@apply px-4 [.border-t]:pt-4;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.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;
|
||||
}
|
||||
|
||||
.chart-tooltip-title {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
@apply text-foreground;
|
||||
}
|
||||
|
||||
.chart-legend-item[aria-pressed='false'] {
|
||||
@apply text-muted-foreground;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
|
||||
+106
-15
@@ -261,7 +261,7 @@
|
||||
@apply border-border focus-visible:border-ring;
|
||||
}
|
||||
|
||||
> .button-group-text {
|
||||
> :is(span, label, output) {
|
||||
@apply border-border;
|
||||
}
|
||||
}
|
||||
@@ -280,7 +280,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-group-text {
|
||||
.button-group > :is(span, label, output) {
|
||||
@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;
|
||||
}
|
||||
|
||||
@@ -399,7 +399,7 @@
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
@apply grid gap-1 bg-background border px-4 py-3 text-start text-sm has-[>[data-action]]:relative has-[>[data-action]]:pe-18 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;
|
||||
@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;
|
||||
}
|
||||
|
||||
.alert {
|
||||
@@ -427,9 +427,57 @@
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > [data-action],
|
||||
.alert-destructive > [data-action] {
|
||||
@apply absolute top-2.5 end-3;
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
@apply top-2.5 end-3;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
.avatar-group > [data-count] {
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
@@ -740,28 +788,71 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
@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;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-card text-card-foreground ring-foreground/5 gap-8 overflow-hidden py-8 text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-5 data-[size=sm]:py-5 [&>img:first-child]:rounded-none [&>img:last-child]:rounded-none;
|
||||
@apply gap-8 py-8;
|
||||
}
|
||||
|
||||
.card > header {
|
||||
@apply gap-1.5 rounded-none px-8 in-data-[size=sm]:px-5 [.border-b]:pb-8 in-data-[size=sm]:[.border-b]:pb-5;
|
||||
.card-sm {
|
||||
@apply gap-5 py-5;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
@apply gap-1.5 rounded-none px-8 [.border-b]:pb-8;
|
||||
}
|
||||
|
||||
.card-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) {
|
||||
@apply text-lg font-semibold tracking-wider uppercase;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm leading-relaxed;
|
||||
}
|
||||
|
||||
.card > section {
|
||||
@apply px-8 in-data-[size=sm]:px-5;
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
@apply px-8;
|
||||
}
|
||||
|
||||
.card > footer {
|
||||
@apply px-8 in-data-[size=sm]:px-5 [.border-t]:pt-8 in-data-[size=sm]:[.border-t]:pt-5;
|
||||
.card-sm > section {
|
||||
@apply px-5;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
@apply px-8 [.border-t]:pt-8;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
@apply px-5 [.border-t]:pt-5;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.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;
|
||||
}
|
||||
|
||||
.chart-tooltip-title {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
@apply text-foreground;
|
||||
}
|
||||
|
||||
.chart-legend-item[aria-pressed='false'] {
|
||||
@apply text-muted-foreground;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
|
||||
+110
-15
@@ -264,7 +264,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-group-text {
|
||||
.button-group > :is(span, label, output) {
|
||||
@apply bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
@@ -383,7 +383,7 @@
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
@apply grid gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-[>[data-action]]:relative has-[>[data-action]]:pe-18 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 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;
|
||||
}
|
||||
|
||||
.alert {
|
||||
@@ -411,9 +411,57 @@
|
||||
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
||||
}
|
||||
|
||||
.alert > [data-action],
|
||||
.alert-destructive > [data-action] {
|
||||
@apply absolute top-2.5 end-3;
|
||||
.alert > footer,
|
||||
.alert-destructive > footer {
|
||||
@apply top-2.5 end-3;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
.avatar-group > [data-count] {
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
@@ -720,28 +768,75 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
@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;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl;
|
||||
@apply gap-6 py-6;
|
||||
}
|
||||
|
||||
.card > header {
|
||||
@apply gap-1 rounded-t-xl px-6 in-data-[size=sm]:px-4 [.border-b]:pb-6 in-data-[size=sm]:[.border-b]:pb-4;
|
||||
.card-sm {
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-base leading-normal font-medium in-data-[size=sm]:text-sm;
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
@apply gap-1 rounded-t-xl px-6 [.border-b]:pb-6;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
.card-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) {
|
||||
@apply text-base leading-normal font-medium;
|
||||
}
|
||||
|
||||
.card-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) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
.card > section {
|
||||
@apply px-6 in-data-[size=sm]:px-4;
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
@apply px-6;
|
||||
}
|
||||
|
||||
.card > footer {
|
||||
@apply rounded-b-xl px-6 in-data-[size=sm]:px-4 [.border-t]:pt-6 in-data-[size=sm]:[.border-t]:pt-4;
|
||||
.card-sm > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
@apply rounded-b-xl px-6 [.border-t]:pt-6;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
@apply px-4 [.border-t]:pt-4;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.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;
|
||||
}
|
||||
|
||||
.chart-tooltip-title {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
@apply text-foreground;
|
||||
}
|
||||
|
||||
.chart-legend-item[aria-pressed='false'] {
|
||||
@apply text-muted-foreground;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
|
||||
Reference in New Issue
Block a user