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

22
src/components/link.js
View File

@@ -9,12 +9,26 @@ const StyledLink = styled.a`
css` css`
font-size: var(--font-size-${props.size}); font-size: var(--font-size-${props.size});
`} `}
color: var(--color-dark);
${props => ${props =>
props.color && props.noDecoration
css` ? css`
color: var(--theme-color-${props.color});
`}
text-decoration: none; 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 }) { 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"> <Icon color="dark" size="lg">
<Phone /> <Phone />
</Icon> </Icon>
<Link color="dark" size="lg" to="tel:+447539051512"> <Link color="dark" size="lg" to="tel:+447539051512" noDecoration>
07539 051512 07539 051512
</Link> </Link>
</IconWithContent> </IconWithContent>
@@ -118,7 +118,7 @@ export default function Index({ data }) {
<Icon color="dark" size="lg"> <Icon color="dark" size="lg">
<Phone /> <Phone />
</Icon> </Icon>
<Link color="dark" size="lg" to="tel:+441708938455"> <Link color="dark" size="lg" to="tel:+441708938455" noDecoration>
01708 938455 01708 938455
</Link> </Link>
</IconWithContent> </IconWithContent>
@@ -130,6 +130,7 @@ export default function Index({ data }) {
color="dark" color="dark"
size="md" size="md"
to="mailto:quotations@abcprojectdesign.com" to="mailto:quotations@abcprojectdesign.com"
noDecoration
> >
quotations@abcprojectdesign.com quotations@abcprojectdesign.com
</Link> </Link>