aria/FMHY-Website
1
0
Fork 0
mirror of https://github.com/fmhy/edit.git synced 2025-08-01 00:32:30 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: rework SidebarCard

Browse source
This commit is contained in:
taskylizard 2024-10-16 08:04:29 +00:00
parent 322b5f6f19
commit 0dcc1f6ac4
No known key found for this signature in database
GPG key ID: 1820131ED1A24120
1 changed files with 21 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

56
docs/.vitepress/theme/components/SidebarCard.vue
View file

@ -5,50 +5,36 @@ import ToggleStarred from './ToggleStarred.vue'
</script> </script>
<template> <template>
<div class="card"> <div
<div class="card-header"> class="bg-$vp-c-bg hover:bg-$vp-c-bg/40 border-$vp-c-default-soft hover:border-primary transition-border relative z-0 rounded-lg border-2 border-solid p-5 duration-500"
<div class="card-title">Emoji Legend</div> >
<div class="align-center mb-4 flex justify-between">
<div class="text-$vp-c-text-1 lh-relaxed text-sm font-bold">
Emoji Legend
</div>
</div> </div>
<Field icon="i-twemoji-globe-with-meridians">Indexes</Field> <Field icon="i-twemoji-globe-with-meridians">Indexes</Field>
<Field icon="i-twemoji-repeat-button">Storage Links</Field> <Field icon="i-twemoji-repeat-button">Storage Links</Field>
<Field icon="i-twemoji-star">Recommendations</Field> <Field icon="i-twemoji-star">Recommendations</Field>
<div class="card-header"> <div class="align-center mb-4 flex justify-between">
<div class="card-title">Options</div> <div class="text-$vp-c-text-1 lh-relaxed text-sm font-bold">Options</div>
</div> </div>
<InputField id="toggle-starred" label="Toggle Starred"> <InputField id="toggle-starred" label="Toggle Starred">
<template #display> <template #display>
<ToggleStarred /> <ToggleStarred />
</template> </template>
</InputField> </InputField>
<Field icon="i-lucide:github">
<a
href="https://github.com/fmhy/edit"
target="_blank"
rel="noopener noreferrer"
aria-label="Star FMHY on GitHub"
class="text-primary underline font-bold"
>
Star on GitHub
</a>
</Field>
</div> </div>
</template> </template>
<style scoped>
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.card-title {
font-weight: 700;
color: var(--vp-c-text-1);
line-height: 32px;
font-size: 16px;
}
.card {
background: var(--vp-c-bg);
padding: 12px 24px 24px;
border-radius: 12px;
position: relative;
z-index: 0;
border: 1px solid transparent;
transition: border-color 0.4s ease-in-out;
}
.card:hover {
border-color: var(--vp-c-brand-1);
}
</style>