ce1fa7ac19e5d4962f21f8dd7c659088dc3f1066
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / component / _avatar.scss
1 //
2 // Avatar
3 // ======
4 // Display user profile images
5 //
6 //
7 // Empty Usage - Fallback image provided
8 // -------------------------------------
9 //
10 // <span class="avatar">
11 //   <span class="avatar-image"></span>
12 // </span>
13 //
14 //
15 // Normal Usage
16 // ------------
17 //
18 // <span class="avatar">
19 //   <span class="avatar-image">
20 //     <img src="">
21 //   </span>
22 // </span>
23 //
24 //
25 // Avatar with RecordIcon
26 // ------------
27 //
28 // <span class="avatar">
29 //   <span class="avatar-image">
30 //     <img src="">
31 //   </span>
32 //   <span class="avatar-icon">
33 //     <span class="t3-icon t3-icon-status t3-icon-status-user t3-icon-user-admin"></span>
34 //   </span>
35 // </span>
36 //
37 //
38
39 //
40 // Variables
41 //
42 $avatar-size: 32px;
43 $avatar-border-radius: 50%;
44 $avatar-dropdown-size: 28px;
45 $avatar-dropdown-correction: (($avatar-dropdown-size - $line-height-computed) / 2);
46
47 //
48 // Component
49 //
50 .avatar {
51     position: relative;
52     display: inline-block;
53     height: $avatar-size;
54     width: $avatar-size;
55     vertical-align: middle;
56 }
57
58 .avatar-image {
59     display: block;
60     height: $avatar-size;
61     width: $avatar-size;
62     overflow: hidden;
63     border-radius: $avatar-border-radius;
64
65     &:after {
66         display: block;
67         content: '';
68         position: absolute;
69         top: 0;
70         left: 0;
71         height: 100%;
72         width: 100%;
73         border-radius: $avatar-border-radius;
74         border: 1px solid rgba(255, 255, 255, 0.1);
75     }
76
77     > img {
78         width: 100% !important;
79         height: auto !important;
80     }
81 }
82
83 .avatar-icon {
84     position: absolute;
85     bottom: 0;
86     right: 0;
87     height: $avatar-size / 2;
88     width: $avatar-size / 2;
89 }