-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
avatar.scss
48 lines (41 loc) · 1.23 KB
/
avatar.scss
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
.avatar {
display: inline-block;
overflow: hidden; // Ensure page layout in Firefox should images fail to load
line-height: $lh-condensed-ultra;
vertical-align: middle;
background-color: var(--color-avatar-bg); // adds opaque bg to transparent avatars
border-radius: $border-radius;
flex-shrink: 0;
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 0 1px var(--color-avatar-border);
}
.avatar-link {
float: left;
line-height: $lh-condensed-ultra;
}
// User for example on /stars and /user for grids of avatars
.avatar-group-item {
display: inline-block;
// stylelint-disable-next-line primer/spacing
margin-bottom: 3px;
}
// Border radius
.avatar-1,
.avatar-2,
.avatar-small {
// stylelint-disable-next-line primer/borders
border-radius: $border-radius-1;
}
// Sizes
@mixin avatar-size( $size ) {
width: $size;
height: $size;
}
.avatar-1 { @include avatar-size( $size-1 ); }
.avatar-2 { @include avatar-size( $size-2 ); }
.avatar-3 { @include avatar-size( $size-3 ); }
.avatar-4 { @include avatar-size( $size-4 ); }
.avatar-5 { @include avatar-size( $size-5 ); }
.avatar-6 { @include avatar-size( $size-6 ); }
.avatar-7 { @include avatar-size( $size-7 ); }
.avatar-8 { @include avatar-size( $size-8 ); }