use list-unstyled helper, fix some whitespace

Author: jenweber

app/styles/base/_lists.scss

@@ -19,7 +19,6 @@ ol {
     margin-bottom: $base-spacing;
 
     > li {
-      counter-increment: customlistcounter;
       clear: both;
       padding: $small-spacing 0 $small-spacing 2em;
       position: relative;
@@ -28,30 +27,17 @@ ol {
       &::before {
         @include position(absolute, ($small-spacing + 0.5em) null null 0);
         @include size(2em);
-        content: counter(customlistcounter) " ";
-        border: 2px solid $base-border-color;
+        border: 2px solid #74B0CE;
         border-radius: 50%;
         float: left;
         line-height: calc(2em - 4px);
         overflow: hidden;
         text-align: center;
       }
     }
-
-    &:first-child {
-      counter-reset: customlistcounter;
-    }
   }
 }
 
-dl {
-  margin-bottom: $small-spacing;
-
-  dt {
-    margin-top: $small-spacing;
-  }
-
-  dd {
-    margin: 0;
-  }
+dd {
+  margin: 0;
 }

app/styles/components/_highlight.scss

@@ -5,7 +5,6 @@
   font-family: $monospace-font-family;
   font-size: 0.8em;
   line-height: 1.5em;
-  margin: $small-spacing 0 $large-spacing;
   overflow: hidden;
   position: relative;
 

app/styles/components/_sidebar.scss

@@ -88,7 +88,12 @@ label[for="toc-toggle"] {
 }
 
 ol.toc-level-1 {
-  border-left: $base-border;
+  border-left: 1px solid #74B0CE;
+
+  // override ember-styleguide link color
+  a {
+    color: #42474f;
+  }
 
   &:not(.selected) {
     display: none;
@@ -97,10 +102,12 @@ ol.toc-level-1 {
   li {
     border-left: 3px solid transparent;
     transition: border-width $duration, margin-right $duration;
+    padding-top: 0.3em;
+    padding-bottom: 0.3em;
 
     &.selected,
     &:hover {
-      border-left-color: $base-border-color;
+      border-left-color: #74B0CE;
     }
 
     &:hover {

app/styles/components/_toc.scss

@@ -23,6 +23,9 @@ a.toc-anchor {
   margin-top: -5px;
 }
 
-.toc-level-0 > a {
+.toc-level-0 > a, .toc-spacing  {
   transition: color 0.1s linear;
+  margin-bottom: 0.5em;
+  margin-top:0.5em;
+  display: block;
 }

app/templates/components/import-example.hbs

@@ -1,4 +1,4 @@
-<div class="highlight javascript">
+<div class="highlight javascript margin-vertical-small">
   <div class="ribbon"></div>
   {{#if (is-clipboard-supported)}}
     <div class="import-copy">

app/templates/components/table-of-contents.hbs

@@ -1,5 +1,5 @@
 <ol class="toc-level-0">
-  <li class="toc-level-0 large">
+  <li class="toc-level-0 large list-unstyled">
     <a {{action 'toggle' 'modules'}} href="#">Packages</a>
     <ol class="toc-level-1 medium regular modules" style="display: block">
       {{#each moduleIDs as |moduleID|}}
@@ -17,7 +17,7 @@
   </li>
 
   {{#if isShowingNamespaces}}
-    <li class="toc-level-0 large">
+    <li class="toc-level-0 large list-unstyled">
       <a {{action 'toggle' 'namespaces'}} href="#">Namespaces</a>
       <ol class="toc-level-1 medium regular namespaces" style="display: block">
         {{#each namespaceIDs as |namespaceID|}}
@@ -29,7 +29,7 @@
     </li>
   {{/if}}
 
-  <li class="toc-level-0 large">
+  <li class="toc-level-0 large list-unstyled">
     <a {{action 'toggle' 'classes'}} href="#">Classes</a>
     <ol class="toc-level-1 medium regular classes" style="display: block">
       {{#each classesIDs as |classID|}}
@@ -40,7 +40,7 @@
     </ol>
   </li>
 </ol>
-<label class="toc-private-toggle">
+<label class="toc-private-toggle regular padding-top-small">
   {{input type="checkbox" checked=showPrivateClasses class='private-deprecated-toggle'}}
   Show Private / Deprecated
 </label>

app/templates/project-version.hbs

@@ -1,13 +1,13 @@
 <aside class="sidebar">
   <ol class="toc-level-0">
-    <li class="toc-level-0" data-test-home>
+    <li class="toc-level-0 large margin-bottom-small" data-test-home>
       {{#link-to 'project' 'ember'}}Home{{/link-to}}
     </li>
-    <li class="toc-level-0">
-      Projects
+    <li class="toc-level-0 large margin-vertical-small">
+      <span class="toc-spacing">Projects</span>
       <ol class="toc-level-1 selected" style="display: block;">
-        <li class="toc-level-1">{{#link-to 'project' 'ember' active=(eq activeProject 'ember') class="spec-ember"}}Ember{{/link-to}}</li>
-        <li class="toc-level-1">{{#link-to 'project' 'ember-data' active=(eq activeProject 'ember-data') class="spec-ember-data"}}Ember Data{{/link-to}}</li>
+        <li class="toc-level-1 medium regular padding-left-small">{{#link-to 'project' 'ember' active=(eq activeProject 'ember') class="spec-ember"}}Ember{{/link-to}}</li>
+        <li class="toc-level-1 medium regular padding-left-small">{{#link-to 'project' 'ember-data' active=(eq activeProject 'ember-data') class="spec-ember-data"}}Ember Data{{/link-to}}</li>
       </ol>
     </li>
   </ol>