From 8be2e4c325f306a598799edb8efb1d971a286909 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Thu, 8 Jun 2017 10:56:00 +0300
Subject: [PATCH] fix(aio): make the ToC left hand-side bar shorter (#17280)

Make the ToC left hand-side bar shorter, so that it starts at the initial bullet
and ends at the final bullet.

Fixes #17221
---
 aio/src/styles/2-modules/_toc.scss | 39 ++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss
index 256fda2c1c..8495984d4f 100644
--- a/aio/src/styles/2-modules/_toc.scss
+++ b/aio/src/styles/2-modules/_toc.scss
@@ -148,30 +148,43 @@ aio-toc {
         a {
           color: $blue;
           font-weight: 500;
-        }
 
-        &:before {
-          content: '';
-          border-radius: 50%;
-          left: -4px;
-          top: 12px;
-          background: $blue;
-          position: absolute;
-          width: 6px;
-          height: 6px;
+          &:before {
+            content: '';
+            border-radius: 50%;
+            left: -3px;
+            top: 12px;
+            background: $blue;
+            position: absolute;
+            width: 6px;
+            height: 6px;
+          }
         }
       }
     }
 
     &:not(.embedded) li {
-      &.h1, &.h2, &.h3 {
+      &:before {
         border-left: 1px solid $lightgray;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        top: 0;
       }
 
-      &:not(.active):hover:before {
+      &:first-child:before {
+        top: 13px;
+      }
+
+      &:last-child:before {
+        bottom: calc(100% - 14px);
+      }
+
+      &:not(.active):hover a:before {
         content: '';
         border-radius: 50%;
-        left: -4px;
+        left: -3px;
         top: 12px;
         background: $lightgray;
         position: absolute;