@utrecht/web-component-library-stencil/dist/collection/components/status-badge.css

Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
.utrecht-status-badge {
  /*
   * `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 */
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .utrecht-status-badge {
    border-color: currentColor;
    border-style: solid;
    /* Warning: there layout difference because of the added 1px border */
    border-width: 1px;
  }
}
.utrecht-status-badge {
  --utrecht-badge-background-color: var(--utrecht-status-badge-background-color);
  --utrecht-badge-border-radius: var(--utrecht-status-badge-border-radius);
  --utrecht-badge-color: var(--utrecht-status-badge-color);
  --utrecht-badge-font-size: var(--utrecht-status-badge-font-size, inherit);
  --utrecht-badge-font-style: var(--utrecht-status-badge-font-style);
  --utrecht-badge-font-weight: var(--utrecht-status-badge-font-weight);
  --utrecht-badge-line-height: var(--utrecht-status-badge-line-height);
  --utrecht-badge-padding-block: var(--utrecht-status-badge-padding-block);
  --utrecht-badge-padding-inline: var(--utrecht-status-badge-padding-inline);
  border-color: var(--utrecht-status-badge-border-color, transparent);
  border-width: var(--utrecht-status-badge-border-width);
  font-family: var(--utrecht-status-badge-font-family, inherit);
  letter-spacing: var(--utrecht-status-badge-letter-spacing, inherit);
  min-block-size: var(--utrecht-status-badge-min-block-size, 1em);
  min-inline-size: var(--utrecht-status-badge-min-inline-size, 1em);
  text-transform: var(--utrecht-status-badge-text-transform, inherit);
}

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

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

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

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

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

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

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

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

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

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

:host {
  display: inline-block;
}

:host([hidden]) {
  display: none !important;
}