aria/FMHY-Website
1
0
Fork 0
mirror of https://github.com/fmhy/edit.git synced 2025-07-31 00:02:17 +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>
<template>
<div class="card">
<div class="card-header">
<div class="card-title">Emoji Legend</div>
<div
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="align-center mb-4 flex justify-between">
<div class="text-$vp-c-text-1 lh-relaxed text-sm font-bold">
Emoji Legend
</div>
</div>
<Field icon="i-twemoji-globe-with-meridians">Indexes</Field>
<Field icon="i-twemoji-repeat-button">Storage Links</Field>
<Field icon="i-twemoji-star">Recommendations</Field>
<div class="card-header">
<div class="card-title">Options</div>
<div class="align-center mb-4 flex justify-between">
<div class="text-$vp-c-text-1 lh-relaxed text-sm font-bold">Options</div>
</div>
<InputField id="toggle-starred" label="Toggle Starred">
<template #display>
<ToggleStarred />
</template>
</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>
</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>