shoelace/src/components/badge/badge.scss

52 wiersze
1.2 KiB
SCSS

@import 'component';
:host {
display: inline-flex;
border-radius: var(--sl-border-radius-pill);
pointer-events: none;
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--sl-font-size-x-small);
font-weight: var(--sl-font-weight-semibold);
letter-spacing: var(--sl-letter-spacing-normal);
line-height: 1;
border-radius: inherit;
white-space: nowrap;
padding: 4px 8px;
user-select: none;
cursor: inherit;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Type modifiers
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.badge--primary {
background-color: var(--sl-color-primary-50);
color: var(--sl-color-white);
}
.badge--success {
background-color: var(--sl-color-success-50);
color: var(--sl-color-white);
}
.badge--info {
background-color: var(--sl-color-info-50);
color: var(--sl-color-white);
}
.badge--warning {
background-color: var(--sl-color-warning-50);
color: var(--sl-color-white);
}
.badge--danger {
background-color: var(--sl-color-danger-50);
color: var(--sl-color-white);
}