debian-mirror-gitlab/app/assets/stylesheets/components/avatar.scss
2019-09-30 21:07:59 +05:30

200 lines
3.5 KiB
SCSS

$avatar-sizes: (
16: (
font-size: 10px,
line-height: 16px,
border-radius: $border-radius-small
),
18: (
border-radius: $border-radius-small
),
20: (
border-radius: $border-radius-small
),
24: (
font-size: 12px,
line-height: 24px,
border-radius: $border-radius-default
),
26: (
font-size: 20px,
line-height: 1.33,
border-radius: $border-radius-default
),
32: (
font-size: 14px,
line-height: 32px,
border-radius: $border-radius-default
),
40: (
font-size: 16px,
line-height: 38px,
border-radius: $border-radius-default
),
48: (
font-size: 20px,
line-height: 48px,
border-radius: $border-radius-large
),
60: (
font-size: 32px,
line-height: 58px,
border-radius: $border-radius-large
),
64: (
font-size: 28px,
line-height: 64px,
border-radius: $border-radius-large
),
90: (
font-size: 36px,
line-height: 88px,
border-radius: $border-radius-large
),
96: (
font-size: 36px,
line-height: 94px,
border-radius: $border-radius-large
),
100: (
font-size: 36px,
line-height: 98px,
border-radius: $border-radius-large
),
160: (
font-size: 96px,
line-height: 158px,
border-radius: $border-radius-large
)
);
$identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal,
$identicon-orange, $gray-darker;
.avatar-circle {
float: left;
margin-right: $gl-padding;
border-radius: $avatar-radius;
border: 1px solid $gray-normal;
@each $size, $size-config in $avatar-sizes {
&.s#{$size} {
@include avatar-size(#{$size}px, if($size < 48, 8px, 16px));
}
}
}
.avatar {
@extend .avatar-circle;
transition-property: none;
width: 40px;
height: 40px;
padding: 0;
background: $gray-lightest;
overflow: hidden;
border-color: rgba($black, $gl-avatar-border-opacity);
&.avatar-inline {
float: none;
display: inline-block;
margin-left: 2px;
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: 0;
}
&.avatar-placeholder {
border: 0;
}
}
.identicon {
text-align: center;
vertical-align: top;
color: $gray-800;
background-color: $gray-darker;
// Sizes
@each $size, $size-config in $avatar-sizes {
$keys: map-keys($size-config);
&.s#{$size} {
@each $key in $keys {
// We don't want `border-radius` to be included here.
@if ($key != 'border-radius') {
#{$key}: map-get($size-config, #{$key});
}
}
}
}
// Background colors
@for $i from 1 through length($identicon-backgrounds) {
&.bg#{$i} {
background-color: nth($identicon-backgrounds, $i);
}
}
}
.avatar-container {
@extend .avatar-circle;
overflow: hidden;
display: flex;
a {
width: 100%;
height: 100%;
display: flex;
text-decoration: none;
}
.avatar {
border-radius: 0;
border: 0;
height: auto;
width: 100%;
margin: 0;
align-self: center;
}
&.s40 {
min-width: 40px;
min-height: 40px;
}
&.s64 {
min-width: 64px;
min-height: 64px;
}
}
.rect-avatar {
border-radius: $border-radius-small;
@each $size, $size-config in $avatar-sizes {
&.s#{$size} {
border-radius: map-get($size-config, 'border-radius');
}
}
}
.avatar-counter {
@include avatar-counter();
}