prehistoric-systems/security-checklist
1
0
Fork 0
mirror of https://github.com/brianlovin/security-checklist.git synced 2026-03-11 08:55:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Clean up responsive collapsing

Browse source
This commit is contained in:
Brian Lovin 2019-01-13 16:16:03 -08:00
parent ff3d4cb89d
commit 4f14f2b152
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/ChecklistItem/index.js
View file

@ -58,7 +58,7 @@ class ChecklistItem extends React.Component<Props, State> {
return (
<Container>
<Card isChecked={isChecked}>
<CardContent>
<CardContent isCollapsed={isCollapsed}>
<CheckboxContainer onClick={this.handleSetChecked}>
<Checkbox isChecked={isChecked} />
</CheckboxContainer>

15
components/ChecklistItem/style.js
View file

@ -14,7 +14,7 @@ export const CardContent = styled.div`
width: 100%;
@media (max-width: 768px) {
flex-direction: column;
flex-direction: ${props => (props.isCollapsed ? 'row' : 'column')};
}
`;
@ -23,7 +23,9 @@ export const Title = styled.h3`
font-weight: 500;
color: ${theme.text.default};
display: flex;
line-height: 1.2;
justify-content: space-between;
align-items: center;
`;
export const Description = styled(Markdown)`
@ -108,10 +110,12 @@ export const ResourceContent = styled.div`
margin-top: 2px;
padding-left: 16px;
width: 100%;
justify-content: ${props => (props.isCollapsed ? 'center' : 'flex-start')};
@media (max-width: 768px) {
padding-left: 8px;
margin-top: 24px;
padding-left: ${props => (props.isCollapsed ? '16px' : '8px')};
margin-top: ${props => (props.isCollapsed ? '0px' : '24px')};
justify-content: ${props => (props.isCollapsed ? 'center' : 'flex-start')};
}
`;
@ -317,8 +321,13 @@ export const Uncollapse = styled.span`
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
@media (max-width: 768px) {
display: none;
}
&:hover {
color: ${theme.text.default};
background: ${tint(theme.bg.wash, -4)};