mirror of
https://github.com/System-End/theseus.git
synced 2026-04-19 22:15:09 +00:00
93 lines
No EOL
2.5 KiB
SCSS
93 lines
No EOL
2.5 KiB
SCSS
@use "sass:color";
|
|
@use "sass:map";
|
|
@use "../colors";
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
background-color: map.get(colors.$palette, primary);
|
|
color: colors.$white;
|
|
border-radius: 9999px;
|
|
gap: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.01em;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.125;
|
|
margin-left: 1rem;
|
|
padding: 0.25rem 0.625rem;
|
|
|
|
&.success {
|
|
background-color: rgba(map.get(colors.$palette, success), 0.2);
|
|
color: color.adjust(map.get(colors.$palette, success), $lightness: -10%);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background-color: rgba(map.get(colors.$palette, success), 0.125);
|
|
color: map.get(colors.$palette, success);
|
|
}
|
|
}
|
|
&.pending {
|
|
background-color: rgba(map.get(colors.$palette, pending), 0.125);
|
|
color: map.get(colors.$palette, pending);
|
|
}
|
|
&.warning {
|
|
background-color: rgba(map.get(colors.$palette, warning), 0.125);
|
|
color: map.get(colors.$palette, warning);
|
|
}
|
|
&.purple {
|
|
background-color: rgba(map.get(colors.$palette, purple), 0.125);
|
|
color: map.get(colors.$palette, purple);
|
|
}
|
|
&.ai {
|
|
background-color: rgba(map.get(colors.$palette, ai), 0.125);
|
|
color: map.get(colors.$palette, ai);
|
|
}
|
|
&.error {
|
|
background-color: rgba(map.get(colors.$palette, error), 0.125);
|
|
color: map.get(colors.$palette, error);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background-color: rgba(map.get(colors.$palette, error), 0.3);
|
|
color: color.adjust(color.adjust(map.get(colors.$palette, error), $saturation: 20%), $lightness: 40%);
|
|
}
|
|
}
|
|
&.info {
|
|
background-color: rgba(map.get(colors.$palette, info), 0.125);
|
|
color: map.get(colors.$palette, info);
|
|
}
|
|
&.bg-accent {
|
|
background-color: rgba(map.get(colors.$palette, accent), 0.125);
|
|
color: map.get(colors.$palette, accent);
|
|
}
|
|
&.bg-muted {
|
|
background-color: rgba(map.get(colors.$palette, muted), 0.125);
|
|
color: map.get(colors.$palette, slate);
|
|
}
|
|
&.muted {
|
|
background-color: map.get(colors.$palette, muted);
|
|
color: colors.$white;
|
|
}
|
|
|
|
&.badge-large {
|
|
padding: 0.3rem 1rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
&.tx-tag {
|
|
font-weight: normal;
|
|
background-color: transparent;
|
|
color: map.get(colors.$palette, slate);
|
|
border: 1px solid;
|
|
border-color: rgba(0, 0, 0, 0.125);
|
|
border-width: 0.5px;
|
|
max-width: 20rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.heading > & {
|
|
margin-left: 0;
|
|
}
|
|
} |