Merge pull request #21021 from yamanoku/fix-sidebar-skip-to-canvas-li…

…nk-style fix: skip to canvas link style
storybookjs · Feb 20, 2023 · 932fc56 · 932fc56
2 parents 62ccd7e + 9722e98
commit 932fc56
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/code/ui/manager/src/components/sidebar/Heading.tsx b/code/ui/manager/src/components/sidebar/Heading.tsx
@@ -44,13 +44,27 @@ const SkipToCanvasLink = styled(Button)(({ theme }) => ({
   '@media (min-width: 600px)': {
     display: 'block',
     position: 'absolute',
-    width: '100%',
-    padding: '10px 15px',
     fontSize: theme.typography.size.s1,
     zIndex: 3,
-    transform: 'translate(0,-100px)',
+    border: 0,
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    wordWrap: 'normal',
+    opacity: 0,
+    transition: 'opacity 150ms ease-out',
     '&:focus': {
-      transform: 'translate(0)',
+      width: '100%',
+      height: 'inherit',
+      padding: '10px 15px',
+      margin: 0,
+      clip: 'unset',
+      overflow: 'unset',
+      opacity: 1,
     },
   },
 }));