Make table full width when mouse hovered (#379)

* chore: make table full width when mouse hovered - remove table transparency when mouse hovered * chore: implement feedback * chore: move styling to docs-markdown Co-authored-by: Temitayo Fadojutimi <[email protected]>
cloudflare · Jan 26, 2022 · 7cc5eb7 · 7cc5eb7
1 parent 3e7f905
commit 7cc5eb7
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/src/css/docs/components/docs-markdown.css b/src/css/docs/components/docs-markdown.css
@@ -785,6 +785,17 @@ blockquote .DocsMarkdown--header-anchor-positioner {
   word-break: initial;
 }
 
+@media (hover: hover) {
+  .DocsMarkdown--table-wrap:hover {
+    width: calc(100% + var(--docs-body-sidebar-width));
+  }
+
+  .DocsMarkdown--table-wrap:hover table {
+    background-color: var(--background-color);
+    z-index: 1;
+  }
+}
+
 .DocsMarkdown--table-wrap tr > *:first-child {
   position: sticky;
   left: 0;