@dnb/eufemia/cjs/components/badge/style/dnb-badge.css

DNB Eufemia Design System UI Library

/*
* Badge component
*
*/
/*
 * Utilities
 */
.dnb-badge {
  display: inline-flex;
  flex-flow: row wrap;
  white-space: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-x-small);
}
.dnb-badge__root {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
}
.dnb-badge__root .dnb-badge {
  display: flex;
  overflow: hidden;
  position: absolute;
  z-index: 2;
}
.dnb-badge--variant-notification {
  color: var(--color-white);
  background-color: var(--color-fire-red);
  padding: 0 0.25rem;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.75rem;
}
.dnb-badge--variant-information {
  --badge-information-color: var(--figma-color-text-neutral);
  padding: 0.125rem 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--badge-information-bg);
  color: var(--badge-information-color, inherit);
}
.dnb-badge--subtle {
  background-color: var(--badge-information-subtle-bg);
  color: var(--badge-information-subtle-color, var(--badge-information-color));
  --border-color: var(--badge-information-subtle-border);
  --border-width: 0.0625rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-badge--horizontal-left {
  left: 0;
}
.dnb-badge--horizontal-right {
  right: 0;
}
.dnb-badge--vertical-bottom {
  bottom: 0;
}
.dnb-badge--vertical-top {
  top: 0;
}
.dnb-badge--inline.dnb-badge--vertical-top {
  transform: translateY(-25%);
}
.dnb-badge--inline.dnb-badge--vertical-bottom {
  transform: translateY(25%);
}
.dnb-badge--status-default {
  --badge-information-bg: var(--figma-color-decorative-first-subtle);
  --badge-information-subtle-bg: var(
    --figma-color-decorative-first-muted
  );
  --badge-information-subtle-border: var(
    --figma-color-decorative-first-subtle
  );
}
.dnb-badge--status-neutral {
  --badge-information-bg: var(--figma-color-background-neutral-bold);
  --badge-information-subtle-bg: var(
    --figma-color-background-neutral-subtle
  );
  --badge-information-subtle-border: var(
    --figma-color-stroke-neutral-bold
  );
}
.dnb-badge--status-positive {
  --badge-information-bg: var(--figma-color-background-positive);
  --badge-information-color: var(--figma-color-text-neutral-inverse);
  --badge-information-subtle-bg: var(
    --figma-color-background-positive-subtle
  );
  --badge-information-subtle-color: var(--figma-color-text-positive);
  --badge-information-subtle-border: var(--figma-color-stroke-positive);
}
.dnb-badge--status-warning {
  --badge-information-bg: var(--figma-color-background-warning);
  --badge-information-subtle-bg: var(
    --figma-color-background-warning-subtle
  );
  --badge-information-subtle-color: var(--figma-color-text-warning-bold);
  --badge-information-subtle-border: var(--figma-color-stroke-warning);
}
.dnb-badge--status-negative {
  --badge-information-bg: var(--figma-color-background-error);
  --badge-information-color: var(--figma-color-text-neutral-inverse);
  --badge-information-subtle-bg: var(
    --figma-color-background-error-subtle
  );
  --badge-information-subtle-color: var(--figma-color-text-destructive);
  --badge-information-subtle-border: var(--figma-color-stroke-error);
}