doc eng fix: hide anchor icons by default in lists (#3475)

* doc eng fix: hide anchor icons by default in lists * reduce anchor gap to reduce flickering When hover goes from an icon to the item it was a moment when hover was inactive (thus icon becomes hidden) Co-authored-by: Thomas Kunwar <[email protected]> Co-authored-by: Thomas Kunwar <[email protected]>
iterative · Apr 28, 2022 · 842e2a6 · 842e2a6
1 parent 68c0a92
commit 842e2a6
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/.../gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/styles.module.css b/.../gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/styles.module.css
@@ -79,27 +79,37 @@
       content: unset;
     }
 
-    li,
     .collapsableDiv .anchor svg {
       visibility: hidden;
     }
 
-    li,
+    .collapsableDiv .anchor:focus svg {
+      visibility: visible;
+    }
+
     .collapsableDiv:hover .anchor svg {
       visibility: visible;
     }
 
-    li,
-    .collapsableDiv .anchor:focus svg {
+    .collapsableDiv .anchor {
+      line-height: 2.5;
+    }
+
+    li .anchor svg {
+      visibility: hidden;
+    }
+
+    li .anchor:focus svg {
       visibility: visible;
     }
 
-    li .anchor {
-      line-height: unset;
+    li:hover .anchor svg {
+      visibility: visible;
     }
 
-    .collapsableDiv .anchor {
-      line-height: 2.5;
+    li .anchor {
+      line-height: unset;
+      margin-left: -17px;
     }
 
     .anchor {