nodejs.org/packages/ui-components/src/Common/Switch/index.module.css at 52fd77bfddbb4740fba1d7ace0e72ec16a92b837 · efekrskl/nodejs.org · 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
@reference "../../styles/index.css";

.switch {
  @apply inline-flex
    justify-end
    gap-3;

  .label {
    @apply cursor-pointer
      select-none
      text-sm
      font-medium
      text-neutral-800
      dark:text-neutral-200;
  }

  .root {
    @apply w-10.5
      relative
      inline-flex
      h-6
      cursor-pointer
      items-center
      rounded-full
      bg-black
      focus:outline-none
      focus-visible:ring-2
      focus-visible:ring-green-500
      focus-visible:ring-offset-2
      focus-visible:ring-offset-neutral-100
      motion-safe:transition-colors
      motion-safe:duration-100
      motion-safe:ease-out
      dark:bg-neutral-700
      dark:focus-visible:ring-green-400
      dark:focus-visible:ring-offset-neutral-900;
  }

  .root[data-state='checked'] {
    @apply bg-green-600;
  }

  .thumb {
    @apply pointer-events-none
      block
      size-5
      translate-x-0.5
      rounded-full
      bg-white
      ring-0
      motion-safe:transition-transform
      motion-safe:duration-100
      motion-safe:ease-out;
  }

  .thumb[data-state='checked'] {
    @apply translate-x-5;
  }
}