-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
/
_avatars.scss
111 lines (96 loc) · 2.44 KB
/
_avatars.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
.avatar {
--#{$prefix}avatar-size: #{$avatar-size};
--#{$prefix}avatar-bg: #{$avatar-bg};
--#{$prefix}avatar-shadow: #{$shadow-inset};
position: relative;
width: var(--#{$prefix}avatar-size);
height: var(--#{$prefix}avatar-size);
font-size: calc(var(--#{$prefix}avatar-size) / #{$line-height-base * 2});
font-weight: var(--#{$prefix}font-weight-medium);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--#{$prefix}muted);
text-align: center;
text-transform: uppercase;
vertical-align: bottom;
user-select: none;
background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
border-radius: $avatar-border-radius;
box-shadow: var(--#{$prefix}avatar-shadow);
svg {
width: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
height: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
}
.badge {
position: absolute;
right: 0;
bottom: 0;
border-radius: $border-radius-pill;
box-shadow: 0 0 0 2px $card-bg;
}
@at-root a#{&} {
cursor: pointer;
}
}
.avatar-rounded {
border-radius: $border-radius-pill;
}
@each $avatar-size, $size in $avatar-sizes {
.avatar-#{$avatar-size} {
--#{$prefix}avatar-size: #{$size};
}
.avatar-#{$avatar-size} .badge:empty {
width: $size * .25;
height: $size * .25;
}
}
//
// Avatar list
//
.avatar-list {
@include elements-list;
a.avatar {
&:hover {
z-index: 1;
}
}
}
.avatar-list-stacked {
display: block;
--#{$prefix}list-gap: 0;
.avatar {
margin-right: calc(-.5 * var(--#{$prefix}avatar-size)) !important;
box-shadow: var(--#{$prefix}avatar-shadow), 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)));
}
}
//
// Avatar upload
//
.avatar-upload {
width: 4rem;
height: 4rem;
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
background: $form-check-input-bg;
flex-direction: column;
@include transition(color $transition-time, background-color $transition-time);
svg {
width: 1.5rem;
height: 1.5rem;
stroke-width: 1;
}
&:hover {
border-color: var(--#{$prefix}primary);
color: var(--#{$prefix}primary);
text-decoration: none;
}
}
.avatar-upload-text {
font-size: $h6-font-size;
line-height: 1;
margin-top: .25rem;
}
.avatar-cover {
margin-top: calc(-.5 * var(--#{$prefix}avatar-size));
box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
}