@utrecht/components/form-toggle/dist/index.css

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

/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Gemeente Utrecht
 * Copyright (c) 2021 Robbert Broersma
 */
/* stylelint-disable-next-line block-no-empty */
.utrecht-form-toggle {
  align-items: center;
  block-size: var(--utrecht-form-toggle-height, 2em);
  border-color: var(--utrecht-form-toggle-border-color, currentColor);
  border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
  border-style: var(--utrecht-form-toggle-border-style, solid);
  border-width: var(--utrecht-form-toggle-border-width, 1px);
  color: var(--utrecht-form-toggle-color);
  cursor: var(--utrecht-action-activate-cursor, revert);
  display: flex;
  inline-size: var(--utrecht-form-toggle-width, 6em);
  padding-block-end: var(--utrecht-form-toggle-padding-block-end);
  padding-block-start: var(--utrecht-form-toggle-padding-block-start);
  padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
  padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .utrecht-form-toggle {
    --utrecht-form-toggle-background-color: ButtonFace;
    --utrecht-form-toggle-border-color: buttonborder;
    --utrecht-form-toggle-border-width: 1px;
    --utrecht-form-toggle-border-radius: var(--utrecht-form-toggle-track-border-radius);
    --utrecht-form-toggle-thumb-background-color: ButtonText;
    --utrecht-form-toggle-thumb-disabled-background-color: GrayText;
    /* TODO: Apply `GrayText` to the border-color */
    border-color: var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));
    border-width: min(var(--utrecht-form-toggle-border-width, 1px), 1px);
    /* TODO: Find a way to express the `pressed` state */
  }
}

.utrecht-form-toggle--focus-visible, .utrecht-form-toggle--html-div: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);
}

.utrecht-form-toggle--hover {
  background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
  color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
}

.utrecht-form-toggle--disabled, .utrecht-form-toggle--html-div:disabled {
  border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
  border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
  border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

.utrecht-form-toggle__thumb {
  /* To have a circle or square by default (1:1 aspect ratio) we use the `min-inline-size` design token for both `inline` and `block` direction. */
  background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
  border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
  box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
  margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
  margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
  min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
  min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
  z-index: 20;
}

.utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
  margin-inline-start: auto;
}

.utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
  margin-inline-end: auto;
}

.utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
  background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
  box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
}

.utrecht-form-toggle__track {
  align-items: center;
  background-color: var(--utrecht-form-toggle-accent-color);
  block-size: 100%;
  border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
  display: flex;
  inline-size: 100%;
}

.utrecht-form-toggle__track--html-label {
  cursor: inherit;
}

.utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
  background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
}

.utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
  background-color: var(--utrecht-form-toggle-disabled-background-color, #ddd);
  color: var(--utrecht-form-toggle-disabled-color, black);
}

.utrecht-form-toggle__track--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);
}

.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
  /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
  block-size: 1px !important;
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  inline-size: 1px !important;
  /* stylelint-disable-next-line property-disallowed-list */
  margin: -1px !important;
  overflow: hidden !important;
  /* stylelint-disable-next-line property-disallowed-list */
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
}
.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible ~ .utrecht-form-toggle__track {
  /* - 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);
}