56 lines
1.1 KiB
Svelte
56 lines
1.1 KiB
Svelte
|
|
||
|
|
<script lang="ts">
|
||
|
|
|
||
|
|
let { children, name, value = '1' } = $props();
|
||
|
|
|
||
|
|
let checked = $state(false);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<label>
|
||
|
|
<span class="toggleout" class:checked role="checkbox" aria-checked={checked}></span>
|
||
|
|
<input type="checkbox" bind:checked {name} {value} />
|
||
|
|
{@render children()}
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
[type="checkbox"] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggleout {
|
||
|
|
display: inline-block;
|
||
|
|
height: 1em;
|
||
|
|
width: 2em;
|
||
|
|
vertical-align: middle;
|
||
|
|
background-color: var(--bg-sharp);
|
||
|
|
border-radius: 1em;
|
||
|
|
position: relative;
|
||
|
|
transition: ease .5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggleout::before {
|
||
|
|
display: inline-block;
|
||
|
|
background-color: var(--text-primary);
|
||
|
|
width: .8em;
|
||
|
|
height: .8em;
|
||
|
|
border-radius: 1em;
|
||
|
|
content: '\00d7';
|
||
|
|
color: var(--bg-sharp);
|
||
|
|
position: absolute;
|
||
|
|
left: .1em;
|
||
|
|
top: .1em;
|
||
|
|
line-height: .6;
|
||
|
|
transition: ease .5s left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggleout.checked {
|
||
|
|
background-color: var(--accent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggleout.checked::before {
|
||
|
|
content: '\2713';
|
||
|
|
left: 1.1em;
|
||
|
|
top: .1em;
|
||
|
|
}
|
||
|
|
</style>
|