fix: overflow list bottom gradient on toc (closes #1888)
This commit is contained in:
parent
9ff6c7a3f5
commit
f70e562432
3 changed files with 22 additions and 25 deletions
|
@ -53,17 +53,15 @@ export default ((opts?: Partial<Options>) => {
|
||||||
<polyline points="6 9 12 15 18 9"></polyline>
|
<polyline points="6 9 12 15 18 9"></polyline>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
|
<OverflowList class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
|
||||||
<OverflowList>
|
{fileData.toc.map((tocEntry) => (
|
||||||
{fileData.toc.map((tocEntry) => (
|
<li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
|
||||||
<li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
|
<a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
|
||||||
<a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
|
{tocEntry.text}
|
||||||
{tocEntry.text}
|
</a>
|
||||||
</a>
|
</li>
|
||||||
</li>
|
))}
|
||||||
))}
|
</OverflowList>
|
||||||
</OverflowList>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,23 +45,21 @@ button.toc-header {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toc-content {
|
ul.toc-content {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
& ul {
|
list-style: none;
|
||||||
list-style: none;
|
& > li > a {
|
||||||
margin: 0.5rem 0;
|
color: var(--dark);
|
||||||
padding: 0;
|
opacity: 0.35;
|
||||||
& > li > a {
|
transition:
|
||||||
color: var(--dark);
|
0.5s ease opacity,
|
||||||
opacity: 0.35;
|
0.3s ease color;
|
||||||
transition:
|
&.in-view {
|
||||||
0.5s ease opacity,
|
opacity: 0.75;
|
||||||
0.3s ease color;
|
|
||||||
&.in-view {
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -556,6 +556,7 @@ video {
|
||||||
div:has(> .overflow) {
|
div:has(> .overflow) {
|
||||||
display: flex;
|
display: flex;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.overflow,
|
ul.overflow,
|
||||||
|
|
Loading…
Add table
Reference in a new issue