fix(aio): fix ToC styling

- Make the left bar gray (instead of blue).
- Show gray dot when hovering over an element.
- Hide left bar and dots in embedded mode.

aio/src/app/embedded/toc/toc.component.html

@@ -13,7 +13,7 @@
     <md-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></md-icon>
   </button>
 
-  <ul class="toc-list">
+  <ul class="toc-list" [class.embedded]="type !== 'Floating'">
     <ng-container *ngFor="let toc of tocList; let i = index">
       <li #tocItem title="{{toc.title}}" *ngIf="type === 'Floating' || toc.level !== 'h1'"
         class="{{toc.level}}" [class.secondary]="type === 'EmbeddedExpandable' && i >= primaryMax" [class.active]="i === activeIndex">

aio/src/styles/2-modules/_toc.scss

@@ -109,9 +109,7 @@ aio-toc {
       width: auto;
     }
 
-  }
-
-  ul.toc-list li {
+    li {
       box-sizing: border-box;
       font-size: 12px;
       line-height: 16px;
@@ -129,10 +127,6 @@ aio-toc {
         clear: both;
       }
 
-    &.h1, &.h2, &.h3 {
-      border-left: 1px solid $blue;
-    }
-
       &.h3 {
         padding-left: 24px;
       }
@@ -144,10 +138,10 @@ aio-toc {
         overflow: visible;
         font-size: 12px;
         display: table-cell;
-
-      &:hover {
-        color: $accentblue;
       }
+
+      &:hover a {
+        color: $accentblue;
       }
 
       &.active {
@@ -169,6 +163,24 @@ aio-toc {
       }
     }
 
+    &:not(.embedded) li {
+      &.h1, &.h2, &.h3 {
+        border-left: 1px solid $lightgray;
+      }
+
+      &:not(.active):hover:before {
+        content: '';
+        border-radius: 50%;
+        left: -4px;
+        top: 12px;
+        background: $lightgray;
+        position: absolute;
+        width: 6px;
+        height: 6px;
+      }
+    }
+  }
+
 }
 
 aio-toc.embedded > div.collapsed li.secondary {