@utrecht/components/dist/badge-status/css/index.css

Components for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
.utrecht-badge-status {
  /*
   * `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges
   *
   * Configure maximum size to prevent stretching badges inside a flexbox.
   * 
   * Configure minumum size to have space to type in when displaying badges in a WYSIWYG editor.
   */
  background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
  border-radius: var(--utrecht-badge-border-radius, 0.5ch);
  color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
  display: inline-block;
  font-family: var(--utrecht-document-font-family, sans-serif);
  font-size: var(--utrecht-badge-font-size, inherit);
  font-style: var(--utrecht-badge-font-style, normal); /* no inheritance */
  font-weight: var(--utrecht-badge-font-weight, bold); /* no inheritance */
  line-height: var(--utrecht-badge-line-height, 1em);
  max-block-size: max-content;
  max-inline-size: max-content;
  min-block-size: 1em;
  min-inline-size: 1em;
  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
  padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
  text-decoration: none; /* no inheritance */
  letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
  text-transform: var(--utrecht-badge-status-text-transform, inherit);
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .utrecht-badge-status {
    border-color: currentColor;
    border-style: solid;
    /* Warning: there layout difference because of the added 1px border */
    border-width: 1px;
  }
}

.utrecht-badge-status--danger {
  background-color: var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%));
  color: var(--utrecht-feedback-danger-fill-color, white);
}

.utrecht-badge-status--warning {
  background-color: var(--utrecht-feedback-warning-fill-background-color, hsl(48, 100%, 50%));
  color: var(--utrecht-feedback-warning-fill-color, white);
}

.utrecht-badge-status--safe {
  background-color: var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%));
  color: var(--utrecht-feedback-safe-fill-color, white);
}

.utrecht-badge-status--neutral {
  background-color: var(--utrecht-feedback-neutral-fill-background-color, black);
  color: var(--utrecht-feedback-neutral-fill-color, white);
}

.utrecht-badge-status--valid {
  background-color: var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)));
  color: var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white));
}

.utrecht-badge-status--invalid {
  background-color: var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(39, 100%, 50%)));
  color: var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white));
}

.utrecht-badge-status--error {
  background-color: var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 30%)));
  color: var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white));
}

.utrecht-badge-status--success {
  background-color: var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)));
  color: var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white));
}

.utrecht-badge-status--active {
  background-color: var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)));
  color: var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white));
}

.utrecht-badge-status--inactive {
  background-color: var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%)));
  color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
}