mirror of
https://github.com/Unleash/unleash.git
synced 2025-04-06 01:15:28 +02:00
3e602ceed5
- when introducing dark mode icon in the header, on tablet the menu items don't have enough space anymore, and this fix it - fixing also the color for dark mode of the keyboard nav button "skip to content"
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { SKIP_NAV_TARGET_ID } from 'component/common/SkipNavLink/SkipNavTarget';
|
|
import { styled } from '@mui/material';
|
|
import { focusable } from 'themes/themeStyles';
|
|
|
|
const StyledLink = styled('a')(({ theme }) => ({
|
|
position: 'fixed',
|
|
overflow: 'hidden',
|
|
zIndex: 1000,
|
|
top: theme.spacing(2.25),
|
|
left: theme.spacing(2.25),
|
|
padding: theme.spacing(1, 2),
|
|
whiteSpace: 'nowrap',
|
|
textDecoration: 'none',
|
|
background: theme.palette.background.alternative,
|
|
color: theme.palette.common.white,
|
|
borderRadius: theme.shape.borderRadius,
|
|
fontSize: theme.fontSizes.smallBody,
|
|
...focusable(theme),
|
|
|
|
[theme.breakpoints.down(960)]: {
|
|
top: '0.8rem',
|
|
left: '0.8rem',
|
|
},
|
|
|
|
'&:not(:focus):not(:active)': {
|
|
clip: 'rect(0 0 0 0)',
|
|
clipPath: 'inset(50%)',
|
|
zIndex: -1,
|
|
width: 1,
|
|
height: 1,
|
|
margin: -1,
|
|
padding: 0,
|
|
},
|
|
}));
|
|
|
|
export const SkipNavLink = () => (
|
|
<StyledLink href={`#${SKIP_NAV_TARGET_ID}`}>
|
|
Skip to content <span aria-hidden>↓</span>
|
|
</StyledLink>
|
|
);
|