Merge pull request #492 from ember-learn/table-contents-styling

Move table of contents styling into concepts

Author: mansona

.stylelintrc.js

@@ -12,8 +12,6 @@ module.exports = {
     'color-hex-length': 'long',
     // Disallow ids
     'selector-max-id': 0,
-    // Enforce alphabetical ordering of properties
-    'order/properties-alphabetical-order': true,
     // Require that color, background-color, etc use variables for colors, instead of direct values
     'scale-unlimited/declaration-strict-value': [
       ['/color/'] // We can enforce variables for font-size, margin, etc as well by adding here

addon/styles/addon.css

@@ -14,6 +14,7 @@
 @import 'icon.css';
 @import 'sidebar-container.css';
 @import 'well.css';
+@import 'table-of-contents.css';
 @import 'header-anchor';
 
 /* Helpers */

addon/styles/table-of-contents.css

@@ -0,0 +1,62 @@
+.table-of-contents {
+  list-style-type: none;
+  padding-left: 0;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-3);
+}
+
+.sub-table-of-contents {
+  padding-left: var(--spacing-1);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-2);
+}
+
+.sub-table-of-contents .sub-table-of-contents {
+  padding-left: var(--spacing-3);
+  margin-bottom: 0;
+}
+
+.table-of-contents li.toc-heading {
+  margin-top: var(--spacing-4);
+  color: var(--color-gray-600);
+}
+
+.table-of-contents li.toc-heading:first-child {
+  margin-top: 0;
+}
+
+.table-of-contents li {
+  margin: 3px 0;
+  list-style-type: none;
+}
+
+.table-of-contents a:link {
+  background: none;
+}
+
+.sub-table-of-contents .toc-item a {
+  display: block;
+  padding: var(--spacing-1);
+  border-radius: var(--radius);
+  line-height: var(--line-height-xs);
+  color: var(--color-gray-700);
+  border-left: 0 solid transparent;
+  transition: border-width 0.3s;
+}
+
+.sub-table-of-contents .toc-item a:hover {
+  border-left: 4px solid var(--color-gray-400);
+  border-radius: 0;
+}
+
+.sub-table-of-contents .toc-item.selected > a,
+.sub-table-of-contents .toc-item > a.active {
+  border-left: 4px solid var(--color-brand-hc-dark);
+  border-radius: 0;
+}
+
+@media (max-width: 844px) {
+  .table-of-contents {
+    font-size: var(--font-size-lg);
+  }
+}

docs/concepts/table-of-contents.md

@@ -0,0 +1,43 @@
+# Table of Contents
+
+Instead of providing a component we provide this concept for our table of contents. You can see the concept below.
+Every item in the list is either a `toc-heading`, giving it heading styling, or an `toc-item`. The `anchor`-tags wrapped in a `toc-item` will get specific styling. On the main level, not wrapped in a `sub-table-of-contents`, they will be the brand-color. When they are wrapped in a `sub-table-of-contents`, they will have an "active" indicator and a hover state, this will also indent them from the main level.
+
+```html
+<ul class="table-of-contents">
+  <li class="toc-heading">Introduction</li>
+  <li class="toc-item">
+    <a href="#">Getting Started</a>
+  </li>
+  <li class="toc-item">
+    <a href="#">Tutorial</a>
+  </li>
+  <li class="toc-heading">Core Concepts</li>
+  <li class="toc-item">
+    <a href="#">Components</a>
+  </li>
+  <li class="toc-item">
+    <a href="#"> Routing </a>
+    <ul class="table-of-contents sub-table-of-contents">
+      <li class="toc-item">
+        <a href="#">Introduction</a>
+      </li>
+      <li class="toc-item">
+        <a href="#">Defining Your Routes</a>
+      </li>
+      <li class="toc-item selected">
+        <a href="#">Linking Between Routes</a>
+      </li>
+    </ul>
+  </li>
+  <li class="toc-item">
+    <a href="#">Services</a>
+  </li>
+  <li class="toc-item">
+    <a href="#">EmberData</a>
+  </li>
+  <li class="toc-item">
+    <a href="#">In-Depth Topics</a>
+  </li>
+</ul>
+```