1 files changed, 124 insertions, 0 deletions
diff --git a/_sass/common/components/_toc.scss b/_sass/common/components/_toc.scss
new file mode 100644
index 0000000..9fd1421
--- /dev/null
+++ b/_sass/common/components/_toc.scss
@@ -0,0 +1,124 @@
+ul.toc {
+  display: block;
+  margin: 0;
+  color: $text-color;
+  list-style-type: none;
+  & > li {
+    margin: map-get($spacers, 1) / 2 0;
+    a {
+      display: inline-block;
+      margin: map-get($spacers, 1) / 4 0;
+      text-decoration: none !important;
+    }
+  }
+  .toc-h1,
+  .toc-h2,
+  .toc-h3,
+  .toc-h4,
+  .toc-h5,
+  .toc-h6 {
+    a {
+      @include link-colors($text-color, $main-color-1);
+    }
+    &.active {
+      a {
+        @include link-colors($main-color-1);
+      }
+    }
+  }
+
+  .toc-h2,
+  .toc-h3,
+  .toc-h4,
+  .toc-h5,
+  .toc-h6 {
+    &, a {
+      font-size: map-get($base, font-size-xs);
+      font-weight: map-get($base, font-weight);
+      line-height: map-get($base, line-height-xs);
+    }
+  }
+  .toc-h1 {
+    @include split-line(bottom);
+    padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0;
+    margin-bottom: map-get($spacers, 2);
+    color: $text-color-d;
+    &, a {
+      font-size: map-get($base, font-size-sm);
+      font-weight: map-get($base, font-weight-bold);
+      line-height: map-get($base, line-height-sm);
+    }
+    a {
+      @include link-colors($text-color-d, $main-color-1);
+    }
+  }
+  .toc-h2 {
+    &, a {
+      font-weight: map-get($base, font-weight-bold);
+    }
+  }
+  .toc-h3 {
+    margin-left: map-get($spacers, 3);
+  }
+  .toc-h4 {
+    margin-left: map-get($spacers, 3) * 2;
+  }
+  .toc-h5,
+  .toc-h6 {
+    margin-left: map-get($spacers, 3) * 3;
+  }
+  .toc-h6 {
+    color: $text-color-l;
+    a {
+      @include link-colors($text-color-l, $main-color-1);
+    }
+  }
+}
+
+ul.toc--ellipsis {
+  & > li {
+    @include overflow(hidden);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+ul.toc--navigator {
+  & > li {
+    a {
+      padding-left: map-get($spacers, 2);
+      margin: map-get($spacers, 1) 0;
+    }
+    &.active {
+      a {
+        margin-left: -4px;
+        @include split-line(left, 4px, $main-color-1);
+      }
+    }
+  }
+  .toc-h2,
+  .toc-h3,
+  .toc-h4 {
+    color: $text-color-l;
+    a {
+      @include link-colors($text-color-l);
+    }
+  }
+  .toc-h1 {
+    &, a {
+      font-size: map-get($base, font-size);
+      line-height: map-get($base, line-height);
+    }
+    color: $text-color;
+    a {
+      @include link-colors($text-color-d);
+    }
+  }
+  .toc-h2 {
+    &, a {
+      font-size: map-get($base, font-size-sm);
+      font-weight: map-get($base, font-weight-bold);
+      line-height: map-get($base, line-height-sm);
+    }
+  }
+}