rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

Move table of contents to new sidebar, restyle it to be simpler

Browse Source
This commit is contained in:
Mark Otto 2020-04-01 14:35:25 -07:00
parent 6fdb8e6e68
commit bb3e5f712a
2 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
site/assets/scss/_toc.scss
View File

@ -1,17 +1,37 @@
// stylelint-disable selector-max-type, selector-max-compound-selectors
.bd-toc nav {
padding-top: .125em;
padding-bottom: .125em;
border-left: .25em solid $gray-200;
.bd-toc-wrap {
@include media-breakpoint-up(lg) {
@supports (position: sticky) {
position: sticky;
top: 5rem;
right: 0;
z-index: 2;
height: subtract(100vh, 7rem);
overflow-y: auto;
}
}
}
> ul {
margin-bottom: 0;
.bd-toc nav {
@include font-size(.875rem);
ul {
padding-left: 0;
list-style: none;
ul {
padding-left: 1rem;
margin-top: .25rem;
}
}
li ul li {
li {
margin-bottom: .25rem;
list-style-type: disc;
}
a {
color: inherit;
}
a:not(:hover) {

36
site/layouts/_default/docs.html
View File

@ -9,16 +9,18 @@
{{ partial "docs-navbar" . }}
{{ partial "docs-subnav" . }}
<div class="container-xl my-4">
<div class="container-xxl my-4">
<div class="row flex-xl-nowrap">
<div class="col-md-3">
<div class="col-md-3 col-xl-2 bd-sidebar">
{{ partial "docs-sidebar" . }}
</div>
<main class="col-md-9 py-md-3 pl-md-5 bd-content">
<h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
{{ partial "ads" . }}
<main class="col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content">
<div class="col-xl-10 px-0">
<h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
{{ partial "ads" . }}
</div>
{{ if .Page.Params.sections }}
<div class="row my-5">
@ -33,14 +35,22 @@
</div>
{{ end }}
{{ if (eq .Page.Params.toc true) }}
<strong class="d-block h3 mt-5 mb-3">On this page</strong>
<nav class="bd-toc mb-5 text-muted" aria-label="Secondary navigation">
{{ .TableOfContents }}
</nav>
{{ end }}
<div class="row position-relative flex-xl-row-reverse">
<div class="col-xl-3">
{{ if (eq .Page.Params.toc true) }}
<div class="bd-toc-wrap pl-xl-3 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<div class="bd-toc mb-5 mb-xl-0">
{{ .TableOfContents }}
</div>
</div>
{{ end }}
</div>
<div class="col-xl-9">
{{ .Content }}
</div>
</div>
{{ .Content }}
</main>
</div>
</div>