feat: update toc style

jasonephraim · Feb 6, 2019 · 560bad5 · 560bad5
1 parent a16fd1f
commit 560bad5
Showing 1 changed file with 64 additions and 52 deletions.
diff --git a/_sass/common/components/_toc.scss b/_sass/common/components/_toc.scss
@@ -4,75 +4,75 @@ ul.toc {
   color: $text-color;
   list-style-type: none;
   & > li {
-    margin: map-get($spacers, 1) 0;
-    &.active {
-      a {
-        color: $main-color-1;
-      }
-    }
-  }
-  a {
-    display: inline-block;
-    margin: map-get($spacers, 1) / 4 0;
-    text-decoration: none !important;
-    @include link-colors($text-color, $main-color-1);
-  }
-
-  .toc-h1 {
-    color: $text-color-d;
+    margin: map-get($spacers, 1) / 2 0;
     a {
-      @include link-colors($text-color-d);
-    }
-    &.active {
-      a {
-        color: $main-color-1;
-      }
+      display: inline-block;
+      margin: map-get($spacers, 1) / 4 0;
+      text-decoration: none !important;
     }
   }
-  .toc-h5, .toc-h6 {
-    color: $text-color-l;
+  .toc-h1,
+  .toc-h2,
+  .toc-h3,
+  .toc-h4,
+  .toc-h5,
+  .toc-h6 {
     a {
-      @include link-colors($text-color-l);
+      @include link-colors($text-color, $main-color-1);
     }
     &.active {
       a {
-        color: $main-color-1;
+        @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);
-    font-size: map-get($base, font-size);
-    line-height: map-get($base, line-height);
-  }
-  .toc-h2 {
-    font-size: map-get($base, font-size-sm);
-    line-height: map-get($base, line-height-sm);
+    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-h1,
   .toc-h2 {
-    font-weight: map-get($base, font-weight-bold);
-  }
-  .toc-h3,
-  .toc-h4,
-  .toc-h5,
-  .toc-h6 {
-    font-size: map-get($base, font-size-xs);
-    font-weight: map-get($base, font-weight);
-    line-height: map-get($base, line-height-xs);
+    &, 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 {
+  .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 {
@@ -85,22 +85,17 @@ ul.toc--ellipsis {
 
 ul.toc--navigator {
   & > li {
+    a {
+      padding-left: map-get($spacers, 2);
+      margin: map-get($spacers, 1) 0;
+    }
     &.active {
       a {
         margin-left: -4px;
-        @include link-colors($main-color-1);
         @include split-line(left, 4px, $main-color-1);
       }
     }
   }
-  a {
-    padding-left: map-get($spacers, 2);
-    margin: map-get($spacers, 1) 0;
-    @include hover() {
-      background-color: transparent;
-    }
-  }
-
   .toc-h2,
   .toc-h3,
   .toc-h4 {
@@ -109,4 +104,21 @@ ul.toc--navigator {
       @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-d;
+    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);
+    }
+  }
 }