feat(aio): initial design commit

Implemented style guide elements to top header bar, side hamburger nav menu, content and search. Consolidated SCSS files to styles folder. Fixed PWA test.

aio/src/styles/0-base/_base-dir.scss

@@ -0,0 +1,5 @@
+/* ==============================
+   BASE STYLES
+   ============================== */
+
+@import 'typography';

aio/src/styles/0-base/_typography.scss

@@ -0,0 +1,121 @@
+// @mixin docs-site-typography() {
+//   .docs-component-viewer-tabbed-content .docs-component-view-text-content,
+//   .docs-guide-content {
+
+    body {
+      font-family: $main-font;
+      margin: 0;
+      color: $darkgray;
+    }
+
+    h1 {
+      display:inline-block;
+      font-size: 36px;
+      font-weight: 400;
+      margin: 12px 0px;
+    }
+
+    h1:after {
+      content: "";
+      display: block;
+      height: 1px;
+      width: 40%;
+      margin: 30px 0px 10px;
+      background: $lightgray;
+    }
+
+    h2 {
+      font-size: 30px;
+      font-weight: 500;
+      margin: 48px 0px 32px;
+    }
+
+    h3 {
+      font-size: 24px;
+      font-weight: 500;
+      margin: 12px 0px;
+      text-transform: uppercase;
+    }
+
+    h4 {
+      font-size: 24px;
+      font-weight: 400;
+      margin: 8px 0px;
+    }
+
+    h5 {
+      font-size: 18px;
+      font-weight: 500;
+      margin: 8px 0px;
+      text-transform: uppercase;
+    }
+
+    .mat-tab-body-wrapper h2 {
+      margin-top: 0px;
+    }
+
+    p, ol, ul, input {
+      font-size: 14px;
+      line-height: 24px;
+      letter-spacing: 0.30px;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    .mat-toolbar-row a {
+      font-size: 18px;
+      font-weight: 400;
+      color: white;
+      font-family: $support-font;
+      text-transform: uppercase;
+    }
+
+    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: 500;
+      padding: 13px 32px;
+      text-align: left;
+    }
+
+    p code {
+      font-family: $code-font;
+      font-size: 90%;
+      color: $blue;
+      letter-spacing: 0;
+      line-height: 1;
+      padding: 2px 4px;
+      background-color: $backgroundgray;
+      border-radius: 4px;
+    }
+
+    .sidenav-content a {
+      color: $blue;
+    }
+
+//   }
+// }

aio/src/styles/1-layouts/_content-layout.scss

@@ -0,0 +1,24 @@
+.sidenav-content {
+    padding: 1rem 3rem;
+    height: 100vh;
+    margin: auto;
+}
+
+.fill-remaining-space {
+  flex: 1 1 auto;
+}
+
+@media (max-width: 600px) {
+  aio-menu {
+    display: none;
+  }
+}
+
+.sidenav-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.sidenav-content button {
+  min-width: 50px;
+}

aio/src/styles/1-layouts/_layouts-dir.scss

@@ -0,0 +1,8 @@
+/* ==============================
+   LAYOUT STYLES
+   ============================== */
+
+@import 'sidenav';
+@import 'content-layout';
+@import 'search-results';
+@import 'top-menu';

aio/src/styles/1-layouts/_search-results.scss

@@ -0,0 +1,15 @@
+.search-results {
+    background-color: $lightgray;
+    padding: 20px;
+}
+
+.search-result-item {
+    color: $darkgray;
+    text-decoration: none;
+    &:hover {
+        color: $blue
+    }
+    &:visited {
+        text-decoration: none;
+    }
+}

aio/src/styles/1-layouts/_sidenav.scss

@@ -0,0 +1,173 @@
+/************************************
+
+             Media queries
+
+ To use these, put this snippet in the approriate selector:
+
+     @include bp(tiny) {
+         background-color: purple;
+     }
+
+     Replace "tiny" with "medium" or "big" as necessary.
+*************************************/
+
+@mixin bp($point) {
+
+  $bp-xsmall: "(min-width: 320px)";
+  $bp-teeny: "(min-width: 480px)";
+  $bp-tiny: "(min-width: 600px)";
+  $bp-small: "(min-width: 650px)";
+  $bp-medium: "(min-width: 800px)";
+  $bp-big: "(min-width: 1000px)";
+
+  @if $point == big {
+    @media #{$bp-big} { @content; }
+  }
+  @else if $point == medium {
+    @media #{$bp-medium} { @content; }
+  }
+  @else if $point == small {
+    @media #{$bp-small}  { @content; }
+  }
+  @else if $point == tiny {
+    @media #{$bp-tiny}  { @content; }
+  }
+  @else if $point == teeny {
+    @media #{$bp-teeny}  { @content; }
+  }
+  @else if $point == xsmall {
+    @media #{$bp-xsmall}  { @content; }
+  }
+}
+
+/************************************/
+
+.mat-sidenav.sidenav {
+    box-shadow: 6px 0 6px rgba(0,0,0,0.10);
+    background-color: $offwhite;
+    padding: 10px 0px 0px;
+    min-width: 220px;
+}
+
+.vertical-menu-item {
+  box-sizing: border-box;
+  color: $darkgray;
+  cursor: pointer;
+  display: block;
+  max-width: 260px;
+  overflow-wrap: break-word;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 20px;
+  text-decoration: none;
+  text-align: left;
+  transition-duration: 180ms;
+  transition-property: background-color, color;
+  transition-timing-function: ease-in-out;
+  width: 100%;
+  word-wrap: break-word;
+  outline: none;
+
+  &:hover {
+    text-shadow: 0px 0px 5px #ffffff;
+    background-color: $lightgray;
+  }
+
+  //icons _within_ nav
+  .material-icons {
+    position: absolute;
+    top: 6px;
+  }
+
+  @include bp(tiny) {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+}
+
+.vertical-menu-item.selected {
+  color: $blue;
+}
+
+.heading {
+  color: #444;
+  cursor: pointer;
+  position: relative;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+.material-icons {
+  display: inline-block;
+  position: absolute;
+  top: 6px;
+  right: 8px;
+}
+
+.heading-children.expanded {
+  visibility: visible;
+  opacity: 1;
+  // height: auto;
+  max-height: 4000px; // Arbitrary max-height. Can increase if needed. Must have measurement to transition height.
+  transition: visibility 500ms, opacity 500ms, max-height 500ms;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+}
+
+.heading-children.collapsed {
+  visibility: hidden;
+  opacity: 0;
+  max-height: 1px; // Must have measurement to transition height.
+  transition: visibility 275ms, opacity 275ms, max-height 280ms;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+
+.heading.selected.level-1,
+.heading-children.selected.level-1 {
+  border-left: 3px $blue solid;
+}
+
+.level-1 {
+  font-family: $support-font;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding-left: 10px;
+  transition: background-color 0.2s;
+}
+
+.level-2 {
+  font-family: $main-font;
+  font-size: 14px;
+  color: $mediumgray;
+  font-weight: 400;
+  padding-left: 20px;
+  text-transform: none;
+}
+
+.level-3 {
+  font-family: $support-font;
+  font-size: 14px;
+  color: $mediumgray;
+  text-transform: uppercase;
+  padding-left: 30px;
+}
+
+@mixin rotate($degrees) {
+  -moz-transform: rotate($degrees);
+  -webkit-transform: rotate($degrees);
+  -o-transform: rotate($degrees);
+  -ms-transform: rotate($degrees);
+  transform: rotate($degrees);
+  transition: transform 150ms;
+  transition-timing-function: ease-in-out;
+}
+
+.level-1.expanded .material-icons, .level-2.expanded .material-icons {
+  @include rotate(90deg);
+}
+
+.level-1:not(.expanded) .material-icons, .level-2:not(.expanded) .material-icons {
+  @include rotate(0deg);
+}

aio/src/styles/1-layouts/_top-menu.scss

@@ -0,0 +1,44 @@
+aio-top-menu {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 80%;
+}
+
+aio-top-menu ul {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style-position: inside;
+  padding: 0px;
+  margin: 0px;
+}
+
+aio-top-menu li {
+  list-style-type: none;
+}
+
+md-toolbar.mat-toolbar {
+  box-shadow: 6px 0 6px rgba(0,0,0,0.10);
+  padding: 0 16px 0px 0px;
+}
+
+.search-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+aio-search-box input {
+  color: $darkgray;
+  border: none;
+  border-radius: 5px;
+  background-color: $offwhite;
+  padding: 5px 10px;
+  margin-left: 8px;
+  min-width:200px;
+  width: 50%;
+  height: 40%;
+}

aio/src/styles/2-modules/_code.scss

@@ -0,0 +1,14 @@
+.code-example {
+    background-color: $backgroundgray;
+    border-radius: 5px;
+    color: $darkgray;
+    padding: 20px;
+    margin: 24px auto;
+    border: 0.5px solid $lightgray;
+}
+
+.code-example pre {
+    margin: 0px;
+    padding: 0px;
+    white-space: pre-wrap;
+}

aio/src/styles/2-modules/_hamburger.scss

@@ -0,0 +1,23 @@
+.hamburger {
+  transition-duration: 150ms;
+  transition-property: background-color, color;
+  transition-timing-function: ease-in-out;
+  &:hover {
+    color: $lightgray;
+  }
+}
+
+.hamburger.mat-button {
+    transition: color 0.2s;
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+}
+
+.hamburger.mat-button:hover {
+    color: $offwhite;
+}
+
+.hamburger md-icon {
+  position: inherit;
+}

aio/src/styles/2-modules/_modules-dir.scss

@@ -0,0 +1,6 @@
+/* ==============================
+   MODULE STYLES
+   ============================== */
+
+   @import 'hamburger';
+   @import 'code';

aio/src/styles/_constants.scss

@@ -1 +1,21 @@
 $small-breakpoint-width: 840px;
+
+// TYPOGRAPHY
+$main-font: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+$support-font: "Lato","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+$code-font: "Droid Sans Mono", monospace;
+
+// COLOR PALETTE
+$blue: #1976D2;
+$brightred: #DD0031;
+$darkred: #C3002F;
+$offwhite: #FAFAFA;
+$backgroundgray: #F1F1F1;
+$lightgray: #DBDBDB;
+$mediumgray: #7E7E7E;
+$darkgray: #333;
+$black: #0A1014;
+
+// GRADIENTS
+$bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
+$redgradient: linear-gradient(145deg,$darkred,$brightred);

aio/src/styles/_typography-theme.scss

@@ -22,6 +22,10 @@
         color: mat-color($primary);
       }
 
+      .nav-link:visited {
+        text-decoration: none;
+      }
+
       table {
         box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
       }

aio/src/styles/_typography.scss

@@ -1,69 +0,0 @@
-@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;
-    }
-
-    .mat-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

@@ -1,33 +1,25 @@
+// import global themes
 @import '~@angular/material/core/theming/all-theme';
 @import './ng-io-theme';
-@import './typography';
 
+// import global variables / 
+@import './constants';
 
-// Include material core styles.
-@include mat-core();
-@include docs-site-typography();
+// import global mixins
 
+// import directories
+@import './0-base/base-dir';
+@import './1-layouts/layouts-dir';
+@import'./2-modules/modules-dir';
 
-// Define the light theme.
-$primary: mat-palette($mat-cyan);
-$accent:  mat-palette($mat-amber, A200, A100, A400);
+// import additional scss
 
-$theme: mat-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], [mat-button], [mat-raised-button] {
   text-transform: uppercase;
 }
 
-h1, h2 {
-  font-weight: 400;
-}
-
 .docs-primary-header {
   padding-left: 20px;
 }

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

@@ -5,12 +5,11 @@
 // have to load a single css file for Angular Material in your app.
 @include mat-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: mat-palette($mat-indigo);
-$ng-io-accent:  mat-palette($mat-pink, A200, A100, A400);
+$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
+$ng-io-accent:  mat-palette($mat-red, 700, 600, 800);
 
 // The warn palette is optional (defaults to red).
 $ng-io-warn:    mat-palette($mat-red);