refactor: move toc css to content.css

1 files changed, 50 insertions, 0 deletions

diff --git a/assets/css/components/_toc.scss b/assets/css/components/_toc.scss
new file mode 100644
index 00000000..0fcd9188
--- /dev/null
+++ b/assets/css/components/_toc.scss
@@ -0,0 +1,50 @@
+#toc {
+    ul {
+        margin-block-start: 0;
+        margin-block-end: 0;
+        padding-inline-start: 1rem;
+
+        overflow: hidden;
+        position: relative;
+        li {
+            list-style: none;
+
+            & > a {
+                color: var(--secondary-text-color);
+                text-decoration: none;
+                transition: color .3s;
+                display: inline-flex;
+                align-items: center;
+                gap: .5rem;
+                &::before {
+                    content: '';
+                    display: inline-block;
+                    width: 1rem;
+                    height: .3rem;
+                    background-color: var(--block-background-color);
+                    border-radius: .2rem;
+                    transition: background .3s;
+                }
+            }
+
+            /* nested list */
+            ul {
+                max-height: 25rem;
+                overflow-y: auto
+            }
+
+            /* active styles */
+            &:not(.active) ul {
+                max-height: 0
+            }
+            a:hover,
+            &.active > a {
+                color: var(--text-color);
+            }
+
+            &.active > a::before {
+                background-color: var(--secondary-text-color);
+            }
+        }
+    }
+}