added scss files

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

Index: chrome/common/extensions/docs/static/sass/_navbar.scss
diff --git a/chrome/common/extensions/docs/static/sass/_navbar.scss b/chrome/common/extensions/docs/static/sass/_navbar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2ec1a71e317c6584cb05782d831e54da794b6b25
--- /dev/null
+++ b/chrome/common/extensions/docs/static/sass/_navbar.scss
@@ -0,0 +1,369 @@
+$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;
+    }
+  }
+}
+