feat(aio): api pages styling

- Banner class code consolidation for API pages
- Set up temporary table of contents class and file
- API pages title styling
- Add color styling to doc-type listed on each API details page
- Classes and SCSS variables refactor
- Mobile optimization on headers, info-banner, and API pages
- API page table custom styling
- API Class Overview template code overview into table format

aio/tools/transforms/templates/includes/_class-overview.html

@@ -1,40 +1,76 @@
 <section class="class-overview api-section">
-  <h2>Class Overview</h2>
+  <h2>Properties and Methods</h2>
   <div class="api-doc-code">
 
-    <code class="no-bg openParens">class {$ doc.name $} {</code>
+  <table class="api-table">
+      <thead>
+      <tr>
+        <th>{$ doc.name $} Properties</th>
+        <th></th>
+      </tr>
+      </thead>
+      <tbody>
+        
+      <!-- STATISTICS -->
+      {% if doc.statics.length %}
+        {% for member in doc.statics %}{% if not member.internal %}>
+          <tr class="statics">
+            <th>
+              <pre>
+                <code><a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name $}</a></code>
+              </pre>
+            </th>
+            <td>
+              <pre class="prettyprint">
+                <code>
+                  {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+                </code>
+              </pre>
+            </td>
+          </tr>
+        {% endif %}{% endfor %}
+      {% endif %}
 
-    {% if doc.statics.length %}
-    <div class="statics">
-      {% for member in doc.statics %}{% if not member.internal %}
-        <pre class="prettyprint no-bg-with-indent"><code>static
-          <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
-          {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
-        </code></pre>
-      {% endif %}{% endfor %}
-    </div>
+      <!-- CONSTRUCTOR -->
+      {% if doc.constructorDoc.name %}
+        <tr class="constructor">
+          <th>
+            <pre class="prettyprint">
+              <code><a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a></code>
+            </pre>
+          </th>
+          <td>
+            <pre>
+              <code>{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}</code>
+            </pre>
+          </td>
+        </tr>
+      {% endif %}
+
+      <!-- MEMBERS -->
+      {% if doc.members.length %}
+        {% for member in doc.members %}{% if not member.internal %}
+          <tr class="members">
+            <th>
+              <pre class="prettyprint">
+                <code>
+                  <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
+                </code>
+              </pre>
+            </th>
+            <td>
+              <pre>
+                <code>
+                  {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+                </code>
+              </pre>
+            </td>
+          </tr>
+        {% endif %}{% endfor %}
     {% endif %}
+    </tbody>
+    </table>
 
-
-    {% if doc.constructorDoc.name %}
-    <div class="constructor">
-      <pre class="prettyprint no-bg-with-indent"><code>
-        <a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a>
-          {$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
-      </code></pre>
-    </div>
-    {% endif %}
-
-    {% if doc.members.length %}
-    <div class="members">
-      {% for member in doc.members %}{% if not member.internal %}
-        <pre class="prettyprint no-bg-with-indent"><code>
-          <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
-          {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
-        </code></pre>
-      {% endif %}{% endfor %}
-    {% endif %}
-
-    <code class="endParens api-doc-code no-bg">}</code>
   </div>
+
 </section>

aio/tools/transforms/templates/includes/_description.html

@@ -1,4 +1,4 @@
-<div class="api-section">
+<div class="description api-section">
   <h2 class="text-display-1" id="api-description">Description<a href="#api-description" class="header-link"><i class="material-icons">link</i></a></h2>
   {%- if doc.description.length > 2 %}
   {$ doc.description | trimBlankLines | marked $}

aio/tools/transforms/templates/includes/_info-bar.html

@@ -1,16 +1,16 @@
 {% import "lib/githubLinks.html" as github -%}
 
 <!-- INFO BAR -->
-<div class="info-bar">
-  <span class="info-bar-item is-left">
+<div class="info-banner api-info-bar">
+  <span class="info-bar-item">
     npm package: <a href="#">{$ doc.package $}</a>
   </span>
 
-  <span class="info-bar-item is-left">
+  <span class="info-bar-item">
     NgModule: <a href="#">{$ doc.moduleDoc.name $}</a>
   </span>
 
-  <span class="info-bar-item is-right">
+  <span class="info-bar-item">
     {$ github.githubViewLink(doc, versionInfo) $}
   </span>
 </div>

aio/tools/transforms/templates/includes/_members.html

@@ -1,4 +1,6 @@
-{% if doc.members.length %}
+<!-- **** This is being duplicated - already in class overview content **** -->
+
+<!--{% if doc.members.length %}
 <div class="instance-members api-section">
   <h2>Class Details</h2>
   {% for member in doc.members %}{% if not member.internal %}
@@ -14,4 +16,4 @@
   {% if not loop.last %}<hr class="hr-margin">{% endif %}
   {% endif %}{% endfor %}
 </div>
-{% endif %}
+{% endif %}-->

aio/tools/transforms/templates/includes/_title.html

@@ -1,6 +1,8 @@
 <!-- PAGE HERO -->
 <header class="api-header">
   <h1>{$ doc.name $}</h1>
-  <h2>{$ doc.docType $}</h2>
+  <div class="api-type-label {$ doc.docType $}">
+    <label>{$ doc.docType $}</label>
+  </div>
   <span class="version">{$ angular.version $}</span>
 </header>