Use scrollspy on docs pages (#33428)

GeoSot · julien-deramond · mdo · web-flow · commit a9810ece616b · 2022-12-29T12:11:01.000-08:00
* use scrollspy on docs pages

* Update colors by taking into account new dark mode

* Restyle it

* Update colors once more

* Fix some color contrast issues

Co-authored-by: Julien Déramond &lt;juderamond@gmail.com&gt;
Co-authored-by: Mark Otto &lt;markdotto@gmail.com&gt;
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
@@ -27,7 +27,7 @@
   --base05: #abb2bf;
   --base06: #b6bdca;
   --base07: #d19a66;
-  --base08: #e06c75;
+  --base08: #{$red-300};
   --base09: #d19a66;
   --base0A: #e5c07b;
   --base0B: #98c379;
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type
+// stylelint-disable selector-max-type, selector-no-qualifying-type, selector-max-compound-selectors
 
 .bd-toc {
   @include media-breakpoint-up(lg) {
@@ -16,23 +16,34 @@
     ul {
       padding-left: 0;
       margin-bottom: 0;
+      margin-left: -.75rem;
       list-style: none;
 
       ul {
         padding-left: 1rem;
-        margin-top: .25rem;
-      }
-    }
+        margin-left: -1rem;
 
-    li {
-      margin-bottom: .25rem;
+        a {
+          padding-left: 1.375rem;
+        }
+      }
     }
 
     a {
+      display: block;
+      padding: .125rem 0 .125rem .625rem;
       color: inherit;
+      text-decoration: none;
+      border-left: .125rem solid transparent;
+
+      &:hover,
+      &.active {
+        color: var(--bd-toc-color);
+        border-left-color: var(--bd-toc-color);
+      }
 
-      &:not(:hover) {
-        text-decoration: none;
+      &.active {
+        font-weight: 500;
       }
 
       code {
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
@@ -18,13 +18,14 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-accent-rgb: #{to-rgb($bd-accent)};
   --bd-pink-rgb: #{to-rgb($pink-500)};
   --bd-teal-rgb: #{to-rgb($teal-500)};
-
   --bd-violet-bg: var(--bd-violet);
+  --bd-toc-color: var(--bd-violet);
   --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
 }
 
 @include color-mode(dark, true) {
   --bd-violet: #{mix($bd-violet, $white, 75%)};
   --bd-violet-bg: #{$bd-violet};
+  --bd-toc-color: var(--#{$prefix}emphasis-color);
   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
 }
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
@@ -1,3 +1,4 @@
+{{ define "body_override" }}<body data-bs-spy="scroll" tabindex="0" data-bs-target="#TableOfContents">{{ end }}
 {{ define "main" }}
   <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
     <aside class="bd-sidebar">

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+{{ define "body_override" }}<body data-bs-spy="scroll" tabindex="0" data-bs-target="#TableOfContents">{{ end }}`
`1`	`2`	`{{ define "main" }}`
`2`	`3`	`<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">`
`3`	`4`	`<aside class="bd-sidebar">`