stufflog2/svelte-ui/src/components/Checkbox.svelte

<script lang="ts">
  import Icon from "./Icon.svelte";

  export let checked = false;
  export let centered = false;
  export let disabled = false;
  export let label = "(Missing label property)";

  function handleClick() {
    if (!disabled) {
      checked = !checked;
    }
  }
</script>

<div class="checkbox" class:centered on:click={handleClick}>
  <div class="box" class:disabled class:checked class:unchecked={!checked}>
    <Icon name="check" />
  </div>
  <div class="label">{label}</div>
</div>

<style>
  div.checkbox {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    margin-top: 0.5em;
    margin-bottom: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
  }
  div.checkbox.centered {
    margin: auto
  }

  div.box {
    border: 0.5px solid;
    padding: 0.025em 0.5ch;
    padding-top: 0.25em;
    background-color: #111;
    color: #555;
    font-size: 1.25em;
  }
  div.box.checked {
    color: #fC1;
    background-color: #5c4d20;
  }
  div.box.disabled {
    color: #777;
    background-color: #444;
  }

  div.box.unchecked :global(*) {
    opacity: 0;
  }

  div.label {
    margin: auto 0;
    margin-left: 1ch;

    -webkit-user-select: none;
    -moz-user-select: none;
  }
</style>