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.
rmshea · Jun 4, 2017 · f2d810f · f2d810f
1 parent 819514a
commit f2d810f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 40 deletions.
diff --git a/aio/src/app/embedded/toc/toc.component.html b/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">

diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss
@@ -109,59 +109,71 @@ aio-toc {
       width: auto;
     }
 
-  }
-
-  ul.toc-list li {
-    box-sizing: border-box;
-    font-size: 12px;
-    line-height: 16px;
-    padding: 3px 0 3px 12px;
-    position: relative;
-    transition: all 0.3s ease-in-out;
-
-    &.h1:after {
-      content: '';
-      display: block;
-      height: 1px;
-      width: 40%;
-      margin: 7px 0 4px 0;
-      background: #DBDBDB;
-      clear: both;
-    }
+    li {
+      box-sizing: border-box;
+      font-size: 12px;
+      line-height: 16px;
+      padding: 3px 0 3px 12px;
+      position: relative;
+      transition: all 0.3s ease-in-out;
 
-    &.h1, &.h2, &.h3 {
-      border-left: 1px solid $blue;
-    }
+      &.h1:after {
+        content: '';
+        display: block;
+        height: 1px;
+        width: 40%;
+        margin: 7px 0 4px 0;
+        background: #DBDBDB;
+        clear: both;
+      }
 
-    &.h3 {
-      padding-left: 24px;
-    }
+      &.h3 {
+        padding-left: 24px;
+      }
 
-    a {
-      font-size: inherit;
-      color: lighten($darkgray, 10);
-      display:table-cell;
-      overflow: visible;
-      font-size: 12px;
-      display: table-cell;
+      a {
+        font-size: inherit;
+        color: lighten($darkgray, 10);
+        display:table-cell;
+        overflow: visible;
+        font-size: 12px;
+        display: table-cell;
+      }
 
-      &:hover {
+      &:hover a {
         color: $accentblue;
       }
+
+      &.active {
+        a {
+          color: $blue;
+          font-weight: 500;
+        }
+
+        &:before {
+          content: '';
+          border-radius: 50%;
+          left: -4px;
+          top: 12px;
+          background: $blue;
+          position: absolute;
+          width: 6px;
+          height: 6px;
+        }
+      }
     }
 
-    &.active {
-      a {
-        color: $blue;
-        font-weight: 500;
+    &:not(.embedded) li {
+      &.h1, &.h2, &.h3 {
+        border-left: 1px solid $lightgray;
       }
 
-      &:before {
+      &:not(.active):hover:before {
         content: '';
         border-radius: 50%;
         left: -4px;
         top: 12px;
-        background: $blue;
+        background: $lightgray;
         position: absolute;
         width: 6px;
         height: 6px;