71 lines
1.1 KiB
SCSS
71 lines
1.1 KiB
SCSS
.badge {
|
|
color: var(--color-text-primary);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
display: inline-flex;
|
|
max-width: 100%;
|
|
padding: 4px;
|
|
gap: 4px;
|
|
border-radius: 8px;
|
|
align-items: center;
|
|
|
|
> svg {
|
|
flex-shrink: 0;
|
|
width: auto;
|
|
height: 17px;
|
|
fill: currentColor;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:not(.badgeWithoutIcon) {
|
|
padding-inline-end: 8px;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.domain {
|
|
opacity: 0.75;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.default {
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
|
|
.subtle {
|
|
background-color: var(--color-bg-brand-softest);
|
|
}
|
|
|
|
.feature {
|
|
background-color: var(--color-bg-brand-base);
|
|
color: var(--color-text-on-brand-base);
|
|
}
|
|
|
|
.inverted {
|
|
background-color: var(--color-bg-inverted);
|
|
color: var(--color-text-inverted);
|
|
}
|
|
|
|
.success {
|
|
background-color: var(--color-bg-success-softest);
|
|
}
|
|
|
|
.warning {
|
|
background-color: var(--color-bg-warning-softest);
|
|
}
|
|
|
|
.danger {
|
|
background-color: var(--color-bg-error-base);
|
|
color: var(--color-text-on-error-base);
|
|
}
|