slowreader/web/ui/toggle.svelte at main · hplush/slowreader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<script lang="ts">
  import type { ReadableAtom } from 'nanostores'

  import Icon from './icon.svelte'

  let {
    icon,
    label,
    size = 'inline',
    store
  }: {
    icon?: string
    label: string
    size?: 'icon' | 'inline'
    store: ReadableAtom<boolean>
  } = $props()
</script>

<label
  class="toggle is-secondary"
  class:is-icon={size === 'icon'}
  title={size === 'icon' ? label : null}
>
  <input class="toggle_input" type="checkbox" bind:checked={$store} />
  <div class="toggle_cap">
    {#if icon}
      <Icon path={icon} />
    {/if}
    <span class="toggle_text" class:sr-only={size === 'icon'}>
      {label}
    </span>
  </div>
</label>

<style lang="postcss">
  :global {
    .toggle {
      @mixin clickable;

      --toggle-background: var(--current-background);

      position: relative;
      display: inline-block;
      width: fit-content;
      font: var(--control-font);
      background: var(--toggle-background);
      border-radius: var(--base-radius);

      &:has(.toggle_input:checked) {
        box-shadow: var(--field-shadow);

        --toggle-background: --tune-background(--current);
      }

      &:has(.toggle_input:focus-visible) {
        @mixin focus;
      }

      &&:active {
        box-shadow: var(--pressed-shadow);
      }

      html:not(.is-quiet-cursor) &:not(:has(:disabled)) {
        cursor: pointer;
      }

      &.is-secondary {
        color: var(--text-color);

        --toggle-background: --tune-background(--flat-button);

        box-shadow: var(--flat-control-shadow);

        &:hover:not([aria-disabled='true']),
        &:active:not([aria-disabled='true']),
        &:focus-visible {
          background: --tune-color(--toggle-background, --flat-button-hover);
        }
      }
    }

    .toggle_input {
      display: none;
    }

    .toggle_cap {
      box-sizing: border-box;
      display: flex;
      gap: var(--control-gap);
      align-items: center;
      justify-content: center;
      min-height: var(--control-height);
      padding: 0.4rem var(--control-padding);

      .toggle:active & {
        translate: 0 1px;
      }

      .toggle.is-icon & {
        width: var(--control-height);
        padding: 0;
        text-align: center;
      }
    }

    .toggle_text {
      flex-shrink: 1;
      overflow-wrap: anywhere;
    }
  }
</style>