fix(theme): clip outline dropdown scrollbar to border radius

close #5452
pull/5463/head
ChisakaKanako 1 week ago
parent 50f3a74f9e
commit 8c4e172138

@ -93,13 +93,15 @@ function scrollToTop() {
</button> </button>
<Transition name="flyout"> <Transition name="flyout">
<div v-if="open" ref="items" :id="itemsId" class="items" @click="onItemClick"> <div v-if="open" ref="items" :id="itemsId" class="items" @click="onItemClick">
<div class="header"> <div class="items-scroll">
<a class="top-link" href="#" @click="scrollToTop"> <div class="header">
{{ theme.returnToTopLabel || 'Return to top' }} <a class="top-link" href="#" @click="scrollToTop">
</a> {{ theme.returnToTopLabel || 'Return to top' }}
</div> </a>
<div class="outline"> </div>
<VPDocOutlineItem :headers /> <div class="outline">
<VPDocOutlineItem :headers />
</div>
</div> </div>
</div> </div>
</Transition> </Transition>
@ -153,15 +155,19 @@ function scrollToTop() {
position: absolute; position: absolute;
top: 2.5rem; top: 2.5rem;
inset-inline: 1rem; inset-inline: 1rem;
display: grid;
gap: 1px;
border: 1px solid var(--vp-c-border); border: 1px solid var(--vp-c-border);
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--vp-c-gutter); background-color: var(--vp-c-gutter);
max-height: calc(var(--vp-vh, 100vh) - 5.375rem); overflow: hidden;
box-shadow: var(--vp-shadow-3);
}
.items-scroll {
display: grid;
gap: 1px;
max-height: calc(var(--vp-vh, 100vh) - 5.375rem - 2px);
overflow: hidden auto; overflow: hidden auto;
overscroll-behavior: contain; overscroll-behavior: contain;
box-shadow: var(--vp-shadow-3);
} }
@media (min-width: 60rem) { @media (min-width: 60rem) {

Loading…
Cancel
Save