fix(theme): incorrect shadow when title is too long

This commit is contained in:
pengzhanbo 2024-08-27 10:43:16 +08:00
parent ec0012e822
commit 55b96875b1
6 changed files with 22 additions and 6 deletions

View File

@ -66,7 +66,9 @@ const style = computed(() => ({
</script>
<template>
<img v-if="type === 'link'" class="vp__img" :src="link" alt="" :style="{ height: size }">
<span v-if="type === 'link'" class="vp-icon-img">
<img :src="link" alt="" :style="{ height: size }">
</span>
<span
v-else-if="type === 'svg'"
class="vp-icon"
@ -82,10 +84,15 @@ const style = computed(() => ({
</template>
<style scoped>
.vp__img {
.vp-icon-img {
display: inline-block;
width: max-content;
height: 1em;
margin: 0 0.3em;
vertical-align: middle;
}
.vp-icon-img img {
height: 100%;
}
</style>

View File

@ -49,4 +49,9 @@ defineProps<{
color: var(--vp-c-text-2);
transition: color var(--t-color);
}
.title :deep(.vp-icon),
.title :deep(.vp-icon-img) {
margin-left: 0;
}
</style>

View File

@ -39,7 +39,6 @@ const { page } = useData()
.link {
display: block;
width: max-content;
padding: 0 12px;
font-size: 14px;
font-weight: 500;
@ -60,4 +59,9 @@ const { page } = useData()
.link.active {
color: var(--vp-c-brand-1);
}
.link :deep(.vp-icon),
.link :deep(.vp-icon-img) {
margin-left: 0;
}
</style>

View File

@ -227,7 +227,7 @@ function onCaretClick() {
transition: color var(--t-color);
}
.item :deep(.vp__img) {
.item :deep(.vp-icon-img) {
height: 0.9em;
margin: 0 0.25rem 0 0;
}

View File

@ -50,7 +50,7 @@ const icon = computed<string | { svg: string } | undefined>(() => {
}
.vp-card-wrapper :deep(.vp-icon),
.vp-card-wrapper :deep(.vp__img) {
.vp-card-wrapper :deep(.vp-icon-img) {
margin: 0;
}

View File

@ -76,7 +76,7 @@ defineProps<{
}
.vp-link-card .link :deep(.vp-icon),
.vp-link-card .link :deep(.vp__img) {
.vp-link-card .link :deep(.vp-icon-img) {
margin: 0;
}