import 8.41.0 source

[pve-eslint.git] / eslint / docs / src / assets / scss / components / toc.scss

diff --git a/eslint/docs/src/assets/scss/components/toc.scss b/eslint/docs/src/assets/scss/components/toc.scss
index d1f47a6faeb3d75964a7fdc85a093dc71fe103a3..96647b4c70f0933907811a31a390bd1cc20917eb 100644 (file)
--- a/eslint/docs/src/assets/scss/components/toc.scss
+++ b/eslint/docs/src/assets/scss/components/toc.scss
@@ -1,23 +1,43 @@
 .docs-toc {
     margin: 2rem 0;
-}
-
-.docs-toc {
-    .docs-aside & {
-        display: none;
-    }
 
     @media all and (min-width: 1400px) {
         display: none;
     }
 
     .docs-aside & {
+        display: none;
+
         @media all and (min-width: 1400px) {
             display: block;
         }
     }
 }
 
+.docs-aside {
+    // for sticky table of contents in sidebar
+    .docs-toc.c-toc {
+        background-color: var(--body-background-color);
+        @media all and (min-width: 1400px) {
+            position: sticky;
+            top: 20px;
+            overflow-y: auto; // show scrollbar when toc is higher than viewport
+            padding-right: 5px; // push scrollbar away from content
+            max-height: calc(100vh - 32px); // minus element's margin-top
+            a.active {
+                color: var(--link-color);
+                font-weight: 500;
+            }
+        }
+    }
+
+    .c-toc ol li.active::before {
+        @media all and (min-width: 1400px) {
+            color: var(--link-color);
+        }
+    }
+}
+
 .c-toc {
     ol {
         margin: 0;
@@ -100,13 +120,10 @@
     color: var(--color-neutral-400);
 
     [aria-expanded="true"] & {
-        -ms-transform: rotate(180deg);
         transform: rotate(180deg);
     }
 }
 
-
-
 .c-toc__panel {
     &[data-open="false"] {
         display: none;