diff options
| author | Mark Otto <[email protected]> | 2021-06-24 13:28:20 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2021-06-24 13:28:20 -0700 |
| commit | b02e142738d2a687ae8e6a3dba384f7827bd361c (patch) | |
| tree | 975fdb019b52fda51f781852628e91bb4da86e55 | |
| parent | ce4af911d9b72becbf3fc457aae86d26217414ba (diff) | |
| download | bootstrap-gs-use-scrollspy-on-docs-table_of_contents.tar.xz bootstrap-gs-use-scrollspy-on-docs-table_of_contents.zip | |
Redesign the toc for scrollspygs-use-scrollspy-on-docs-table_of_contents
| -rw-r--r-- | site/assets/scss/_toc.scss | 32 | ||||
| -rw-r--r-- | site/layouts/_default/docs.html | 2 |
2 files changed, 19 insertions, 15 deletions
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index 3e09e50b2..34bd8e763 100644 --- a/site/assets/scss/_toc.scss +++ b/site/assets/scss/_toc.scss @@ -1,5 +1,3 @@ -// stylelint-disable selector-max-type - .bd-toc { @include media-breakpoint-up(lg) { position: sticky; @@ -10,29 +8,35 @@ overflow-y: auto; } - nav { + .nav { @include font-size(.875rem); - ul ul { + ul { padding-left: 1rem; - margin-top: .25rem; } - li { - margin-bottom: .25rem; - - > .nav-link.active { - background-color: $bd-purple-light; + .nav-link { + padding: .125rem 0 .125rem .9rem; + margin-left: -1rem; + border-left: .1rem solid transparent; + @include border-radius(0); + + &:hover, + &.active { + font-weight: 500; + color: $bd-purple; + background-color: transparent; + border-left-color: $bd-purple-light; + } + &.active { + padding-left: .8em; + border-left-width: .2em; } } a { color: inherit; - &:hover:not(.active) { - text-decoration: underline; - } - code { font: inherit; } diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 3428ecaa2..7731f8df8 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -20,7 +20,7 @@ {{ if (eq .Page.Params.toc true) }} <div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted"> <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong> - {{ .Page.TableOfContents | replaceRE "(<li>)" "<li class=\"nav-item\">" | replaceRE "(<ul>)" "<ul class=\"nav nav-pills flex-column\">" | replaceRE "(?s:href)" "class=\"nav-link py-0 px-1\" href" | safeHTML }} + {{ .Page.TableOfContents | replaceRE "(<li>)" "<li class=\"nav-item\">" | replaceRE "(<ul>)" "<ul class=\"nav nav-pills flex-column\">" | replaceRE "(?s:href)" "class=\"nav-link\" href" | safeHTML }} </div> {{ end }} |