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

Svelte UI components from BoxyHQ

@import url('../common.module.css');

/** https://kittygiraudel.com/2021/04/05/an-accessible-toggle */
.toggle {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  gap: 1ch;
}

.display {
  --offset: 0.12rem;
  --diameter: 1.4rem;

  display: inline-flex;
  align-items: center;
  justify-content: space-around;

  width: calc(var(--diameter) * 2 + var(--offset) * 2);
  height: calc(var(--diameter) + var(--offset) * 2);
  box-sizing: content-box;

  border: 1px solid rgb(0 0 0 / 0.2);

  position: relative;
  border-radius: 100vw;
  background-color: #fff;

  transition: 250ms;
  cursor: pointer;
}

/* handle */
.display::before {
  content: '';

  width: var(--diameter);
  height: var(--diameter);
  border-radius: 50%;

  box-sizing: border-box;

  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--offset);
  transform: translate(0, -50%);

  background-color: rgb(0 0 0 / 0.2);
  transition: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .display {
    transition-duration: 0ms;
  }
}

.input:focus + .display {
  outline: 1px dotted var(--primary-color-200);
  outline: 1px auto -webkit-focus-ring-color;
}

.input:focus:not(:focus-visible) + .display {
  outline: 0;
}

.input:checked + .display {
  border-color: var(--primary-color);
}

.input:checked + .display::before {
  background-color: var(--primary-color);
  transform: translate(100%, -50%);
}

/* Disabled state for input */
.input:disabled + .display {
  opacity: 0.6;
  filter: grayscale(40%);
  cursor: not-allowed;
}

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