cryptgeon/frontend/src/lib/ui/Switch.svelte

66 lines
1.1 KiB
Svelte

<script lang="ts">
export let label: string = ''
export let value: boolean
export let color = true
</script>
<div {...$$restProps}>
<label class="switch">
<small>{label}</small>
<input type="checkbox" bind:checked={value} />
<span class:color class="slider" />
</label>
</div>
<style>
div {
height: 3.75rem;
}
.switch {
position: relative;
display: inline-block;
width: 4rem;
height: 2.5rem;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid var(--ui-bg-1);
background-color: var(--ui-bg-0);
transition: var(--ui-anim);
transform: translateY(1.2rem);
}
.slider:before {
position: absolute;
content: '';
height: 2rem;
width: 1.25rem;
left: 0.125rem;
bottom: 0.1rem;
background-color: var(--ui-bg-1);
-webkit-transition: 0.4s;
transition: var(--ui-anim);
}
input:checked + .slider.color:before {
background-color: var(--ui-clr-primary);
}
input:checked + .slider:before {
transform: translateX(calc(2.25rem - 1px));
}
</style>