caa16b6770
Co-authored-by: Aditya Chaudhary <30+useradityaa@noreply.coracle.social> Co-committed-by: Aditya Chaudhary <30+useradityaa@noreply.coracle.social>
45 lines
1.2 KiB
CSS
45 lines
1.2 KiB
CSS
@layer components {
|
|
.badge {
|
|
@apply inline-flex items-center gap-1 rounded-full border-2 border-solid border-transparent px-2 py-1 text-sm font-semibold whitespace-nowrap;
|
|
|
|
&.badge-sm {
|
|
@apply h-6 text-xs;
|
|
}
|
|
|
|
&.badge-neutral {
|
|
@apply bg-surface-less text-content-muted border-line;
|
|
}
|
|
|
|
&.badge-primary {
|
|
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
|
color: var(--primary);
|
|
border-color: color-mix(in srgb, var(--primary) 22%, transparent);
|
|
}
|
|
|
|
&.badge-warning {
|
|
background: color-mix(in srgb, var(--warning) 14%, transparent);
|
|
color: var(--warning);
|
|
border-color: color-mix(in srgb, var(--warning) 25%, transparent);
|
|
}
|
|
}
|
|
|
|
.role-badge {
|
|
@apply inline-flex min-w-0 items-center gap-1.5 rounded-full border-2 border-solid px-2 py-1 text-xs font-normal;
|
|
background: color-mix(in srgb, var(--role-color) 12%, transparent);
|
|
color: var(--role-color);
|
|
border-color: color-mix(in srgb, var(--role-color) 22%, transparent);
|
|
}
|
|
|
|
.role-badge__dot {
|
|
@apply size-1.5 shrink-0 rounded-full;
|
|
background-color: var(--role-color);
|
|
}
|
|
|
|
.role-badge--md {
|
|
@apply text-sm;
|
|
}
|
|
|
|
.role-badge--md .role-badge__dot {
|
|
@apply size-2;
|
|
}
|
|
}
|