x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="list"> <label class="list-row list-row--check flex items-start gap"> <div class="flex flex-1 flex-col"> <h5 class="leading-none font-medium mbe-1">Share across devices</h5> <p class="text-subtle">Focus is shared across devices, and turns off when you leave the app.</p> </div> <input type="checkbox" name="share_devices" id="share_devices" value="1" class="switch" role="switch" /> </label> <label class="list-row list-row--check flex items-start gap"> <div class="flex flex-1 flex-col"> <h5 class="leading-none font-medium mbe-1">Enable notifications</h5> <p class="text-subtle">Receive notifications when focus mode is enabled or disabled.</p> </div> <input type="checkbox" name="notifications" id="notifications" value="1" checked="checked" class="switch" role="switch" /> </label></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="list"> <label class="list-row list-row--check flex items-start gap"> <div class="flex flex-1 flex-col"> <h5 class="leading-none font-medium mbe-1">Share across devices</h5> <p class="text-subtle">Focus is shared across devices, and turns off when you leave the app.</p> </div> <%= check_box_tag :share_devices, class: "switch", role: "switch" %> </label> <label class="list-row list-row--check flex items-start gap"> <div class="flex flex-1 flex-col"> <h5 class="leading-none font-medium mbe-1">Enable notifications</h5> <p class="text-subtle">Receive notifications when focus mode is enabled or disabled.</p> </div> <%= check_box_tag :notifications, checked: true, class: "switch", role: "switch" %> </label></div>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
.switch { --switch-size: var(--size-4); --switch-block-size: calc(var(--switch-size) + var(--border) * 2); --switch-inline-size: calc(var(--switch-size) * 2); align-items: center; appearance: none; background-color: var(--color-border); border-color: transparent; border-radius: var(--rounded-full); border-width: var(--border); block-size: var(--switch-block-size); display: inline-flex; inline-size: var(--switch-inline-size); transition-duration: var(--time-150); transition-property: background-color; transition-timing-function: var(--ease-out-3); &:checked { background-color: var(--color-primary); } &:checked::before { translate: calc(100% - var(--border) * 2); } &::before { aspect-ratio: var(--aspect-square); background-color: var(--color-text-reversed); block-size: var(--switch-size); border-radius: var(--rounded-full); content: ""; display: block; transition-duration: var(--time-150); transition-property: translate; transition-timing-function: var(--ease-out-3); } &:focus-visible { outline: var(--border-2) solid var(--color-selected-dark); } &:disabled { cursor: not-allowed; opacity: var(--opacity-50); }}.switch--sm { --switch-size: var(--size-3);}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.