From 412ab3f20cb732c116b46565fdde54479f7d8ef6 Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Wed, 10 May 2017 00:11:06 +0100
Subject: [PATCH] fix(aio): basic fix to the TOC styling

Without any major refactoring these changes bring the TOC much closer to
how the Google developer docs TOC looks.

Closes #16646
---
 aio/src/styles/2-modules/_toc.scss | 34 +++++-------------------------
 1 file changed, 5 insertions(+), 29 deletions(-)

diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss
index 0134e501ed..9d49fcf5f5 100644
--- a/aio/src/styles/2-modules/_toc.scss
+++ b/aio/src/styles/2-modules/_toc.scss
@@ -25,16 +25,18 @@ aio-toc {
       display: none;
     }
   }
+
 }
 
 aio-toc > div {
+  border-left: 4px solid #4285f4;
   font-size: 13px;
   overflow-y: visible;
   padding: 4px 0 0 10px;
 
   .toc-heading p {
     font-weight: 500;
-    margin: 0 0 0 -11px;
+    margin: 0;
     padding: 0;
   }
 
@@ -96,7 +98,7 @@ aio-toc > div {
   ul.toc-list {
     list-style-type: none;
     margin: 0;
-    padding: 0 8px;
+    padding: 0;
 
     @media (max-width: 800px) {
       width: auto;
@@ -108,25 +110,10 @@ aio-toc > div {
     font-size: 12px;
     line-height: 16px;
     margin: 6px 0;
-    padding: 0 16px;
+    padding: 0;
     position: relative;
     transition: all 0.3 ease-in-out;
 
-    &:before {
-      content: '';
-      border-radius: 50%;
-      left: -3px;
-      top: 10px;
-      background: $lightgray;
-      position: absolute;
-      width: 6px;
-      height: 6px;
-    }
-
-    &:last-child a:before {
-      width: 0;
-    }
-
     a {
       font-size: 12px;
       color: lighten($darkgray, 10);
@@ -136,17 +123,6 @@ aio-toc > div {
       &:hover {
         color: $accentblue;
       }
-
-      &:before {
-        content: '';
-        left: -1px;
-        top: 10px;
-        background: $lightgray;
-        position: absolute;
-        display: block;
-        width: 1px;
-        height: calc(100% + 11px);
-      }
     }
   }