@cryptotaxi247 / documentation
Code Commits Issues Pulls Sessions CI/CD
main
@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 50 lines 1.15 KB
Raw
1 import React from 'react'
2 import styled from 'styled-components'
3 import Link from './link'
4 import {SCROLL_MARGIN_TOP, SKIP_TO_CONTENT_ID} from '../constants'
5
6 export const SkipLink = styled(Link)`
7 color: var(--fgColor-accent);
8 padding: 4px;
9 &:focus {
10 text-decoration: underline;
11 }
12 `
13
14 // The following rules are to ensure that the element is visually hidden, unless
15 // it has focus. This is the recommended way to hide content from:
16 // https://webaim.org/techniques/css/invisiblecontent/#techniques
17 export const SkipBox = styled.div`
18 display: inline-flex;
19 z-index: 20;
20 left: 10px;
21 gap: 3px;
22 position: absolute;
23 transform: translateY(-100%);
24 transition: transform 0.3s;
25 padding: 8px;
26 background-color: var(--bgColor-default);
27 border: 1px solid var(--fgColor-accent);
28 border-top: 0;
29 font-size: 12px;
30 border-radius: 0 0 6px 6px;
31
32
33 &:focus-within {
34 transform: translateY(0%);
35 }
36
37 & > * {
38 margin-right: 4px;
39 }
40
41 & > *:last-child {
42 margin-right: 0;
43 }
44 `
45
46 const SkipNavBase = props => <div id={SKIP_TO_CONTENT_ID} {...props} />
47
48 export const SkipNav = styled(SkipNavBase)`
49 scroll-margin-top: ${SCROLL_MARGIN_TOP}px;
50 `