@utrecht/web-component-library-stencil/dist/collection/components/form-field-checkbox.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
 */
/* stylelint-disable-next-line block-no-empty */
/** @deprecated */
.utrecht-form-field {
  break-inside: avoid;
  font-family: var(--utrecht-document-font-family, inherit);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
  page-break-inside: avoid;
}

.utrecht-form-field--distanced {
  --utrecht-space-around: 1;
}

.utrecht-form-field--invalid {
  border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
  border-inline-start-style: solid;
  border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width, 0);
  padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
}

.utrecht-form-field--checkbox {
  display: grid;
  gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
  grid-template-areas: "input label" "input description" "input error-message";
  grid-template-columns: var(--utrecht-checkbox-size) 100fr;
  /*
  .utrecht-form-field__label .utrecht-form-field__input {
    margin-inline-start: calc(
      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
    );
    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
  }
  */
}
.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
  margin-inline-start: calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)));
}
.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
  margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
}

.utrecht-form-field--radio {
  display: grid;
  gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
  grid-template-areas: "input label" "input description" "input error-message";
  grid-template-columns: var(--utrecht-radio-button-size) 100fr;
  /*
  .utrecht-form-field__label .utrecht-form-field__input {
    margin-inline-start: calc(
      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
    );
    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
  }
  */
}
.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
  margin-inline-start: calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)));
}
.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end, 12px);
}

.utrecht-form-field__input {
  margin-block-end: 0;
  margin-block-start: 0;
  grid-area: input;
  order: 5;
}

.utrecht-form-field__label {
  /* Assign the margin-block-end to padding instead, so the clickable area of the label increases
  and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
  grid-area: label;
  margin-block-end: var(--utrecht-form-field-label-margin-block-end);
  margin-block-start: 0;
  order: 1;
}

.utrecht-form-field .utrecht-form-field-description {
  grid-area: description;
  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
  order: 2;
}

.utrecht-form-field .utrecht-form-field-description--invalid {
  grid-area: error-message;
  order: 3;
}

.utrecht-form-field__description {
  grid-area: description;
  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
  order: 2;
}

.utrecht-form-field__description--before {
  grid-area: description-before;
  order: 4;
}

.utrecht-form-field__error-message {
  grid-area: error-message;
  order: 3;
}

/**
 * @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-form-label {
  color: var(--utrecht-form-label-color);
  font-size: var(--utrecht-form-label-font-size);
  font-weight: var(--utrecht-form-label-font-weight);
}

.utrecht-form-label--checkbox {
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
  cursor: var(--utrecht-action-activate-cursor, revert);
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
}

.utrecht-form-label--checked {
  font-weight: var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight));
}

.utrecht-form-label--disabled {
  color: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
  cursor: var(--utrecht-action-disabled-cursor, revert);
}

.utrecht-form-label--radio {
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
  cursor: var(--utrecht-action-activate-cursor, revert);
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
}

/**
 * @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-form-field-description {
  --utrecht-document-color: currentColor;
  color: var(--utrecht-form-field-description-color);
  font-family: var(--utrecht-document-font-family, inherit);
  font-size: var(--utrecht-form-field-description-font-size, inherit);
  font-style: var(--utrecht-form-field-description-font-style);
  line-height: var(--utrecht-form-field-description-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
}
.utrecht-form-field-description > * {
  --utrecht-space-around: 1;
}

.utrecht-form-field-description--distanced {
  --utrecht-space-around: 1;
}

.utrecht-form-field-description--invalid {
  color: var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)));
}

.utrecht-form-field-description--valid {
  color: var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)));
}

.utrecht-form-field-description--warning {
  color: var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color));
}

/**
 * @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
 */
/* stylelint-disable-next-line block-no-empty */
/**
 * @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
 */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
.utrecht-checkbox {
  margin-block-end: 0; /* reset native margin for input[type="checkbox"] */
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  cursor: var(--utrecht-action-activate-cursor, revert);
  -webkit-user-select: none;
  user-select: none;
}

/* stylelint-disable-next-line block-no-empty */
.utrecht-checkbox--disabled {
  cursor: var(--utrecht-action-disabled-cursor, revert);
}

.utrecht-checkbox--focus-visible {
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-checkbox--html-input:disabled {
  cursor: var(--utrecht-action-disabled-cursor, revert);
}
.utrecht-checkbox--html-input :focus-visible {
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

/**
 * @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
 */
/* stylelint-disable-next-line block-no-empty */
.utrecht-checkbox--custom,
.utrecht-custom-checkbox {
  /*
   * Use 24x24px as hardcoded minimum target size, to meet WCAG 2.5.8 standards.
   * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
   */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  block-size: var(--utrecht-checkbox-size, 1em);
  border-color: var(--utrecht-checkbox-border-color);
  border-radius: var(--utrecht-checkbox-border-radius, 0);
  border-style: solid;
  border-width: var(--utrecht-checkbox-border-width);
  cursor: var(--utrecht-action-activate-cursor, revert);
  inline-size: var(--utrecht-checkbox-size, 1em);
  margin-block-start: var(--utrecht-checkbox-margin-block-start);
  min-block-size: 24px;
  min-inline-size: 24px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  vertical-align: top;
}

.utrecht-checkbox--custom.utrecht-checkbox--checked,
.utrecht-custom-checkbox--checked {
  background-color: var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  border-color: var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width));
}

.utrecht-checkbox--custom.utrecht-checkbox--disabled,
.utrecht-custom-checkbox--disabled {
  border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}
.utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,
.utrecht-custom-checkbox--disabled:checked {
  background-color: var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));
  border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
}
.utrecht-checkbox--custom.utrecht-checkbox--disabled:active,
.utrecht-custom-checkbox--disabled:active {
  border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
}

.utrecht-checkbox--custom.utrecht-checkbox--indeterminate,
.utrecht-custom-checkbox--indeterminate {
  background-color: var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  border-color: var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
  color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
}

.utrecht-checkbox--custom.utrecht-checkbox--invalid,
.utrecht-custom-checkbox--invalid {
  border-color: var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width));
}

.utrecht-checkbox--custom.utrecht-checkbox--active,
.utrecht-custom-checkbox--active {
  background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
  border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
  color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
}

.utrecht-checkbox--custom.utrecht-checkbox--hover,
.utrecht-custom-checkbox--hover {
  background-color: var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));
  border-color: var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width));
}

.utrecht-checkbox--custom.utrecht-checkbox--focus,
.utrecht-custom-checkbox--focus {
  background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
  border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
}

.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,
.utrecht-custom-checkbox--focus-visible {
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
.utrecht-custom-checkbox--html-input:disabled {
  border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}
.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,
.utrecht-custom-checkbox--html-input:disabled:checked {
  background-color: var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));
  border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
}
.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,
.utrecht-custom-checkbox--html-input:disabled:active {
  border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
}
.utrecht-checkbox--custom.utrecht-checkbox--html-input:hover,
.utrecht-custom-checkbox--html-input:hover {
  background-color: var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));
  border-color: var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width));
}
.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,
.utrecht-custom-checkbox--html-input:focus {
  background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
  border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
}
.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
.utrecht-custom-checkbox--html-input:focus-visible {
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}
.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
.utrecht-custom-checkbox--html-input:invalid,
.utrecht-custom-checkbox--html-input[aria-invalid=true] {
  border-color: var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width));
}
.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,
.utrecht-custom-checkbox--html-input:active {
  background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
  border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
  color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
}
.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,
.utrecht-custom-checkbox--html-input:checked {
  background-color: var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  border-color: var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width));
}
.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate, .utrecht-checkbox--custom.utrecht-checkbox--html-input:checked:indeterminate,
.utrecht-custom-checkbox--html-input:indeterminate,
.utrecht-custom-checkbox--html-input:checked:indeterminate {
  background-color: var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  border-color: var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
  color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
}

:host {
  display: block;
}

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