@cryptotaxi247 / documentation-1
Code Commits Issues Pulls Sessions CI/CD
kartykp/upgrade-path-to-regex
@reggi/path-to-regexp dependabot/npm_and_yarn/main/copy-to-clipboard-4.0.2 dependabot/npm_and_yarn/main/eslint-10.4.0 dependabot/npm_and_yarn/main/npmcli/eslint-config-7.0.0 dependabot/npm_and_yarn/main/proc-log-7.0.0 dependabot/npm_and_yarn/npm_and_yarn-826852524d dependabot/npm_and_yarn/npm_and_yarn-ab9a7f4bc2 deprecate-totp-2fa dhei/classic-tokens gat-bypass-2fa-docs jpg619/fix-accessibility-content-flow jpg619/version-bump-tar-2 kartykp/gat-bypass-2fa-docs kartykp/upgrade-path-to-regex main maitxn/version-bump-tar patch-1 reggi/cache-based-on-version reggi/dev-engines reggi/fix-transform-prettier reggi/overrides update-search-sensitivity
js 51 lines 1.35 KB
Raw
1 import React from 'react'
2 import {Box, themeGet} from '@primer/react'
3 import styled from 'styled-components'
4 import Link from './link'
5 import {SCROLL_MARGIN_TOP, SKIP_TO_CONTENT_ID} from '../constants'
6
7 export const SkipLink = styled(Link)`
8 color: ${themeGet('colors.accent.emphasis')};
9 padding: ${themeGet('space.1')};
10 &:focus {
11 text-decoration: underline;
12 }
13 `
14
15 // The following rules are to ensure that the element is visually hidden, unless
16 // it has focus. This is the recommended way to hide content from:
17 // https://webaim.org/techniques/css/invisiblecontent/#techniques
18 export const SkipBox = styled.div`
19 display: inline-flex;
20 z-index: 20;
21 left: 10px;
22 gap: 3px;
23 position: absolute;
24 transform: translateY(-100%);
25 transition: transform 0.3s;
26 padding: ${themeGet('space.2')};
27 background-color: ${themeGet('colors.canvas.default')};
28 border: 1px solid ${themeGet('colors.accent.emphasis')};
29 border-top: 0;
30 font-size: ${themeGet('fontSizes.1')};
31 border-radius: 0 0 ${themeGet('radii.2')} ${themeGet('radii.2')};
32
33
34 &:focus-within {
35 transform: translateY(0%);
36 }
37
38 & > * {
39 margin-right: ${themeGet('space.1')};
40 }
41
42 & > *:last-child {
43 margin-right: 0;
44 }
45 `
46
47 const SkipNavBase = props => <Box id={SKIP_TO_CONTENT_ID} {...props} />
48
49 export const SkipNav = styled(SkipNavBase)`
50 scroll-margin-top: ${SCROLL_MARGIN_TOP}px;
51 `