dan/abc-project-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(link): text decoration and focus state

Browse Source
This commit is contained in:
Dan Head
2021-02-02 17:46:14 +00:00
parent b96b9a6801
commit feea593d8a
3 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/footer.js
View File

@@ -40,7 +40,7 @@ export default function Footer() {
<Icon color="dark" size="lg">
<Phone />
</Icon>
<Link color="dark" size="lg" to="tel:+447539051512">
<Link color="dark" size="lg" to="tel:+447539051512" noDecoration>
07539 051512
</Link>
</IconWithContent>
@@ -54,6 +54,7 @@ export default function Footer() {
color="dark"
size="md"
to="mailto:quotations@abcprojectdesign.com"
noDecoration
>
quotations@abcprojectdesign.com
</Link>

22
src/components/link.js
View File

@@ -9,12 +9,26 @@ const StyledLink = styled.a`
css`
font-size: var(--font-size-${props.size});
`}
color: var(--color-dark);
${props =>
props.color &&
css`
color: var(--theme-color-${props.color});
`}
props.noDecoration
? css`
text-decoration: none;
`
: css`
text-decoration-color: var(--color-primary);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
`}
&:focus {
outline: 0;
box-shadow: 0 0 0 2px var(--color-dark);
}
&:focus:not(:focus-visible) {
box-shadow: none;
}
`;
export default function Link({ children, to, ...other }) {

5
src/pages/contact.js
View File

@@ -110,7 +110,7 @@ export default function Index({ data }) {
<Icon color="dark" size="lg">
<Phone />
</Icon>
<Link color="dark" size="lg" to="tel:+447539051512">
<Link color="dark" size="lg" to="tel:+447539051512" noDecoration>
07539 051512
</Link>
</IconWithContent>
@@ -118,7 +118,7 @@ export default function Index({ data }) {
<Icon color="dark" size="lg">
<Phone />
</Icon>
<Link color="dark" size="lg" to="tel:+441708938455">
<Link color="dark" size="lg" to="tel:+441708938455" noDecoration>
01708 938455
</Link>
</IconWithContent>
@@ -130,6 +130,7 @@ export default function Index({ data }) {
color="dark"
size="md"
to="mailto:quotations@abcprojectdesign.com"
noDecoration
>
quotations@abcprojectdesign.com
</Link>