/
index.js
59 lines (57 loc) · 1.45 KB
/
index.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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import core from '@pluralsight/ps-design-system-core'
import * as vars from '../vars'
export default {
'.psds-avatar': {
overflow: 'hidden',
display: 'inline-block',
textAlign: 'center',
position: 'relative',
borderRadius: '100%'
},
// --size
[`.psds-avatar--size-${vars.sizes.xSmall}`]: {
width: vars.widths.xSmall,
height: vars.widths.xSmall,
fontSize: core.type.fontSizeXSmall
},
[`.psds-avatar--size-${vars.sizes.small}`]: {
width: vars.widths.small,
height: vars.widths.small,
fontSize: core.type.fontSizeSmall
},
[`.psds-avatar--size-${vars.sizes.medium}`]: {
width: vars.widths.medium,
height: vars.widths.medium,
fontSize: core.type.fontSizeMedium
},
[`.psds-avatar--size-${vars.sizes.large}`]: {
width: vars.widths.large,
height: vars.widths.large,
fontSize: core.type.fontSizeLarge
},
[`.psds-avatar--size-${vars.sizes.xLarge}`]: {
width: vars.widths.xLarge,
height: vars.widths.xLarge,
fontSize: core.type.fontSizeXLarge
},
// __image
'.psds-avatar__image': {
position: 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%',
objectFit: 'cover'
},
// __initials
'.psds-avatar__initials': {
width: 'auto',
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
color: core.colors.white,
fontWeight: core.type.fontWeightBook,
backgroundColor: core.colors.gray02
}
}