build(aio): big move of docs related files (#14361)

All the docs related files (docs-app, doc-gen, content, etc)
are now to be found inside the `/aio` folder.

The related gulp tasks have been moved from the top level
gulp file to a new one inside the `/aio` folder.

The structure of the `/aio` folder now looks like:

```
/aio/
  build/         # gulp tasks
  content/       #MARKDOWN FILES for devguides, cheatsheet, etc
    devguides/
    cheatsheets/
  transforms/    #dgeni packages, templates, etc
  src/
    app/
    assets/
    content/    #HTML + JSON build artifacts produced by dgeni from /aio/content.
                #This dir is .gitignored-ed
  e2e/           #protractor tests for the doc viewer app
  node_modules/ #dependencies for both the doc viewer builds and the dgeni stuff
                #This dir is .gitignored-ed
  gulpfile.js   #Tasks for generating docs and building & deploying the doc viewer
```

Closes #14361

aio/src/styles/_constants.scss

@@ -0,0 +1 @@
+$small-breakpoint-width: 840px;

aio/src/styles/_typography-theme.scss

@@ -0,0 +1,43 @@
+@import '~@angular/material/core/theming/theming';
+
+@mixin docs-site-typography-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-component-viewer-tabbed-content,
+  .docs-guide-content {
+       h1 {
+        color: md-color($primary, 800);
+        background: rgba(md-color($foreground, secondary-text), .03);
+      }
+
+      h3, h2, h4, h5, p, ol, li{
+        color: md-color($foreground, secondary-text);
+      }
+
+      a {
+        color: md-color($primary);
+      }
+
+      table {
+        box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
+      }
+
+      table tbody th{
+        border: 1px solid rgba(md-color($foreground, secondary-text), .03);
+      }
+
+      td {
+        color: md-color($foreground, secondary-text);
+        border: 1px solid rgba(md-color($foreground, secondary-text), .03);
+      }
+
+      th {
+        color: md-color($foreground, secondary-text);
+        background: rgba(md-color($foreground, secondary-text), .03);
+      }
+  }
+}

aio/src/styles/_typography.scss

@@ -0,0 +1,69 @@
+@mixin docs-site-typography() {
+  .docs-component-viewer-tabbed-content .docs-component-view-text-content,
+  .docs-guide-content {
+    h1 {
+      display:inline-block;
+      font-size: 20px;
+      font-weight: 400;
+      padding: 5px;
+    }
+
+    h3, h2 {
+      font-size: 20px;
+      font-weight: 400;
+      margin-bottom: 30px;
+      margin-top: 80px;
+    }
+
+    h4 {
+      margin-top: 40px;
+    }
+
+    h5 {
+      font-size: 16px;
+    }
+
+    .md-tab-body-wrapper h2 {
+      margin-top: 0px;
+    }
+
+    p {
+      font-size: 16px;
+      line-height: 28px;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    table {
+      border-collapse: collapse;
+      border-radius: 2px;
+      border-spacing: 0;
+      margin: 0 0 32px 0;
+      width: 100%;
+    }
+
+    table tbody th {
+      max-width: 100px;
+      padding: 13px 32px;
+      text-align: left;
+    }
+
+    td {
+      font-weight: 400;
+      padding: 8px 30px;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    th {
+      font-size: 16px;
+      font-weight: 400;
+      padding: 13px 32px;
+      text-align: left;
+    }
+  }
+}

aio/src/styles/main.scss

@@ -0,0 +1,40 @@
+@import '~@angular/material/core/theming/all-theme';
+@import './ng-io-theme';
+@import './typography';
+
+
+// Include material core styles.
+@include md-core();
+@include docs-site-typography();
+
+
+// Define the light theme.
+$primary: md-palette($md-cyan);
+$accent:  md-palette($md-amber, A200, A100, A400);
+
+$theme: md-light-theme($primary, $accent);
+@include angular-material-theme($theme);
+
+body {
+  font-family: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+  margin: 0;
+}
+
+[md-button], [md-raised-button] {
+  text-transform: uppercase;
+}
+
+h1, h2 {
+  weight: 400;
+}
+
+.docs-primary-header {
+  padding-left: 20px;
+
+  h1 {
+    font-size: 30px;
+    font-weight: 300;
+    margin: 0;
+    padding: 50px;
+  }
+}

aio/src/styles/ng-io-theme.scss

@@ -0,0 +1,35 @@
+@import '~@angular/material/core/theming/all-theme';
+// Plus imports for other components in your app.
+
+// Include the base styles for Angular Material core. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+@include md-core();
+
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue.
+$ng-io-primary: md-palette($md-indigo);
+$ng-io-accent:  md-palette($md-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$ng-io-warn:    md-palette($md-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$ng-io-theme: md-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($ng-io-theme);
+
+//TODO: define custom theme, old values from Style guide:
+// @material-header: #455A64;
+// @material-header-darker: #37474F;
+// @material-header-dark: #263238;
+// @material-200: #EEEEEE;
+// @material-700: #616161;
+// @material-800: #424242;
+// @material-900: #212121;
+// @black: #000000;
+// @white: #FFFFFF;