github/toon
1
0
Fork 0
mirror of https://github.com/voson-wang/toon.git synced 2026-01-29 15:24:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: add playground

Browse Source
This commit is contained in:
Johann Schopplich
2025-11-29 21:16:21 +01:00
parent 412ebcb125
commit 0fff9c07bf
9 changed files with 617 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
docs/.vitepress/theme/components/VPInput.vue Normal file
View File

@@ -0,0 +1,53 @@
<script setup lang="ts">
defineProps<{
label: string
id: string
}>()
</script>
<template>
<div class="VPInput">
<label :for="id" class="label">{{ label }}</label>
<div class="input-wrapper">
<slot />
</div>
</div>
</template>
<style scoped>
.VPInput {
display: flex;
flex-direction: column;
gap: 4px;
}
.label {
font-size: 11px;
font-weight: 500;
color: var(--vp-c-text-2);
}
.input-wrapper :deep(select),
.input-wrapper :deep(input) {
padding: 0 10px;
height: 32px;
font-size: 13px;
font-weight: 500;
color: var(--vp-c-text-1);
background-color: var(--vp-c-bg);
border: 1px solid var(--vp-c-border);
border-radius: 6px;
transition: border-color 0.25s;
}
.input-wrapper :deep(select):hover,
.input-wrapper :deep(input):hover,
.input-wrapper :deep(select):focus,
.input-wrapper :deep(input):focus {
border-color: var(--vp-c-brand-1);
}
.input-wrapper :deep(input[type="number"]) {
width: 70px;
}
</style>