wehub-resource-sync
167 lines
4.1 KiB
CSS
167 lines
4.1 KiB
CSS
/* ==========================================================================
|
|
Badge - Small informational badges for displaying labels, statuses, and categories.
|
|
========================================================================== */
|
|
|
|
/* Base styles */
|
|
.badge {
|
|
@apply inline-flex shrink-0 items-center justify-center gap-0.5 font-medium;
|
|
|
|
/* Default size (matches --md) */
|
|
@apply min-h-7 min-w-7 rounded-3xl text-xs leading-[1.34];
|
|
|
|
/* Default tokens */
|
|
--badge-bg: var(--default);
|
|
--badge-fg: var(--default-foreground);
|
|
--badge-border: var(--background);
|
|
|
|
background-color: var(--badge-bg);
|
|
color: var(--badge-fg);
|
|
border: 1px solid var(--badge-border);
|
|
}
|
|
|
|
.badge__label {
|
|
@apply px-0.5;
|
|
}
|
|
|
|
.badge-anchor {
|
|
@apply relative inline-flex shrink-0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Size variants
|
|
========================================================================== */
|
|
|
|
.badge--lg {
|
|
@apply min-h-8 min-w-8 rounded-2xl text-sm leading-[1.43];
|
|
}
|
|
|
|
.badge--md {
|
|
/* No styles as this is the default size */
|
|
}
|
|
|
|
.badge--sm {
|
|
@apply min-h-4 min-w-4 rounded-xl text-[10px] leading-[1.34];
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Color variants - set foreground color
|
|
========================================================================== */
|
|
|
|
.badge--accent {
|
|
--badge-fg: var(--accent-soft-foreground);
|
|
}
|
|
|
|
.badge--default {
|
|
--badge-fg: var(--default-foreground);
|
|
}
|
|
|
|
.badge--success {
|
|
--badge-fg: var(--success-soft-foreground);
|
|
}
|
|
|
|
.badge--warning {
|
|
--badge-fg: var(--warning-soft-foreground);
|
|
}
|
|
|
|
.badge--danger {
|
|
--badge-fg: var(--danger-soft-foreground);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Variant styles
|
|
========================================================================== */
|
|
|
|
.badge--primary {
|
|
/* Solid background - compound variants below handle bg/fg per color */
|
|
}
|
|
|
|
.badge--secondary {
|
|
/* Default background with colored text - base behavior */
|
|
}
|
|
|
|
.badge--soft {
|
|
/* Soft/muted background - compound variants below handle bg/fg per color */
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Placement variants
|
|
========================================================================== */
|
|
|
|
.badge--top-right {
|
|
@apply absolute top-0 right-0;
|
|
transform: translate(25%, -25%);
|
|
}
|
|
|
|
.badge--top-left {
|
|
@apply absolute top-0 left-0;
|
|
transform: translate(-25%, -25%);
|
|
}
|
|
|
|
.badge--bottom-right {
|
|
@apply absolute right-0 bottom-0;
|
|
transform: translate(25%, 25%);
|
|
}
|
|
|
|
.badge--bottom-left {
|
|
@apply absolute bottom-0 left-0;
|
|
transform: translate(-25%, 25%);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Compound variants - Primary (solid background)
|
|
========================================================================== */
|
|
|
|
.badge--primary.badge--accent {
|
|
--badge-bg: var(--accent);
|
|
--badge-fg: var(--accent-foreground);
|
|
}
|
|
|
|
.badge--primary.badge--default {
|
|
--badge-bg: var(--default);
|
|
--badge-fg: var(--default-foreground);
|
|
}
|
|
|
|
.badge--primary.badge--success {
|
|
--badge-bg: var(--success);
|
|
--badge-fg: var(--success-foreground);
|
|
}
|
|
|
|
.badge--primary.badge--warning {
|
|
--badge-bg: var(--warning);
|
|
--badge-fg: var(--warning-foreground);
|
|
}
|
|
|
|
.badge--primary.badge--danger {
|
|
--badge-bg: var(--danger);
|
|
--badge-fg: var(--danger-foreground);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Compound variants - Soft (muted background)
|
|
========================================================================== */
|
|
|
|
.badge--soft.badge--accent {
|
|
--badge-bg: var(--accent-soft);
|
|
--badge-fg: var(--accent-soft-foreground);
|
|
}
|
|
|
|
.badge--soft.badge--default {
|
|
--badge-bg: var(--default-soft);
|
|
--badge-fg: var(--default-soft-foreground);
|
|
}
|
|
|
|
.badge--soft.badge--success {
|
|
--badge-bg: var(--success-soft);
|
|
--badge-fg: var(--success-soft-foreground);
|
|
}
|
|
|
|
.badge--soft.badge--warning {
|
|
--badge-bg: var(--warning-soft);
|
|
--badge-fg: var(--warning-soft-foreground);
|
|
}
|
|
|
|
.badge--soft.badge--danger {
|
|
--badge-bg: var(--danger-soft);
|
|
--badge-fg: var(--danger-soft-foreground);
|
|
}
|