chore(theme/Toc): upgrade Toc border line in mobile (#2724)

Co-authored-by: Timeless0911 <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

packages/core/src/theme/components/Outline/index.scss

@@ -1,11 +1,16 @@
+:root {
+  --rp-outline-padding-x: 20px;
+}
+
 .rp-outline {
   display: flex;
   flex-direction: column;
   border-left: 1px solid var(--rp-c-divider-light);
-  padding-left: 20px;
-  padding-right: 20px;
 
   &__title {
+    padding-left: var(--rp-outline-padding-x);
+    padding-right: var(--rp-outline-padding-x);
+
     font-size: 14px;
     font-weight: 700;
     height: 32px;
@@ -23,13 +28,19 @@
   }
 
   &__divider {
+    margin-left: var(--rp-outline-padding-x);
+    margin-right: var(--rp-outline-padding-x);
+
     height: 1px;
     background: var(--rp-c-divider-light);
     margin-top: 16px;
     margin-bottom: 16px;
   }
 
   &__toc {
+    padding-left: var(--rp-outline-padding-x);
+    padding-right: var(--rp-outline-padding-x);
+
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -41,4 +52,9 @@
       overflow: auto scroll;
     }
   }
+
+  &__bottom {
+    padding-left: var(--rp-outline-padding-x);
+    padding-right: var(--rp-outline-padding-x);
+  }
 }

packages/core/src/theme/components/Toc/TocItem.scss

@@ -26,7 +26,7 @@
       width: 1px;
       background-color: var(--rp-c-brand);
       position: absolute;
-      left: -20px;
+      left: calc(-1 * var(--rp-outline-padding-x));
       top: 0px;
     }
   }