design(style): Restyle changes from Alex

package.json

@@ -77,4 +77,4 @@
     "jstransformer-marked": "^1.0.1"
   },
   "homepage": "http://angular.io/"
-}
+}

public/_data.json

@@ -2,7 +2,7 @@
   "index": {
     "hero": "home",
     "title": "One framework.",
-    "subtitle": "Mobile and desktop."
+    "subtitle": "Mobile & desktop."
   },
 
   "features": {

public/_includes/_footer.jade

@@ -8,7 +8,7 @@ else
   - var styleguide = "/docs/ts/latest/styleguide.html"
 
 .main-footer
-  nav.background-blue-grey-900.grid-fluid
+  nav.background-midnight.grid-fluid
 
     .c3.main-footer-branding
       .logo-inverse-large
@@ -51,7 +51,7 @@ else
       ul.text-body
         li <a href="https://angular.cn/">中文版</a>
 
-  footer(class="background-steel")
+  footer(class="background-midnight")
     small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license" class="text-snow">MIT-style License</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
-    a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow" md-button)
+    a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow")
       span.icon-favorite

public/_includes/_hero-home.jade

@@ -1,13 +1,17 @@
-header(class="background-sky")
+header(class="background-sky l-relative")
-  .hero.background-superhero-paper.is-large
-    h1.text-headline.hero-logo #{title}<br>#{subtitle}
 
-    .hero-cta
+    .hero.background-superhero-paper.is-large
-      a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started
+        img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg')
+        h1.text-headline #{title}<br>#{subtitle}
+        a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started
 
-  .banner.banner-floaty
+    .announcement-bar.shadow-2.clearfix
-    .banner-ng-annoucement
+        img(src="/resources/images/logos/ng-europe/ng-europe-logo.png")
-      div(class="banner-text" align="center")
+        p Join us for <strong>ng-europe in Paris</strong>, France this October!
-        p Join us for ng-europe in Paris, France this October!
-      div(class="banner-button")
         a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now
+
+    //- ANGULAR FINAL RELEASE ANNOUCEMENT
+    //- .announcement-bar.shadow-2.clearfix
+    //-   img(src="/resources/images/logos/angular2/angular.svg")
+    //-   p Angular 2.0 Final Release Now Live!
+    //-   a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Learn More

public/_includes/_hero.jade

@@ -13,30 +13,27 @@
 if current.path[4] && current.path[3] == 'api'
   - var textFormat = 'is-standard-case'
 
-header(class="hero background-sky", style=fixHeroCss ? "height:auto" : "")
+header.hero.background-sky
-  div(class="inner-header")
+  h1(class="hero-title #{textFormat}") #{headerTitle}
-    h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
+
-    if useBadges
+  if useBadges
-    span(class="badges")
+    if stability
-      if docType
+      span(class="badge is-#{stability}").
-        span(class="status-badge").
+        #{capitalize(stability)}
-          #{renamer(capitalize(docType))}
+    if security
-      if stability
+      span(class="badge is-deprecated").
-        span(layout="row" class="status-badge")
+        Security Risk
-          // badge circle is filled based on stability by matching a css selector in _hero.scss
+
-          span(class="status-circle status-#{stability}")
+  //CLEAR FLOAT ELEMENTS
-          span Stability: #{capitalize(stability)}
+  .clear
-      if security
-        span(class="status-badge security-risk-badge").
-          Security Risk
 
   if subtitle
-    h2.hero-subtitle.text-subhead #{subtitle}
+    h2.hero-subtitle #{subtitle}
+
+  else if docType
+    h2.hero-subtitle #{renamer(capitalize(docType))}
+
+
+if current.path[3] == 'api' && current.path[1] == 'dart'
+  block breadcrumbs
 
-  else if current.path[3] == 'api' && current.path[1] == 'dart'
-    block breadcrumbs
-    //- Show cross-language menu for top-level API page (but not entry pages)
-    if ! public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]
-      != partial("_version-dropdown")
-  else if current.path[0] == "docs"
-    != partial("_version-dropdown")

public/_includes/_main-nav.jade

@@ -1,15 +1,14 @@
 - var language = current.path[1] || 'ts'
 - if (language !== 'ts' || language !== 'js' || language !== 'dart') { language = 'ts'; }
 
-md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-offset-element)
+nav.main-nav.l-pinned-top.l-layer-5
-  nav
+  h1 <a href="/" md-button>Angular <sup>by Google</sup></a>
-    h1 <a href="/" md-button>Angular <sup>by Google</sup></a>
 
-    button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu <span class="icon icon-arrow-drop-down"></span>
+  button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu <span class="icon icon-arrow-drop-down"></span>
 
-    ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''")
+  ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''")
-      li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
+    li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
-      li.l-left <a class="main-nav-button" href="/docs/#{language}/latest/" md-button>Docs</a>
+    li.l-left <a class="main-nav-button" href="/docs/#{language}/latest/" md-button>Docs</a>
-      li.l-left <a class="main-nav-button" href="/events.html" md-button>Events</a>
+    li.l-left <a class="main-nav-button" href="/events.html" md-button>Events</a>
-      li.l-left <a class="main-nav-button" href="/news.html" md-button>News</a>
+    li.l-left <a class="main-nav-button" href="/news.html" md-button>News</a>
-      li.l-right <a class="main-nav-button" href="/docs/ts/latest/quickstart.html" md-button>Get Started</a>
+    li.l-right <a class="main-nav-button" href="/docs/ts/latest/quickstart.html" md-button>Get Started</a>

public/_includes/_util-fns.jade

@@ -83,14 +83,14 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
   - var format = attributes.format || defaultFormat;
   - if (attributes.format === '.') format = '';
   - var avoid = !!attributes.avoid;
+  - var avoidClass = avoid ? 'is-anti-pattern' : '';
 
-  if (title)
+  div(class="code-example #{avoidClass}")
-    if (avoid)
+    if (title)
-      .example-title.avoid AVOID: #{title}
+      header
-    else
+        h4 #{title}
-      .example-title #{title}
+    code-example(language="#{language}" format="#{format}")
-  code-example(language="#{language}" format="#{format}")
+      != styleString(frag, stylePatterns)
-    != styleString(frag, stylePatterns)
 
 //- Like makeExample, but: (1) doesn't show line numbers. (2) If region
 //- is omitted and title is 'foo (r)' then region is taken as 'r'.
@@ -142,17 +142,17 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns)
   - var json = unescapeHtml(frag);
   - var jsonExtract = extractJson(json, jsonConfig);
   - var avoid = !!attributes.avoid;
+  - var avoidClass = avoid ? 'is-anti-pattern' : '';
 
-  if (title)
+  div(class="code-example #{avoidClass}")
-    if (avoid)
+    if (title)
-      .example-title.avoid #{title}
+      header
-    else
+        h4 #{title}
-      .example-title #{title}
+    code-example(language="#{language}" format="#{format}")
-  code-example(language="#{language}" format="#{format}")
+      if (jsonExtract == 'ERROR')
-    if (jsonExtract == 'ERROR')
+        err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}"
-      err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}"
+      else
-    else
+        != styleString(jsonExtract, stylePatterns)
-      != styleString(jsonExtract, stylePatterns)
 
 if !jade2ng
   //- Open (and close) an explanation <div>. See QuickStart

public/_includes/_version-dropdown.jade

@@ -35,11 +35,10 @@ else if current.path[3]
 
 //- VERSION TREE CREATOR MIXIN
 mixin tree(directory, urlPrefix, name, latest)
-  ul
+  for val, semvar in directory
-    for val, semvar in directory
+    if semvar !== '.git' && semvar !== '_data'
-      if semvar !== '.git' && semvar !== '_data'
+      - var libVersion = (semvar == "latest") ?  latest : semvar.replace(/\_+/gm, ".")
-        - var libVersion = (semvar == "latest") ?  latest : semvar.replace(/\_+/gm, ".")
+      li <a href="#{urlPrefix}/#{semvar}/#{page}" md-button>#{name} #{libVersion}</a>
-        li <a href="#{urlPrefix}/#{semvar}/#{page}" md-button>#{name} #{libVersion}</a>
 
 
 //- BUTTON TITLE GENERATION
@@ -69,7 +68,7 @@ nav.dropdown
   div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu")
 
   <!-- DROPDOWN MENU -->
-  div(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''")
+  ul(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''")
     mixin tree(public.docs.ts, "/docs/ts", "Angular 2 for TypeScript")
     mixin tree(public.docs.js, "/docs/js", "Angular 2 for JavaScript")
     //- Disable cross-language link for API entry pages (but keep for top API search page):

public/docs/_includes/_side-nav.jade

@@ -40,53 +40,71 @@
 - var reference  = sections('', function(item) { return item.reference; });
 - var anyItemSelected = function(items) {
 -   var selectedCount = items.filter(function(item) { return !!item.class; }).length;
--   return selectedCount > 0 ? 'is-nav-title-selected' : '';
+-   return selectedCount > 0 ? 'is-selected' : '';
 - }
 - var isQuickstartSelected = function() {
 -   var splitted = cur.split('/');
 -   var bit = splitted[splitted.length - 1].replace('.html', '');
--   return bit === 'quickstart' ? 'is-nav-title-selected' : '';
+-   return bit === 'quickstart' ? 'is-selected' : '';
 -}
 - var isApiReferenceSelected = function() {
 -   var splitted = cur.split('/');
 -   var bit = splitted[splitted.length - 2];
--   return bit === 'api' ? 'is-nav-title-selected' : '';
+-   return bit === 'api' ? 'is-selected' : '';
 -}
 - var isCollapsed = function(titleStyle) {
--   return titleStyle === 'is-nav-title-selected' ? '' : 'is-hidden';
+-   return titleStyle === 'is-selected' ? '' : 'is-hidden';
 - }
 
-nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
+- var language = current.path[1] || 'ts'
+- if (language !== 'ts' || language !== 'js' || language !== 'dart') { language = 'ts'; }
+
+
+nav(class="sidenav l-pinned-left l-layer-4 l-offset-nav"  ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
   // SEARCH BAR
-  header.side-nav-search.st-input-wrapper
+  header.sidenav-search.st-input-wrapper
     form.st-input-inner
       label(for="search-io" class="is-hidden") Search Docs
       input(type="search" id="search-io" placeholder="SEARCH DOCS...")
     button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>
 
-  div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
+  ul(class="sidenav-links")
-    .nav-blocks
+    li.sidenav-section.no-border
+      a(class="nav-title" href="/docs/#{current.path[1]}/latest/") Docs Home
+
+    // CORE DOCUMENTATION
+    li.sidenav-section-divider
+      h3 Core Documentation
+
+    li.sidenav-section
       a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") Quickstart
 
-    .nav-blocks
-      a(class="nav-title #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial
-        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
-      .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}")
-        ul
-          each item, index in tutorial
-            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
 
-    .nav-blocks
+    li.sidenav-section
-      a(class="nav-title #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Basics
+      a(class="nav-title is-parent #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Guide
         img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
 
       .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(basics))}")
         ul
           each item, index in basics
             li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
+    li.sidenav-section.no-border
+      a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API Reference
 
-    .nav-blocks
+    // ADVANCED DOCUMENATION
-      a(class="nav-title #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Developer Guide
+    li.sidenav-section-divider
+      h3 Additional Documentation
+
+    li.sidenav-section
+      a(class="nav-title is-parent #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial
+        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
+      .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}")
+        ul
+          each item, index in tutorial
+            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
+
+    li.sidenav-section
+      a(class="nav-title is-parent #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Advanced Documentation
         img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
 
       .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(guide))}")
@@ -94,8 +112,8 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
           each item in guide
             li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
 
-    .nav-blocks
+    li.sidenav-section
-      a(class="nav-title #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook
+      a(class="nav-title is-parent #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook
         img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
 
       .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(cookbook))}")
@@ -103,13 +121,17 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
           each item in cookbook
             li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
 
-    .nav-blocks
+
-      a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API Reference
+
+
+  if current.path[0] == "docs"
+    != partial("../../_includes/_version-dropdown")
+
 
 script.
   // Could put in appCtrl but only needed here and clear here
   (function scrollToSelectedLink() {
-    var sideNav = document.getElementsByClassName('side-nav')[0];
+    var sideNav = document.getElementsByClassName('sidenav')[0];
     var link = sideNav.getElementsByClassName('is-selected')[0];
     if(link && link.offsetTop > window.innerHeight){
       sideNav.scrollTop = link.offsetTop - (window.innerHeight/2);

public/docs/_layout.jade

@@ -29,12 +29,9 @@ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Frame
           != yield
       else
         article(class="l-content-small grid-fluid docs-content")
-          div(class="c10")
+          != yield
-            .showcase
+            if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-              .showcase-content
+              != partial("../_includes/_next-item")
-                != yield
-                  if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-                    != partial("../_includes/_next-item")
 
     != partial("../_includes/_footer")
     != partial("../_includes/_scripts-include")

public/docs/dart/latest/_data.json

@@ -2,8 +2,9 @@
   "index": {
     "icon": "home",
     "title": "Angular Docs",
+    "subtitle": "Dart",
     "menuTitle": "Docs Home",
-    "banner": "Welcome to <b>angular.io/dart</b>! The current Angular 2 Dart release is <b>beta.21</b>. Consult the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
+    "banner": "Current release is <strong>beta.21</strong>. Consult the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {

public/docs/dart/latest/index.jade

@@ -1,38 +1,25 @@
-div.card-row(layout='row' layout-align="space-around center"
+.clearfix
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html")
+    h2.text-headline.text-uppercase Quickstart
+    p A short beginner guide explaining the basic concepts of Angular
 
-class="docs-landing")
+    footer View Quickstart
-  div(class="card-row-container")
-    md-card(class="card")
-      md-card-content(flex layout="column" layout-align="space-between center")
-        div
-          h2(class="text-headline text-uppercase") 5 Minute Quickstart
-          p A short beginner guide explaining the basic concepts of Angular
 
-        footer
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/")
-          a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button md-button") View Quickstart
+    h2.text-headline.text-uppercase Developer Guide
+    p An intermediate development guide covering all major features of Angular
+
+    footer View Guide
+
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/api/")
+    h2.text-headline.text-uppercase API Reference
+    p An advanced reference of all Angular Classes, Methods, etc.
+
+    footer View API
 
 
-  div(class="card-row-container")
+div.c12.l-space-top-3
-    md-card(class="card")
+  .alert.is-helpful.
-      md-card-content(flex layout="column" layout-align="space-between center")
+    Not using Angular 2 yet? Perhaps you need the
-        div
+    <a href="https://www.dartdocs.org/documentation/angular/latest" target="_blank">API docs for the original AngularDart</a>.
-          h2(class="text-headline text-uppercase") Developer Guide
-          p An intermediate development guide covering all major features of Angular
 
-        footer
-          a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary md-button") View Guide
-
-
-  div(class="card-row-container")
-    md-card(class="card")
-      md-card-content(flex layout="column" layout-align="space-between center")
-        div
-          h2(class="text-headline text-uppercase") API Reference
-          p An advanced reference of all Angular Classes, Methods, etc.
-
-        footer
-          a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button md-button") View API
-
-.alert.is-helpful.
-  Not using Angular 2 yet? Perhaps you need the
-  <a href="https://www.dartdocs.org/documentation/angular/latest" target="_blank">API docs for the original AngularDart</a>.

public/docs/dart/latest/quickstart.jade

@@ -41,7 +41,7 @@ block install-packages
     From the project folder, run `pub get` to install the angular2 and browser
     packages (along with the packages they depend on).
 
-  code-example(language="sh").
+  code-example(language="sh" class="code-shell").
     &gt; <span class="blk">pub get</span>
     Resolving dependencies...
 
@@ -90,7 +90,7 @@ block build-app
       Before deploying the app, we need to generate JavaScript files.
       The `pub build` command makes that easy.
 
-    code-example(language="sh").
+    code-example(language="sh" class="code-shell").
       &gt; <span class="blk">pub build</span>
       Loading source assets...
 

public/docs/js/latest/_data.json

@@ -2,8 +2,9 @@
   "index": {
     "icon": "home",
     "title": "Angular Docs",
+    "subtitle": "JavaScript",
     "menuTitle": "Docs Home",
-    "banner": "Welcome to <b>Angular in JavaScript</b>! The current Angular 2 release is <b>rc.7</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
+    "banner": "The current release is <b>rc.7</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> for enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {

public/docs/js/latest/index.jade

@@ -1,33 +1,67 @@
-div.card-row.docs-landing.layout-align-space-around-center.layout-row.flex
+.clearfix
-  div.card-row-container
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html")
-    md-card.card
+    h2.text-headline.text-uppercase Quickstart
-      md-card-content.layout-align-space-between-center.layout-column.flex
+    p A short beginner guide explaining the basic concepts of Angular
-        div
-          h2.text-headline.text-uppercase 5 Minute Quickstart
-          p A short beginner guide explaining the basic concepts of Angular
 
-        footer
+    footer View Quickstart
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html") View Quickstart
+
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/")
+    h2.text-headline.text-uppercase Developer Guide
+    p An intermediate development guide covering all major features of Angular
+
+    footer View Guide
+
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/api/")
+    h2.text-headline.text-uppercase API Reference
+    p An advanced reference of all Angular Classes, Methods, etc.
+
+    footer View API
 
 
-  div.card-row-container
+.c4.secondary-content-list
-    md-card.card
+  h4 Advanced Documentation
-      md-card-content.layout-align-space-between-center.layout-column.flex
+  ul
-        div
+    li
-          h2.text-headline.text-uppercase Developer Guide
+      a(href="/docs/js/latest/guide/ngmodule.html") Angular Modules
-          p An intermediate development guide covering all major features of Angular
+    li
+      a(href="/docs/js/latest/guide/animations.html") Animations
+    li
+      a(href="/docs/js/latest/guide/attribute-directives.html") Attribute Directives
+    li
+      a(href="/docs/js/latest/guide/browser-support.html") Browser Support
+    li
+      a(href="/docs/js/latest/guide/component-styles.html") Component Styles
+    li
+      a(href="/docs/js/latest/guide/ngmodule.html") View All...
 
-        footer
+.c4.secondary-content-list
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/") View Guide
+  h4 Cookbook
-
+  ul
-
+    li
-  div.card-row-container
+      a(href="/docs/js/latest/cookbook/a1-a2-quick-reference.html") Angular 1 to Angular 2
-    md-card.card
+    li
-      md-card-content.layout-align-space-between-center.layout-column.flex
+      a(href="/docs/js/latest/cookbook/ngmodule-faq.html") Angular Module FAQ
-        div
+    li
-          h2.text-headline.text-uppercase API Reference
+      a(href="/docs/js/latest/cookbook/component-communication.html") Component Interaction
-          p An advanced reference of all Angular Classes, Methods, etc.
+    li
-
+      a(href="/docs/js/latest/cookbook/component-relative-paths.html") Component-Relative Paths
-        footer
+    li
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/api/") View API
+      a(href="/docs/js/latest/cookbook/dependency-injection.html") Dependency Injection
+    li
+      a(href="/docs/js/latest/cookbook/") View All...
 
+.c4.secondary-content-list
+  h4 Tools & Libraries
+  ul
+    li
+      a(target="_blank" href="https://github.com/angular/universal") Angular Universal
+    li
+      a(target="_blank" href="https://augury.angular.io/") Augury
+    li
+      a(target="_blank" href="https://github.com/jaxio/celerio-angular-quickstart") Celerio Angular Quickstart
+    li
+      a(target="_blank" href="https://github.com/mgechev/codelyzer") Codelyzer
+    li
+      a(target="_blank" href="https://github.com/johnpapa/lite-server") Lite-server
+    li
+      a(target="_blank" href="/resources/") View All...

public/docs/ts/_cache/quickstart.jade

@@ -104,7 +104,7 @@ button(class="verbose on md-primary md-button md-ink-ripple", type="button", onc
   ### (a) Create the project folder
 
 - var _ = _docsFor == 'dart' ? '_' : '-';
-code-example(language="sh").
+code-example(language="sh" class="code-shell").
   mkdir angular2!{_}quickstart
   cd    angular2!{_}quickstart
 
@@ -148,14 +148,14 @@ block install-packages
     We install the packages listed in `package.json` using `npm`. Enter the
     following command in a terminal window (command window in Windows):
 
-  code-example(language="sh").
+  code-example(language="sh" class="code-shell").
     npm install
 
   .l-sub-section
     :marked
       The `typings` folder could not show up after `npm install`. If so, please install them manually.
 
-    code-example(language="sh").
+    code-example(language="sh" class="code-shell").
       npm run typings install
 
   .alert.is-important
@@ -365,7 +365,7 @@ block create-main
 
     ### Bootstrapping is platform-specific
 
-    Notice that we import the `!{_platformBrowserDynamicVsBootStrap}` function 
+    Notice that we import the `!{_platformBrowserDynamicVsBootStrap}` function
     from `#{_angular_browser_uri}`, not `#{_angular_core_uri}`.
     Bootstrapping isn't core because there isn't a single way to bootstrap the app.
     True, most applications that run in a browser call the bootstrap function from
@@ -509,7 +509,7 @@ h2#index Step !{step++}: Add #[code index.html]
   a#my-app
   :marked
     When Angular calls the `!{_bootstrapModule}` function in <span ngio-ex>main.ts</span>,
-    it reads the `!{_AppModuleVsAppComp}` metadata<span if-docs="ts">, sees that 
+    it reads the `!{_AppModuleVsAppComp}` metadata<span if-docs="ts">, sees that
     `AppComponent` is the bootstrap component</span>,
     finds the `my-app` selector, locates an element tag named `my-app`,
     and renders our application's view between those tags.

public/docs/ts/latest/_data.json

@@ -2,6 +2,7 @@
   "index": {
     "icon": "home",
     "title": "Angular Docs",
+    "subtitle": "TypeScript",
     "menuTitle": "Docs Home",
     "banner": "Welcome to <b>Angular in TypeScript</b>! The current Angular 2 release is <b>rc.7</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
   },
@@ -9,48 +10,56 @@
   "cli-quickstart": {
     "icon": "query-builder",
     "title": "CLI Quickstart",
+    "subtitle": "TypeScript",
     "description": "Use the CLI tool to build apps quickly in Angular 2",
     "hide": true
   },
 
   "quickstart": {
     "icon": "query-builder",
-    "title": "Quickstart",
+    "subtitle": "TypeScript",
-    "description": "Get up and running with Angular 2"
+    "description": "Get up and running with Angular 2",
+    "banner": "This QuickStart guide demonstrates how to build and run a simple Angular 2 application in TypeScript."
   },
 
   "tutorial": {
     "icon": "list",
     "title": "Tutorial",
+    "subtitle": "TypeScript",
     "banner": "Angular 2 is currently in Release Candidate."
   },
 
   "guide": {
     "icon": "list",
     "title": "Developer Guides",
+    "subtitle": "TypeScript",
     "banner": "Angular 2 is currently in Release Candidate."
   },
 
   "cookbook": {
     "icon": "list",
     "title": "Cookbook",
+    "subtitle": "TypeScript",
     "banner": "How to solve common implementation challenges."
   },
 
   "api/": {
     "icon": "book",
     "title": "API Preview",
+    "subtitle": "TypeScript",
     "reference": true
   },
 
   "cheatsheet": {
     "title": "Angular Cheat Sheet",
+    "subtitle": "TypeScript",
     "intro": "A quick guide to Angular syntax. (Content is provisional and may change.)",
     "reference": false
   },
 
   "glossary": {
     "title": "Glossary",
+    "subtitle": "TypeScript",
     "intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
     "reference": false
   },
@@ -58,6 +67,7 @@
   "resources": {
     "icon": "play-circle-fill",
     "title": "Angular Resources",
+    "subtitle": "TypeScript",
     "banner": "Angular 2 is currently in Release Candidate.",
     "resources": true
   },
@@ -65,11 +75,13 @@
   "help": {
     "icon": "chat",
     "title": "Help & Support",
+    "subtitle": "From our team & community",
     "resources": true
   },
 
   "styleguide": {
     "title": "Docs Style Guide",
+    "subtitle": "TypeScript",
     "intro": "Design & Layout Patterns For Documentation"
   }
 }

public/docs/ts/latest/index.jade

@@ -1,33 +1,66 @@
-div.card-row.docs-landing.layout-align-space-around-center.layout-row.flex
+.clearfix
-  div.card-row-container
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html")
-    md-card.card
+    h2.text-headline.text-uppercase Quickstart
-      md-card-content.layout-align-space-between-center.layout-column.flex
+    p A short beginner guide explaining the basic concepts of Angular
-        div
-          h2.text-headline.text-uppercase Quickstart
-          p A short beginner guide explaining the basic concepts of Angular
 
-        footer
+    footer View Quickstart
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html") View Quickstart
 
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/")
+    h2.text-headline.text-uppercase Developer Guide
+    p An intermediate development guide covering all major features of Angular
 
-  div.card-row-container
+    footer View Guide
-    md-card.card
-      md-card-content.layout-align-space-between-center.layout-column.flex
-        div
-          h2.text-headline.text-uppercase Developer Guide
-          p An intermediate development guide covering all major features of Angular
 
-        footer
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/api/")
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/") View Guide
+    h2.text-headline.text-uppercase API Reference
+    p An advanced reference of all Angular Classes, Methods, etc.
 
+    footer View API
 
-  div.card-row-container
+.c4.secondary-content-list
-    md-card.card
+  h4 Advanced Documentation
-      md-card-content.layout-align-space-between-center.layout-column.flex
+  ul
-        div
+    li
-          h2.text-headline.text-uppercase API Reference
+      a(href="/docs/ts/latest/guide/ngmodule.html") Angular Modules
-          p An advanced reference of all Angular Classes, Methods, etc.
+    li
+      a(href="/docs/ts/latest/guide/animations.html") Animations
+    li
+      a(href="/docs/ts/latest/guide/attribute-directives.html") Attribute Directives
+    li
+      a(href="/docs/ts/latest/guide/browser-support.html") Browser Support
+    li
+      a(href="/docs/ts/latest/guide/component-styles.html") Component Styles
+    li
+      a(href="/docs/ts/latest/guide/ngmodule.html") View All...
 
-        footer
+.c4.secondary-content-list
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/api/") View API
+  h4 Cookbook
+  ul
+    li
+      a(href="/docs/ts/latest/cookbook/a1-a2-quick-reference.html") Angular 1 to Angular 2
+    li
+      a(href="/docs/ts/latest/cookbook/ngmodule-faq.html") Angular Module FAQ
+    li
+      a(href="/docs/ts/latest/cookbook/component-communication.html") Component Interaction
+    li
+      a(href="/docs/ts/latest/cookbook/component-relative-paths.html") Component-Relative Paths
+    li
+      a(href="/docs/ts/latest/cookbook/dependency-injection.html") Dependency Injection
+    li
+      a(href="/docs/ts/latest/cookbook/") View All...
 
+.c4.secondary-content-list
+  h4 Tools & Libraries
+  ul
+    li
+      a(target="_blank" href="https://github.com/angular/universal") Angular Universal
+    li
+      a(target="_blank" href="https://augury.angular.io/") Augury
+    li
+      a(target="_blank" href="https://github.com/jaxio/celerio-angular-quickstart") Celerio Angular Quickstart
+    li
+      a(target="_blank" href="https://github.com/mgechev/codelyzer") Codelyzer
+    li
+      a(target="_blank" href="https://github.com/johnpapa/lite-server") Lite-server
+    li
+      a(target="_blank" href="/resources/") View All...

public/docs/ts/latest/quickstart.jade

@@ -10,17 +10,12 @@ block includes
 //- TS/Dart shared step counter
 - var step = _stepInit
 
-:marked
-  This QuickStart guide demonstrates how to build and run a simple Angular 2 application in #{_Lang}.
-  It also establishes a common development environment used throughout the code examples in these
-  guides.
-
 .callout.is-helpful
   header Don't want #{_Lang}?
   p.
     Although you're getting started in #{_Lang}, you can also write Angular 2 applications
     in JavaScript and #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'}. Use the language selector in the
-    banner to switch development languages for this guide.
+    left nav to switch development languages for this guide.
 .l-main-section
 h1 Overview
 
@@ -68,12 +63,6 @@ block setup-tooling
     npm **3.x.x** or higher. To check which version you are using, run `node -v` and `npm -v`
     in a terminal window.
 
-aside.is-right
-  :marked
-    To easily copy text from a code example, click the *Copy to Clipboard* icon (<i
-    class="material-icons" style="font-size: 100%">content_copy </i>) in the upper right corner of
-    the example box.
-
 .l-main-section
 h1#create-and-configure Step 1: Create and configure the project
 
@@ -91,7 +80,7 @@ h2 Create the project folder
   directory.
 
 - var _ = _docsFor == 'dart' ? '_' : '-';
-code-example(language="sh").
+code-example(language="sh" class="code-shell").
   mkdir angular2!{_}quickstart
   cd    angular2!{_}quickstart
 
@@ -151,7 +140,7 @@ block install-packages
   :marked
     Using npm from the command line, install the packages listed in `package.json` with the command:
 
-  code-example(language="sh").
+  code-example(language="sh" class="code-shell").
     npm install
 
   :marked
@@ -174,7 +163,7 @@ block install-packages
   :marked
     If the `typings` folder doesn't show up after running `npm install`, you'll need to install it manually with the command:
 
-  code-example(language="sh").
+  code-example(language="sh"  class="code-shell").
       npm run typings install
 
 :marked
@@ -192,7 +181,7 @@ block install-packages
 
     **Create #{_an} #{_appDir} subfolder** off the project root directory:
 
-  code-example.
+  code-example.code-shell.
     mkdir #{_appDir}
 
   :marked
@@ -334,7 +323,7 @@ h1 Step !{step++}: Build and run the application
 block run-app
   :marked
     Open a terminal window and enter this command:
-  code-example.
+  code-example.code-shell.
     npm start
 aside.is-right
   :marked

public/index.jade

@@ -19,7 +19,6 @@ div(class="home-rows")
         h3(class="text-headline") Speed & Performance
         p(class="text-body").
           Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.
-        br
         p(class="text-body").
           Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.
     div(class="promo-img-container promo-2")
@@ -47,7 +46,7 @@ div(class="home-rows")
     div(class="promo-img-container promo-4")
       div
         img(src="resources/images/home/loved-by-millions.png")
-        
+
   .cta-bar
     a(href="/docs/ts/latest/quickstart.html" class="button button-large button-shield md-raised " + "md-primary" md-button) Get Started
 

public/resources/css/_options.scss

@@ -34,61 +34,4 @@ $layer-6: 6;
 $layer-7: 7;
 $layer-8: 8;
 $layer-9: 9;
-$layer-10: 10;
+$layer-10: 10;
-
-
-/*
-* Colors
-*
-* Colors are ordered from light to dark (top to bottom).
-* Do not use hex codes directly in other Sass files. The
-* following colors are the only approved colors for this site.
-*/
-
-// GREEN COLORS
-$cactus: #8BC34A;
-
-// YELLOW
-$sunshine: #FFF59D;
-$olive: #647f11;
-
-// ORANGE
-$sand: #FFF8E1;
-$citrus: #FF8F00;
-
-// RED COLORS
-$peach: #ffebee;
-$squid: #EF3872;
-$cardinal: #E23237;
-$ruby: #B52E31;
-$pink: #D43669;
-
-// BLUE COLORS
-$light: #E3F2FD;
-$sky: #0085D3;
-$regal: #0273D4;
-$blueberry: #0262C2;
-$ocean: #0143A3;
-
-//PURPLE
-$grape: #9575CD;
-
-// DARK GRAY COLORS
-$coal: #000000;
-$steel: #253238;
-$silver: #36474F;
-$platinum: #445A64;
-$metal: #536E7A;
-$tin: #8FA4AE;
-$darkgrey: #5C707A;
-$bismark: #7a8b94;
-$grey: #B0BEC5;
-
-// LIGHT GRAY COLORS
-$cloud: #AFBEC5;
-$fog: #CFD8DC;
-$mist: #ECEFF1;
-$snow: #FFFFFF;
-$heather: #546E7A;
-$lightgrey: #F5F6F7;
-$storm: #E0E0E0;

public/resources/css/_theme.scss

@@ -5,64 +5,24 @@
 */
 
 .background-sky {
-  background-color: $ocean;
+  background-color: $blue-700;
-  background: linear-gradient($ocean, $regal);
+  background: linear-gradient(145deg, $blue-900, $blue-400);
   color: $snow;
 }
 
-.background-regal {
+.background-midnight {
-  background: $regal;
+  background: $blue-grey-900;
   color: $snow;
 }
 
-.background-coal {
-  background: $coal;
-  color: $snow;
-}
-
-.background-steel {
-  background: $steel;
-  color: $snow;
-}
-
-.background-silver {
-  background: $silver;
-  color: $snow;
-}
-
-.background-blue-grey-900 {
-  background: #263238;
-  color: $snow;
-}
 
 /*
 * Background Images
 *
 */
 
-.background-lon-paper {
-  background: url('/resources/images/backgrounds/lon-paper.png') bottom center no-repeat;
-  background-size: 100%;
-  background-position: fixed;
-}
 .background-superhero-paper {
-  background: url('/resources/images/backgrounds/superhero-paper.png') bottom center no-repeat;
+  background: url('/resources/images/backgrounds/super-hero-large.png') no-repeat bottom center , linear-gradient(145deg, $blue-900, $blue-400);
+  background-blend-mode: multiply;
   background-size: 100%;
-  background-position: fixed;
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-    background-image: url('/resources/images/backgrounds/superhero-paper-large.png');
-  }
-}
-
-
-
-
-/*
-* Text Colors
-*
-* Text color utility color classes
-*/
-
-.text-snow {
-  color: $snow;
 }

public/resources/css/base/_colors.scss

@@ -0,0 +1,279 @@
+/*
+* Material Design Colors
+*
+* Colors based off the material design palette
+* https://material.google.com/style/color.html#color-color-palette
+*
+*/
+
+
+/*
+* Black & White
+*
+*/
+
+$white: #FFFFFF;
+$black: #000000;
+
+
+/*
+* Amber
+*
+*/
+
+$amber-50: #FFF8E1;
+$amber-100: #FFECB3;
+$amber-200: #FFE082;
+$amber-300: #FFD54F;
+$amber-400: #FFCA28;
+$amber-500: #FFC107;
+$amber-600: #FFB300;
+$amber-700: #FFA000;
+$amber-800: #FF8F00;
+$amber-900: #FF6F00;
+$amber-A100: #FFE57F;
+$amber-A200: #FFD740;
+$amber-A400: #FFC400;
+$amber-A700: #FFAB00;
+
+
+/*
+* Blue Grey
+*
+*/
+
+$blue-grey-50: #ECEFF1;
+$blue-grey-100: #CFD8DC;
+$blue-grey-200: #B0BEC5;
+$blue-grey-300: #90A4AE;
+$blue-grey-400: #78909C;
+$blue-grey-500: #607D8B;
+$blue-grey-600: #546E7A;
+$blue-grey-700: #455A64;
+$blue-grey-800: #37474F;
+$blue-grey-900: #263238;
+
+
+/*
+* Blue
+*
+*/
+
+$blue-50: #E3F2FD;
+$blue-100: #BBDEFB;
+$blue-200: #90CAF9;
+$blue-300: #64B5F6;
+$blue-400: #42A5F5;
+$blue-500: #2196F3;
+$blue-600: #1E88E5;
+$blue-700: #1976D2;
+$blue-800: #1565C0;
+$blue-900: #0D47A1;
+$blue-A100: #82B1FF;
+$blue-A200: #448AFF;
+$blue-A400: #2979FF;
+$blue-A700: #2962FF;
+
+
+/*
+* Cyan
+*
+*/
+
+$cyan-50: #E0F7FA;
+$cyan-100: #B2EBF2;
+$cyan-200: #80DEEA;
+$cyan-300: #4DD0E1;
+$cyan-400: #26C6DA;
+$cyan-500: #00BCD4;
+$cyan-600: #00ACC1;
+$cyan-700: #0097A7;
+$cyan-800: #00838F;
+$cyan-900: #006064;
+$cyan-A100: #84FFFF;
+$cyan-A200: #18FFFF;
+$cyan-A400: #00E5FF;
+$cyan-A700: #00B8D4;
+
+
+/*
+* Green
+*
+*/
+
+$green-50: #E8F5E9;
+$green-100: #C8E6C9;
+$green-200: #A5D6A7;
+$green-300: #81C784;
+$green-400: #66BB6A;
+$green-500: #4CAF50;
+$green-600: #43A047;
+$green-700: #388E3C;
+$green-800: #2E7D32;
+$green-900: #1B5E20;
+$green-A100: #B9F6CA;
+$green-A200: #69F0AE;
+$green-A400: #00E676;
+$green-A700: #00C853;
+
+
+/*
+* Light Green
+*
+*/
+
+$light-green-50: #F1F8E9;
+$light-green-100: #DCEDC8;
+$light-green-200: #C5E1A5;
+$light-green-300: #AED581;
+$light-green-400: #9CCC65;
+$light-green-500: #8BC34A;
+$light-green-600: #7CB342;
+$light-green-700: #689F38;
+$light-green-800: #558B2F;
+$light-green-900: #33691E;
+$light-green-A100: #CCFF90;
+$light-green-A200: #B2FF59;
+$light-green-A400: #76FF03;
+$light-green-A700: #64DD17;
+
+
+/*
+* Red
+*
+*/
+
+$red-50: #FFEBEE;
+$red-100: #FFCDD2;
+$red-200: #EF9A9A;
+$red-300: #E57373;
+$red-400: #EF5350;
+$red-500: #F44336;
+$red-600: #E53935;
+$red-700: #D32F2F;
+$red-800: #C62828;
+$red-900: #B71C1C;
+$red-A100: #FF8A80;
+$red-A200: #FF5252;
+$red-A400: #FF1744;
+$red-A700: #D50000;
+
+
+/*
+* Pink
+*
+*/
+
+$pink-50: #FCE4EC;
+$pink-100: #F8BBD0;
+$pink-200: #F48FB1;
+$pink-300: #F06292;
+$pink-400: #EC407A;
+$pink-500: #E91E63;
+$pink-600: #D81B60;
+$pink-700: #C2185B;
+$pink-800: #AD1457;
+$pink-900: #880E4F;
+$pink-A100: #FF80AB;
+$pink-A200: #FF4081;
+$pink-A400: #F50057;
+$pink-A700: #C51162;
+
+
+/*
+* Purple
+*
+*/
+
+$purple-50: #F3E5F5;
+$purple-100: #E1BEE7;
+$purple-200: #CE93D8;
+$purple-300: #BA68C8;
+$purple-400: #AB47BC;
+$purple-500: #9C27B0;
+$purple-600: #8E24AA;
+$purple-700: #7B1FA2;
+$purple-800: #6A1B9A;
+$purple-900: #4A148C;
+$purple-A100: #EA80FC;
+$purple-A200: #E040FB;
+$purple-A400: #D500F9;
+$purple-A700: #AA00FF;
+
+
+/*
+* Teal
+*
+*/
+
+$teal-50: #E0F2F1;
+$teal-100: #B2DFDB;
+$teal-200: #80CBC4;
+$teal-300: #4DB6AC;
+$teal-400: #26A69A;
+$teal-500: #009688;
+$teal-600: #00897B;
+$teal-700: #00796B;
+$teal-800: #00695C;
+$teal-900: #004D40;
+$teal-A100: #A7FFEB;
+$teal-A200: #64FFDA;
+$teal-A400: #1DE9B6;
+$teal-A700: #00BFA5;
+
+
+/*
+* Orginial Colors
+*
+* Colors are ordered from light to dark (top to bottom).
+* Do not use hex codes directly in other Sass files. The
+* following colors are the only approved colors for this site.
+*/
+
+// GREEN COLORS
+$cactus: #8BC34A;
+
+// YELLOW
+$sunshine: #FFF59D;
+$olive: #647f11;
+
+// ORANGE
+$sand: #FFF8E1;
+$citrus: #FF8F00;
+
+// RED COLORS
+$peach: #ffebee;
+$squid: #EF3872;
+$cardinal: #E23237;
+$ruby: #B52E31;
+$pink: #D43669;
+
+// BLUE COLORS
+$light: #E3F2FD;
+$sky: #0085D3;
+$regal: #0273D4;
+$blueberry: #0262C2;
+$ocean: #0143A3;
+
+//PURPLE
+$grape: #9575CD;
+
+// DARK GRAY COLORS
+$coal: #000000;
+$steel: #253238;
+$silver: #36474F;
+$platinum: #445A64;
+$metal: #536E7A;
+$tin: #8FA4AE;
+$darkgrey: #5C707A;
+$bismark: #7a8b94;
+$grey: #B0BEC5;
+
+// LIGHT GRAY COLORS
+$cloud: #AFBEC5;
+$fog: #CFD8DC;
+$mist: #ECEFF1;
+$snow: #FFFFFF;
+$heather: #546E7A;
+$lightgrey: #F5F6F7;
+$storm: #E0E0E0;

public/resources/css/base/_mixins.scss

@@ -0,0 +1,24 @@
+$phone-breakpoint: 480px !default;
+$tablet-breakpoint: 800px !default;
+
+
+@mixin respond-to($media) {
+  @if $media == mobile {
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      @content;
+    }
+  }
+  @else if $media == phones {
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint) {
+      @content;
+    }
+  }
+  @else if $media == tablets {
+    @media screen and (max-width: $tablet-breakpoint) {
+      @content;
+    }
+  }
+}

public/resources/css/base/_type.scss

@@ -1,34 +1,44 @@
 /*
 * Typographic Styles
 *
-* Material Design Typographic Styles
+* General Typographic Styles for content displayed in the body of a page
 */
 
 body {
   font-family: $brand-font;
   font-size: 14px;
-  color: #1a2326;
+  color: $blue-grey-600;
   &.ng-cloak {
     display: none;
   }
 }
 
-// NOTE: (ericjim) the new api docs use material design blue 600 links in this fashion.
+
+/*
+* Text Colors
+*
+* Text color utility color classes
+*/
+
+.text-snow {
+  color: $white;
+}
+
 a {
-  color: #1E88E5;
+  color: $blue-600;
   text-decoration: none;
 
   &:hover {
-    text-decoration-color: #1E88E5;
+    color: $blue-600;
     text-decoration: underline;
   }
 }
 
 code {
-  background: $lightgrey;
+  background: $blue-grey-50;
   border-radius: 2px;
   font-family: $mono-font;
-  color: $darkgrey;
+  color: $teal-500;
   padding: 0px 4px;
   font-size: 90%;
 }
@@ -43,6 +53,11 @@ code {
 }
 
 
+/*
+* Utility Classes
+*
+*/
+
 .text-center {
   text-align: center;
 }
@@ -52,6 +67,11 @@ code {
 }
 
 
+/*
+* Text Styles
+*
+*/
+
 .text-display-4 {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 112px;
@@ -90,7 +110,7 @@ code {
 .docs-content h3 {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 24px;
-  font-weight: 450;
+  font-weight: 400;
   opacity: .87;
   line-height: 32px;
 }
@@ -106,17 +126,33 @@ code {
 
 .docs-content {
   h1 {
-    font-size: 24px;
+    font-size: 34px;
+    line-height: 40px;
+    margin: ($unit * 6) 0 ($unit * 3) 0;
     opacity: 0.87;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
   }
   h2 {
-    font-size: 20px;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 32px;
+    margin: ($unit * 6) 0 ($unit * 2) 0;
   }
   h3 {
-    font-size: 16px;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px;
+    margin: ($unit * 6) 0 ($unit * 1) 0;
   }
   h4 {
     font-size: 16px;
+    font-weight: 600;
+    line-height: 28px;
+    margin: ($unit * 6) 0 ($unit * 1) 0;
+    text-transform: uppercase;
   }
 }
 
@@ -126,7 +162,7 @@ table th,
 .docs-content p,
 .docs-content ul,
 .docs-content ol {
-  margin: 0px 0px ($unit * 2) 0px;
+  margin: 0px 0px ($unit * 3) 0px;
   font-size: 16px;
   font-weight: 400;
   opacity: .87;
@@ -144,7 +180,6 @@ table th,
   padding-left: ($unit * 4);
 }
 
-.l-sub-section p,
 table td {
   font-size: 14px;
   font-weight: 400;
@@ -163,17 +198,25 @@ table td {
 .text-aside,
 .docs-content aside {
   @extend .text-caption;
-  box-shadow: 0px 2px 5px rgba($coal, 0.3);
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  color: $blue-grey-700;
   font-weight: 400;
   font-size: 13px;
-  opacity: .54;
   line-height: 24px;
-  background: $mist;
+  opacity: 1;
+  background: rgba($blue-grey-50, .56);
   border-radius: 2px;
   padding: $unit * 3;
   margin-bottom: $unit * 2;
   width: $unit * 30;
 
+  p {
+    color: $blue-grey-700;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 24px;
+  }
+
   .l-sub-section & {
     background: $fog;
   }
@@ -195,10 +238,6 @@ table td {
 }
 
 .docs-content .l-sub-section {
-  padding: ($unit * 2) ($unit * 3);
-  h3 {
-    line-height: 1em;
-  }
   pre:last-child {
     margin-bottom: 0;
   }
@@ -215,7 +254,7 @@ table td {
     margin-right: 0;
   }
 }
-@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {
+@include respond-to('mobile') {
   .docs-content .card-row {
     &[layout="row"] {
       -webkit-flex-direction: column;

public/resources/css/layout/_layout.scss

@@ -25,6 +25,12 @@
 .l-fixed {
   position: fixed;
 }
+.l-clearfix:after,
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
 
 
 /*
@@ -51,6 +57,7 @@
 * Page & Element Specific Layouts
 *
 */
+
 .l-hr {
   margin: 0 ($unit * 0.5) ($unit * 5);
   padding: ($unit * 2) 0;
@@ -63,7 +70,7 @@
 }
 
 .l-offset-side-nav {
-  padding-left: 232px;
+  padding-left: 240px;
 
   @media handheld and (max-width: $phone-breakpoint),
   screen and (max-device-width: $phone-breakpoint),
@@ -83,6 +90,10 @@
   }
 }
 
+.l-docs-content {
+  padding: $unit * 6;
+}
+
 .l-content {
   padding: ($unit * 8) ($unit * 12);
   max-width: 1200px;
@@ -117,11 +128,11 @@
 }
 
 .l-sub-section {
+  color: $blue-grey-700;
   margin: 0px 0px ($unit * 4) 0px;
-  padding: ($unit * 4) ($unit * 6);
+  padding: $unit * 4;
-  background: lighten($mist, 3%);
+  background: rgba($blue-grey-50, .24);
-  border-left: ($unit / 2) solid $cactus;
+  border-left: 4px solid $cyan-500;
-  border-radius: ($unit / 2);
 
   @media handheld and (max-width: $phone-breakpoint),
   screen and (max-device-width: $phone-breakpoint),
@@ -130,8 +141,16 @@
   }
 
   code {
-    background: $fog;
+    background: rgba($blue-grey-100, .56);
-    color: $steel;
+    color: $cyan-700;
+  }
+
+  p:last-child {
+    margin: 0;
+  }
+
+  h3:first-child {
+    margin-top: 0;
   }
 
   &:last-child {
@@ -152,13 +171,13 @@ button.verbose {
   screen and (max-device-width: $phone-breakpoint),
   screen and (max-width: $tablet-breakpoint) {
     font-size: ($unit * 2);
-  }  
+  }
 }
 button.verbose.on {display: none}
 
 .l-verbose-section {
   margin: 0px 0px ($unit * 4) 0px;
-  padding-left: ($unit * 2);  
+  padding-left: ($unit * 2);
   //background: lighten($light, 5%);
   border-left: ($unit / 6) solid $grey;
   border-radius: ($unit / 6);
@@ -270,5 +289,5 @@ button.verbose.on {display: none}
   display: block;
   font-size: $unit * 2;
   margin-bottom: $unit;
-  margin-top: $unit * 4; 
+  margin-top: $unit * 4;
 }

public/resources/css/main.scss

@@ -2,13 +2,17 @@
 * BASE FILES
 *
 */
-
 @import 'options';
+
+@import 'base/colors';
+@import 'base/reset';
+@import 'base/mixins';
+@import 'base/type';
+
+
 @import 'state';
 @import 'layout/layout';
 @import 'theme';
-@import 'base/reset';
-@import 'base/type';
 @import 'angular';
 
 
@@ -17,6 +21,8 @@
 *
 */
 
+@import 'module/announcement-bar';
+@import 'module/badge';
 @import 'module/main-nav';
 @import 'module/side-nav';
 @import 'module/jump-nav';
@@ -26,8 +32,10 @@
 @import 'module/banner';
 @import 'module/cta-bar';
 @import 'module/buttons';
+@import 'module/form';
 @import 'module/table';
 @import 'module/code';
+@import 'module/code-shell';
 @import 'module/heading-code';
 @import 'module/code-box';
 @import 'module/sticker';
@@ -36,13 +44,14 @@
 @import 'module/alert';
 @import 'module/callout';
 @import 'module/images';
+@import 'module/lists';
 @import 'module/card';
 @import 'module/hover-card';
 @import 'module/modal';
 @import 'module/shadow';
 @import 'module/showcase';
 @import 'module/statement';
-@import 'module/example-title';
+@import 'module/symbol';
 @import 'module/api';
 @import 'module/cheatsheet';
 @import 'module/filetree';
@@ -54,7 +63,6 @@
 @import 'module/press-kit';
 @import 'module/features';
 @import 'module/docs-landing';
-@import 'module/copy';
 @import 'module/embedded-plunker';
 
 /*

public/resources/css/module/_alert.scss

@@ -1,26 +1,26 @@
 .alert {
-  box-shadow: 0px 2px 5px rgba($coal, 0.3);
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
   border-width: 2px;
   border-style: solid;
   padding: $unit ($unit * 2);
-  line-height: $unit * 4;
+  line-height: $unit * 3;
   font-size: 14px;
   border-radius: 4px;
-  color: $steel;
+  color: $blue-grey-700;
   margin-bottom: $unit * 3;
 
   &.is-critical {
-    border-color: $cardinal;
+    border-color: $red-700;
-    background: $peach;
+    background: rgba($red-50, .24);
   }
 
   &.is-important {
-    border-color: $citrus;
+    border-color: $amber-700;
-    background: $sand;
+    background: rgba($amber-50, .24);
   }
 
   &.is-helpful {
-    border-color: $blueberry;
+    border-color: $blue-600;
-    background: $light;
+    background: rgba($blue-50, .24);
   }
 }

public/resources/css/module/_announcement-bar.scss

@@ -0,0 +1,97 @@
+/*
+* Announcment Bar Module
+*
+* A module displaying time senstive announcemnts
+*
+*/
+
+
+/*
+* Variables
+*/
+
+$announcement-bar-height: 104px;
+$announcement-bar-width: 752px;
+
+
+/*
+* Class
+*/
+
+.announcement-bar {
+  background: $white;
+  bottom: 0;
+  box-sizing: border-box;
+  color: $blue-grey-500;
+  height: $announcement-bar-height;
+  left: 50%;
+  margin-bottom: -($announcement-bar-height / 2);
+  margin-left: -($announcement-bar-width / 2);
+  overflow: hidden;
+  padding: $unit * 4;
+  position: absolute;
+  width: $announcement-bar-width;
+
+  img, p {
+    float: left;
+  }
+
+  img {
+    height: 40px;
+    margin: 0 ($unit) 0 0;
+  }
+
+  p {
+    font-size: 18px;
+    line-height: $unit * 5;
+    margin: 0;
+    padding: 0;
+  }
+
+  .button,
+  .button.md-button {
+    background: rgba($blue-grey-50, .87);
+    border-radius: 2px;
+    color: $blue-grey-500;
+    float: right;
+    font-size: 14px;
+    line-height: $unit * 5;
+    margin: 0;
+    padding: 0 ($unit * 5);
+    transition: all .3s;
+
+    &:hover {
+      background: $blue-grey-50;
+      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+      color: $blue-500;
+    }
+  }
+
+  /*
+  * Mobile Styles
+  *
+  */
+
+  @include respond-to('mobile') {
+    height: auto;
+    margin: 0;
+    padding: ($unit * 4) ($unit * 6);
+    position: static;
+    text-align: center;
+    width: auto;
+
+    &.shadow-2 {
+      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    }
+
+    img, p {
+      float: none;
+    }
+
+    .button {
+      float: none;
+      display: block;
+      margin-top: $unit * 2;
+    }
+  }
+}

public/resources/css/module/_api.scss

@@ -1,246 +1,173 @@
-@mixin icon {
+/*
-  line-height: 14px;
+* API Home Page
-  &.decorator:before {
+*
-    content: '@';
+*/
-    background: $blueberry;
+
-  }
+
-  &.directive:before {
+
-    content: 'D';
+/*
-    background: #db4437;
+* API Filter Menu
-  }
+*
-  &.pipe:before {
+*/
-    content: 'P';
+
-    background: #78909C;
+.api-filter {
-  }
+  .form-select-menu {
-  &.class:before {
+    float: left;
-    content: 'C';
-    background: #4285f4;
-  }
-  &.interface:before {
-    content: 'I';
-    background: #0097a7;
-  }
-  &.function:before {
-    content: 'F';
-    background: #0f9d58;
-  }
-  &.enum:before {
-    content: 'E';
-    background: #757575;
   }
 
-  // NOTE: (ericjim): `var`, `let`, and `const` are considered Const
+  .form-search {
-  &.var:before,
-  &.let:before,
-  &.const:before {
-    content: 'K'; // Use K for const, since C is already used for Class
-    background: #9575cd;
-  }
-  &:before {
-    display: inline-block;
-    border-radius: 50%;
-    width: 14px;
-    height: 14px;
-    text-align: center;
-    color: white;
-    font-family: Roboto, sans-serif;
-    font-size: 10px;
-    margin-right: $unit;
     float: left;
   }
 }
 
-.api-key {
+
-  dt, dd {
+/*
-    display: inline-block;
+* API Class List
+*
+*/
+
+.docs-content .api-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+
+  li {
     font-size: 14px;
-    font-family: Roboto, sans-serif;
+    margin: 0 0 ($unit * 2) 0;
-    padding: $unit;
+    line-height: 14px;
-  }
+    padding: 0;
-  dt {
+    float: left;
-    padding-left: 0;
+    width: 33%;
-  }
+    min-width: 220px;
-  dd {
+    text-overflow: ellipsis;
-    @include icon;
+    white-space: nowrap;
-    margin: 0 0 0 ($unit);
+
-    cursor: pointer;
+    .symbol {
-    &.active {
+      margin-right: $unit;
-      background: #d5d9dc;
-      border-radius: 3px;
     }
-  }
-}
 
-input.api-filter {
-  display: block;
-  max-width: ($unit * 100);
-  width: 100%;
-  line-height: 18px;
-  padding: $unit;
-  position: relative;
-  left: ($unit * -1);
-}
-
-.docs-content {
-  .anchor-offset {
-    display: block;
-    position: relative;
-    top: -250px;
-    visibility: hidden;
-  }
-
-  .anchor-focused {
-    background-color: transparent !important;
-
-    -moz-animation: fade 1s linear; /* Firefox */
-    -webkit-animation: fade 1s linear; /* Safari and Chrome */
-    -o-animation: fade 1s linear; /* Opera */
-    animation: fade 1s linear;
-  }
-
-  @keyframes fade {
-    0% { background-color: $sunshine }
-  }
-
-  .h2-api-docs {
-    font-size: 15px !important;
-    line-height: 20px;
-    text-transform: uppercase !important;
-    color: #78909C !important;
-  }
-
-  .api-list {
-    list-style: none;
-    padding: 0 0 ($unit * 4);
-    overflow: hidden;
-    .api-item {
-      font-size: 14px;
-      font-family: Roboto, sans-serif;
-      margin: 0;
-      line-height: 14px;
-      padding: $unit $unit $unit 0;
-      float: left;
-      width: 33%;
-      min-width: 220px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      box-sizing: border-box;
-      a {
-        text-decoration: none;
-        color: black;
-      }
-      .symbol {
-        @include icon;
-      }
-    }
-  }
-
-  .code-links {
     a {
-      code, .api-doc-code {
+      color: $blue-grey-600;
-        color: #1E88E5 !important;
+      display: inline-block;
+      line-height: $unit * 2;
+      padding: 0 ($unit * 2) 0 0;
+      text-decoration: none;
+      transition: all .3s;
+
+      &:hover {
+        background: $blue-grey-50;
+        color: $blue-500;
       }
     }
   }
+}
 
-  .openParens {
+.code-links {
-    margin-top: 15px;
+  a {
-  }
+    code, .api-doc-code {
-
-  .endParens {
-    margin-bottom: 20px !important;
-  }
-
-  p {
-
-    &.selector {
-      margin: 0;
-    }
-
-    &.location-badge {
-      margin: 0 0 16px 16px !important;
-    }
-
-    .api-doc-code {
-      border-bottom: 0px;
-
-      :hover {
-        border-bottom: none;
-      }
-    }
-  }
-
-  .row-margin {
-    margin-bottom: 36px;
-    h2 {
-      line-height: 28px;
-    }
-  }
-
-  .code-margin {
-    margin-bottom: $unit;
-  }
-
-  .hr-margin {
-    display: block;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid $lightgrey;
-    margin-top: 15px;
-    margin-bottom: 20px;
-    padding: 0;
-  }
-
-  .no-bg {
-    background: none;
-    padding: 0;
-  }
-
-  .no-bg-with-indent {
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-left: 16px;
-    margin-top: 6px;
-    margin-bottom: 0;
-    background: none;
-  }
-
-  .code-background {
-    padding: 0 5px 0;
-
-    span.pln {
       color: #1E88E5 !important;
     }
   }
+}
 
-  .code-anchor {
+.openParens {
-    cursor: pointer;
+  margin-top: 15px;
-    text-decoration: none;
+}
 
-    // Override highlight.js
+.endParens {
-    .kwd {
+  margin-bottom: 20px !important;
-      color: #1E88E5 !important;
+}
-    }
 
-    &:hover {
+p {
-      text-decoration: underline;
+
-    }
+  &.selector {
+    margin: 0;
+  }
+
+  &.location-badge {
+    margin: 0 0 16px 16px !important;
   }
 
   .api-doc-code {
-    font-size: 14px;
+    border-bottom: 0px;
-    color: #1a2326;
 
-    // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
+    :hover {
-    &.no-pln {
+      border-bottom: none;
-      .pln:last-child {
-        display: none;
-      }
     }
   }
 }
 
+.row-margin {
+  margin-bottom: 36px;
+  h2 {
+    line-height: 28px;
+  }
+}
+
+.code-margin {
+  margin-bottom: $unit;
+}
+
+.hr-margin {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid $lightgrey;
+  margin-top: 15px;
+  margin-bottom: 20px;
+  padding: 0;
+}
+
+.no-bg {
+  background: none;
+  padding: 0;
+}
+
+.no-bg-with-indent {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 16px;
+  margin-top: 6px;
+  margin-bottom: 0;
+  background: none;
+}
+
+.code-background {
+  padding: 0 5px 0;
+
+  span.pln {
+    color: #1E88E5 !important;
+  }
+}
+
+.code-anchor {
+  cursor: pointer;
+  text-decoration: none;
+
+  // Override highlight.js
+  .kwd {
+    color: #1E88E5 !important;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.api-doc-code {
+  font-size: 14px;
+  color: #1a2326;
+
+  // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
+  &.no-pln {
+    .pln:last-child {
+      display: none;
+    }
+  }
+}
+
+
 @media screen and (max-width: 600px) {
   .docs-content {
     // Overrides display flex from angular material.

public/resources/css/module/_badge.scss

@@ -0,0 +1,60 @@
+/*
+* Badge Module
+*
+* Badges that indicate the current status of a page/lib/api
+*
+* Usage: <span class="badge is-experimantal">Experimental</span>
+*/
+
+/*
+* Badge Types
+*/
+
+$badges: (
+  beta: (
+    border: $amber-700,
+    color: $amber-900
+  ),
+  deprecated: (
+    border: $pink-600,
+    color: $pink-600
+  ),
+  experimental: (
+    border: $purple-600,
+    color: $purple-600
+  ),
+  stable: (
+    border: $green-600,
+    color: $green-600
+  ),
+);
+
+
+/*
+* Class Definition
+*/
+
+.badge {
+  background: $white;
+  border: 2px solid $blue-grey-500;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-sizing: border-box;
+  color: $blue-grey-500;
+  display: inline-block;
+  font-size: 11px;
+  height: $unit * 3;
+  line-height: ($unit * 3) - 2;
+  margin: ($unit + 4) 0;
+  padding: 0 $unit;
+  text-align: center;
+  text-transform: uppercase;
+
+  // BADGE TYPES
+  @each $name, $badge in $badges {
+    &.is-#{$name} {
+      border-color: map-get($badge, border);
+      color: map-get($badge, color);
+    }
+  }
+}

public/resources/css/module/_banner.scss

@@ -1,128 +1,31 @@
 /*
 * Banner
 *
-* Addtional announcements that generally follow a hero
+* Addtional information about the page located below the hero
 */
 
-.banner-floaty {
-  width: 920px;
-  height: 112px;
-  background-color: rgba(255, 255, 255, 1) !important;
-  -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
-  -webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
-  box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
-  position: absolute;
-  margin-top: -50px;
-  margin-left: auto;
-  margin-right: auto;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  display: table;
-  padding: 0 !important;
-
-  @media handheld and (max-width: $phone-breakpoint),
-  screen and (max-device-width: $phone-breakpoint),
-  screen and (max-width: $tablet-breakpoint) {
-    padding: 0;
-  }
-
-  @media(max-width: 959px) {
-    width: 100%;
-    height: 56px;
-    padding: 16px 0 !important;
-  }
-
-  .banner-ng-annoucement {
-    display: flex;
-    justify-content: space-around;
-    align-content: space-around;
-    align-items: center;
-    height: 100%;
-
-    @media(max-width: 959px) {
-      flex-direction: column;
-      justify-content: space-between;
-      align-content: space-between;
-
-      .banner-text {
-        padding: 16px 0;
-        margin: 0 16px;
-      }
-    }
-
-    .banner-text {
-      font-size: 16px;
-      color: #607D8B;
-    }
-
-    .banner-button {
-      a {
-        color: #607D8B;
-        background-color: #ECEFF1;
-        padding: 0;
-        line-height: 36px;
-        padding-left: 20px;
-        padding-right: 20px;
-      }
-    }
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      background: none;
-      padding-left: 0px;
-      margin: 0px 0px $unit 0px;
-      text-align: center;
-    }
-  }
-}
-
 .banner {
-  background: $mist;
+  background: rgba($blue-grey-50, .24);
-  padding: ($unit * 2) ($unit * 6);
+  border-bottom: 1px solid $blue-grey-50;
-  min-height: $unit * 1;
+  box-sizing: border-box;
+  font-size: 18px;
+  font-weight: 200;
+  padding: ($unit * 4) ($unit * 6);
+  height: 97px;
 
-  @media handheld and (max-width: $phone-breakpoint),
+  include respond-to('mobile') {
-  screen and (max-device-width: $phone-breakpoint),
-  screen and (max-width: $tablet-breakpoint) {
     padding: ($unit * 2);
   }
 
-  &.is-centered {
+  &.is-plain {
-    text-align: center;
+    background: $white;
+    height: auto;
+    overflow: visible;
   }
 
-  .button.button-large {
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      display: block;
-    }
-  }
 
-  .ng-conf-logo {
+  p, .text-body {
-    background: url('/resources/images/logos/ng-conf/ng-conf-shield.png') left no-repeat;
+    color: $blue-grey-500;
-    padding: $unit 68px;
+    font-size: 18px;
-  }
-
-  .angularconnect-logo {
-    background: url('/resources/images/logos/angularconnect/angularconnect-logo-med.png') left no-repeat;
-    padding: $unit 0 $unit 108px;
-  }
-
-  h3 {
-    opacity: .87;
-    line-height: 34px;
-    margin: 0;
-  }
-
-  h4 {
-    line-height: 24px;
-  }
-
-  p,
-  h4 {
-    margin: 0px;
   }
 }

public/resources/css/module/_buttons.scss

@@ -3,7 +3,8 @@
 *
 */
 
-.button {
+.button,
+a.button.md-button {
   display: inline-block;
   line-height: $unit * 4;
   padding: 0px ($unit * 2);
@@ -39,11 +40,11 @@
 
   &.button-secondary {
     background: $fog;
-    color: rgba($snow, .87);
+    color: rgba($white, .87);
   }
 
   &.button-plain {
-    background: $snow;
+    background: $white;
     color: rgba($steel, .87);
   }
 
@@ -54,21 +55,23 @@
 
   &.button-navy {
     background: $ocean;
-    color: rgba($snow, .87);
+    color: rgba($white, .87);
   }
 
   &.button-banner {
     background: $metal;
-    color: rgba($snow, .87);
+    color: rgba($white, .87);
   }
 
-  &.button-shield {
+  &.button-shield,
-    background: $regal url('/resources/images/logos/inverse/shield/22.png') 24px 13px no-repeat;
+  &.button-shield.md-button {
-    color: rgba($snow, .87);
+    background-color: $blue-600;
+    background: $blue-600 url('/resources/images/logos/inverse/shield/22.png') 24px 13px no-repeat;
+    color: rgba($white, .87);
     padding-left: 54px;
 
     @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
-      background: $regal url('/resources/images/logos/inverse/shield/22@2x.png') 24px 13px no-repeat;
+      background: $blue-600 url('/resources/images/logos/inverse/shield/22@2x.png') 24px 13px no-repeat;
       background-size: 22px 22px;
     }
   }

public/resources/css/module/_callout.scss

@@ -3,10 +3,10 @@
   padding: 0px;
 
   header {
-    color: $snow;
+    color: $white;
     padding: 0px ($unit * 2);
-    line-height: $unit * 4;
+    line-height: $unit * 3;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     text-transform: uppercase;
   }
@@ -18,29 +18,29 @@
   }
 
   &.is-critical {
-    border-color: $cardinal;
+    border-color: $red-700;
-    background: $peach;
+    background: rgba($red-50, .24);
 
     header {
-      background: $cardinal;
+      background: $red-700;
     }
   }
 
   &.is-important {
-    border-color: $citrus;
+    border-color: $amber-700;
-    background: $sand;
+    background: rgba($amber-50, .24);
 
     header {
-      background: $citrus;
+      background: $amber-700;
     }
   }
 
   &.is-helpful {
-    border-color: $blueberry;
+    border-color: $blue-600;
-    background: $light;
+    background: rgba($blue-50, .24);
 
     header {
-      background: $blueberry;
+      background: $blue-600;
     }
   }
 }

public/resources/css/module/_card.scss

@@ -1,55 +1,66 @@
 .card {
-  margin-bottom: $unit * 4;
+  background: $white;
-  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+  border-radius: 4px;
-  border-radius: 2px;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-sizing: border-box;
+  float: left;
+  height: 194px;
+  margin-bottom: $unit * 3;
+  min-width: 216px;
+  padding-bottom: $unit * 6;
+  position: relative;
+  transition: box-shadow .5s;
 
-  header {
+  &:hover {
-    background: $mist;
+    border: 2px solid $blue-500;
-    padding: $unit * 2;
+    box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
-    border-radius: 2px 2px 0px 0px;
+    text-decoration: none;
 
     h2 {
-      margin: ($unit * 2) 0px 0px 0px;
+      color: $blue-500;
+      padding: (($unit * 2) - 2) (($unit * 2) - 2) 0 (($unit * 2) - 2);
     }
+
+    p {
+      color: $blue-grey-600;
+      padding: 0 (($unit * 2) - 2);
+    }
+
+    footer {
+      line-height: ($unit * 6) - 4;
+      padding: 0 (($unit * 2) - 2);
+    }
+  }
+
+
+  h2 {
+    color: $blue-grey-600;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: $unit * 3;
+    margin: 0 0 $unit 0;
+    padding: ($unit * 2) ($unit * 2) 0 ($unit * 2);
+    text-transform: none;
   }
 
   p {
+    color: $blue-grey-400;
+    font-size: 13px;
+    line-height: $unit * 3;
     padding: 0px ($unit * 2);
-    margin-bottom: 0px;
+    margin: 0;
-  }
-
-  .card-content {
-    border-bottom: 1px solid $mist;
-    padding: $unit * 2;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    h3 {
-      margin: 0px;
-    }
-
-    ul {
-      padding: 0px;
-      margin: 0px 0px 0px ($unit * 4);
-
-      a {
-        font-size: 14px;
-        display: block;
-        line-height: 24px;
-        text-decoration: none;
-        padding: 0px 4px;
-
-        &:hover {
-          text-decoration: underline;
-          background: $mist;
-        }
-      }
-    }
   }
 
   footer {
+    bottom: 0;
+    border-top: 1px solid $blue-grey-50;
+    box-sizing: border-box;
+    line-height: $unit * 6;
+    left: 0;
+    padding: 0 ($unit * 2);
+    position: absolute;
+    right: 0;
+
     a {
       color: $blueberry;
       font-size: 13px;

public/resources/css/module/_code-box.scss

@@ -1,66 +1,77 @@
-.code-box {
+/*
+* Code Box Module
+*
+* Code examples with multiple sections (tabs)
+*
+*/
+
+
+/*
+* Variables
+*/
+
+$codebox-anti-pattern-color: $red-700;
+$codebox-primary-color: $blue-600;
+$codebox-selected: $white;
+
+
+/*
+* Class
+*/
+
+.code-box,
+.code-example {
+  background: $white;
+  border: 2px solid $codebox-primary-color;
   border-radius: 4px;
-  background: $lightgrey;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-  margin-bottom: $unit * 2;
+  margin-bottom: $unit * 3;
+
+  &.is-anti-pattern {
+    border: 2px solid $codebox-anti-pattern-color;
+
+    header {
+      background: $codebox-anti-pattern-color;
+    }
+  }
 
   header {
-    background: #1976D2;
+    background: $codebox-primary-color;
-    color: $snow;
+    color: $white;
-    padding: $unit $unit 0px $unit;
+    padding: $unit $unit 0 $unit;
-    border-radius: 4px 4px 0px 0px;
   }
 
-  &__live-code {
+  h4 {
-    background-color: #cfd8dc;
+    color: $white;
-    height: 36px;
+    font-size: 13px;
-    color: $snow;
+    font-weight: 600;
-    padding: 0 $unit;
+    line-height: $unit * 3;
-    border-radius: 4px 4px 0px 0px;
+    margin: 0;
-    margin-bottom: 0;
+    outline: none;
-
+    padding: 0 0 $unit $unit;
-    & a {
+    text-transform: none;
-      font-size: 14px;
-      text-decoration: none;
-      border-bottom: 1px $regal dotted;
-
-      &:hover {
-        border-bottom: 1px $regal solid;
-      }
-    }
-
-    &--icon {
-      font-size: 14px;
-      color: $regal;
-    }
   }
 
-  nav {
+  nav button {
-    button {
+    background: $blue-400;
-      line-height: $unit * 3.5;
+    border-radius: 2px 2px 0 0;
-      height: $unit * 3.5;
+    color: $white;
-      padding: 0px ($unit * 3);
+    font-size: 13px;
-      margin-right: $unit;
+    height: $unit * 4;
-      font-size: 13px;
+    line-height: $unit * 4;
-      background: #3F94E9;
+    margin-right: $unit;
-      color: $snow;
+    outline: none;
-      border-radius: 4px 4px 0px 0px;
+    padding: 0 ($unit * 3);
-      text-transform: none;
+    text-transform: none;
 
-      &.is-selected,
+    &.is-selected,
-      &.selected
+    &.selected {
-      {
+      background: $white;
-        background: $lightgrey;
+      color: $blue-grey-600;
-        color: $darkgrey;
-      }
     }
   }
 
   .prettyprint {
-    box-shadow: none;
+    background: $codebox-selected;
-    margin: 0px;
   }
-}
-
-pre {
-  margin-top: 0;
 }

public/resources/css/module/_code-shell.scss

@@ -0,0 +1,40 @@
+/*
+* Code Shell Module
+*
+* Style
+*
+*/
+
+
+/*
+* Variables
+*/
+
+$code-shell-background: $blue-grey-800;
+$code-shell-color: $light-green-A400;
+
+
+/*
+* Class
+*/
+
+.code-shell {
+  background: $code-shell-background;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  border-radius: 2px;
+  display: block;
+  margin-bottom: $unit * 2;
+  min-height: $unit * 8;
+  overflow: hidden;
+
+  .prettyprint {
+    background: $code-shell-background;
+    color: $code-shell-color;
+    padding: $unit * 3;
+
+    .pln,
+    .pun {
+      color: $code-shell-color;
+    }
+  }
+}

public/resources/css/module/_code.scss

@@ -1,43 +1,76 @@
 /*
-* Embedded Code
+* Code Syntax Highlighting & Formatting
 *
-* Style for embedded code examples
 */
 
-.cp_embed_iframe {
-  overflow: hidden;
 
-  @media handheld and (max-width: $phone-breakpoint),
+/*
-  screen and (max-device-width: $phone-breakpoint),
+* Variables
-  screen and (max-width: $tablet-breakpoint) {
+*/
-    width: 240px !important;
+
+$prettyprint-background: $white;
+$prettyprint-color: $blue-grey-700;
+
+
+/*
+* Copy Code Button
+*/
+
+.copy-container-template {
+  position: relative;
+
+  &:hover .copy-button .md-button {
+    opacity: 1;
+  }
+
+  .copy-button {
+    &.is-copied .md-button {
+      background: $blue-grey-50;
+      box-shadow: none;
+      color: $cyan-500;
+      min-width: 98px;
+    }
+
+    .md-button {
+      background: $cyan-500;
+      border-radius: 2px;
+      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+      color: $white;
+      font-size: 12px;
+      height: $unit * 4;
+      line-height: $unit * 4;
+      min-height: $unit * 4;
+      min-width: 98px;
+      margin: 0;
+      opacity: 0;
+      right: $unit * 2;
+      padding: 0 ($unit * 2);
+      position: absolute;
+      top: $unit * 2;
+      z-index: 1;
+      transition: all .2s;
+    }
   }
 }
 
 
 /*
-* Code Snippets
+* Pretty Print Styles
-*
-* These Code snippets are transformed by prettify and the code
-* below represents a custom theme that works with their formatting.
 */
 
 .prettyprint {
+  background: $prettyprint-background;
   white-space: pre-wrap;
-  background: $lightgrey;
+  color: $prettyprint-color;
   font-family: $mono-font;
-  color: $darkgrey;
+  font-size: 14px;
-  width: auto;
+  line-height: 24px;
+  margin: 0;
   overflow: auto;
   position: relative;
   padding: 0px;
-  font-size: 13px;
-  // font-weight: 600;
-  line-height: 24px;
-  margin-bottom: $unit * 3;
-  // box-shadow: 0px 2px 5px rgba($coal, .3);
-  border-radius: 4px;
   padding: ($unit * 2) ($unit * 4);
+  width: auto;
 
   &.linenums,
   &[class^="linenums:"],
@@ -46,7 +79,7 @@
   }
 
   &.is-showcase {
-    border: 4px solid $regal;
+    border: 4px solid $blue-600;
   }
 
   code {
@@ -56,27 +89,31 @@
   }
 
   ol {
-    background: $lightgrey;
+    background: rgba($blue-grey-50, .24);
-    padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);
+    color: $blue-grey-200;
+    padding: 0 0 0 ($unit * 5);
     margin: 0px;
     overflow: auto;
-    // font-weight: 600;
+    font-size: 11px;
-    font-size: 13px;
 
     li {
-      color: $bismark;
+      background: $white;
-      background: none;
+      margin: 0;
-      margin-bottom: 5px;
+      line-height: $unit * 3;
-      line-height: normal;
       list-style-type: decimal;
-      font-size: 12px;
+      padding: 0 0 0 ($unit * 2);
 
+      &:first-child {
+        padding-top: $unit * 3;
+      }
       &:last-child {
-        margin-bottom: 0px;
+        margin-bottom: 0;
+        padding-bottom: $unit * 3;
       }
 
       code {
         background: none;
+        color: $blue-grey-700;
         font-size: 13px;
       }
     }
@@ -94,43 +131,43 @@
     padding: 2px 4px;
   }
   .pnk {
-    background: $fog;
+    background: $blue-grey-50;
-    color: $darkgrey;
+    color: $blue-grey-900;
   }
   .blk {
-    background: $storm;
+    background: $blue-grey-900;
   }
   .otl {
-    outline: 1px solid rgba(darkgrey, .56);
+    outline: 1px solid rgba($blue-grey-700, .56);
   }
   .kwd {
-    color: $pink;
+    color: $pink-600;
   }
   .typ,
   .tag {
-    color: $pink;
+    color: $pink-600;
   }
   .str,
   .atv {
-    color: $olive;
+    color: $teal-600;
   }
   .atn {
-    color: $olive;
+    color: $teal-600;
   }
   .com {
-    color: $olive;
+    color: $teal-600;
   }
   .lit {
-    color: $olive;
+    color: $teal-600;
   }
   .pun {
-    color: $bismark;
+    color: $blue-grey-700;
   }
   .pln {
-    color: $darkgrey;
+    color: $blue-grey-700;
   }
   .dec {
-    color: $olive;
+    color: $teal-600;
   }
 
 
@@ -140,42 +177,56 @@
   */
 
   @media print {
-    background: $lightgrey;
     border: none;
     box-shadow: none;
 
     ol {
-      background: $lightgrey;
+      background: $white;
     }
 
     .kwd {
-      color: $pink;
+      color: $pink-600;
     }
     .typ,
     .tag {
-      color: $pink;
+      color: $pink-600;
     }
     .str,
     .atv {
-      color: $olive;
+      color: $teal-600;
     }
     .atn {
-      color: $olive;
+      color: $teal-600;
     }
     .com {
-      color: $olive;
+      color: $teal-600;
     }
     .lit {
-      color: $olive;
+      color: $teal-600;
     }
     .pun {
-      color: $bismark;
+      color: $blue-grey-700;
     }
     .pln {
-      color: $darkgrey;
+      color: $blue-grey-700;
     }
     .dec {
-      color: $olive;
+      color: $teal-600;
     }
   }
 }
+
+
+/*
+* Embedded Code
+*
+* Style for embedded code examples
+*/
+
+.cp_embed_iframe {
+  overflow: hidden;
+
+  @include respond-to('mobile') {
+    width: 240px !important;
+  }
+}

public/resources/css/module/_copy.scss

@@ -1,10 +0,0 @@
-.copy-container-template {
-  position: relative;
-
-  & > .copy-button {
-    margin-top: 8px;
-    right: 0;
-    z-index: 1;
-    position: absolute;
-  }
-}

public/resources/css/module/_dropdown.scss

@@ -1,77 +1,104 @@
 .dropdown {
-  position: relative;
+  background: $blue-grey-50;
+  bottom: 0;
+  box-sizing: border-box;
+  box-shadow: 0 -1px 2px rgba($black, 0.12);
+  left: 0;
+  margin: 0;
+  padding: $unit * 2;
+  position: fixed;
+  width: $sidenav-width;
   z-index: $layer-1;
-  margin: ($unit * 2) 0 0 0;
+
+  @include respond-to('mobile') {
+    display: none;
+    width: 100%;
+
+    .is-visible & {
+      display: block;
+    }
+  }
 
   .dropdown-button {
-    background: rgba($snow, .1);
+    background: rgba($blue-grey-100, .56);
     border: none;
-    border-radius: 3px;
+    border-radius: 2px;
+    box-sizing: border-box;
+    color: $blue-grey-600;
+    display: block;
     text-transform: none;
     font-weight: normal;
     font-size: 14px;
-    line-height: $unit * 4;
+    line-height: $unit * 5;
     padding: 0px ($unit * 4) 0px ($unit * 2);
-    margin: (1.25 * $unit) 0;
+    margin: 0;
     cursor: pointer;
     position: relative;
+    width: 100%;
     z-index: $layer-1;
     opacity: 0.87;
-    letter-spacing: .010em;
-    min-height:4.5 * $unit;
-    white-space:nowrap;
-    -webkit-font-smoothing:antialiased;
-    -webkit-user-select:none;
 
     .icon {
+      color: $blue-grey-200;
+      font-size: 24px;
       position: absolute;
-      top: 50%;
+      top: $unit;
       right: $unit;
-      -ms-transform: translateY(-50%);
-      -webkit-transform: translateY(-50%);
-      transform: translateY(-50%);
       z-index: $layer-1;
-      font-size: 20px;
       opacity: .87;
     }
+
+    &:hover {
+      background: $white;
+      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+      color: $blue-600;
+
+      .icon {
+        color: $blue-600;
+      }
+    }
   }
 
   .dropdown-menu {
-    background: $snow;
+    background: $white;
-    box-shadow: 0px 2px 5px rgba($coal, .3);
+    bottom: $unit * 2;
-    position: absolute;
+    border-radius: 2px;
-    top: 1.25 * $unit;
+    box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
-    left: 0px;
-    z-index: $layer-5;
     display: none;
-    border-radius: 3px;
+    left: $unit * 2;
+    list-style-type: none;
+    margin: 0;
     overflow: hidden;
-
+    padding: 0;
-    ul {
+    position: absolute;
-      list-style-type: none;
+    right: $unit * 2;
-      border-bottom: 1px solid $fog;
+    z-index: $layer-5;
-      margin: 0px;
-      padding: 0px;
-
-      &:last-child {
-        margin: 0;
-      }
-    }
 
     li {
+      border-bottom: 1px solid $blue-grey-50;
       margin: 0px;
+      padding: 0;
+
+      &:last-child {
+        border: none;
+      }
     }
 
     a {
       display: block;
-      line-height: $unit * 5;
+      font-size: 12px;
+      line-height: $unit * 7;
+      margin: 0;
       padding: 0px ($unit * 2);
-      font-size: 14px;
       text-decoration: none;
       text-align: left;
       font-weight: 400;
-      text-transform: uppercase;
+      color: $blue-grey-600;
-      color: $metal;
+
+      &:hover {
+        background: $white;
+        color: $blue-600;
+      }
     }
   }
 }

public/resources/css/module/_example-title.scss

@@ -1,21 +0,0 @@
-.example-title {
-  @extend .alert;
-
-  color: $snow;
-  padding:  0 ($unit * 2);
-  font-size: 14px;
-  // font-weight: 500;
-  border-color: #1976D2;
-  background: #1976D2;
-  box-shadow: none;
-  // temporary hack to remove space between example title and code-example
-  margin-bottom: -5px;
-  z-index: 1;
-  position: relative;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.example-title.avoid {
-  background: #E0343D;
-  border-color: #E0343D;
-}

public/resources/css/module/_filetree.scss

@@ -1,28 +1,45 @@
+/*
+* File Tree Module
+*
+*/
+
+
+/*
+* Class
+*/
+
 .filetree {
-  padding: 12px 24px;
+  background: $white;
-  background: $mist;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  border: 4px solid $blue-grey-50;
+  margin: 0 0 ($unit * 3) 0;
+  padding: $unit * 3;
+
   .file {
     display: block;
     font-family: $mono-font;
     line-height: 32px;
-    color: $platinum;
+    color: $blue-grey-600;
   }
+
   .children {
-    padding-left: 24px;
+    padding-left: $unit * 3;
     position: relative;
     overflow: hidden;
+
     .file {
       position: relative;
+
       &:before {
         content: '';
         left: -18px;
         bottom: 16px;
-        width: 12px;
+        width: $unit * 2;
         height: 9999px;
         position: absolute;
-        border-width: 0 0 2px 2px;
+        border-width: 0 0 1px 1px;
         border-style: solid;
-        border-color: #bccad1;
+        border-color: $blue-grey-100;
         border-radius: 0 0 0 3px;
       }
     }

public/resources/css/module/_footer.scss

@@ -19,9 +19,7 @@
 
     padding: $unit * 6;
 
-    @media handheld and (max-width: $phone-breakpoint),
+    @include respond-to('mobile') {
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
       padding: ($unit * 3) 0px;
     }
   }
@@ -31,9 +29,7 @@
     height: 200px;
     width: 200px;
 
-    @media handheld and (max-width: $phone-breakpoint),
+    @include respond-to('mobile') {
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
       display: none;
     }
   }
@@ -41,9 +37,7 @@
   h3 {
     font-size: 20px;
 
-    @media handheld and (max-width: $phone-breakpoint),
+    @include respond-to('mobile') {
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
       margin-bottom: $unit;
     }
   }
@@ -53,9 +47,7 @@
     margin: 0px;
     list-style-type: none;
 
-    @media handheld and (max-width: $phone-breakpoint),
+    @include respond-to('mobile') {
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
       margin-bottom: $unit * 5;
     }
 
@@ -67,9 +59,7 @@
       color: $snow;
       text-decoration: none;
 
-      @media handheld and (max-width: $phone-breakpoint),
+      @include respond-to('mobile') {
-      screen and (max-device-width: $phone-breakpoint),
-      screen and (max-width: $tablet-breakpoint) {
         display: block;
         text-decoration: none;
         padding: 0px ($unit * 2);
@@ -87,18 +77,33 @@
   }
 
   footer {
-    text-align: center;
+    text-align: left;
-    padding: $unit * 2;
+    padding: ($unit * 2) ($unit * 6);
     position: relative;
 
     .styleguide-trigger {
+      box-sizing: border-box;
       position: absolute;
-      top: $unit * 2;
+      display: inline-block;
+      bottom: $unit * 2;
       right: $unit * 2;
       font-size: 14px;
-      line-height: 20px;
+      line-height: 24px;
-      padding: 0px $unit;
+      height: 24px;
+      margin: 0;
+      padding: 0 ($unit * 3);
       opacity: .24;
+      transition: all .3s;
+
+      &:hover {
+        background: $blue-grey-700;
+        text-decoration: none;
+      }
+
+      .icon-favorite {
+        display: inline-block;
+        line-height: 24px;
+      }
     }
   }
 }

public/resources/css/module/_form.scss

@@ -0,0 +1,154 @@
+/*
+* Form Module
+*
+*/
+
+
+/*
+* Variables
+*/
+
+$form: '.form';
+
+
+/*
+* SEARCH BAR
+*/
+
+#{$form}-search {
+  position: relative;
+
+  input {
+    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    box-sizing: border-box;
+    border: 1px solid $white;
+    color: $blue-600;
+    font-size: 16px;
+    height: $unit * 4;
+    line-height: $unit * 4;
+    outline: none;
+    padding: 0 ($unit *2) 0 ($unit * 4);
+    transition: all .2s;
+
+    // PLACEHOLDER TEXT
+    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &::-moz-placeholder { /* Firefox 19+ */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &:-ms-input-placeholder { /* IE 10+ */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &:-moz-placeholder { /* Firefox 18- */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+
+    &:active,
+    &:focus {
+      border: 1px solid $blue-400;
+      box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
+    }
+  }
+
+  .material-icons {
+    color: $blue-grey-100;
+    font-size: 20px;
+    left: $unit;
+    position: absolute;
+    top: 6px;
+    z-index: $layer-1;
+  }
+}
+
+/*
+* Select Menu
+*/
+
+$form-select-width: 200px;
+
+#{$form}-select-menu {
+  position: relative;
+  width: $form-select-width;
+
+  .overlay {
+    display: none;
+    z-index: $layer-1;
+
+    &.visible {
+      display: block;
+    }
+  }
+
+  #{$form}-select-button {
+    background: $white;
+    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    box-sizing: border-box;
+    border: 1px solid $white;
+    color: $blue-grey-600;
+    font-size: 12px;
+    font-weight: 400;
+    height: $unit * 4;
+    line-height: $unit * 4;
+    outline: none;
+    padding: 0 ($unit * 2);
+    text-align: left;
+    width: $form-select-width - ($unit * 2);
+
+    strong {
+      font-weight: 600;
+      margin-right: $unit;
+      text-transform: uppercase;
+    }
+
+    &.has-symbol {
+      .symbol {
+        margin-right: $unit;
+      }
+    }
+  }
+
+  #{$form}-select-dropdown {
+    background: $white;
+    box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
+    border-radius: 4px;
+    display: none;
+    left: -$unit;
+    list-style-type: none;
+    margin: 0;
+    padding: $unit 0;
+    position: absolute;
+    top: -$unit;
+    width: 200px;
+    z-index: $layer-2;
+
+    &.visible {
+      display: block;
+    }
+
+    li {
+      cursor: pointer;
+      font-size: 14px;
+      line-height: $unit * 4;
+      margin: 0;
+      padding: 0 ($unit * 2) 0 ($unit * 5);
+      position: relative;
+      transition: all .2s;
+
+      &:hover {
+        background: $blue-grey-50;
+      }
+
+      .symbol {
+        left: $unit * 2;
+        position: absolute;
+        top: $unit;
+        z-index: $layer-5;
+      }
+    }
+  }
+}

public/resources/css/module/_hero.scss

@@ -1,21 +1,129 @@
-$hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
+/*
+* Hero Module
+*
+* A hero banner located at the top of each page that displays the
+* title of the page and sometimes a decorative background.
+*
+*/
+
+
+/*
+* Class
+*/
 
 .hero {
+  box-sizing: border-box;
+  box-shadow: none;
+  padding: ($unit * 6) ($unit * 6) ($unit * 4) ($unit * 6);
   position: relative;
-  padding: $hero-padding;
+  height: 168px;
-  height: $unit * 10;
 
-  .hero-cta {
+  @include respond-to('mobile') {
-    a {
+    height: auto;
-      padding-left: 48px;
+    padding-top: 40px;
-      padding-right: 48px;
+  }
+
+  .hero-title {
+    display: inline-block;
+    font-size: 28px;
+    font-weight: 400;
+    float: left;
+    line-height: 48px;
+    margin: 0 $unit 0 0;
+    opacity: .87;
+    text-transform: uppercase;
+
+    &.is-standard-case {
+      text-transform: none;
     }
   }
 
+  .hero-subtitle {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: $unit * 3;
+    margin: 0;
+    opacity: .87;
+    text-transform: uppercase;
+  }
+
+
+  // CTA BUTTONS
+  .button {
+    margin: 0px $unit;
+
+    @include respond-to('mobile') {
+      margin: ($unit * 2) 0px;
+      display: block;
+    }
+  }
+
+  button {
+    // Override md-button from angular material to align language select with hero title.
+    margin: 0 !important;
+  }
+
+
+  /*
+  * Large Banner
+  */
+
+  &.is-large {
+    height: $unit * 70;
+    padding-top: ($unit * 4);
+    text-align: center;
+
+    @include respond-to('mobile') {
+      height: auto;
+    }
+
+    h1 {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 32px;
+      margin-bottom: $unit * 4;
+    }
+
+    // LARGE SHEILD LOGO
+    .hero-logo {
+      filter: drop-shadow(0 2px 2px rgba($black, 0.24));
+      margin-bottom: $unit;
+      opacity: 1;
+      padding: 0;
+      width: $unit * 30;
+
+      @include respond-to('mobile') {
+        width: $unit * 24;
+      }
+    }
+
+    .hero-cta,
+    .hero-cta.md-button {
+      background: rgba($white, .87);
+      border-radius: 2px;
+      color: $blue-800;
+      font-weight: 500;
+      padding: 0 ($unit * 8);
+      transition: all .3s;
+
+      &:hover {
+        background: $white;
+        box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
+        color: $blue-600;
+      }
+    }
+  }
+
+
+
+
+  /*
+  * Badges
+  */
+
   .hero-title-with-badges {
     margin-bottom: $unit;
   }
-
   .status-circle {
     margin-right: 4px;
     border-radius: 50%;
@@ -23,48 +131,17 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
     height: 10px;
     display: inline-block;
   }
-
   // status-*, will be matched by the results in addJadeDataDocsProcessor.js, and reflect in _hero.jade
   .status-deprecated {
     background: #E53935;
   }
-
   .status-stable {
     background: #558b2f;
   }
-
   .status-experimental {
     background: #9575cd;
   }
 
-  @media handheld and (max-width: $phone-breakpoint),
-  screen and (max-device-width: $phone-breakpoint),
-  screen and (max-width: $tablet-breakpoint) {
-    height: auto;
-    padding-top: 40px;
-  }
-
-  &.is-large {
-    height: 478px;
-    padding-top: ($unit * 2);
-    text-align: center;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      height: auto;
-    }
-  }
-
-  .inner-header {
-    display: flex;
-    justify-items: center;
-    flex-wrap: wrap;
-
-    @media screen and (max-width: 599px) {
-      margin: ($unit * 6) 0px 0px 0px;
-    }
-  }
 
   .badges {
     display: flex;
@@ -105,82 +182,4 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
       margin-bottom: $unit * 2;
     }
   }
-
-  button {
-    // Override md-button from angular material to align language select with hero title.
-    margin: 0 !important;
-  }
-
-  .hero-title {
-    display: inline; // title will be inline with badges
-    text-transform: uppercase;
-    margin: 0;
-    margin-right: 8px;
-    opacity: .87;
-
-    &.is-standard-case {
-      text-transform: none;
-    }
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      // reduce size of api doc title on small screens, prevents cut text on long titles
-      font-size: 28px;
-    }
-  }
-
-  .hero-subtitle {
-    margin: 0;
-    opacity: 1;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      margin: 0px;
-    }
-  }
-
-  // LARGE SHEILD LOGO
-  .hero-logo {
-    position: relative;
-    padding-top: 224px;
-    opacity: 1;
-    width: $unit * 70;
-    margin: ($unit * 3) auto ($unit * 5) auto;
-    font-weight: 400;
-
-    &:after {
-      content: '';
-      background: url('/resources/images/logos/angular2/angular.svg') top center no-repeat;
-      background-size: contain;
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      height: 224px;
-    }
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      width: auto;
-      font-size: 20px;
-      line-height: 28px;
-      margin: ($unit * 2) auto;
-      padding-top: 208px;
-    }
-  }
-
-  // CTA BUTTONS
-  .button {
-    margin: 0px $unit;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      margin: ($unit * 2) 0px;
-      display: block;
-    }
-  }
 }

public/resources/css/module/_lists.scss

@@ -0,0 +1,53 @@
+/*
+* List Styles
+*
+*/
+
+
+
+/*
+* Secondary List Class
+*
+*/
+
+.secondary-content-list,
+.docs-content .secondary-content-list {
+  margin-top: $unit * 6;
+
+  h4 {
+    color: $blue-grey-400;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: $unit * 4;
+    border-bottom: 1px solid $blue-grey-50;
+    margin: 0;
+    text-transform: uppercase;
+  }
+
+  ul {
+    list-style-type: none;
+    padding: $unit 0;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  li a {
+    background: $white;
+    color: $blue-grey-400;
+    display: block;
+    font-size: 12px;
+    line-height: $unit * 4;
+    padding: 0 $unit;
+    text-decoration: none;
+    transition: all .3s;
+
+    &:hover {
+      background: rgba($blue-grey-50, .56);
+      color: $blue-500;
+      transition: none;
+    }
+  }
+}

public/resources/css/module/_main-nav.scss

@@ -1,46 +1,58 @@
-.main-nav {
+/*
-  height: 56px;
+* Main Navigation
-  min-height: 56px;
+*
-  padding: 0px ($unit * 2);
+* Top main navigation for website
-  box-shadow: 0px 2px 5px 0 rgba($coal, 0.26);
+*/
 
-  @media handheld and (max-width: $phone-breakpoint),
+
-  screen and (max-device-width: $phone-breakpoint),
+/*
-  screen and (max-width: $tablet-breakpoint) {
+* Variables
-    padding: 0px 0px 0px ($unit * 2);
+*/
-  }
+
+$main-nav-height: $unit * 7;
+$main-nav-background: $blue-700;
+
+
+/*
+* Class
+*/
+
+.main-nav {
+  background: $main-nav-background;
+  height: $main-nav-height;
+  min-height: $main-nav-height;
+  padding: 0px;
+  box-shadow: 0px 2px 5px 0 rgba($black, 0.24);
 
   .feedback-button {
     margin-top: 10px;
   }
 
   h1 {
-    margin: 0px ($unit * 10) 0px 0px;
+    margin: 0 ($unit * 9) 0 0;
     padding: 0px;
-    height: 36px;
+    height: $main-nav-height;
-    width: 136px;
+    width: 168px;
     float: left;
 
-    @media handheld and (max-width: $phone-breakpoint),
+    .md-button, a {
-    screen and (max-device-width: $phone-breakpoint),
+      background: url('/resources/images/logos/standard/logo-nav.png') 16px 8px no-repeat;
-    screen and (max-width: $tablet-breakpoint) {
+      border-radius: 0;
-      margin: 0;
-    }
-
-    a {
-      background: url('/resources/images/logos/standard/logo-nav.png') 0px 8px no-repeat;
       display: block;
-      height: 56px;
+      height: $main-nav-height;
-      width: 135px;
       overflow: hidden;
       text-indent: -3000px;
       margin:0;
       padding: 0;
 
       @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
-        background: url('/resources/images/logos/standard/logo-nav@2x.png') 0px 8px no-repeat;
+        background: url('/resources/images/logos/standard/logo-nav@2x.png') 16px 8px no-repeat;
         background-size: 135px 36px;
       }
+
+      &:hover {
+        background-color: $blue-600;
+      }
     }
   }
 
@@ -53,11 +65,9 @@
       margin: 0px 0px 0px 0px;
     }
 
-    .main-nav-button {
+    .main-nav-button,
-      @media handheld and (max-width: $phone-breakpoint),
+    .main-nav-button.md-button {
-      screen and (max-device-width: $phone-breakpoint),
+      @include respond-to('mobile') {
-      screen and (max-width: $tablet-breakpoint),
-      screen and (max-width: 960px) {
         display: block;
         float: none;
         line-height: $unit * 6;
@@ -77,10 +87,8 @@
     }
 
     // Make main nav icons disappear in favor of site map menu
-    @media handheld and (max-width: $phone-breakpoint),
+    @include respond-to('mobile') {
-    screen and (max-device-width: $phone-breakpoint),
+      background: $main-nav-background;
-    screen and (max-width: $tablet-breakpoint),
-    screen and (max-width: 960px) {
       box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
       float: none;
       position: absolute;
@@ -88,7 +96,6 @@
       right: 0px;
       left: 0px;
       z-index: $layer-6;
-      background: $ocean;
       display: none;
 
       li {
@@ -100,10 +107,11 @@
 
 
   // NAV BUTTON STYLES
-  .main-nav-button {
+  .main-nav-button,
+  .main-nav-button.md-button {
     line-height: 56px;
     display: inline-block;
-    color: $snow;
+    color: $white;
     text-decoration: none;
     padding: 0px ($unit * 2);
     text-transform: uppercase;
@@ -117,9 +125,10 @@
     letter-spacing: 0.16px;
     margin: 0;
     min-width: auto;
+    transition: all .3s;
 
     &:hover {
-      background: $ocean;
+      background-color: $blue-600;
     }
 
     // ICONS
@@ -138,7 +147,7 @@
   }
 
   // DROPDOWN TRIGGER BUTTON
-  .main-nav-mobile-trigger {
+  .main-nav-button.main-nav-mobile-trigger {
     display: none;
     padding: 0px (24px + $unit) 0px $unit;
     font-size: 14px;
@@ -150,10 +159,7 @@
     }
 
     // Show sitemap menu
-    @media handheld and (max-width: $phone-breakpoint),
+    @include respond-to('mobile') {
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint),
-    screen and (max-width: 960px) {
       display: inline-block;
     }
   }

public/resources/css/module/_shadow.scss

@@ -12,21 +12,21 @@
 }
 
 .shadow-1 {
-  box-shadow: 0 1px 4px 0 rgba($coal, 0.37);
+  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
 }
 
 .shadow-2 {
-  box-shadow: 0 2px 2px 0 rgba($coal, 0.2), 0 6px 10px 0 rgba($coal, 0.3);
+  box-shadow: 0 2px 2px 0 rgba($black, 0.2), 0 6px 10px 0 rgba($black, 0.3);
 }
 
 .shadow-3 {
-  box-shadow: 0 11px 7px 0 rgba($coal, 0.19),0 13px 25px 0 rgba($coal, 0.3);
+  box-shadow: 0 11px 7px 0 rgba($black, 0.19),0 13px 25px 0 rgba($black, 0.3);
 }
 
 .shadow-4 {
-  box-shadow: 0 14px 12px 0 rgba($coal, 0.17), 0 20px 40px 0 rgba($coal, 0.3);
+  box-shadow: 0 14px 12px 0 rgba($black, 0.17), 0 20px 40px 0 rgba($black, 0.3);
 }
 
 .shadow-5 {
-  box-shadow: 0 17px 17px 0 rgba($coal, 0.15), 0 27px 55px 0 rgba($coal, 0.3);
+  box-shadow: 0 17px 17px 0 rgba($black, 0.15), 0 27px 55px 0 rgba($black, 0.3);
 }

public/resources/css/module/_side-nav.scss

@@ -1,281 +1,287 @@
 /*
 * Side Navigation
 *
+* Left Navigation used in Documenation
 */
 
-.side-nav {
+
-  background: $mist;
+/*
-  box-shadow: 3px 0px 6px rgba($coal, .3);
+* Variables
-  width: 232px;
+*/
+
+$sidenav: '.sidenav'; // Classname
+$sidenav-background: $blue-grey-50;
+$sidenav-background-dark: $blue-grey-200;
+$sidenav-color: $blue-grey-400;
+$sidenav-color-selected: $blue-600;
+$sidenav-width: 240px;
+
+
+
+/*
+* Class
+*/
+
+#{$sidenav} {
+  background: $sidenav-background;
+  box-shadow: 3px 0px 6px rgba($black, .24);
+  padding-bottom: 72px;
+  width: $sidenav-width;
   bottom: 0px;
   overflow: auto;
 
-  @media handheld and (max-width: $phone-breakpoint),
+  // MOBILE STYLE FOR DROPDOWN & TOGGLE
-  screen and (max-device-width: $phone-breakpoint),
+  @include respond-to('mobile') {
-  screen and (max-width: $tablet-breakpoint) {
+    box-shadow: 0px 3px 6px rgba($black, .24);
-    box-shadow: 0px 3px 6px rgba($coal, .3);
     width: auto;
-    left: 0px;
+    left: 0;
-    right: 0px;
+    right: 0;
     bottom: auto;
+    padding-bottom: 0;
+
+    #{$sidenav}-links  {
+      display: none;
+    }
+
+    &.is-visible {
+      bottom: 0;
+      padding-bottom: 72px;
+
+      #{$sidenav}-links  {
+        display: block;
+      }
+    }
   }
 
   .is-hidden {
     display: none;
   }
+}
 
-  // SEARCH BOX
-  .side-nav-search {
-    background: $tin;
-    padding: $unit;
-    height: $unit * 6;
-    border-bottom: 1px solid $fog;
-    position: relative;
-    height: auto; /* flat nav asked for it. why? */
 
-    @media handheld and (max-width: $phone-breakpoint),
+/*
-    screen and (max-device-width: $phone-breakpoint),
+* Side Nav Search
-    screen and (max-width: $tablet-breakpoint) {
+*/
-      border-bottom: none;
+
-      padding-right: $unit * 14;
+#{$sidenav}-search {
-      overflow: hidden;
+  background: $sidenav-background-dark;
+  box-sizing: border-box;
+  box-shadow: none;
+  padding: $unit;
+  height: $unit * 6;
+  position: relative;
+
+  @include respond-to('mobile') {
+    border-bottom: none;
+    padding-right: $unit * 14;
+    overflow: hidden;
+  }
+
+  input {
+    border: none;
+    border-radius: 200px;
+    box-sizing: border-box;
+    color: $sidenav-color;
+    display: inline-block;
+    font-size: 14px;
+    height: 32px;
+    margin: 0px;
+    padding: 0px $unit;
+    width: 100%;
+
+    // PLACEHOLDER TEXT
+    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+      color: $blue-grey-100;
+      font-size: 12px;
     }
+    &::-moz-placeholder { /* Firefox 19+ */
+      color: $blue-grey-100;
+      font-size: 12px;
+    }
+    &:-ms-input-placeholder { /* IE 10+ */
+      color: $blue-grey-100;
+      font-size: 12px;
+    }
+    &:-moz-placeholder { /* Firefox 18- */
+      color: $blue-grey-100;
+      font-size: 12px;
+    }
+  }
 
-    input {
+  .mobile-trigger {
-      border: none;
+    position: absolute;
-      border-radius: 200px;
+    top: 0;
-      width: 100%;
+    right: $unit * 0.2;
-      box-sizing: border-box;
+    border: none;
-      height: 30px;
+    background: darken($tin, 5%);
-      padding: 0px $unit;
+    color: $snow;
-      margin: 0px;
+    padding-right: $unit * 4;
-      font-size: 14px !important;
+    display: none;
+
+    @include respond-to('mobile') {
       display: inline-block;
     }
 
-    .mobile-trigger {
+    .icon {
       position: absolute;
-      top: 0;
+      top: 5px;
-      right: $unit * 0.2;
+      right: $unit;
-      border: none;
+      z-index: $layer-1;
-      background: darken($tin, 5%);
+      font-size: 20px;
-      color: $snow;
+      opacity: .87;
-      padding-right: $unit * 4;
-      display: none;
-
-      @media handheld and (max-width: $phone-breakpoint),
-      screen and (max-device-width: $phone-breakpoint),
-      screen and (max-width: $tablet-breakpoint) {
-        display: inline-block;
-      }
-
-      .icon {
-        position: absolute;
-        top: 5px;
-        right: $unit;
-        z-index: $layer-1;
-        font-size: 20px;
-        opacity: .87;
-      }
-    }
-  }
-
-  .is-nav-title-selected {
-    color: $regal !important;
-    background-color: #DCE2E5 !important;
-  }
-
-  // PRIMARY SIDENAV BUTTON
-  .side-nav-primary {
-    list-style-type: none;
-    margin: 0px;
-    padding: 0px;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      display: none;
-    }
-
-    > li {
-      margin: 0px;
-      padding: 0px;
-      border-bottom: 1px solid $fog;
-
-      &.is-selected  {
-        > a {
-          background: $fog;
-          color: $regal;
-
-          .side-nav-icon {
-            color: $regal;
-          }
-        }
-      }
-
-      > a {
-        line-height: ($unit * 6) - 1;
-        padding: 0px ($unit * 2) 0px ($unit * 6);
-        color: $metal;
-        font-size: 14px;
-        text-align: left;
-        font-weight: 400;
-        position: relative;
-        text-decoration: none;
-        display: block;
-        text-transform: uppercase;
-      }
-
-      .side-nav-icon {
-        position: absolute;
-        top: 0px;
-        left: 16px;
-        z-index: $layer-1;
-        font-size: 19px;
-        color: $cloud;
-        line-height: 47px;
-      }
-    }
-  }
-
-
-  // SECONDARY SIDENAV
-  .side-nav-secondary {
-    @extend .side-nav-primary;
-    background-color: #DCE2E5;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      display: none;
-      max-height: ($phone-breakpoint * 0.60);
-    }
-
-    // FLAT NAV (.nav)
-    .nav-blocks {
-      margin: 0;
-      padding: 0;
-      border-bottom: 1px solid $fog;
-      color: $heather;
-
-      a {
-        text-decoration: none;
-        color: $metal;
-        display: block;
-      }
-
-      ul {
-        list-style: none;
-        padding: 0;
-        margin: 0
-      }
-
-      div, li {
-        &.is-selected  {
-          > a {
-            background: #CDD5DA;
-            color: #1E88E5;
-          }
-        }
-      }
-
-      li {
-        min-height: ($unit * 2);
-        position: relative;
-      }
-    }
-
-    .nav-blocks:last-child {
-        border: none
-    }
-
-    .nav-title,
-    .nav-sub-title {
-        text-transform: uppercase;
-        font-weight: 500; //medium
-        color: #78909C;
-    }
-
-    .nav-title {
-        font-size: 14px;
-
-        padding: ($unit * 2) ($unit * 2);
-        margin: 0;
-        background-color: #ECEFF1;
-
-        .inline-arrow-down-svg {
-          float: right;
-          opacity: 0.56;
-        }
-
-        a {
-          display: inline;
-        }
-    }
-
-    .nav-primary-link {
-        position: relative;
-
-        a {
-          padding-left: 16px;
-          padding-top: 16px;
-          padding-bottom: 16px;
-        }
-    }
-
-    .nav-sub-title {
-        font-size: ($unit * 1.5);
-        padding: ($unit * 1) 0;
-    }
-
-    .nav-active a {
-        color: $regal;
-        background: $lightgrey;
-        font-weight: 500; //medium
-    }
-
-    .nav-unordered-lists, .nav-ordered-lists {
-      // Apply inset shadows to the list under the title
-      box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24), inset 0 -2px 2px rgba(0, 0, 0, 0.08);
-
-      // -- First Child
-      // Apply inset shadows on the first child when hovering, since the background color will cover the shadow
-      .nav-list-item:first-child {
-        &:hover {
-          box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
-        }
-      }
-
-      // Apply inset shadows on the first child when selected, since the background color will cover the shadow
-      .is-selected:first-child a {
-        box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
-      }
-
-      // -- Last Child
-      // Apply inset shadows on the last child when hovering, since the background color will cover the shadow
-      .nav-list-item:last-child {
-        &:hover {
-          box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
-        }
-      }
-
-      // Apply inset shadows on the last child when selected, since the background color will cover the shadow
-      .is-selected:last-child a {
-        box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
-      }
-    }
-
-    .nav-list-item {
-      a {
-        font-size: 13px;
-        font-weight: 400; //medium
-        padding-left: $unit * 2;
-        line-height: 32px;
-      }
-
-      &:hover {
-        background-color: #CFD8DC;
-      }
     }
   }
 }
+
+/*
+* Section Dividers
+*/
+
+#{$sidenav} #{$sidenav}-section-divider {
+  background: $sidenav-background-dark;
+  border: none;
+  color: $white;
+  font-size: 10px;
+  line-height: $unit * 3;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+
+  h3 {
+    font-weight: 400;
+    margin: 0;
+    padding: 0 ($unit * 2);
+  }
+}
+
+
+/*
+* Navigation Links
+*/
+
+#{$sidenav}-links {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+
+  // SIDENAV MAIN SECTIONS
+  #{$sidenav}-section {
+    border-bottom: 1px solid rgba($blue-grey-100, .56);
+    color: $sidenav-color;
+    margin: 0;
+    padding: 0;
+
+    &.no-border {
+      border: none;
+
+      > a {
+        line-height: $unit * 6;
+      }
+    }
+
+    > a {
+      box-sizing: border-box;
+      color: $sidenav-color;
+      display: block;
+      font-size: 13px;
+      font-weight: 400;
+      line-height: ($unit * 6) - 1;
+      text-decoration: none;
+      padding: 0 ($unit * 2);
+      position: relative;
+
+      &.is-selected {
+        background: rgba($blue-grey-100, .56);
+        color: $sidenav-color-selected;
+        font-weight: 600;
+      }
+
+      &.is-selected.is-parent {
+        box-shadow: 0 2px 2px rgba($black, .24);
+      }
+    }
+
+    .inline-arrow-down-svg {
+      opacity: .56;
+      position: absolute;
+      right: $unit;
+      top: $unit + 4;
+      z-index: $layer-1;
+    }
+
+    ul {
+      background: rgba($blue-grey-100, .56);
+      list-style: none;
+      padding: 0;
+      margin: 0
+    }
+
+    li {
+      margin: 0;
+      padding: 0;
+
+      &.is-selected  {
+        > a {
+          background: rgba($blue-grey-100, .87);
+          color: $sidenav-color-selected;
+          font-weight: 600;
+        }
+      }
+    }
+
+    li a {
+      color: $sidenav-color;
+      font-size: 12px;
+      display: block;
+      line-height: $unit * 4;
+      padding: 0 ($unit * 2);
+      transition: all .2s;
+
+      &:hover {
+        background: rgba($white, .24);
+        color: $sidenav-color-selected;
+        text-decoration: none;
+      }
+    }
+  }
+
+  > li {
+    margin: 0px;
+    padding: 0px;
+    border-bottom: 1px solid $fog;
+
+    &.is-selected  {
+      > a {
+        background: $fog;
+        color: $regal;
+
+        #{$sidenav}-icon {
+          color: $regal;
+        }
+      }
+    }
+
+    > a {
+      line-height: ($unit * 6) - 1;
+      padding: 0px ($unit * 2) 0px ($unit * 6);
+      color: $metal;
+      font-size: 14px;
+      text-align: left;
+      font-weight: 400;
+      position: relative;
+      text-decoration: none;
+      display: block;
+      text-transform: uppercase;
+    }
+
+    #{$sidenav}-icon {
+      position: absolute;
+      top: 0px;
+      left: 16px;
+      z-index: $layer-1;
+      font-size: 19px;
+      color: $cloud;
+      line-height: 47px;
+    }
+  }
+}

public/resources/css/module/_style-guide.scss

@@ -41,12 +41,6 @@
   margin-bottom:32px;
 }
 
-.filetree {
-  margin-bottom: 32px;
-  background-color: #FFF;
-  border:1px solid #1976D2;
-}
-
 table tr code-example .prettyprint {
   margin-bottom: 0;
 }

public/resources/css/module/_symbol.scss

@@ -0,0 +1,84 @@
+/*
+* API Symbols
+*
+*/
+
+
+/*
+* Variables
+*/
+
+$api-symbols: (
+  decorator: (
+    content: '@',
+    background: $blue-800
+  ),
+  directive: (
+    content: 'D',
+    background: $pink-600
+  ),
+  pipe: (
+    content: 'P',
+    background: $blue-grey-600
+  ),
+  class: (
+    content: 'C',
+    background: $blue-500
+  ),
+  interface: (
+    content: 'I',
+    background: $teal-500
+  ),
+  function: (
+    content: 'F',
+    background: $green-500
+  ),
+  enum: (
+    content: 'E',
+    background: $amber-700
+  ),
+  var: (
+    content: 'K',
+    background: $purple-600
+  ),
+  let: (
+    content: 'K',
+    background: $purple-600
+  ),
+  const: (
+    content: 'K',
+    background: $purple-600
+  ),
+  type-alias: (
+    content: 'T',
+    background: $blue-grey-50
+  )
+);
+
+
+/*
+* Symbol Class
+*/
+
+.symbol {
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba($black, .24);
+  color: $white;
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: $unit * 2;
+  text-align: center;
+  width: $unit * 2;
+
+  // SYMBOL TYPES
+  @each $name, $symbol in $api-symbols {
+    &.#{$name} {
+      background: map-get($symbol, background);
+
+      &:before {
+        content: map-get($symbol, content);
+      }
+    }
+  }
+}

public/resources/js/directives/api-list.js

@@ -4,17 +4,24 @@ angularIO.directive('apiList', function () {
   return {
     restrict: 'E',
     template:
-      '<div ng-cloak="ng-cloak" class="banner">' +
+      '<div ng-cloak="ng-cloak" class="banner is-plain api-filter clearfix">' +
-      '  <dl class="api-key">' +
+      '  <div class="form-select-menu">' +
-      '    <dt>Display:</dt>' +
+      '    <button ng-repeat="apiType in $ctrl.apiTypes" ng-if="$ctrl.apiType === apiType" class="form-select-button has-symbol" ng-click="$ctrl.toggleMenu()"><strong>Type:</strong><span class="symbol {{apiType.cssClass}}" ng-if="apiType.cssClass !== \'stable\'" ></span>{{apiType.title}}</button>'+
-      '    <dd ng-class="{ active: !$ctrl.apiType }" ng-click="$ctrl.apiType = null">All</dd>' +
+      '    <button class="form-select-button is-default" ng-if="$ctrl.apiType === null" ng-click="$ctrl.toggleMenu()"><strong>All Types</strong></button>'+
-      '    <dd ng-repeat="apiType in $ctrl.apiTypes" ng-class="{ active: $ctrl.apiType === apiType }" ng-click="$ctrl.setType(apiType)" class="{{apiType.cssClass}}">{{apiType.title}}</dd>' +
+      '    <ul class="form-select-dropdown" ng-class="{ visible: $ctrl.showMenu === true }">' +
-      '  </dl>' +
+      '      <li ng-class="{ active: !$ctrl.apiType }" ng-click="$ctrl.clearType()">All Types</li>' +
-      '  <input placeholder="Filter" ng-model="$ctrl.apiFilter" ng-model-options="{updateOn: \'default blur\', debounce: {\'default\': 350, \'blur\': 0}}" class="api-filter">' +
+      '      <li ng-repeat="apiType in $ctrl.apiTypes" ng-class="{ active: $ctrl.apiType === apiType }" ng-click="$ctrl.setType(apiType)"><span class="symbol {{apiType.cssClass}}"></span>{{apiType.title}}</li>' +
+      '    </ul>' +
+      '    <div class="overlay" ng-class="{ visible: $ctrl.showMenu === true }" ng-click="$ctrl.toggleMenu()"></div>' +
+      '  </div>' +
+      '  <div class="form-search">' +
+      '    <i class="material-icons">search</i>' +
+      '    <input placeholder="Filter" ng-model="$ctrl.apiFilter" ng-model-options="{updateOn: \'default blur\', debounce: {\'default\': 350, \'blur\': 0}}">' +
+      '  </div>' +
       '</div>' +
       '<article class="l-content-small grid-fluid docs-content">' +
       '  <div ng-repeat="section in $ctrl.groupedSections" ng-if="$ctrl.isFiltered(section)" ng-cloak="ng-cloak">' +
-      '    <h3>{{ section.title }}</h3>' +
+      '    <h2>{{ section.title }}</h2>' +
       '    <ul class="api-list">' +
       '      <li ng-repeat="item in section.items" ng-show="item.show" class="api-item">' +
       '        <a ng-href="{{ item.path }}"><span class="symbol {{ item.docType }}"></span>{{ item.title }}</a>' +
@@ -26,10 +33,12 @@ angularIO.directive('apiList', function () {
     controller: function($scope, $attrs, $http, $location) {
       var $ctrl = this;
 
+      $ctrl.showMenu = false;
+
       var isForDart = $attrs.lang === 'dart';
 
       $ctrl.apiTypes = [
-        { cssClass: 'stable', title: 'Stable', matches: ['stable']},
+        { cssClass: 'stable', title: 'Only Stable', matches: ['stable']},
         { cssClass: 'directive', title: 'Directive', matches: ['directive'] },
         { cssClass: 'pipe', title: 'Pipe', matches: ['pipe'] },
         { cssClass: 'decorator', title: 'Decorator', matches: ['decorator'] },
@@ -51,6 +60,16 @@ angularIO.directive('apiList', function () {
       $ctrl.setType = function (type) {
         if (type === $ctrl.apiType) $ctrl.apiType = null;
         else $ctrl.apiType = type;
+        $ctrl.showMenu = !$ctrl.showMenu;
+      };
+
+      $ctrl.clearType = function () {
+        $ctrl.apiType = null;
+        $ctrl.showMenu = !$ctrl.showMenu;
+      };
+
+      $ctrl.toggleMenu = function () {
+        $ctrl.showMenu = !$ctrl.showMenu;
       };
 
       $ctrl.isFiltered = function(section) {
@@ -89,7 +108,7 @@ angularIO.directive('apiList', function () {
       });
 
       $scope.$watchGroup(
-        [function() { return $ctrl.apiFilter}, function() { return $ctrl.apiType; }, function() { return $ctrl.sections; }],
+        [function() { return $ctrl.apiFilter; }, function() { return $ctrl.apiType; }, function() { return $ctrl.sections; }],
         function() {
           var apiFilter = ($ctrl.apiFilter || '').toLowerCase();
 

public/resources/js/directives/copy.js

@@ -38,18 +38,32 @@ angularIO.directive('copyContainer', function() {
  * but the content element itself most be available at link time.
  */
 angularIO.directive('copyButton', function() {
+  var buttonLabel = "Copy Code";
+
   return {
     restrict: 'E',
     template:
-      '<md-button class="md-icon-button">\n' +
+      '<md-button class="md-copy-button">\n' +
-      '  <md-icon md-font-icon="icon-content-copy" alt="Copy to Clipboard"></md-icon>\n' +
+      buttonLabel + '\n' +
       '  <md-tooltip>Copy to Clipboard</md-tooltip>\n' +
       '</md-button>',
     link: function link(scope, element) {
       var contentElement = element.next();
       var clipboard = new Clipboard(element[0], {
         text: function() {
+          var button = element[0].firstChild;
+          var buttonWrapper = element;
+
           console.log('clicked', contentElement[0].innerText);
+
+          // CHANGE TEXT, THEN CHANGE BACK
+          buttonWrapper.addClass('is-copied');
+          button.innerText = 'Copied!';
+          setTimeout(function() {
+            buttonWrapper.removeClass('is-copied');
+            button.innerText = buttonLabel;
+          }, 1000);
+
           return contentElement[0].innerText; }
       });
       scope.$on('$destroy', function() {

tools/dart-api-builder/dab.js

@@ -75,7 +75,7 @@ module.exports = function dabFactory(ngIoProjPath) {
             }
             // const [, exRelPath, /*regionTagAndValue*/, region, rest] = matches;
             const rest = matches[4].trim();
-            if (rest) log.warn(enclosedByName, eltId, '@example must be the only element in a paragraph, but found:', text);                
+            if (rest) log.warn(enclosedByName, eltId, '@example must be the only element in a paragraph, but found:', text);
             const exRelPath = matches[1];
             const region = matches[3];
 
@@ -111,7 +111,7 @@ module.exports = function dabFactory(ngIoProjPath) {
         lines.shift();
         while (lines && lines.pop().trim() !== '```') {}
         const code = lines.map((line) => encoder.htmlEncode(line)).join('\n');
-        // TS uses format="linenums"; removing that for now. 
+        // TS uses format="linenums"; removing that for now.
         return `<code-example language="dart">${code}\n</code-example>`;
     }
 
@@ -215,11 +215,6 @@ extends ${baseHref}/../../../_layout-dart-api
 
 include ${baseHref}/../_util-fns
 
-block var-def
-  //- FIXME: a CSS expert needs to figure out why the header CSS needs to be patched for Dart.
-  //- This enables the patch:
-  - var fixHeroCss = 1;
-
 block head-extra
   // generated Dart API page template: head-extra
   //- <base> is required because all the links in dartdoc generated pages are "pseudo-absolute"
@@ -228,7 +223,7 @@ block head-extra
 
 block breadcrumbs
   // generated Dart API page template: breadcrumbs
-  nav.dropdown
+  .banner
     ol.breadcrumbs.gt-separated.hidden-xs
 ${breadcrumbs}