diff options
| author | Maxime Quandalle <maxime@quandalle.com> | 2015-05-30 15:50:48 +0200 |
|---|---|---|
| committer | Maxime Quandalle <maxime@quandalle.com> | 2015-05-30 15:50:48 +0200 |
| commit | f4c80d1315c181300bd37ef5de98c365325bc130 (patch) | |
| tree | 811dd0a9bba9bbe49d7e4c360719e72899574783 /client/components/users/userAvatar.styl | |
| parent | 6db01bb3c7bbcf3e5451dd828d3d0932eb5efec3 (diff) | |
| download | wekan-f4c80d1315c181300bd37ef5de98c365325bc130.tar.gz wekan-f4c80d1315c181300bd37ef5de98c365325bc130.tar.bz2 wekan-f4c80d1315c181300bd37ef5de98c365325bc130.zip | |
Implement presence indicators
Diffstat (limited to 'client/components/users/userAvatar.styl')
| -rw-r--r-- | client/components/users/userAvatar.styl | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/client/components/users/userAvatar.styl b/client/components/users/userAvatar.styl new file mode 100644 index 00000000..dfe59143 --- /dev/null +++ b/client/components/users/userAvatar.styl @@ -0,0 +1,108 @@ +@import 'nib' + +avatar-radius = 50% + +.member + border-radius: 3px + display: block + float: left + height: 30px + width: @height + margin: 0 4px 4px 0 + position: relative + cursor: pointer + user-select: none + z-index: 1 + text-decoration: none + border-radius: avatar-radius + + .avatar + height: 100% + width: @height + display: flex + align-items: center + justify-content: center + overflow: hidden + border-radius: avatar-radius + + .avatar-initials + font-weight: bold + max-width: 100% + max-height: 100% + font-size: 14px + line-height: 200% + background-color: #dbdbdb + color: #444444 + + .avatar-image + max-width: 100% + max-height: 100% + + .member-presence-status + background-color: #b3b3b3 + border: 1px solid #fff + border-radius: 50% + height: 7px + width: @height + position: absolute + right: -1px + bottom: -1px + border: 1px solid white + z-index: 15 + + &.active + background: #64c464 + border-color: #daf1da + + &.idle + background: #e4e467 + border-color: #f7f7d4 + + &.disconnected + background: #bdbdbd + border-color: #ededed + + &.extra-small + .avatar-initials + font-size: 9px + width: 18px + height: 18px + line-height: 18px + + .avatar-image + width: 18px + height: 18px + + &.small + width: 30px + height: 30px + + .avatar-initials + font-size: 12px + line-height: 30px + + &.large + height: 85px + line-height: 85px + width: 85px + + .avatar + width: 85px + height: 85px + + .avatar-initials + font-size: 16px + font-weight: 700 + line-height: 85px + width: 85px + +.atMention + background: #dbdbdb + border-radius: 3px + padding: 1px 4px + margin: -1px 0 + display: inline-block + + &.me + background: #cfdfe8 + |