added scss files

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;
+    }
+  }
+}
+