Use md-nav-list for guide list (#144)

Author: jelbourn

src/_app-theme.scss

@@ -4,6 +4,7 @@
 @import './app/pages/component-viewer/component-viewer-theme';
 @import './app/pages/component-list/component-list-theme';
 @import './app/pages/component-category-list/component-category-list-theme';
+@import './app/pages/guide-list/guide-list-theme';
 
 @import './styles/api-theme';
 @import './styles/markdown-theme';
@@ -50,4 +51,5 @@
   @include nav-bar-theme($theme);
   @include example-viewer-theme($theme);
   @include footer-theme($theme);
+  @include guide-list-theme($theme);
 }

src/app/pages/guide-list/_guide-list-theme.scss

@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+
+@mixin guide-list-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .docs-guide-list .docs-guide-item {
+    color: mat-color($primary);
+  }
+}

src/app/pages/guide-list/guide-list.html

@@ -1,12 +1,13 @@
 <div class="docs-primary-header">
   <h1>Guides</h1>
 </div>
-<md-list class="docs-guide-list-item">
-  <a md-list-item
-     *ngFor="let guide of guideItems.getAllItems()"
-     [routerLink]="['/guide/', guide.id]">
-      {{guide.name}}
+
+<md-nav-list class="docs-guide-list">
+  <a md-list-item *ngFor="let guide of guideItems.getAllItems()"
+      class="docs-guide-item"
+      [routerLink]="['/guide/', guide.id]">
+    {{guide.name}}
   </a>
-</md-list>
+</md-nav-list>
 
 <app-footer></app-footer>

src/app/pages/guide-list/guide-list.scss

@@ -4,8 +4,11 @@
   flex-grow: 1;
 }
 
-.docs-guide-list-item {
+.docs-guide-list {
   margin: 50px;
   flex-grow: 1;
 }
 
+.docs-guide-item, .docs-guide-item:hover {
+  text-decoration: none;
+}