[BUGFIX] Add reserved area for loading indicator within modules
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / Component / avatar.less
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 //
41 // Variables
42 //
43 @avatar-size:                32px;
44 @avatar-border-radius:       50%;
45 @avatar-dropdown-size:       28px;
46 @avatar-dropdown-correction: ((@avatar-dropdown-size - @line-height-computed) / 2);
47
48
49 //
50 // Component
51 //
52 .avatar {
53         position: relative;
54         display: inline-block;
55         height: @avatar-size;
56         width: @avatar-size;
57         vertical-align: middle;
58 }
59 .avatar-image {
60         display: block;
61         height: @avatar-size;
62         width: @avatar-size;
63         overflow: hidden;
64         border-radius: @avatar-border-radius;
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         > img {
77                 width: 100% !important;
78                 height: auto !important;
79         }
80 }
81 .avatar-icon {
82         position: absolute;
83         bottom: 0;
84         right: 0;
85         height: @avatar-size / 2;
86         width: @avatar-size / 2;
87 }
88
89
90 //
91 // Avatar in dropdowns
92 //
93 .dropdown-toggle {
94         > .avatar {
95                 height: @avatar-dropdown-size;
96                 width: @avatar-dropdown-size;
97                 float: left;
98                 margin-right: 0.5em;
99                 margin-top: -@avatar-dropdown-correction;
100         }
101         .avatar-image {
102                 height: @avatar-dropdown-size;
103                 width: @avatar-dropdown-size;
104         }
105 }