feat: update toc style

dayeol · Nov 16, 2018 · aae94c2 · aae94c2
1 parent b45f11a
commit aae94c2
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 56 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -21,10 +21,7 @@
     "declaration-empty-line-before": null,
     "declaration-no-important": true,
     "font-family-name-quotes": "always-where-recommended",
-    "font-weight-notation": [
-      "numeric", {
-        "ignore": ["relative"]
-    }],
+    "font-weight-notation": null,
     "function-url-no-scheme-relative": true,
     "function-url-quotes": "always",
     "length-zero-no-unit": true,
@@ -269,7 +266,7 @@
     "selector-max-specificity": null,
     "selector-max-type": 2,
     "selector-max-universal": 1,
-    "selector-no-qualifying-type": true,
+    "selector-no-qualifying-type": null,
     "selector-no-vendor-prefix": true,
     "string-quotes": "double",
     "value-keyword-case": "lower",

diff --git a/_includes/scripts/lib/toc.js b/_includes/scripts/lib/toc.js
@@ -2,7 +2,7 @@
   var SOURCES = window.TEXT_VARIABLES.sources;
   window.Lazyload.js(SOURCES.jquery, function() {
     function toc(options) {
-      var $root = this, $window = $(window), $scrollTarget, $scroller, $tocUl = $('<ul class="toc"></ul>'), $tocLi, $headings, $activeLast, $activeCur,
+      var $root = this, $window = $(window), $scrollTarget, $scroller, $tocUl = $('<ul class="toc toc--ellipsis"></ul>'), $tocLi, $headings, $activeLast, $activeCur,
         selectors = 'h1,h2,h3', container = 'body', scrollTarget = window, scroller = 'html, body', disabled = false,
         headingsPos, scrolling = false, hasRendered = false, hasInit = false;
 

diff --git a/_sass/common/components/_toc.scss b/_sass/common/components/_toc.scss
@@ -6,60 +6,42 @@ ul.toc {
     margin: map-get($spacers, 1) 0;
     &.active {
       a {
-        color: $text-color-3;
-        background-color: $main-color-3;
-        box-shadow: 0 0 0 2px rgba($main-color-3, .4);
+        color: $main-color-1;
       }
     }
   }
 
   a {
     display: inline-block;
-    padding: map-get($spacers, 1) map-get($spacers, 2) map-get($spacers, 1) map-get($spacers, 2);
+    margin: map-get($spacers, 1) / 4 0;
     text-decoration: none !important;
-    border-radius: map-get($base, border-radius);
-    @include clickable($text-color, null, $text-color-3, $main-color-3);
+    @include link-colors($text-color, $main-color-1);
   }
-
   .toc-h1 {
-    @include split-line(bottom);
-    padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0;
-    margin-bottom: map-get($spacers, 2);
     a {
       @include link-colors($text-color-d);
     }
-  }
-  .toc-h1,
-  .toc-h2 {
-    &, a {
-      font-weight: map-get($base, font-weight-bold);
-    }
-  }
-  .toc-h3,
-  .toc-h4,
-  .toc-h5,
-  .toc-h6 {
-    &, a {
-      font-weight: map-get($base, font-weight);
+    &.active {
+      a {
+        color: $main-color-1;
+      }
     }
   }
-  .toc-h5,
-  .toc-h6 {
+  .toc-h5, .toc-h6 {
     a {
       @include link-colors($text-color-l);
     }
-  }
-  .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;
+    &.active {
+      a {
+        color: $main-color-1;
+      }
+    }
   }
 
   .toc-h1 {
+    @include split-line(bottom);
+    padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0;
+    margin-bottom: map-get($spacers, 2);
     &, a {
       font-size: map-get($base, font-size);
       line-height: map-get($base, line-height);
@@ -71,34 +53,58 @@ ul.toc {
       line-height: map-get($base, line-height-sm);
     }
   }
+  .toc-h1,
+  .toc-h2 {
+    &, a {
+      font-weight: map-get($base, font-weight-bold);
+    }
+  }
   .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-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;
+  }
+}
+
+ul.toc--ellipsis {
+  & > li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 ul.toc--navigator {
   & > li {
-    @include active() {
-      a {
-        background-color: transparent;
-      }
-    }
     &.active {
       a {
         margin-left: -4px;
-        background-color: transparent;
-        box-shadow: none;
         @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,
@@ -107,13 +113,4 @@ ul.toc--navigator {
       @include link-colors($text-color-l);
     }
   }
-
-  a {
-    padding: 0 0 0 map-get($spacers, 2);
-    margin: map-get($spacers, 1) 0;
-    border-radius: 0;
-    @include hover() {
-      background-color: transparent;
-    }
-  }
 }