mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-15 06:28:20 +00:00
Prepare 1.0 docs and style migration
This commit is contained in:
Ronan Berder
+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 */
|
||||
|
||||
Reference in New Issue
Block a user