From 812f2be6e32d5328cb80cccfa1f05e3176b31235 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 28 Apr 2018 18:44:02 -0700
Subject: [PATCH] Sidebar revamp (#617)

* Revamp sidebar

* Change links color

* Tweak for mobile
---
 lib/static/css/main.css | 93 +++++++++++++++--------------------------
 1 file changed, 33 insertions(+), 60 deletions(-)

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 982838d98dfe..059fdee56947 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -251,8 +251,7 @@ header h2 {
 .container .wrapper h3 {
   color: $primaryColor;
   font-size: 18px;
-  margin-top: 10px;
-  padding: 10px 0;
+  margin: 12px 0;
 }
 .container .wrapper h4 {
   color: $primaryColor;
@@ -1231,7 +1230,7 @@ ul#languages li {
 }
 
 .docsNavContainer {
-  background: #c6c6c6;
+  background: #fff;
   height: 35px;
   left: 0;
   position: fixed;
@@ -1253,15 +1252,17 @@ ul#languages li {
 }
 
 .docsNavContainer nav.toc .navBreadcrumb {
+  background-color: #fff;
   box-sizing: border-box;
   display: flex;
   flex-flow: row nowrap;
   font-size: 12px;
-  height: 35px;
+  height: 48px;
   overflow: hidden;
-  padding: 5px 10px;
+  padding: 8px 20px;
 }
-.navBreadcrumb a, .navBreadcrumb span {
+.navBreadcrumb a,
+.navBreadcrumb span {
   border: 0;
   color: #393939;
 }
@@ -1295,24 +1296,23 @@ nav.toc:last-child {
 }
 nav.toc section .navGroups {
   display: none;
-  padding: 40px 10px 60px;
+  padding: 48px 20px 60px;
 }
 nav.toc .toggleNav {
-  background: #c6c6c6;
   color: #393939;
   position: relative;
-  transition: background-color 0.3s, color 0.3s;
 }
 nav.toc .toggleNav .navToggle {
   cursor: pointer;
-  height: 24px;
+  height: 32px;
   margin-right: 10px;
   position: relative;
   text-align: left;
   width: 18px;
 }
-nav.toc .toggleNav .navToggle::before, nav.toc .toggleNav .navToggle::after {
-  content: "";
+nav.toc .toggleNav .navToggle::before,
+nav.toc .toggleNav .navToggle::after {
+  content: '';
   position: absolute;
   top: 50%;
   left: 0;
@@ -1328,8 +1328,9 @@ nav.toc .toggleNav .navToggle::before, nav.toc .toggleNav .navToggle::after {
 nav.toc .toggleNav .navToggle::after {
   transform: rotate(-45deg);
 }
-nav.toc .toggleNav .navToggle i::before, nav.toc .toggleNav .navToggle i::after {
-  content: "";
+nav.toc .toggleNav .navToggle i::before,
+nav.toc .toggleNav .navToggle i::after {
+  content: '';
   position: absolute;
   top: 50%;
   left: 2px;
@@ -1349,29 +1350,22 @@ nav.toc .toggleNav .navToggle i::after {
 }
 .docsSliderActive nav.toc .toggleNav .navToggle::before,
 .docsSliderActive nav.toc .toggleNav .navToggle::after {
-  border-width: 6px 0;
-  height: 0px;
-  margin-top: -6px;
+  border-width: 8px 0;
+  height: 0;
+  margin-top: -8px;
 }
 .docsSliderActive nav.toc .toggleNav .navToggle i {
   opacity: 0;
 }
 nav.toc .toggleNav .navGroup {
-  background: #adadad;
-  margin: 1px 0;
-}
-nav.toc .toggleNav .navGroup ul {
-  display: none;
+  margin-bottom: 20px;
 }
 nav.toc .toggleNav .navGroup h3 {
-  background: #adadad;
   color: #393939;
   font-size: 18px;
-  font-weight: 400;
+  font-weight: 500;
   line-height: 1.2em;
-  margin: 0;
-  padding: 10px;
-  transition: color 0.2s;
+  margin-bottom: 8px;
 }
 nav.toc .toggleNav .navGroup h3 i:not(:empty) {
   width: 16px;
@@ -1383,62 +1377,41 @@ nav.toc .toggleNav .navGroup h3 i:not(:empty) {
   margin-right: 10px;
   transition: color 0.2s;
 }
-nav.toc .toggleNav .navGroup h3:hover {
-  color: $primaryColor;
-}
-nav.toc .toggleNav .navGroup h3:hover i:not(:empty) {
-  color: $primaryColor;
-}
-nav.toc .toggleNav .navGroup.navGroupActive {
-  background: #e0e0e0;
-  color: #393939;
-}
-nav.toc .toggleNav .navGroup.navGroupActive ul {
-  display: block;
-  padding-bottom: 10px;
-  padding-top: 10px;
-}
-nav.toc .toggleNav .navGroup.navGroupActive h3 {
-  background: $primaryColor;
-  color: #fff;
-}
 nav.toc .toggleNav ul {
-  padding-left: 0;
-  padding-right: 24px;
+  padding-left: 8px;
 }
 nav.toc .toggleNav ul li {
   list-style-type: none;
-  padding-bottom: 0;
-  padding-left: 0;
+  padding: 0;
 }
 nav.toc .toggleNav ul li a {
   border: none;
-  color: #393939;
-  display: inline-block;
+  color: #717171;
+  display: block;
   font-size: 14px;
-  line-height: 1.1em;
-  margin: 2px 10px 5px;
-  padding: 5px 0 2px;
+  padding: 4px 0;
   transition: color 0.3s;
 }
-nav.toc .toggleNav ul li a:hover, nav.toc .toggleNav ul li a:focus {
+nav.toc .toggleNav ul li a:hover,
+nav.toc .toggleNav ul li a:focus {
   color: $primaryColor;
 }
 nav.toc .toggleNav ul li a.navItemActive {
   color: $primaryColor;
 }
 .docsSliderActive nav.toc .navBreadcrumb {
-  background: #c6c6c6;
+  border-bottom: 1px solid #ccc;
   margin-bottom: 20px;
   position: fixed;
   width: 100%;
 }
 nav.toc .toggleNav .navBreadcrumb h2 {
   border: 0;
-  font-size: inherit;
-  line-height: inherit;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 32px;
   margin: 0;
-  padding: 1px 0 0;
+  padding: 0;
 }
 .docsSliderActive nav.toc section .navGroups {
   display: block;