update guides list into table layout

Author: rangle-fatima

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/typography-theme';
 @import './app/shared/navbar/navbar-theme';
@@ -46,4 +47,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,27 @@
+@import '~@angular/material/core/theming/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);
+
+  app-guides {
+
+    .docs-guide-list-item {
+      table {
+        box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
+      }
+
+      th {
+        color: md-color($foreground, secondary-text);
+        background: rgba(md-color($foreground, secondary-text), .03);
+      }
+
+      td a {
+        color: md-color($primary);
+      }
+    }
+  }
+}

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

@@ -1,12 +1,27 @@
 <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}}
-  </a>
+  <table>
+    <tbody>
+      <tr>
+        <th>Core Guides</th>
+      </tr>
+
+      <tr>
+        <td>
+          <a md-list-item
+             *ngFor="let guide of guideItems.getAllItems()"
+             [routerLink]="['/guide/', guide.id]">
+              {{guide.name}}
+          </a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+
 </md-list>
 
 <app-footer></app-footer>

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

@@ -7,5 +7,30 @@
 .docs-guide-list-item {
   margin: 50px;
   flex-grow: 1;
-}
 
+  table {
+    border-collapse: collapse;
+    border-radius: 2px;
+    border-spacing: 0;
+    margin: 0 0 32px 0;
+    width: 100%;
+  }
+
+  table tbody th {
+    font-weight: 400;
+    padding: 13px 32px;
+    text-align: left;
+  }
+
+  td {
+    padding: 8px 20px;
+
+    a {
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}