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/e2e/app.e2e-spec.ts

@@ -11,7 +11,7 @@ describe('site App', function() {
 
   it('should show features text after clicking "Features"', () => {
     page.featureLink.click().then(() => {
-      expect(page.getDocViewerText()).toContain('Progressive web apps');
+      expect(page.getDocViewerText()).toMatch(/Progressive web apps/i);
     });
   });
 

aio/src/app/app.component.html

@@ -1,11 +1,11 @@
 <md-toolbar color="primary" class="app-toolbar">
   <button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
   <aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
-  <aio-search-box #searchBox></aio-search-box>
+  <aio-search-box class="search-container" #searchBox></aio-search-box>
   <span class="fill-remaining-space"></span>
 </md-toolbar>
 
-<md-sidenav-container class="sidenav-container">
+<md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)">
 
   <md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
     <aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>

aio/src/app/app.component.ts

@@ -11,11 +11,10 @@ import { SearchResultsComponent } from 'app/search/search-results/search-results
 @Component({
   selector: 'aio-shell',
   templateUrl: './app.component.html',
-  styleUrls:  ['./app.component.scss'],
 })
 export class AppComponent implements OnInit {
   readonly sideBySideWidth = 600;
-  readonly homeImageUrl = 'assets/images/logos/angular2/angular_solidBlack.svg';
+  readonly homeImageUrl = 'assets/images/logos/standard/logo-nav.png';
 
   isHamburgerVisible = true; // always ... for now
   isSideBySide = false;

aio/src/app/layout/nav-item/nav-item.component.ts

@@ -4,7 +4,6 @@ import { NavigationNode } from 'app/navigation/navigation.service';
 @Component({
   selector: 'aio-nav-item',
   templateUrl: 'nav-item.component.html',
-  styleUrls: ['nav-item.component.scss']
 })
 export class NavItemComponent implements OnChanges {
   @Input() selectedNodes: NavigationNode[];

aio/src/app/layout/top-menu/top-menu.component.ts

@@ -4,8 +4,10 @@ import { NavigationNode } from 'app/navigation/navigation.service';
 @Component({
   selector: 'aio-top-menu',
   template: `
-    <span><a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a></span>
+    <ul role="navigation">
-    <span *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></span>`,
+    <li><a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a></li>
+    <li *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></li>
+    </ul>`,
   styles: [`
     .fill-remaining-space {
       flex: 1 1 auto;

aio/src/app/search/search-box/search-box.component.html

@@ -1,8 +1,5 @@
-<md-input-container >
 <input #searchBox
-         mdInput
     placeholder="Search"
     (keyup)="onSearch($event.target.value, $event.which)"
     (focus)="onSearch($event.target.value)"
     (click)="onSearch($event.target.value)">
-</md-input-container>

aio/src/app/search/search-box/search-box.component.ts

@@ -17,7 +17,6 @@ import { LocationService } from 'app/shared/location.service';
 @Component({
   selector: 'aio-search-box',
   templateUrl: './search-box.component.html',
-  styleUrls: ['./search-box.component.scss']
 })
 export class SearchBoxComponent implements OnInit {
 

aio/src/app/search/search-results/search-results.component.html

@@ -1,8 +1,9 @@
-<div class="search-results">
+<div class="search-results" *ngIf="(searchAreas | async)?.length > 0" >
   <div class="search-area" *ngFor="let area of searchAreas | async">
     <h2>{{area.name}}</h2>
     <div class="search-page" *ngFor="let page of area.pages">
-      <a href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
+      <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
     </div>
   </div>
 </div>
+

aio/src/index.html

@@ -32,13 +32,14 @@
   <script async src='https://www.google-analytics.com/analytics.js'></script>
   <!-- End Google Analytics -->
 
+  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
 </head>
 
 <body>
 
   <aio-shell></aio-shell>
 
-  <!-- TODO: google analytics -->
   <!-- TODO: google feedback -->
   <!-- TODO: twitter widget (but only on pages that use twitter) -->
 </body>

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

@@ -42,17 +42,23 @@
 
 /************************************/
 
+.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: #545454;
+  color: $darkgray;
   cursor: pointer;
   display: block;
   max-width: 260px;
   overflow-wrap: break-word;
-  padding-bottom: 10px;
   padding-top: 10px;
-  padding-left: 15px;
+  padding-bottom: 10px;
-  padding-right: 15px;
+  padding-left: 20px;
   text-decoration: none;
   text-align: left;
   transition-duration: 180ms;
@@ -63,8 +69,8 @@
   outline: none;
 
   &:hover {
-    background-color: #ddd;
     text-shadow: 0px 0px 5px #ffffff;
+    background-color: $lightgray;
   }
 
   //icons _within_ nav
@@ -81,22 +87,22 @@
 }
 
 .vertical-menu-item.selected {
-  color:#018494;
+  color: $blue;
 }
 
 .heading {
   color: #444;
   cursor: pointer;
-  font-size: .85rem;
   position: relative;
   text-transform: uppercase;
   width: 100%;
 }
 
-.material-icons.expanded {
+.material-icons {
   display: inline-block;
   position: absolute;
   top: 6px;
+  right: 8px;
 }
 
 .heading-children.expanded {
@@ -120,17 +126,32 @@
 
 .heading.selected.level-1,
 .heading-children.selected.level-1 {
-  border-left: 3px #00bcd4 solid;
+  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 {
-  padding-left: 20px;
+  font-family: $support-font;
+  font-size: 14px;
+  color: $mediumgray;
+  text-transform: uppercase;
+  padding-left: 30px;
 }
 
 @mixin rotate($degrees) {

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.
+// import global mixins
-@include mat-core();
-@include docs-site-typography();
 
+// import directories
+@import './0-base/base-dir';
+@import './1-layouts/layouts-dir';
+@import'./2-modules/modules-dir';
 
-// Define the light theme.
+// import additional scss
-$primary: mat-palette($mat-cyan);
-$accent:  mat-palette($mat-amber, A200, A100, A400);
 
-$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-primary: mat-palette($mat-blue, 700, 600, 800);
-$ng-io-accent:  mat-palette($mat-pink, A200, A100, A400);
+$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);