@indiekit/frontend/components/checkboxes/styles.css

Frontend components for Indiekit

checkboxes-field {
  --checkbox-size: 1.7778em;
  --checkbox-space: var(--space-s);
  --checkbox-padding-inline: calc(var(--checkbox-size) + var(--checkbox-space));
  display: block;
}

.checkboxes {
  display: flex;
  flex-direction: column;
}

.checkboxes__item {
  margin-block: var(--space-2xs);
  padding-block: var(--space-xs);
  padding-inline-start: var(--checkbox-padding-inline);
  position: relative;
}

.checkboxes__input {
  appearance: none;
  background: var(--color-background);
  block-size: var(--checkbox-size);
  border: var(--input-border-width) solid var(--color-outline-variant);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  inline-size: var(--checkbox-size);
  inset: 0;
  position: absolute;
  z-index: 1;

  &:checked {
    background: var(--color-background)
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.5 13 2 8.5 3.5 7l3 3 6-6L14 5.5z"/></svg>')
      center center / 100% auto no-repeat;

    @media (prefers-color-scheme: dark) {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M6.5 13 2 8.5 3.5 7l3 3 6-6L14 5.5z"/></svg>');
    }
  }

  &:focus-visible {
    border-color: var(--color-on-background);
    border-width: var(--input-border-width-focus);
  }

  &:disabled,
  &[readonly] {
    background-color: var(--color-offset);
    border-color: var(--color-offset);
    color: var(--color-on-offset);
    cursor: default;

    & + .checkboxes__label {
      cursor: default;
    }
  }
}

.checkboxes__label.label {
  --label-font: var(--font-fieldset-label);
  cursor: pointer;
  margin: 0;
  touch-action: manipulation; /* remove 300ms pause on mobile */
}

.checkboxes__hint {
  inline-size: 100%;
}

/* Divider (‘or’) */
.checkboxes__divider {
  inline-size: var(--checkbox-size);
  text-align: center;
}

/* Conditonal reveals */
.checkboxes__conditional {
  --label-font: var(--font-fieldset-label);
  padding-inline-start: var(--checkbox-padding-inline);
  position: relative;

  &::before {
    border-inline-start: var(--input-border-width) solid
      var(--color-outline-variant);
    content: "";
    display: block;
    inset-block: 0;
    inset-inline-start: calc(var(--checkbox-size) / 2);
    position: absolute;
  }

  .js-enabled &.checkboxes__conditional--hidden {
    display: none;
  }
}