Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 20:13:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve list compatibility for toc active selection

Browse Source 
Support up to 6 levels of indentation, properly support <ol>
This commit is contained in:
Zoroark 2021-11-27 19:43:57 +01:00
parent ea3cc72085
commit 7e9926dba0
1 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
assets/scss/partials/layout/article.scss
View File

@ -210,7 +210,7 @@
list-style-type: none; list-style-type: none;
counter-reset: item; counter-reset: item;
li:before { li a::before {
counter-increment: item; counter-increment: item;
content: counters(item, ".") ". "; content: counters(item, ".") ". ";
font-weight: bold; font-weight: bold;
@ -240,21 +240,34 @@
li.active-class > a { li.active-class > a {
border-left: var(--heading-border-size) solid var(--accent-color); border-left: var(--heading-border-size) solid var(--accent-color);
font-weight: bold; font-weight: bold;
}
ul li.active-class > a {
display: block; display: block;
} }
& > ul > li.active-class > a {
margin-left: calc(-25px - 1em); @function repeat($str, $n) {
padding-left: calc(25px + 1em - var(--heading-border-size)); $result: "";
@for $_ from 0 to $n {
$result: $result + $str;
}
@return $result;
} }
& > ul > li > ul > li.active-class > a { // Support up to 6 levels of indentation for lists in ToCs
margin-left: calc(-60px - 1em); @for $i from 0 to 5 {
padding-left: calc(60px + 1em - var(--heading-border-size)); & > ul #{repeat("> li > ul", $i)} > li.active-class > a {
$n: 25 + $i * 35;
margin-left: calc(-#{$n}px - 1em);
padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
} }
& > ul > li > ul > li > ul > li.active-class > a { & > ol #{repeat("> li > ol", $i)} > li.active-class > a {
margin-left: calc(-95px - 1em); $n: 9 + $i * 35;
padding-left: calc(95px + 1em - var(--heading-border-size)); margin-left: calc(-#{$n}px - 1em);
padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
display: block;
}
} }
} }
} }