106 lines
2.5 KiB
SCSS
106 lines
2.5 KiB
SCSS
@mixin avatar-size($size, $margin-right) {
|
|
width: $size;
|
|
height: $size;
|
|
margin-right: $margin-right;
|
|
}
|
|
|
|
.avatar-circle {
|
|
float: left;
|
|
margin-right: 15px;
|
|
border-radius: $avatar_radius;
|
|
border: 1px solid $avatar-border;
|
|
&.s16 { @include avatar-size(16px, 6px); }
|
|
&.s20 { @include avatar-size(20px, 7px); }
|
|
&.s24 { @include avatar-size(24px, 8px); }
|
|
&.s26 { @include avatar-size(26px, 8px); }
|
|
&.s32 { @include avatar-size(32px, 10px); }
|
|
&.s36 { @include avatar-size(36px, 10px); }
|
|
&.s40 { @include avatar-size(40px, 10px); }
|
|
&.s46 { @include avatar-size(46px, 15px); }
|
|
&.s48 { @include avatar-size(48px, 10px); }
|
|
&.s60 { @include avatar-size(60px, 12px); }
|
|
&.s70 { @include avatar-size(70px, 14px); }
|
|
&.s90 { @include avatar-size(90px, 15px); }
|
|
&.s110 { @include avatar-size(110px, 15px); }
|
|
&.s140 { @include avatar-size(140px, 15px); }
|
|
&.s160 { @include avatar-size(160px, 20px); }
|
|
}
|
|
|
|
.avatar {
|
|
@extend .avatar-circle;
|
|
@include transition-property(none);
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
|
|
&.avatar-inline {
|
|
float: none;
|
|
display: inline-block;
|
|
margin-left: 4px;
|
|
margin-bottom: 2px;
|
|
flex-shrink: 0;
|
|
-webkit-flex-shrink: 0;
|
|
|
|
&.s16 { margin-right: 4px; }
|
|
&.s24 { margin-right: 4px; }
|
|
}
|
|
|
|
&.center {
|
|
font-size: 14px;
|
|
line-height: 1.8em;
|
|
text-align: center;
|
|
}
|
|
|
|
&.avatar-tile {
|
|
border-radius: 0;
|
|
border: none;
|
|
}
|
|
|
|
&:not([href]):hover {
|
|
border-color: rgba($avatar-border, .2);
|
|
}
|
|
}
|
|
|
|
.identicon {
|
|
text-align: center;
|
|
vertical-align: top;
|
|
|
|
&.s16 { font-size: 12px; line-height: 1.33; }
|
|
&.s24 { font-size: 14px; line-height: 1.8; }
|
|
&.s26 { font-size: 20px; line-height: 1.33; }
|
|
&.s32 { font-size: 20px; line-height: 30px; }
|
|
&.s40 { font-size: 16px; line-height: 38px; }
|
|
&.s60 { font-size: 32px; line-height: 58px; }
|
|
&.s70 { font-size: 34px; line-height: 70px; }
|
|
&.s90 { font-size: 36px; line-height: 88px; }
|
|
&.s110 { font-size: 40px; line-height: 108px; font-weight: 300; }
|
|
&.s140 { font-size: 72px; line-height: 138px; }
|
|
&.s160 { font-size: 96px; line-height: 158px; }
|
|
}
|
|
|
|
.avatar-container {
|
|
@extend .avatar-circle;
|
|
overflow: hidden;
|
|
display: flex;
|
|
|
|
.avatar {
|
|
border-radius: 0;
|
|
border: none;
|
|
height: auto;
|
|
width: 100%;
|
|
margin: 0;
|
|
align-self: center;
|
|
}
|
|
}
|
|
|
|
.avatar-counter {
|
|
background-color: $gray-darkest;
|
|
color: $white-light;
|
|
border: 1px solid $border-color;
|
|
border-radius: 1em;
|
|
font-family: $regular_font;
|
|
font-size: 9px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
}
|