Filtering docs comments (with tabs)

• Closes https://gitlab.com/gitlab-com/gitlab-docs/issues/236 and https://gitlab.com/gitlab-com/gitlab-docs/issues/216
• Different version of https://gitlab.com/gitlab-com/gitlab-docs/merge_requests/316

Review app: http://pre-filtering-comments-tabs.178.62.207.141.xip.io/ee/user/project/pages/index.html

Todos:

• Make <%= edit_on_gitlab(@item) %> render separately of the <a> (https://gitlab.com/gitlab-com/gitlab-docs/merge_requests/320)
• Fix button "EDIT THIS PAGE"
• Better layout text + buttons (maybe 2nd iteration?)
• Fix "Post on the GitLab Forum"
• Add id to "Your feedback is important!"
• Add back conditionals for displaying only in production env
• Rename section from “Your feedback is important” to “Help and Feedback”
• Switch the order of the first two tabs so the Docs one is first.
• Default that first Docs tab to being open without needing to click.
• Change “Get Help” tab name to “Questions”
• Add a final/extra item in Get Help that links to Sales. E.g.: If you have questions about the [features](https://about.gitlab.com/features/) or [pricing](https://about.gitlab.com/pricing/) of GitLab's paid tiers -> [Contact Sales](https://about.gitlab.com/sales/)
• “it feels like it’s part of this document, maybe we should make it stand out more” (Maybe use a different heading style that's a bit smaller and centered? And/or use a thicker, red (same red as the current star icon) HR above the section, or enclose the section it some differently shaded box**? Maybe some other solution?)

• Get this linked in the end of the right-side TOC. Not sure if that’s realistic for this MVP so we can always save this for later ... or maybe it's easy just to have a hard-coded extra item of the same format "below" each TOC that looks like it's part of the TOC. => https://gitlab.com/gitlab-com/gitlab-docs/issues/251

content/assets/stylesheets/comments.scss

 ---
-version: 1
+version: 2
 ---
 
 @import "variables";
@@ -9,5 +9,52 @@ version: 1
   padding-top: 10px;
   border-top-style: solid;
   border-top-color: $border-color;
-  border-top-width: 1px;
+  border-top-width: 3px;
+}
+
+.comments-filter {
+  a {
+    color: $color-tanuki-dark;
+
+    &:hover {
+      color: $color-tanuki-light;
+    }
+  }
+
+  h2 {
+    border-bottom: 0;
+
+    i {
+      color: $color-tanuki-dark;
+    }
+  }
+
+  @media (min-width: $medium-width) {
+    p {
+      padding-left: 30px;
+    }
+
+    ul {
+      padding-left: 50px;
+    }
+  }
+}
+
+.disqus-comments-gitlab {
+  a {
+    margin-bottom: 20px;
+  }
+}
+
+.comments-holder {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  color: $color-tanuki-dark;
+  box-shadow: 1px 2px 3px transparent;
+
+  &:hover {
+    color: $color-tanuki-dark;
+    background-color: $color-white;
+    box-shadow: 1px 2px 3px $color-gray-extra-light;
+  }
 }