mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
5c0148a2b0
* chore: format css * update * update * chore: eslint-skip * update * update * chore: enforce the use of double quotes in `--at-apply` values * refactor: rename `--at-apply` into `--uno` * fix: fix dark theme userSpace search page css (#811) * fix userSpace search css * add new fix * add new fix * fix(adaptedStyles): adapt unadapted contents --------- Co-authored-by: hakadao <a578457889743@gmail.com> Co-authored-by: 夜晚的鸡鸣 <110297461+MidnightCrowing@users.noreply.github.com>
66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
defineProps<{
|
|
modelValue: boolean
|
|
label?: string
|
|
}>()
|
|
|
|
const model = defineModel()
|
|
</script>
|
|
|
|
<template>
|
|
<label cursor="pointer" pointer="auto" flex items-center gap-3>
|
|
<span>{{ label }}</span>
|
|
<input v-model="model" type="checkbox" hidden>
|
|
<span
|
|
inline-block w="$b-button-width" h="$b-button-height" bg="$bew-fill-1" rounded="[calc(var(--b-button-height)/2)]"
|
|
relative border="size-$b-border-width color-$bew-border-color"
|
|
after:content-empty after:inline-block after:bg-white after:rounded="[calc(var(--b-button-height)/2)]"
|
|
after:w="[calc(var(--b-button-height)-var(--b-border-width))]" after:h="[calc(var(--b-button-height)-var(--b-border-width))]"
|
|
after:border="size-$b-border-width color-$bew-border-color"
|
|
after:pos="absolute top-[calc(0px-var(--b-border-width)/2)]"
|
|
/>
|
|
</label>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
label {
|
|
--b-button-width: 50px;
|
|
--b-button-height: 25px;
|
|
--b-border-width: 2px;
|
|
}
|
|
|
|
input[type="checkbox"] + span::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
&:hover + span {
|
|
--uno: "bg-$bew-fill-2";
|
|
}
|
|
|
|
&:active + span::after {
|
|
--uno: "scale-90";
|
|
}
|
|
|
|
&:checked + span {
|
|
--uno: "bg-$bew-theme-color-60 border-$bew-theme-color";
|
|
}
|
|
|
|
&:checked:hover + span {
|
|
--uno: "bg-$bew-theme-color-80 border-$bew-theme-color";
|
|
box-shadow:
|
|
0 0 6px 2px var(--bew-theme-color-40),
|
|
inset 0 0 6px var(--bew-theme-color-30);
|
|
}
|
|
|
|
& + span,
|
|
& + span::after {
|
|
transition: 0.3s cubic-bezier(0.25, 0.15, 0.29, 1.51);
|
|
}
|
|
|
|
&:checked + span::after {
|
|
--uno: "border-$bew-theme-color translate-x-full";
|
|
}
|
|
}
|
|
</style>
|