Fix dartdoc styles and prep layout for ng2 pages (#2530)

- Use custom bootstrap grid system styles
- Cache a copy of the dartdoc static-assets styles.css w/ footer styles
disabled.
- Alternate page layout controlled by jade2ng harp global

gulpfile.js

@@ -50,6 +50,8 @@ var regularPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/regularPl
 var embeddedPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/embeddedPlunker'));
 var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils'));
 
+const WWW = argv.page ? 'www-pages' : 'www'
+
 const isSilent = !!argv.silent;
 if (isSilent) gutil.log = gutil.noop;
 const _dgeniLogLevel = argv.dgeniLog || (isSilent ? 'error' : 'info');
@@ -747,7 +749,7 @@ gulp.task('harp-serve', () => {
 
 gulp.task('serve-www', () => {
   // Serve generated site.
-  return execPromise('npm run live-server ./www');
+  return execPromise(`npm run live-server ${WWW}`);
 });
 
 gulp.task('build-compile', ['build-docs'], function() {
@@ -758,7 +760,7 @@ gulp.task('check-deploy', ['build-docs'], function() {
   return harpCompile().then(function() {
     gutil.log('compile ok');
     gutil.log('running live server ...');
-    execPromise('npm run live-server ./www');
+    execPromise(`npm run live-server ${WWW}`);
     return askDeploy();
   }).then(function(shouldDeploy) {
     if (shouldDeploy) {
@@ -902,11 +904,13 @@ function harpCompile() {
   env({ vars: { NODE_ENV: "production" } });
   gutil.log("NODE_ENV: " + process.env.NODE_ENV);
 
-  if(skipLangs && fs.existsSync('www') && backupApiHtmlFilesExist('www')) {
+  if(argv.page) harpJsonSetJade2NgTo(true);
+  
+  if(skipLangs && fs.existsSync(WWW) && backupApiHtmlFilesExist(WWW)) {
     gutil.log(`Harp site recompile: skipping recompilation of API docs for [${skipLangs}]`);
-    gutil.log(`API docs will be copied from existing www folder.`)
+    gutil.log(`API docs will be copied from existing ${WWW} folder.`)
-    del.sync('www-backup'); // remove existing backup if it exists
+    del.sync(`${WWW}-backup`); // remove existing backup if it exists
-    renameIfExistsSync('www', 'www-backup');
+    renameIfExistsSync(WWW, `${WWW}-backup`);
   } else {
     gutil.log(`Harp full site compile, including API docs for all languages.`);
     if (skipLangs)
@@ -918,11 +922,12 @@ function harpCompile() {
   gutil.log('running harp compile...');
   showHideExampleNodeModules('hide');
   showHideApiDir('hide');
-  var spawnInfo = spawnExt('npm',['run','harp', '--', 'compile', '.', './www' ]);
+  var spawnInfo = spawnExt('npm',['run','harp', '--', 'compile', '.', WWW ]);
   spawnInfo.promise.then(function(x) {
     gutil.log("NODE_ENV: " + process.env.NODE_ENV);
     showHideExampleNodeModules('show');
     showHideApiDir('show');
+    harpJsonSetJade2NgTo(false);
     if (x !== 0) {
       deferred.reject(x)
     } else {
@@ -933,6 +938,7 @@ function harpCompile() {
     gutil.log("NODE_ENV: " + process.env.NODE_ENV);
     showHideExampleNodeModules('show');
     showHideApiDir('show');
+    harpJsonSetJade2NgTo(false);
     deferred.reject(e);
   });
   return deferred.promise;
@@ -1050,21 +1056,21 @@ function _showHideApiDir(lang, showOrHide) {
   renameIfExistsSync(...args);
 }
 
-// For each lang in skipLangs, copy the API dir from www-backup to www.
+// For each lang in skipLangs, copy the API dir from ${WWW}-backup to WWW.
 function restoreApiHtml() {
   const vers = 'latest';
   skipLangs.forEach(lang => {
     const relApiDir = path.join('docs', lang, vers, 'api');
-    const wwwApiSubdir = path.join('www', relApiDir);
+    const apiSubdir = path.join(WWW, relApiDir);
-    const backupApiSubdir = path.join('www-backup', relApiDir);
+    const backupApiSubdir = path.join(`${WWW}-backup`, relApiDir);
     if (fs.existsSync(backupApiSubdir) || argv.forceSkipApi !== true) {
-      gutil.log(`cp ${backupApiSubdir} ${wwwApiSubdir}`)
+      gutil.log(`cp ${backupApiSubdir} ${apiSubdir}`)
-      fs.copySync(backupApiSubdir, wwwApiSubdir);
+      fs.copySync(backupApiSubdir, apiSubdir);
     }
   });
 }
 
-// For each lang in skipLangs, ensure API dir exists in www-backup
+// For each lang in skipLangs, ensure API dir exists in folderName
 function backupApiHtmlFilesExist(folderName) {
   const vers = 'latest';
   var result = 1;
@@ -1079,6 +1085,14 @@ function backupApiHtmlFilesExist(folderName) {
   return result;
 }
 
+function harpJsonSetJade2NgTo(v) {
+  const execSync = require('child_process').execSync;
+  const harpJsonPath = path.join(ANGULAR_IO_PROJECT_PATH, 'harp.json');
+  execSync(`perl -pi -e 's/("jade2ng": *)\\w+/$1${v}/' ${harpJsonPath}`);
+  const harpJson = require(harpJsonPath);
+  gutil.log(`jade2ng: ${harpJson.globals.jade2ng}`);
+}
+
 // Copies fileNames into destPaths, setting the mode of the
 // files at the destination as optional_destFileMode if given.
 // returns a promise

harp.json

@@ -6,6 +6,7 @@
     "siteURL": "http://angular.io",
     "jsLatest": "2.0.0-beta.02",
     "dartLatest": "2.0.0-beta.02",
+    "jade2ng": false,
 
     "bios": {
       "misko": {

public/_includes/_hero.jade

@@ -1,4 +1,4 @@
-// template: public/_includes/_hero
+//- template: public/_includes/_hero
 //- Refer to jade.template.html and addJadeDataDocsProcessor to figure out where the context of this jade file originates
 - var textFormat = '';
 - var headerTitle = title + (typeof varType !== 'undefined' ? (': ' + varType) : '');
@@ -24,16 +24,14 @@ header.hero.background-sky
       span(class="badge is-deprecated").
         Security Risk
 
-  //CLEAR FLOAT ELEMENTS
+  //- CLEAR FLOAT ELEMENTS
   .clear
 
   if subtitle
     h2.hero-subtitle #{subtitle}
-
   else if docType
     h2.hero-subtitle #{renamer(capitalize(docType))}
 
-
+  if current.path[3] == 'api' && current.path[1] == 'dart'
-if current.path[3] == 'api' && current.path[1] == 'dart'
+    block breadcrumbs
-  block breadcrumbs
 

public/_includes/_util-fns.jade

@@ -300,7 +300,7 @@ if !jade2ng
 -   } else {
 -     // ``` gets translated to <pre><code>.....</code></pre> and we need
 -     // to remove this from the fragment prefix is 11 long and suffix is 13 long
--     frag = jade2ng ? frag : frag.substring(11, frag.length-13);
+-     frag = frag.substring(11, frag.length-13);
 -     // Uncomment next line for debugging.
 -     // frag = "FileName: " + fullFileName + "   Current path: " + current.path +  " PathToDocs: " + getPathToDocs() + "\n" + frag;
 -     return frag;

public/docs/_layout-dart-api.jade

@@ -1,40 +1,51 @@
 //- WARNING: _layout.jade and _layout-dart-api.jade should match in terms of content
 //- except that one uses Harp partial/yield and the other uses Jade extends/include.
-doctype
+if jade2ng
-html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
+  .side-nav--offset
-  // template: public/docs/_layout-dart-api
+    link(rel="stylesheet" href="/assets/css/vendor/dartdoc/bootstrap.min.css")
-  head
+    link(rel="stylesheet" href="/assets/css/vendor/dartdoc/styles.css")
-    include ../_includes/_head-include
-    block head-extra
-
-  block var-def
-  body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
-    include ../_includes/_main-nav
-    if current.path[2]
-      include _includes/_side-nav
     include ../_includes/_hero
     include ../_includes/_banner
+    .l-content-small.grid-fluid.docs-content
+      block main-content
+else
+  doctype
+  html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
+    // template: public/docs/_layout-dart-api
+    head
+      include ../_includes/_head-include
+      link(rel="stylesheet" href="/resources/css/vendor/dartdoc/bootstrap.min.css")
+      link(rel="stylesheet" href="/resources/css/vendor/dartdoc/styles.css")
+      block head-extra
 
-    if current.path[3] == 'api'
+    block var-def
-      if current.path[4] == 'index'
+    body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
+      include ../_includes/_main-nav
+      if current.path[2]
+        include _includes/_side-nav
+      include ../_includes/_hero
+      include ../_includes/_banner
+
+      if current.path[3] == 'api'
+        if current.path[4] == 'index'
+          block main-content
+        else
+          article(class="l-content-small grid-fluid docs-content")
+            block main-content
+      else if current.path.indexOf('cheatsheet') > 0
         block main-content
       else
-        article(class="l-content-small grid-fluid docs-content")
+        if current.path[3] == 'index' || current.path[3] == 'styleguide'
-          block main-content
+          article(class="l-content-small grid-fluid docs-content")
-    else if current.path.indexOf('cheatsheet') > 0
+            block main-content
-      block main-content
+        else
-    else
+          article(class="l-content-small grid-fluid docs-content")
-      if current.path[3] == 'index' || current.path[3] == 'styleguide'
+            div(class="c10")
-        article(class="l-content-small grid-fluid docs-content")
+              .showcase
-          block main-content
+                .showcase-content
-      else
+                  block main-content
-        article(class="l-content-small grid-fluid docs-content")
+                  if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-          div(class="c10")
+                    include ../_includes/_next-item
-            .showcase
-              .showcase-content
-                block main-content
-                if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-                  include ../_includes/_next-item
 
-    include ../_includes/_footer
+      include ../_includes/_footer
-    include ../_includes/_scripts-include
+      include ../_includes/_scripts-include

public/docs/_layout.jade

@@ -1,37 +1,44 @@
 //- WARNING: _layout.jade and _layout-dart-api.jade should match in terms of content
 //- except that one uses Harp partial/yield and the other uses Jade extends/include.
-doctype
+if jade2ng
-html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
+  .side-nav--offset
-  // template: public/docs/_layout
-  head
-    != partial("../_includes/_head-include")
-    block head-extra
-
-  //-
-  body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
-    != partial("../_includes/_main-nav")
-    if current.path[2]
-      != partial("_includes/_side-nav")
     != partial("../_includes/_hero")
     != partial("../_includes/_banner")
+    .l-content-small.grid-fluid.docs-content
+      != yield    
+else
+  doctype
+  html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
+    // template: public/docs/_layout
+    head
+      != partial("../_includes/_head-include")
+      block head-extra
 
-    if current.path[3] == 'api'
+    //-
-      if current.path[4] == 'index'
+    body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
+      != partial("../_includes/_main-nav")
+      if current.path[2]
+        != partial("_includes/_side-nav")
+      != partial("../_includes/_hero")
+      != partial("../_includes/_banner")
+
+      if current.path[3] == 'api'
+        if current.path[4] == 'index'
+          != yield
+        else
+          article(class="l-content-small grid-fluid docs-content")
+            != yield
+      else if current.path.indexOf('cheatsheet') > 0
         != yield
       else
-        article(class="l-content-small grid-fluid docs-content")
+        if current.path[3] == 'index' || current.path[3] == 'styleguide'
-          != yield
+          article(class="l-content-small grid-fluid docs-content")
-    else if current.path.indexOf('cheatsheet') > 0
+            != yield
-      != yield
+        else
-    else
+          article(class="l-content-small grid-fluid docs-content")
-      if current.path[3] == 'index' || current.path[3] == 'styleguide'
+            != yield
-        article(class="l-content-small grid-fluid docs-content")
+              if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-          != yield
+                != partial("../_includes/_next-item")
-      else
-        article(class="l-content-small grid-fluid docs-content")
-          != yield
-            if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-              != partial("../_includes/_next-item")
 
-    != partial("../_includes/_footer")
+      != partial("../_includes/_footer")
-    != partial("../_includes/_scripts-include")
+      != partial("../_includes/_scripts-include")

public/resources/css/vendor/dartdoc/styles.css

@@ -0,0 +1,757 @@
+/* This is a copy of the dartdoc static-assets/styles.css as of 2016/10/03 but with footer styles disabled. */
+
+/* Palette generated by Material Palette - materialpalette.com/blue/cyan */
+
+.dark-primary-color    { background: #1976D2; }
+.default-primary-color { background: #2196F3; }
+.light-primary-color   { background: #BBDEFB; }
+.text-primary-color    { color: #FFFFFF; }
+.accent-color          { background: #00BCD4; }
+.primary-text-color    { color: #212121; }
+.secondary-text-color  { color: #727272; }
+.divider-color         { border-color: #B6B6B6; }
+
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  font-size: 15px;
+  margin-bottom: 60px;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  overflow-x: hidden;
+  color: #212121;
+}
+
+nav {
+  font-size: 17px;
+}
+
+/* some of this is to reset bootstrap */
+nav.navbar {
+  background-color: inherit;
+  min-height: 48px;
+  border: 0;
+}
+
+nav.navbar .row {
+  padding-top: 8px;
+}
+
+nav .container {
+  white-space: nowrap;
+}
+
+@media screen and (min-width: 500px) and (max-width: 768px) {
+  .navbar-right {
+      float: right!important;
+  }
+}
+
+header {
+  background-color: rgb(0, 102, 152);
+  color: white;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+}
+
+header.header-fixed nav.navbar-fixed-top {
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+}
+
+header.container-fluid {
+  padding: 0;
+}
+
+header .masthead {
+  padding-top: 64px;
+}
+
+header .contents {
+  padding: 0;
+}
+
+@media screen and (max-width:768px) {
+  header .contents {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
+.body {
+  margin-top: 24px;
+}
+
+section {
+  margin-bottom: 36px;
+}
+
+dl {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+  margin: 0;
+}
+
+h1.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+h2 {
+  font-size: 24px;
+}
+
+h5 {
+  font-size: 16px;
+}
+
+strong {
+  font-weight: 500;
+}
+
+.subtitle {
+  font-size: 17px;
+  min-height: 1.4em;
+}
+
+.title-description .subtitle {
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+p {
+  margin-bottom: 1em;
+}
+
+a, a:hover {
+  color: rgb(0, 102, 152);
+}
+
+pre.prettyprint {
+  font-family: 'Source Code Pro', monospace;
+  color: black;
+  border-radius: 4px;
+  font-size: 14px;
+  word-wrap: normal;
+  line-height: 1.4;
+  background: #f7f7f7;
+  border: 1px solid #ddd;
+  margin: 16px 0 16px 0;
+  padding: 8px;
+}
+
+pre code {
+  white-space: pre;
+  word-wrap: initial;
+}
+
+.fixed {
+  white-space: pre;
+}
+
+pre {
+  border: 1px solid #ddd;
+  background-color: #f7f7f7;
+  font-size: 14px;
+}
+
+code {
+  font-family: 'Source Code Pro', monospace;
+  /* overriding bootstrap */
+  color: inherit;
+  background-color: #f7f7f7;
+}
+
+h2 .crossdart {
+  float: right;
+  font-size: 0.5em;
+  margin-top: 1em;
+}
+
+.crossdart-link {
+  border-bottom: 1px solid #dfdfdf;
+  text-decoration: none;
+}
+
+.crossdart-link:hover {
+  border-bottom: 1px solid #aaa;
+  text-decoration: none;
+}
+
+@media(max-width: 768px) {
+  nav .container {
+    width: 100%
+  }
+
+  h1 {
+    font-size: 24px;
+  }
+
+  pre {
+    margin: 16px 0;
+  }
+}
+
+@media (min-width: 768px) {
+  .dl-horizontal dd {
+    margin-left: 128px;
+  }
+
+  .dl-horizontal dt {
+    width: 128px;
+  }
+
+  ul.subnav li {
+    font-size: 17px;
+  }
+}
+
+header h1 {
+  font-weight: 400;
+  margin-bottom: 16px;
+}
+
+header a,
+header a:hover,
+header p,
+header li {
+  color: white;
+}
+
+header h1 .kind {
+  color: #ddd;
+  text-transform: uppercase;
+  font-size: 15px;
+  display: block;
+}
+
+@media screen and (max-width: 768px) {
+  header h1 .kind {
+    font-size: 14px;
+  }
+}
+
+dt {
+  font-weight: normal;
+}
+
+dd {
+  color: #212121;
+  margin-bottom: 1em;
+}
+
+dd.callable, dd.constant, dd.property {
+  margin-bottom: 24px;
+}
+
+dd p {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 0;
+}
+
+section.summary h2 {
+  color: #727272;
+  margin-bottom: 16px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid #ddd;
+}
+
+/* indents wrapped lines */
+section.summary dt {
+  margin-left: 24px;
+  text-indent: -24px;
+}
+
+dl.dl-horizontal dt {
+  font-style: normal;
+  text-align: left;
+  color: #727272;
+}
+
+dl.dl-horizontal dt::after {
+  content: ':';
+}
+
+dt .name {
+  font-weight: 500;
+}
+
+dl dt.callable .name {
+  float: none;
+  width: auto;
+}
+
+.parameter {
+  white-space: nowrap;
+}
+
+.signature {
+  color: #727272;
+}
+
+.signature a {
+  /* 50% mix of default-primary-color and primary-text-color. */
+  color: #4674a2;
+}
+
+.optional {
+  font-style: italic;
+}
+
+.undocumented {
+  font-style: italic;
+}
+
+.is-const {
+  font-style: italic;
+}
+
+.deprecated {
+  text-decoration: line-through;
+}
+
+p.firstline {
+  font-weight: bold;
+}
+
+footer-disabled-for-ng2io {
+  padding: 20px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+}
+
+footer-disabled-for-ng2io p {
+  margin: 0;
+  color: #555;
+}
+
+footer-disabled-for-ng2io .no-break {
+  white-space: nowrap;
+}
+
+footer-disabled-for-ng2io .container,
+footer-disabled-for-ng2io .container-fluid {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.copyright a {
+  color: #555;
+}
+
+.markdown h1 {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.markdown h2 {
+  font-size: 20px;
+  margin-top: 24px;
+  margin-bottom: 8px;
+}
+
+.markdown h3 {
+  font-size: 18px;
+  margin-bottom: 8px;
+}
+
+.markdown h4 {
+  font-size: 16px;
+  margin-bottom: 0;
+}
+
+.markdown li p {
+  margin: 0;
+}
+
+.gt-separated {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.gt-separated li {
+  display: inline-block;
+}
+
+.gt-separated li:before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='#DDDDDD' d='M6.7,4L5.7,4.9L8.8,8l-3.1,3.1L6.7,12l4-4L6.7,4z'/></svg>");
+  background-position: center;
+  content: "\00a0";
+  margin: 0 6px 0 4px;
+}
+
+.gt-separated.dark li:before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='#727272' d='M6.7,4L5.7,4.9L8.8,8l-3.1,3.1L6.7,12l4-4L6.7,4z'/></svg>");
+}
+
+.gt-separated li:first-child:before {
+  background-image: none;
+  content: "";
+  margin: 0;
+}
+
+/* The slug line under a declaration for things like "const", "read-only", etc. */
+.features {
+  font-style: italic;
+  color: #727272;
+}
+
+.multi-line-signature {
+  font-size: 17px;
+  color: #727272;
+}
+
+.multi-line-signature .parameter {
+  margin-left: 24px;
+  display: block;
+}
+
+.breadcrumbs {
+  padding: 0;
+  margin: 8px 0 8px 0;
+  font-size: 17px;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+@media screen and (min-width: 768px) {
+  nav ol.breadcrumbs {
+    float: left;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .breadcrumbs {
+    margin: 0 0 24px 0;
+    overflow-x: hidden;
+  }
+}
+
+.self-crumb {
+  color: #ddd;
+}
+
+nav .self-name {
+  color: #ddd;
+  display: none;
+}
+
+.annotation-list {
+  list-style: none;
+  padding: 0;
+  display: inline;
+}
+
+.annotation-list li:before {
+  content: "@";
+}
+
+.comma-separated {
+  list-style: none;
+  padding: 0;
+  display: inline;
+}
+
+.comma-separated li {
+  display: inline;
+}
+
+.comma-separated li:after {
+  content: ", ";
+}
+
+.comma-separated li:last-child:after {
+  content: "";
+}
+
+.end-with-period li:last-child:after {
+  content: ".";
+}
+
+.container > section:first-child {
+  border: 0;
+}
+
+.constructor-modifier {
+  font-style: italic;
+}
+
+section.multi-line-signature div.parameters {
+  margin-left: 24px;
+}
+
+/* subnav styles */
+
+ul.subnav {
+  overflow: auto;
+  white-space: nowrap;
+  padding-left: 0;
+  min-height: 25px;
+}
+
+ul.subnav::-webkit-scrollbar {
+  display: none;
+}
+
+ul.subnav li {
+  display: inline-block;
+  text-transform: uppercase;
+}
+
+ul.subnav li a {
+  color: #FFFFFF;
+}
+
+ul.subnav li {
+  margin-right: 24px;
+}
+
+ul.subnav li:last-of-type {
+  margin-right: 0;
+}
+
+@media(max-width: 768px) {
+  ul.subnav li {
+    margin-right: 16px;
+  }
+}
+
+/* sidebar styles */
+
+.sidebar-offcanvas-left {
+  background-color: #f7f7f7;
+  padding: 0;
+}
+
+.sidebar ol {
+  list-style: none;
+  font-size: 14px;
+  line-height: 24px;
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.sidebar-offcanvas-left ol {
+  padding: 16px;
+}
+
+.sidebar h5,
+.sidebar ol li {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.sidebar ol li.section-title a {
+  color: inherit;
+}
+
+.sidebar ol li.section-title {
+  font-size: 13px;
+  color: #B6B6B6;
+  text-transform: uppercase;
+  line-height: 20px;
+  margin-top: 24px;
+}
+
+.sidebar ol li:first-child {
+  padding-top: 0;
+  margin-top: 0;
+}
+
+button {
+  padding: 0;
+}
+
+#sidenav-left-toggle {
+  display: none;
+  vertical-align: text-bottom;
+  padding: 0;
+}
+
+/* left-nav disappears, and can transition in from the left */
+@media screen and (max-width:768px) {
+  #sidenav-left-toggle {
+    display: inline;
+    background: no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#FFFFFF' d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>");
+    background-position: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    margin-right: 24px;
+  }
+
+  #overlay-under-drawer.active {
+    opacity: 0.4;
+    height: 100%;
+    z-index: 1999;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background-color: black;
+    display: block;
+  }
+
+  .sidebar-offcanvas-left {
+    left:-100%;
+    position:fixed;
+    -webkit-transition:all .25s ease-out;
+    -o-transition:all .25s ease-out;
+    transition:all .25s ease-out;
+    z-index: 2000;
+    top:0;
+    width: 280px; /* works all the way down to an iphone 4 */
+    height: 100%;
+    background-color: white;
+    overflow-y: auto; /* TODO: how to hide scroll bars? */
+  }
+
+  .sidebar-offcanvas-left.active {
+    left:0; /* this animates our drawer into the page */
+  }
+}
+
+.sidebar h5 {
+  color: #727272;
+  padding-bottom: 16px;
+}
+
+.sidebar-offcanvas-left h5 {
+  border-bottom: 1px solid #ddd;
+  padding: 16px;
+}
+
+.sidebar-offcanvas-left h5:last-of-type {
+  border: 0;
+  padding: 16px 16px 0 16px;
+}
+
+/* the right nav disappears out of view when the window shrinks */
+@media screen and (max-width: 992px) {
+  .sidebar-offcanvas-right{
+     display: none;
+   }
+}
+
+#overlay-under-drawer {
+  display: none;
+}
+
+/* find-as-you-type search box */
+
+/* override bootstrap defaults */
+.form-control {
+  border-radius: 0;
+  border: 0;
+}
+
+form.search {
+  display: inline;
+}
+
+@media screen and (max-width: 500px) {
+  form.search {
+    display: none;
+  }
+}
+
+.typeahead,
+.tt-query,
+.tt-hint {
+  width: 200px;
+  height: 30px;
+  padding: 8px 12px;
+  line-height: 30px;
+  outline: none;
+}
+
+.typeahead {
+  background-color: #fff;
+  border-radius: 2px;
+}
+
+.tt-query {
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+  color: #999
+}
+
+.tt-menu {
+  right:0;
+  left: inherit !important;
+  width: 422px;
+  max-height: 250px;
+  overflow-y: auto;
+  font-size: 14px;
+  margin: 0;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+.tt-suggestion {
+  padding: 3px 20px;
+  color: #212121;
+}
+
+.tt-suggestion:hover {
+  cursor: pointer;
+  color: #fff;
+  background-color: #0097cf;
+}
+
+.tt-suggestion:hover .search-from-lib {
+  color: #ddd;
+}
+
+.tt-suggestion.tt-cursor {
+  color: #fff;
+  background-color: #0097cf;
+}
+
+.tt-suggestion.tt-cursor .search-from-lib {
+  color: #ddd;
+}
+
+.tt-suggestion p {
+  margin: 0;
+}
+
+.search-from-lib {
+  font-style: italic;
+  color: gray;
+}
+
+section#setter {
+  border-top: 1px solid #ddd;
+  padding-top: 36px;
+}
+
+li.inherited a {
+  opacity: 0.65;
+  font-style: italic;
+}

tools/dart-api-builder/dab.js

@@ -219,12 +219,10 @@ block head-extra
   // generated Dart API page template: head-extra
   //- <base> is required because all the links in dartdoc generated pages are "pseudo-absolute"
   base(href="${baseHref}")
-  link(rel="stylesheet" href="static-assets/styles.css")
 
 block breadcrumbs
   // generated Dart API page template: breadcrumbs
-  .banner
+  ol.breadcrumbs.gt-separated.hidden-xs
-    ol.breadcrumbs.gt-separated.hidden-xs
 ${breadcrumbs}
 
 block main-content