imported scss files from Github prototype project;

BUG=330235

Review URL: https://codereview.chromium.org/113963003

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@244328 0039d316-1c4b-4281-b951-d872f2087c98

chrome/common/extensions/docs/.gitignore

+.sass-cache

chrome/common/extensions/docs/README

@@ -50,6 +50,12 @@ Editing docs
        extremely simple, essentially: write HTML.
        See third_party/handlebar/README.md.
 
+     - static/css/out/site.css is generated by compiling static/sass/*.scss
+       files. Don't change site.css directly. Instead, change the *.scss files
+       and run compass from this (docs/) directory:
+           compass compile .
+       See http://compass-style.org/install to install compass.
+
   2. Run 'server2/preview.py'
 
   3. Check your work at http://localhost:8000/(apps|extensions)/<doc_name>

chrome/common/extensions/docs/server2/render_servlet_test.py

@@ -76,7 +76,7 @@ class RenderServletTest(unittest.TestCase):
     self.assertEqual('application/zip', response.headers['Content-Type'])
 
   def testStaticFile(self):
-    static_file = 'css/site.css'
+    static_file = 'css/out/site.css'
     response = self._Render('static/%s' % static_file)
     self.assertEqual(200, response.status)
     self.assertEqual('text/css; charset=utf-8',

chrome/common/extensions/docs/static/sass/_article.scss

+$toc-width: 240px;
+$toc-margin-left: 195px;
+
+// TOC on article pages
+.inline-toc {
+  line-height: 1.3em;
+
+  a,
+  a:link,
+  a:visited {
+    color: $gray-medium;
+    font-weight: normal;
+
+    &:hover,
+    &:focus {
+      color: $black;
+    }
+  }
+  li li a,
+  li li a:link,
+  li li a:visited {
+    color: $gray-medium;
+
+    &:hover,
+    &:focus {
+      color: $black;
+    }
+  }  
+
+  a {
+    @include display-flex();
+    padding: 0.5em 0;
+  }
+
+  .related {
+    display: block;
+
+    li a {
+      &.active {
+        color: $black;
+      }
+    }
+  }
+
+  #toc {
+    display: none;
+
+    .toplevel {
+      > a {
+        font-weight: bold;
+        color: $black;
+
+        &::after {
+          content: '+';
+          @include flex(1);
+          text-align: right;
+        }
+      }
+    }
+  
+    //> .toc > li {
+    .toplevel {
+      &.active {
+        .toc {
+          display: block;
+        }
+        > a {
+          &::after {
+            content: '-';
+          }
+        }
+      }
+    }
+  }
+
+  .toc {
+    margin: 0;
+    padding: 0;
+    border-top: $default-border;
+
+    .toc {
+      display: none;
+    }
+
+    .toc li {
+      padding-left: 1em;
+      border-bottom: $default-border; 
+    }
+  }
+}
+
+// Footer at bottom of articles
+#cc-info {
+  @include display-flex();
+  @include align-items(center);
+  font-style: italic;
+  //font-size: $small-label-size;
+  font-size: 0.8em;
+  color: lighten($text, 5%);
+  .cc-logo img {
+    width: 90px;
+    height: 32px;
+  }
+  .last-updated {
+    @include flex(1);
+  }
+}
+
+// Large than mobile.
+@media only screen and (min-width: $break-small)  { 
+  .inline-toc { 
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin-left: $toc-margin-left;
+    width: $toc-width;
+    overflow: auto;
+    overflow-x: hidden;
+
+    // scroll.js adds and removes the floating class depending on the scroll position.
+    &.sticky {
+      position: fixed;
+    }
+
+    #toc {
+      display: block;
+    }
+  }
+  .article-content {
+    width: 70%;
+    padding-right: 5%;
+    border-right: 1px solid $gray-light;
+  }
+  .cc-logo {
+    margin: 0 0 0 auto;
+  }
+}
+
+// Tablet
+@media only screen and (min-width: $break-small + 1) and (max-width: $break-large) { 
+  .inline-toc {
+    width: $toc-width - 40;
+    margin-left: $toc-margin-left - 30;
+  }
+}
+
+// Phone
+@media only screen and (max-width: $break-small)  { 
+  .article-content [itemprop="articleBody"] {
+    > .collapsible {
+      height: 58px;
+      overflow: hidden;
+
+      &.active {
+        height: auto;
+        h2::before {
+          content: '-';
+        }
+      }
+
+      h2 {
+        position: relative;
+        margin: 0;
+        padding: $default-padding - 5 $default-padding  - 5 $default-padding  - 5 0;
+        border-top: $default-border;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &::before {
+          position: absolute;
+          right: 0;
+          content: '+';
+        }
+      }
+    }
+    .related {
+      margin: $default-padding 0;
+    }
+  }
+}
+

chrome/common/extensions/docs/static/sass/_grid.scss

+// Adapted from chrome.com
+
+@import "vars";
+@import "mixins";
+
+
+.g-section:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+.g-unit .g-section:after {
+  clear:none
+}
+.g-unit .g-section {
+  width: 100%;
+  overflow: hidden;
+}
+.g-section,.g-unit {
+  zoom: 1;
+}
+.g-split > .g-unit {
+  float: right;
+  text-align: right;
+}
+.g-split > .g-first {
+  float: left;
+  text-align: left;
+}
+
+.g-tpl-160 .g-unit,.g-unit .g-tpl-160 .g-unit,.g-unit .g-unit .g-tpl-160 .g-unit,.g-unit .g-unit .g-unit .g-tpl-160 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-160 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-160 .g-unit {
+display:block;margin:0 0 0 160px;width:auto;float:none 
+}
+.g-tpl-160 .g-first,.g-unit .g-tpl-160 .g-first,.g-unit .g-unit .g-tpl-160 .g-first,.g-unit .g-unit .g-unit .g-tpl-160 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-160 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-160 .g-first {
+display:block;margin:0;width:160px;float:left 
+}
+.g-tpl-25-75 .g-unit,.g-unit .g-tpl-25-75 .g-unit,.g-unit .g-unit .g-tpl-25-75 .g-unit,.g-unit .g-unit .g-unit .g-tpl-25-75 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-25-75 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-25-75 .g-unit {
+width:74.999%;float:right;display:inline;margin:0 
+}
+.g-tpl-25-75 .g-first,.g-unit .g-tpl-25-75 .g-first,.g-unit .g-unit .g-tpl-25-75 .g-first,.g-unit .g-unit .g-unit .g-tpl-25-75 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-25-75 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-25-75 .g-first {
+width:24.999%;float:left;display:inline;margin:0 
+}
+.g-tpl-75-25 .g-unit,.g-unit .g-tpl-75-25 .g-unit,.g-unit .g-unit .g-tpl-75-25 .g-unit,.g-unit .g-unit .g-unit .g-tpl-75-25 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-75-25 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-75-25 .g-unit {
+width:24.999%;float:right;display:inline;margin:0 
+}
+.g-tpl-75-25 .g-first,.g-unit .g-tpl-75-25 .g-first,.g-unit .g-unit .g-tpl-75-25 .g-first,.g-unit .g-unit .g-unit .g-tpl-75-25 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-75-25 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-75-25 .g-first {
+width:74.999%;float:left;display:inline;margin:0 
+}
+.g-tpl-33-67 .g-unit,.g-unit .g-tpl-33-67 .g-unit,.g-unit .g-unit .g-tpl-33-67 .g-unit,.g-unit .g-unit .g-unit .g-tpl-33-67 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-33-67 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-33-67 .g-unit {
+width:66.999%;float:right;display:inline;margin:0 
+}
+.g-tpl-33-67 .g-first,.g-unit .g-tpl-33-67 .g-first,.g-unit .g-unit .g-tpl-33-67 .g-first,.g-unit .g-unit .g-unit .g-tpl-33-67 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-33-67 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-33-67 .g-first {
+width:32.999%;float:left;display:inline;margin:0 
+}
+.g-tpl-67-33 .g-unit,.g-unit .g-tpl-67-33 .g-unit,.g-unit .g-unit .g-tpl-67-33 .g-unit,.g-unit .g-unit .g-unit .g-tpl-67-33 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-67-33 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-67-33 .g-unit {
+width:32.999%;float:right;display:inline;margin:0 
+}
+.g-tpl-67-33 .g-first,.g-unit .g-tpl-67-33 .g-first,.g-unit .g-unit .g-tpl-67-33 .g-first,.g-unit .g-unit .g-unit .g-tpl-67-33 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-67-33 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-67-33 .g-first {
+width:66.999%;float:left;display:inline;margin:0 
+}
+.g-tpl-50-50 .g-unit,.g-unit .g-tpl-50-50 .g-unit,.g-unit .g-unit .g-tpl-50-50 .g-unit,.g-unit .g-unit .g-unit .g-tpl-50-50 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-50-50 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-50-50 .g-unit {
+width:49.999%;float:right;display:inline;margin:0 
+}
+.g-tpl-50-50 .g-first,.g-unit .g-tpl-50-50 .g-first,.g-unit .g-unit .g-tpl-50-50 .g-first,.g-unit .g-unit .g-unit .g-tpl-50-50 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-50-50 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-50-50 .g-first {
+width:49.999%;float:left;display:inline;margin:0 
+}
+.g-tpl-nest .g-unit
+/*,.g-unit .g-tpl-nest .g-unit,.g-unit .g-unit .g-tpl-nest .g-unit,.g-unit .g-unit .g-unit .g-tpl-nest .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-nest .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-nest .g-unit {*/ {
+float:left;width:auto;display:inline;margin:0 }
+.g-tpl-nest-alt .g-unit
+/*,.g-unit .g-tpl-nest-alt .g-unit,.g-unit .g-unit .g-tpl-nest-alt .g-unit,.g-unit .g-unit .g-unit .g-tpl-nest-alt .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-nest-alt .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-nest-alt .g-unit*/ {
+float:right;width:auto;display:inline;margin:0 }
+
+.g-content {
+  margin-right: 30px;
+}
+
+.g-last .g-content {
+  margin-right: 0;
+}
+
+// Phone
+@media only screen and (max-width: $break-small)  { 
+  .g-unit {
+    &.g-unit {
+      float: none !important;
+    }
+  }
+  .g-content {
+    margin-right: 0;
+  }
+}

chrome/common/extensions/docs/static/sass/_homepage.scss

+
+#gc-pagecontent {
+  .g-section {
+    h1, h2, h3 {
+      margin: 0;
+    }
+  }
+}
+
+#upcoming-events, #featured {
+  .screenshot {
+    margin-top: 0;
+  }
+}
+
+#upcoming-events {
+  article {
+    border: $default-border;
+    border-width: 0 0 1px 0;
+    padding: $default-padding 0;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+      border: none;
+    }
+  }
+}
+
+#site-sections {
+  background-color: $gray-light;
+  //padding: $main-content-top-margin / 2;
+  padding: $default-padding;
+  text-align: center;
+
+  h2 {
+    padding-top: 20px;
+
+    &::before {
+      display: block;
+      content: '';
+      background: url("../images/bucket-icons.svg") 12px 50% no-repeat;
+      width: 100px;
+      height: 65px;
+      background-size: cover;
+      margin: auto;
+      margin-bottom: 20px;
+    }
+    &.multidevice {
+      &::before {
+        background-position: -91px 50%;
+      }
+    }
+    &.platform {
+      &::before {
+        background-position: -194px 50%;
+      }
+    }
+  }
+}
+
+#developer-news {
+  margin-top: 4em;
+
+  .g-content {
+    margin-right: $default-padding;
+  }
+
+  h1 {
+    margin-bottom: $default-padding * 2 !important;
+  }  
+}
+
+
+// Larger than Phone
+@media only screen and (min-width: $break-small)  { 
+  #featured {
+    $column-padding: 30px;
+    padding-right: $column-padding;
+    padding-bottom: $default-padding / 2;
+    border: $default-border;
+    border-width: 0 1px 0 0;
+
+    img {
+      margin-bottom: $default-padding;
+    }
+  }
+}
+
+// // Tablet
+// @media only screen and (min-width: $break-small + 1) and (max-width: $break-large) { 
+
+// }

chrome/common/extensions/docs/static/sass/_layout.scss

+@mixin content-container-layout {
+  margin: auto;
+  width: 90%;
+}
+
+//-----------------------------------------------------------------------
+// Layout
+//-----------------------------------------------------------------------
+
+* {
+  padding: 0;
+  margin: 0;
+  @include box-sizing(border-box);
+}
+
+html, body {
+  overflow-x: hidden; // Allows .span-full to take up entire viewport without overflowing.
+  overflow-y: auto;
+}
+
+img {
+  max-width: 100%;
+}  
+
+#gc-container {
+  max-width: $site-max-width;
+  @include content-container-layout();
+}
+
+#gc-pagecontent {
+  > .g-section {
+    margin: $main-content-top-margin 0;
+  }
+}
+
+main {
+  margin-bottom: 50px;
+  position: relative;
+}
+
+footer[role="contentinfo"] {
+  padding: 40px 0 50px;
+}
+
+// Phone
+@media only screen and (max-width: $break-small)  { 
+  #gc-container {
+    width: auto;
+  }
+  #gc-pagecontent {
+    @include content-container-layout();
+
+    > .g-section {
+      margin: $main-content-top-margin / 2 0;
+    }
+  }
+  footer[role="contentinfo"]  {
+    padding: $main-content-top-margin / 2 $main-content-top-margin - 10;
+  }
+}
+
+// Tablet
+@media only screen and (min-width: $break-small + 1) and (max-width: $break-large) { 
+  #gc-container {
+    width: 95%;
+  }
+}
+
+@media only screen and (min-width: $break-large)  { 
+
+}
\ No newline at end of file

chrome/common/extensions/docs/static/sass/_mixins.scss

+// element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+@mixin element-invisible {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
+  }
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// Turns off the element-invisible effect.
+@mixin element-invisible-off {
+  position: static !important;
+  clip: auto;
+  height: auto;
+  width: auto;
+  overflow: auto;
+}
+
+@mixin element-focusable {
+  @include element-invisible;
+  &:active,
+  &:focus {
+    @include element-invisible-off;
+  }
+}
+
+@mixin display-flex() {
+  display: -webkit-box; // Old Safari :(
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -o-flex;
+  display: flex;
+}
+
+@mixin display-inline-flex() {
+  display: -webkit-inline-flex;
+  display: -moz-inline-flex;
+  display: -ms-inline-flex;
+  display: -o-inline-flex;
+  display: inline-flex;
+}
+
+@mixin flex($val) {
+  -webkit-box-flex: $val; // Old Safari :(
+  -webkit-flex: $val;
+  -moz-flex: $val;
+  -ms-flex: $val;
+  -o-flex: $val;
+  flex: $val;
+}
+
+@mixin justify-content($val: center) {
+  -webkit-box-pack: 1;  // Old Safari :( TODO: don't hardcode 1.
+  -webkit-justify-content: $val;
+  -moz-justify-content: $val;
+  -ms-justify-content: $val;
+  -o-justify-content: $val;
+  justify-content: $val;
+}
+
+@mixin align-items($val: center) {
+  -webkit-box-align: $val;  // Old Safari :(
+  -webkit-align-items: $val;
+  -moz-align-items: $val;
+  -ms-align-items: $val;
+  -o-align-items: $val;
+  align-items: $val;
+}
+
+@mixin align-self($val: center) {
+  -webkit-align-self: $val;
+  -moz-align-self: $val;
+  -ms-align-self: $val;
+  -o-align-self: $val;
+  align-self: $val;
+}
+
+@mixin flex-direction($val) {
+  -webkit-box-orient: vertical;  // Old Safari :(. TODO: don't hardcode "vertical".
+  -webkit-flex-direction: $val;
+  -moz-flex-direction: $val;
+  -ms-flex-direction: $val;
+  -o-flex-direction: $val;
+  flex-direction: $val;
+}
+
+@mixin flex-wrap($val: nowrap) {
+  -webkit-flex-wrap: $val;
+  -moz-flex-wrap: $val;
+  -ms-flex-wrap: $val;
+  -o-flex-wrap: $val;
+  flex-wrap: $val;
+}
+
+@mixin order($val) {
+  -webkit-box-ordinal-group: $val; // Old Safari :(
+  -webkit-order: $val;
+  -moz-order: $val;
+  -ms-order: $val;
+  -o-order: $val;
+  order: $val;
+}
+
+// @mixin width-max-content() {
+//   width: -webkit-max-content;
+//   width: -moz-max-c;
+//   width: -ms-max-content;
+//   width: -o-max-content;
+//   width: max-content;
+// }
+
+// @mixin width-min-content() {
+//   width: -webkit-min-content;
+//   width: -moz-min-content;
+//   width: -ms-min-content;
+//   width: -o-min-content;
+//   width: min-content;
+// }
+
+@mixin user-select($val: none) {
+  -webkit-user-select: $val;
+  -moz-user-select: $val;
+  -o-user-select: $val;
+  -ms-user-select: $val;
+  user-select: $val;
+}
+
+@mixin calc($property, $expression) { 
+  #{$property}: -moz-calc(#{$expression}); 
+  #{$property}: -o-calc(#{$expression}); 
+  #{$property}: -webkit-calc(#{$expression}); 
+  #{$property}: calc(#{$expression}); 
+}
+
+@mixin filter($val: none) {
+  -webkit-filter: $val;
+  -moz-filter: $val;
+  -o-filter: $val;
+  -ms-filter: $val;
+  //filter: $val;
+}
\ No newline at end of file

chrome/common/extensions/docs/static/sass/_navbar.scss

+$nav-item-shaded-bg: $gray-light url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAyCAMAAABI+VrBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALFQTFRF/////f39/v7+/Pz8+/v7+fn56+vr+vr69PT09vb28/Pz9fX1xcXF9/f3+Pj45+fn8PDwycnJ7+/v6enpzc3N19fX8fHx8vLy7u7u6Ojo7Ozs3Nzc5OTk7e3t4uLi2dnZ39/fxsbG29vb0dHR3d3d4ODg4+Pj6urqyMjI09PT5eXl0NDQ1dXV2NjYysrKx8fH5ubmzs7O3t7exMTE4eHh2tray8vLz8/PzMzM1NTU1tbWhgtdWwAAAOFJREFUeNok0NWSxCAURdFDhCQkMx3tuLe7jP//h829NC+rqIKNAK8hhGEQjmUyrm+ziVTs50O6jkA6b+J3gSCqpWfiGZxL1yKyhbIQEDQLxj7xTYy7SXoCY1RXbwLXy6OgfdevIbYFdulHaBuI7t3SIY5Nbhm4zAdF/Ow5gvTEEaR/W49Ov2eSIvjuW+Y4tdTCXHML+1XI/A7cwmmdM1nHLZwbl+kPPj9lunELq5LuRWy5hUFyC+uKI+hazabgCJpYcws5gsXS5F8qc02i9C9Jn9ejelHoMkJdhrJ5xb8AAwBmihB0TS21nQAAAABJRU5ErkJggg==) no-repeat right 0;
+$nav-border-color: rgb(232, 232, 232);
+$nav-font-size: 0.9em;
+$z-index-nav-hover: 1001;
+
+#topnav {
+  @include display-flex();
+  @include align-items(center);
+  height: $top-nav-height;
+  position: relative;
+  //margin-bottom: $main-content-top-margin;
+}
+
+#logo {
+  @include display-flex();
+  @include align-items(center);
+  @include user-select(none);
+
+  a {
+    @include display-flex();
+    @include align-items(center);
+    color: $gray-dark;
+
+    font-size: 2em;
+    font-weight: 400;
+    letter-spacing: -1px;
+
+    img {
+      margin-bottom: -4px;
+      margin-right: 5px;
+      height: 32px;
+      width: 32px;
+    }
+  }
+
+  .collase-icon {
+    display: none;
+    background: url("../images/burger-icon.png") 50% 100% no-repeat;
+    background-size: cover;
+    width: 20px;
+    height: 20px;
+
+    &.active {
+      background-position: 50% 0;
+    }
+  }
+}
+
+#fatnav {
+  height: 100%;
+  @include display-flex();
+  @include justify-content(flex-end);
+  @include flex(1);
+  white-space: nowrap;
+
+  li {
+    list-style: none;
+  }
+
+  > ul {
+    @include display-flex();
+    padding: 0;
+    margin: 0;
+  }
+
+  .toplevel {
+    color: $gray-medium;
+    font-weight: 600;
+    text-transform: uppercase;
+    @include user-select(none);
+
+    &::after {
+      content: '';
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNpiyc/Pn8XAwDATiM8yEAaMQBwBxHxMQMIdiE8D8Vog1sGjyQGqbhkQK4A0PoKaFATEF4F4MRCrImnQBuJtQLwfiI2hYk9AGl2AuB2I/wAxiB8DxNeAeA4QzwXiS0DsCdXwHIj9gHgqSOFPIK4CYksgvgJVwALEyUCcBDWMAeoSkO2bGZAEQeAM1CmtUNth4BkQ+wJxHBC/hwkyoQXALyCuAWILIL4MxIugAbYFI3iNZ54BR4fNtcXo0QEy9B+ywBGtWMzoAAquBWLk6EDXhBIdLNDokINGRwBQAUiiCYhvI0VHN1LIjpjoAAgwAMoSTlKlzAY4AAAAAElFTkSuQmCC) no-repeat;
+      background-size: 9px;
+      display: inline-block;
+      height: 5px;
+      width: 14px;
+      margin-left: 10px;
+      margin-bottom: 2px;
+    }
+  }
+
+  .pillar {
+    @include display-flex();
+    @include align-items(center);
+    padding: 0 $default-padding;
+    cursor: pointer;
+    z-index: $z-index-nav-hover + 1; // ensure on top of expandee
+  }
+
+  .expandee {
+    display: none;
+    
+// @include display-flex();
+// @include flex-direction(row);
+// //visibility: hidden;
+// pointer-events: none;
+// transition: opacity 300ms ease-in-out 200ms;
+// opacity: 0;
+// height: 0;
+
+    position: absolute;
+    z-index: $z-index-nav-hover;
+    left: 0;
+    width: 100%;
+    @include box-sizing(border-box);
+    background-color: $gray-light;
+    padding: $default-padding 0;
+    cursor: initial;
+    margin: 0;
+
+    a {
+      font-weight: 600;
+      padding: 0.5em 0;
+      display: block;
+      color: $gray-dark;
+
+      &:hover {
+        @include background-image(linear-gradient(205deg,rgba(229,229,229,.7) 0,rgba(233,233,233,.7) 20%, rgba(244,244,244,.7) 100%));
+      }
+    }
+
+    li {
+      white-space: nowrap;
+
+      &.submenu {
+        color: #333;;
+        font-size: 1.1em;
+        font-weight: bold;
+        cursor: pointer;
+        @include flex(1);
+
+        &.active {
+          @include background-image(linear-gradient(205deg,rgba(229,229,229,.7) 0,rgba(233,233,233,.7) 20%, rgba(244,244,244,.7) 100%));
+        }
+
+        > ul {
+          font-size: $nav-font-size - 0.1;
+          padding: $default-padding - 5 0 0 0;
+          margin: 0;
+        }
+
+        .category {
+          border-bottom: 1px solid $nav-border-color;
+
+          &:last-child {
+            border: none;
+          }
+
+          a {
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          // Hide 3rd level articles.
+          > ul {
+            display: none;
+          }
+
+          ul {
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+#search {
+  @include display-inline-flex();
+  @include align-self(stretch);
+  @include align-items(center);
+  width: auto;
+  padding: 0 $default-padding;
+  cursor: pointer;
+
+  img {
+    height: 16px;
+    width: 16px;
+    @include user-select(none);
+  }
+
+  .expandee {
+    padding: $default-padding;
+
+    input[type="search"] {
+      width: 100%;
+      @include box-sizing(border-box);
+      background: url("../images/search.png") no-repeat 15px 55%;
+      background-size: 20px;
+      background-color: white;
+      border: $default-border;
+      //border-color: $gray-light-dark;
+      padding: 10px 10px 10px 40px;
+      font-size: 1.4em;
+      @include flex(1);
+      font-family: inherit;
+      font-weight: 300;
+    }
+  }
+}
+
+@media only screen and (min-width: $break-small)  { 
+
+  #topnav {
+    padding: 15px 0 0;
+  }
+
+  #fatnav {
+    .pillar {
+      &.active {
+        background: $nav-item-shaded-bg;
+
+        .toplevel {
+          &::after {
+            background-position: 0% -5px;
+          }
+        }
+
+        .expandee {
+          @include display-flex();
+          @include flex-direction(row);
+
+// pointer-events: all;
+// opacity: 1;
+// //visibility: visible;
+
+          &::after {
+            position: absolute;
+            @include background-image(linear-gradient(bottom,rgba(255, 255, 255, 0) 0,rgba(211, 211, 211, 0.5) 25%,rgb(211, 211, 211) 50%,rgba(211, 211, 211, 0.5) 75%,rgba(255, 255, 255, 0) 100%));
+            right: 0;
+            top: 0;
+            content: '';
+            width: 1px !important;
+            height: 100%;
+          }
+        }
+      }
+
+      .expandee {
+        min-height: 400px;
+        font-size: $nav-font-size;
+        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12);
+        top: $top-nav-height;
+
+        .submenu {
+          padding: 0 $default-padding;
+          border-right: 1px solid $nav-border-color;
+          &:last-child {
+            border: none;
+          }
+        }
+      }
+    }
+  }
+
+  #search {
+    margin-right: -4px;
+
+    &.active {
+      background: $nav-item-shaded-bg;
+
+      .expandee {
+        display: block;
+        top: $top-nav-height;
+      }
+    }
+  }
+
+}
+
+// Phone
+@media only screen and (max-width: $break-small)  { 
+  #topnav {
+    @include flex-direction(column);
+    height: auto;
+  }
+
+  #fatnav {
+    width: 100%;
+    max-height: 0;
+    //@include transition(all 1s); // TODO(ericbidelman): janky on close
+    overflow: hidden;
+    background: $gray-light;
+
+    &.active {
+      max-height: 5000px; // TODO(ericbidelman): Hack. Make nav bigger than we'll ever need.
+    }
+
+    > ul {
+      @include flex(1);
+      @include flex-direction(column);
+    }
+
+    .toplevel {
+      width: 100%;
+      height: 50px;
+      @include align-items(center);
+      @include justify-content(center);
+      @include display-inline-flex();
+    }
+    
+    .pillar {
+      @include flex-direction(column);
+      padding: 0;
+      border-bottom: $default-border;
+      //border-color: $gray-medium;
+
+      &.active {
+        .expandee {
+          display: initial;
+        }
+      }
+
+    }
+
+    .expandee {
+      position: relative;
+      padding: 0;
+      background-color: rgba(229,229,229,.7);
+
+      li {
+        &.submenu {
+          padding: $default-padding / 2 $default-padding - 5;
+          //border-bottom: none;
+          
+          &:not(:last-child) {
+            border-color: #ccc;//$gray-light-dark;
+          }
+
+          > ul {
+            background-color: inherit;;
+          }
+        }
+      }
+    }
+
+  }
+
+  #logo {
+    height: 50px;
+    width: 90%;
+
+    a {
+      @include flex(1);
+    }
+
+    .collase-icon {
+      display: initial;
+    }
+  }
+
+  #search {
+    @include display-flex();
+    @include align-items(center);
+    @include order(-1);
+    padding: 15px 15px 0 15px;
+
+    img {
+      display: none;
+    }
+
+    .expandee {
+      display: block;
+    }
+  }
+}
+

chrome/common/extensions/docs/static/sass/site.scss

+/*! Copyright 2014 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+// Import Tools and Libraries
+@import "compass"; // Import Compass: http://compass-style.org
+@import "compass/typography/vertical_rhythm"; // http://compass-style.org/reference/compass/typography/vertical_rhythm/
+@import "mixins";
+@import "normalize"; // Reset: http://necolas.github.io/normalize.css/
+
+// Import Variables 
+@import "vars";
+
+// Import Grid 
+@import "grid";
+
+// Import Universal Styles 
+@import "layout";
+@import "html";
+@import "typography";
+@import "navbar";
+
+// Import Page-Specific Styles
+@import "homepage";
+@import "pillar";
+@import "article";

chrome/common/extensions/docs/templates/private/cc.html

 <footer id="cc-info">
   <button id="send-feedback" class="google-button" data-feedback>Send Feedback</button>
   <!--p class="last-updated">Last updated August 2, 2013.</p-->
-  <p class="cc-license"><a href="http://creativecommons.org/licenses/by/3.0/"><img src="{{static}}/images/cc_by.png" alt="Licensed Creative Commons by Attribution"></a></p>
+  <p class="cc-logo"><a href="http://creativecommons.org/licenses/by/3.0/"><img src="{{static}}/images/cc_by.png" alt="Licensed Creative Commons by Attribution"></a></p>
 </footer>

chrome/common/extensions/docs/templates/private/site.html

@@ -15,7 +15,7 @@
     <meta http-equiv="cleartype" content="on">
     <link type="image/ico" rel="icon" href="//www.google.com/images/icons/product/chrome-32.png">
 
-    <link href="{{static}}/css/site.css" rel="stylesheet" type="text/css">
+    <link href="{{static}}/css/out/site.css" rel="stylesheet" type="text/css">
     <link href="{{static}}/css/print.css" rel="stylesheet" type="text/css" media="print">
     <link href="{{static}}/css/prettify.css" rel="stylesheet" type="text/css">
     <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro' rel='stylesheet' type='text/css'>