[website] Fix visual bug appbar (#36875)

mui · Apr 13, 2023 · 511b385 · 511b385
1 parent 75c1dfb
commit 511b385
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
@@ -28,16 +28,21 @@ const Navigation = styled('nav')(({ theme }) => [
         display: 'inline-block',
         color: 'inherit',
         textDecoration: 'none',
-        padding: theme.spacing(1),
+        padding: theme.spacing('8px', 1),
         borderRadius: (theme.vars || theme).shape.borderRadius,
-        '&:hover, &:focus': {
-          backgroundColor: (theme.vars || theme).palette.grey[50],
+        '&:hover': {
           color: (theme.vars || theme).palette.grey[700],
+          backgroundColor: (theme.vars || theme).palette.grey[50],
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
             backgroundColor: 'initial',
           },
         },
+        '&:focus-visible': {
+          color: (theme.vars || theme).palette.grey[700],
+          outline: 0,
+          backgroundColor: (theme.vars || theme).palette.grey[100],
+        },
       },
       '& > div': {
         cursor: 'default',
@@ -47,10 +52,14 @@ const Navigation = styled('nav')(({ theme }) => [
   theme.applyDarkStyles({
     '& li': {
       '& > a, & > div': {
-        '&:hover, &:focus': {
+        '&:hover': {
           backgroundColor: (theme.vars || theme).palette.primaryDark[700],
           color: (theme.vars || theme).palette.primaryDark[200],
         },
+        '&:focus-visible': {
+          backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+          color: (theme.vars || theme).palette.primaryDark[100],
+        },
       },
     },
   }),