censa_front_end_library/css/src/components/pills.css

React components library project for censa Design System

.Pills {
  /* 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: uppercase;
  padding-right: 6px;
  padding-left: 6px;
  padding-top: var(--spacing-s);
  padding-bottom: var(--spacing-s);
  border-radius: 6px;
  display: inline-block;
  box-sizing: border-box;
  font-weight: var(--font-weight);
  cursor: default;
}
.Pills.Badge--primary {
  background-color: #59565c;
}
.Pills.Badge--secondary {
  background-color: #9b9a9d;
  color: #fff;
}