[docs] Better visually group tocs items

mui · May 10, 2020 · 79ef426 · 79ef426
1 parent f5de90f
commit 79ef426
Showing 1 changed file with 8 additions and 11 deletions.
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
   },
   contents: {
     marginTop: theme.spacing(2),
-    paddingLeft: theme.spacing(1),
+    paddingLeft: 8,
   },
   ul: {
     padding: 0,
@@ -36,20 +36,17 @@ const useStyles = makeStyles((theme) => ({
   },
   item: {
     fontSize: '.8125rem',
-    lineHeight: 2,
-    // paddingLeft: theme.spacing(1) where `border` is used as the "active" marker
-    paddingLeft: Math.max(0, theme.spacing(1) - 4),
-    borderLeft: `4px solid transparent`,
+    margin: theme.spacing(1, 0),
+    paddingLeft: 5,
+    borderLeft: `3px solid transparent`,
     boxSizing: 'border-box',
     '&:hover': {
-      borderLeft: `4px solid ${
-        theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900]
-      }`,
+      borderLeftColor:
+        theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
     },
     '&$active,&:active': {
-      borderLeft: `4px solid ${
-        theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[800]
-      }`,
+      borderLeftColor:
+        theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[800],
     },
   },
   secondaryItem: {