feat(ui): tweak sidebar toc

egoist · Dec 16, 2018 · d49f0d1 · d49f0d1
1 parent f7dacda
commit d49f0d1
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 25 deletions.
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -82,7 +82,7 @@ export default {
 @import 'vars.css';
 
 .Sidebar {
-  width: 250px;
+  width: var(--sidebar-width);
   background: var(--sidebar-bg);
   position: fixed;
   top: var(--header-height);
@@ -142,46 +142,32 @@ export default {
   font-size: 1.1rem;
   position: relative;
 
-  &.active,
-  &:hover {
+  &.active {
     font-weight: bold;
   }
 }
 
 .TocHeading {
   display: flex;
   line-height: 1.4;
-  margin-bottom: 3px;
+  margin: 5px 0;
   position: relative;
 
-  &:first-child {
-    margin-top: 5px;
-  }
-
-  &:last-child {
-    margin-bottom: 5px;
-  }
-
   &[data-level='2'] {
-    margin-left: 35px;
+    padding: 0 20px;
+    &:before {
+      content: '-';
+      margin-right: 5px;
+      color: #979797;
+    }
   }
 
   &[data-level='3'] {
-    margin-left: 50px;
+    padding: 0 20px 0 50px;
   }
 
   &.router-link-exact-active {
     font-weight: bold;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 3px;
-      right: 0;
-      background: #333;
-    }
   }
 }
 </style>
diff --git a/src/css/vars.css b/src/css/vars.css
@@ -1,5 +1,6 @@
 :root {
   --accent-color: rgb(6, 125, 247);
+  --sidebar-width: 280px;
   --sidebar-bg: white;
   --sidebar-section-title-color: rgb(136, 136, 136);
   --border-color: #eaeaea;

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -144,7 +144,7 @@ export default {
 }
 
 .Main {
-  margin-left: 250px;
+  margin-left: var(--sidebar-width);
   padding: 30px 20px 80px 80px;
   margin-top: var(--header-height);
 

diff --git a/website/docs/guide/customization.md b/website/docs/guide/customization.md
@@ -5,10 +5,13 @@
 Default [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables):
 
 ```css
+:root {
   --accent-color: rgb(6, 125, 247);
+  --sidebar-width: 280px;
   --sidebar-bg: white;
   --sidebar-section-title-color: rgb(136, 136, 136);
   --border-color: #eaeaea;
   --header-height: 60px;
   --code-font: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
+}
 ```
diff --git a/website/docs/zh/guide/customization.md b/website/docs/zh/guide/customization.md
@@ -5,10 +5,13 @@
 默认 [CSS 变量](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)：
 
 ```css
+:root {
   --accent-color: rgb(6, 125, 247);
+  --sidebar-width: 280px;
   --sidebar-bg: white;
   --sidebar-section-title-color: rgb(136, 136, 136);
   --border-color: #eaeaea;
   --header-height: 60px;
   --code-font: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
+}
 ```