Skip to content

Instantly share code, notes, and snippets.

@grantglidewell
Last active February 13, 2020 00:31
Show Gist options
  • Save grantglidewell/0553aafd4e3732609d35746fc84390d9 to your computer and use it in GitHub Desktop.
Save grantglidewell/0553aafd4e3732609d35746fc84390d9 to your computer and use it in GitHub Desktop.
const Checkbox = styled.div`
width: 36px;
height: 36px;
border-radius: 6px;
transition: all 150ms;
border: ${colors.darkgrayFaded} solid 1px;
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
&::after {
content: ' ';
display: inline-block;
border-radius: 4px;
height: ${props => (props.checked ? '18px' : '0px')};
width: ${props => (props.checked ? '18px' : '0px')};
background-color: ${colors.yellow};
transition: all cubic-bezier(0.175, 0.985, 0.32, 1.275) 0.25s;
}
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment