88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { color } from "~/composables/colors.ts";
|
|
|
|
const { big } = defineProps<{
|
|
big?: boolean
|
|
title?: string
|
|
}>()
|
|
|
|
const isOn = defineModel<boolean>()
|
|
const diameter = big? '28px' : '20px'
|
|
</script>
|
|
|
|
<template>
|
|
<label
|
|
:class="[$style.toggle, 'funkwhale']"
|
|
v-bind="color({}, ['interactive', 'raised'])"
|
|
:checked = "isOn || undefined"
|
|
>
|
|
<input type="checkbox" v-model="isOn"
|
|
style="visibility: hidden; /* Hide even before stylesheet is loaded */"
|
|
/>
|
|
<span v-if="title">{{ title }}</span>
|
|
</label>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
.toggle {
|
|
font-size: 14px;
|
|
line-height: 1em;
|
|
position: relative;
|
|
padding: calc(var(--padding) - 1px) 0 calc(var(--padding) + 1px) 0;
|
|
min-width: calc(var(--diameter) * 2);
|
|
height: min-content;
|
|
|
|
--diameter: v-bind(diameter);
|
|
--lineWidth: 2px;
|
|
--padding: 10px;
|
|
|
|
--void-color: var(--void-off-background-color);
|
|
--pin-color: var(--void-off-pin-color);
|
|
|
|
&[checked] {
|
|
--void-color: var(--void-on-background-color);
|
|
--pin-color: var(--void-on-pin-color);
|
|
&::after{
|
|
transform:translateX(var(--diameter));
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
--void-color: var(--void-off-hover-background-color);
|
|
--pin-color: var(--void-off-hover-pin-color);
|
|
&[checked] {
|
|
--void-color: var(--void-on-hover-background-color);
|
|
--pin-color: var(--void-on-hover-pin-color);
|
|
}
|
|
}
|
|
&::before, &::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: var(--diameter);
|
|
}
|
|
&::before {
|
|
height: var(--diameter);
|
|
aspect-ratio: 2;
|
|
background-color: var(--void-color);
|
|
left: 0;
|
|
top: var(--padding);
|
|
}
|
|
&::after {
|
|
height: calc(var(--diameter) - var(--lineWidth) * 2);
|
|
aspect-ratio: 1;
|
|
background-color: var(--pin-color);
|
|
left: var(--lineWidth);
|
|
top: calc(var(--padding) + var(--lineWidth));
|
|
transition: all .2s;
|
|
}
|
|
|
|
> span {
|
|
padding-left: calc(var(--diameter) + 8px);
|
|
}
|
|
|
|
> input {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
</style>
|