-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
elements.js
38 lines (32 loc) · 947 Bytes
/
elements.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import styled from 'styled-components';
import GithubIcon from 'react-icons/lib/go/mark-github';
import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
export const ProfileImage = styled.img`
border-radius: 2px;
margin-right: 1.5rem;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
background-color: ${props => props.theme.background2};
${delayEffect(0.05)};
`;
export const Name = styled.div`
${delayEffect(0.1)};
display: flex;
align-items: center;
font-size: 2rem;
font-weight: 300;
margin-bottom: 0.25rem;
`;
export const Username = styled.div`
${delayEffect(0.15)};
display: flex;
align-items: center;
font-size: ${props => (props.main ? 1.5 : 1.25)}rem;
font-weight: 200;
color: ${props => (props.main ? 'white' : 'rgba(255, 255, 255, 0.6)')};
margin-bottom: 1rem;
`;
export const IconWrapper = styled(GithubIcon)`
margin-left: 0.75rem;
font-size: 1.1rem;
color: white;
`;