fix(v2): add shadow to skip link on hover only

facebook · Jun 24, 2021 · 7ed308d · 7ed308d
1 parent 814455f
commit 7ed308d
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 5 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx b/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx
@@ -6,7 +6,6 @@
  */
 
 import React, {useRef} from 'react';
-import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import {useLocationChange} from '@docusaurus/theme-common';
 
@@ -40,10 +39,7 @@ function SkipToContent(): JSX.Element {
 
   return (
     <div ref={containerRef}>
-      <a
-        href="#main"
-        className={clsx(styles.skipToContent, 'shadow--md')}
-        onClick={handleSkip}>
+      <a href="#main" className={styles.skipToContent} onClick={handleSkip}>
         <Translate
           id="theme.common.skipToMainContent"
           description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">

diff --git a/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css b/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css
@@ -10,4 +10,5 @@
 
 .skipToContent:focus {
   left: 1rem;
+  box-shadow: var(--ifm-global-shadow-md);
 }