Merge pull request #162 from IgnaceMaes/sidebar-styling-tweaks

Sidebar styling tweaks

Author: mansona

addon/styles/addon.css

@@ -59,10 +59,6 @@ main {
   padding: 0;
 }
 
-.sidebar-container > .es-sidebar {
-  margin: 0;
-}
-
 .info-banner-wrapper {
   margin: var(--spacing-1);
   padding: var(--spacing-1);
@@ -107,12 +103,12 @@ main {
 /* TODO figure out how much of this media query needs to go into the styleguide */
 @media (max-width: 844px) {
   main .es-sidebar[aria-expanded="true"] {
-    border: none;
     padding: var(--spacing-2);
     z-index: 1;
-    margin-top: var(--spacing-2);
     display: flex;
     flex-direction: row-reverse;
+    margin: var(--spacing-2) 0 0 0;
+    background: var(--color-white);
   }
 
   main .es-sidebar-toggle {

addon/styles/table-of-contents.css

@@ -1,20 +1,20 @@
 /* All the .es-sidebar styling should probably move to the ember-styleguide when we agree this is the right thing to do */
 .es-sidebar {
-  border-right: 2px solid var(--color-gray-300);
-  padding: var(--spacing-4) var(--spacing-4) 0 0;
-  margin: calc(-1 * var(--spacing-6)) 0 calc(-1 * var(--spacing-6));
+  padding: var(--spacing-4) var(--spacing-4);
+  margin-left: calc(-1 * var(--spacing-4));
+  background-color: var(--color-gray-200);
 }
 
 .table-of-contents {
   list-style-type: none;
   padding-left: 0;
-  font-size: var(--font-size-lg);
+  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-md);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-2);
 }
 
@@ -59,3 +59,9 @@ li.toc-heading {
 li.toc-heading:first-child {
   margin-top: 0;
 }
+
+@media (max-width: 844px) {
+  .table-of-contents {
+    font-size: var(--font-size-lg);
+  }
+}