crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add active styling to chapter link

Browse Source
This commit is contained in:
Fred Carlsen
2018-12-10 15:19:52 +01:00
parent 5e1892f383
commit cc1b71651d
5 changed files with 22 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/website/ts/@next/components/chapter_link.tsx Normal file
View File

@@ -0,0 +1,16 @@
import * as React from 'react';
import { NavLink as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
export const ChapterLink = styled(ReactRouterLink).attrs({
activeStyle: { opacity: 1 },
})`
font-size: 1.222222222rem;
display: block;
opacity: 0.5;
margin-bottom: 1.666666667rem;
&:hover {
opacity: 1;
}
`;

19
packages/website/ts/@next/pages/about/jobs.tsx
View File

@@ -2,6 +2,7 @@ import * as React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
import { ChapterLink } from 'ts/@next/components/chapter_link';
import { Column, Section, Wrap } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
@@ -117,20 +118,4 @@ const BenefitsList = styled.ul`
li {
margin-bottom: 1em;
}
`;
// Lets refactor these chapter links into button perhaps as a <Link type={xxx} />
const ChapterLink = styled(ReactRouterLink)`
font-size: 1.222222222rem;
display: block;
opacity: 0.8;
margin-bottom: 1.666666667rem;
&:first-child {
opacity: 1;
}
&:hover {
opacity: 1;
}
`;
`;

18
packages/website/ts/@next/pages/about/mission.tsx
View File

@@ -2,6 +2,7 @@ import * as React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
import { ChapterLink } from 'ts/@next/components/chapter_link';
import { Image } from 'ts/@next/components/image';
import { Column, Section, Wrap } from 'ts/@next/components/layout';
import { Link } from 'ts/@next/components/link';
@@ -74,19 +75,4 @@ export const NextAboutMission = () => (
</Wrap>
</Section>
</SiteWrap>
);
const ChapterLink = styled(ReactRouterLink)`
font-size: 1.222222222rem;
display: block;
opacity: 0.8;
margin-bottom: 1.666666667rem;
&:first-child {
opacity: 1;
}
&:hover {
opacity: 1;
}
`;
);

16
packages/website/ts/@next/pages/about/press.tsx
View File

@@ -2,6 +2,7 @@ import * as React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
import { ChapterLink } from 'ts/@next/components/chapter_link';
import { Column, Section, Wrap } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
@@ -64,18 +65,3 @@ export const NextAboutPress = () => (
</Section>
</SiteWrap>
);
const ChapterLink = styled(ReactRouterLink)`
font-size: 1.222222222rem;
display: block;
opacity: 0.8;
margin-bottom: 1.666666667rem;
&:first-child {
opacity: 1;
}
&:hover {
opacity: 1;
}
`;

16
packages/website/ts/@next/pages/about/team.tsx
View File

@@ -4,6 +4,7 @@ import styled from 'styled-components';
import { colors } from 'ts/style/colors';
import { ChapterLink } from 'ts/@next/components/chapter_link';
import { Column, Section, Wrap } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
@@ -196,21 +197,6 @@ export const NextAboutTeam = () => (
</SiteWrap>
);
const ChapterLink = styled(ReactRouterLink)`
font-size: 1.222222222rem;
display: block;
opacity: 0.8;
margin-bottom: 1.666666667rem;
&:first-child {
opacity: 1;
}
&:hover {
opacity: 1;
}
`;
const StyledMember = styled.div`
width: calc(25% - 10px);
margin-bottom: 10px;