censa_front_end_library/css/src/components/badge.css

React components library project for censa Design System

/* badge */

.Badge {
  /* 160px */
  max-width: calc(var(--spacing-2) * 10);
  /* truncate */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-s);
  line-height: var(--font-height-s);
  text-transform: capitalize;
  padding-right: var(--spacing);
  padding-left: var(--spacing);
  padding-top: var(--spacing-xx);
  padding-bottom: var(--spacing-xx);
  border-radius: var(--spacing-m);
  display: inline-block;
  box-sizing: border-box;
  font-weight: var(--font-weight-medium);
  cursor: default;
}

.Badge--primary {
  background: var(--primary);
  color: var(--white);
}

.Badge--secondary {
  background: var(--badge-color);
  color: var(--badge-font);
}

.Badge--success {
  background: #eaf6ec;
  color: #1c6527;
}

.Badge--alert {
  background: #efcfce;
  color: #91010b;
}

.Badge--warning {
  background: #fff7e6;
  color: #996802;
}

.Badge--accent1 {
  background: #2fa843;
  color: var(--white);
  border-radius: 2px !important;
}

.Badge--accent2 {
  background: var(--accent2);
  color: var(--white);
}

.Badge--accent3 {
  background: var(--accent3);
  color: var(--white);
}

.Badge--accent4 {
  background: var(--accent4);
  color: var(--accent4-darker);
}

.Badge--subtle-primary {
  color: var(--primary-darker);
  background: var(--primary-lightest);
}

.Badge--subtle-secondary {
  color: var(--text);
  background: var(--secondary-light);
}

.Badge--subtle-success {
  color: var(--success-darker);
  background: var(--success-lightest);
}

.Badge--subtle-alert {
  color: var(--alert-darker);
  background: var(--alert-lightest);
}

.Badge--subtle-warning {
  color: var(--warning-darker);
  background: var(--warning-lightest);
}

.Badge--subtle-accent1 {
  color: var(--accent1-darker);
  background: var(--accent1-lightest);
}

.Badge--subtle-accent2 {
  color: var(--accent2-darker);
  background: var(--accent2-lightest);
}

.Badge--subtle-accent3 {
  color: var(--accent3-darker);
  background: var(--accent3-lightest);
}

.Badge--subtle-accent4 {
  color: var(--accent4-darker);
  background: var(--accent4-lightest);
}