@boxyhq/svelte-ui/dist/shared/Checkbox/index.module.css

Svelte UI components from BoxyHQ

@import url('../common.module.css');
/* https://moderncss.dev/pure-css-custom-checkbox-style/ */
.label {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1rem auto;
  gap: 0.5rem;
}

.checkbox {
  --border-width: 0.15em;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: var(--border-width) solid currentColor;
  border-radius: var(--border-width);
  transform: translateY(calc(var(--border-width) / 2 * -1));

  display: grid;
  place-content: center;
}

.checkbox::before {
  content: '';
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--primary-color-700);
  transform-origin: bottom left;
  /* tick mark */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.checkbox:checked::before {
  transform: scale(1);
}

.checkbox:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}

.checkbox:disabled {
  color: var(--secondary-color);
  cursor: not-allowed;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9zaGFyZWQvQ2hlY2tib3gvaW5kZXgubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJpbmRleC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCB1cmwoJy4uL2NvbW1vbi5tb2R1bGUuY3NzJyk7XG4vKiBodHRwczovL21vZGVybmNzcy5kZXYvcHVyZS1jc3MtY3VzdG9tLWNoZWNrYm94LXN0eWxlLyAqL1xuLmxhYmVsIHtcbiAgZm9udC1mYW1pbHk6IHN5c3RlbS11aSwgc2Fucy1zZXJpZjtcbiAgZm9udC1zaXplOiAxcmVtO1xuICBsaW5lLWhlaWdodDogMS4xO1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFyZW0gYXV0bztcbiAgZ2FwOiAwLjVyZW07XG59XG5cbi5jaGVja2JveCB7XG4gIC0tYm9yZGVyLXdpZHRoOiAwLjE1ZW07XG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIC8qIEZvciBpT1MgPCAxNSB0byByZW1vdmUgZ3JhZGllbnQgYmFja2dyb3VuZCAqL1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuICAvKiBOb3QgcmVtb3ZlZCB2aWEgYXBwZWFyYW5jZSAqL1xuICBtYXJnaW46IDA7XG4gIGZvbnQ6IGluaGVyaXQ7XG4gIGNvbG9yOiBjdXJyZW50Q29sb3I7XG4gIHdpZHRoOiAxLjE1ZW07XG4gIGhlaWdodDogMS4xNWVtO1xuICBib3JkZXI6IHZhcigtLWJvcmRlci13aWR0aCkgc29saWQgY3VycmVudENvbG9yO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItd2lkdGgpO1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoY2FsYyh2YXIoLS1ib3JkZXItd2lkdGgpIC8gMiAqIC0xKSk7XG5cbiAgZGlzcGxheTogZ3JpZDtcbiAgcGxhY2UtY29udGVudDogY2VudGVyO1xufVxuXG4uY2hlY2tib3g6OmJlZm9yZSB7XG4gIGNvbnRlbnQ6ICcnO1xuICB3aWR0aDogMC42NWVtO1xuICBoZWlnaHQ6IDAuNjVlbTtcbiAgdHJhbnNmb3JtOiBzY2FsZSgwKTtcbiAgdHJhbnNpdGlvbjogMTIwbXMgdHJhbnNmb3JtIGVhc2UtaW4tb3V0O1xuICBib3gtc2hhZG93OiBpbnNldCAxZW0gMWVtIHZhcigtLXByaW1hcnktY29sb3ItNzAwKTtcbiAgdHJhbnNmb3JtLW9yaWdpbjogYm90dG9tIGxlZnQ7XG4gIC8qIHRpY2sgbWFyayAqL1xuICBjbGlwLXBhdGg6IHBvbHlnb24oMTQlIDQ0JSwgMCA2NSUsIDUwJSAxMDAlLCAxMDAlIDE2JSwgODAlIDAlLCA0MyUgNjIlKTtcbn1cblxuLmNoZWNrYm94OmNoZWNrZWQ6OmJlZm9yZSB7XG4gIHRyYW5zZm9ybTogc2NhbGUoMSk7XG59XG5cbi5jaGVja2JveDpmb2N1cyB7XG4gIG91dGxpbmU6IG1heCgycHgsIDAuMTVlbSkgc29saWQgY3VycmVudENvbG9yO1xuICBvdXRsaW5lLW9mZnNldDogbWF4KDJweCwgMC4xNWVtKTtcbn1cblxuLmNoZWNrYm94OmRpc2FibGVkIHtcbiAgY29sb3I6IHZhcigtLXNlY29uZGFyeS1jb2xvcik7XG4gIGN1cnNvcjogbm90LWFsbG93ZWQ7XG59XG4iXX0= */