fix(docs): fix documentation sidebar (#3085)

swisspost · May 16, 2024 · f5524dc · f5524dc
1 parent 12e475e
commit f5524dc
Showing 1 changed file with 27 additions and 10 deletions.
diff --git a/packages/documentation/.storybook/styles/manager.scss b/packages/documentation/.storybook/styles/manager.scss
@@ -14,32 +14,54 @@
 }
 
 #storybook-explorer-tree {
-  padding-left: 13px;
-
   .sidebar-subheading {
+    width: 100%;
+
     button {
       letter-spacing: 0.1em;
+
+      &:focus,
+      &:hover {
+        background: none;
+      }
     }
 
     .sidebar-subheading-action {
       display: none;
     }
   }
 
+  .sidebar-subheading,
   .sidebar-item {
     position: relative;
+    border-radius: 0;
 
-    &:before {
+    &:before,
+    &:after {
       display: block;
       content: '';
       position: absolute;
       top: 0;
       bottom: 0;
-      right: 100%;
       width: 13px;
       background-color: inherit;
     }
 
+    &:before {
+      right: 100%;
+    }
+
+    &:after {
+      left: 100%;
+    }
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--post-gray-10);
+    }
+  }
+
+  .sidebar-item {
     > span {
       margin-top: 4px;
     }
@@ -48,7 +70,7 @@
       display: none;
     }
 
-    svg {
+    > div > svg {
       margin-top: 0;
       width: 1.2em;
       height: 1.2em;
@@ -67,11 +89,6 @@
       color: var(--post-aubergine-bright);
     }
 
-    &:hover,
-    &:focus-visible {
-      background-color: var(--post-gray-10);
-    }
-
     &[data-selected='true'] {
       background-color: rgba(var(--post-yellow-rgb), 0.4);
       color: var(--post-contrast-color);