gitlab-org--gitlab-foss/app/assets/stylesheets/framework/avatar.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 $gray-normal;
  &.s16 { @include avatar-size(16px, 6px); }
  &.s18 { @include avatar-size(18px, 6px); }
  &.s19 { @include avatar-size(19px, 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); }
  &.s64 { @include avatar-size(64px, 14px); }
  &.s70 { @include avatar-size(70px, 14px); }
  &.s90 { @include avatar-size(90px, 15px); }
  &.s100 { @include avatar-size(100px, 15px); }
  &.s110 { @include avatar-size(110px, 15px); }
  &.s140 { @include avatar-size(140px, 15px); }
  &.s160 { @include avatar-size(160px, 20px); }
}

.avatar {
  @extend .avatar-circle;
  transition-property: none;

  width: 40px;
  height: 40px;
  padding: 0;
  background: $gray-lightest;
  overflow: hidden;

  &.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;
  }

  &:not([href]):hover {
    border-color: darken($gray-normal, 10%);
  }
}

.identicon {
  text-align: center;
  vertical-align: top;
  color: $gl-gray-700;
  background-color: $gray-darker;

  // Sizes
  &.s16 { font-size: 12px;
    line-height: 1.33; }

  &.s24 { font-size: 13px;
    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; }

  &.s48 { font-size: 20px;
    line-height: 46px; }

  &.s60 { font-size: 32px;
    line-height: 58px; }

  &.s64 { font-size: 32px;
    line-height: 64px; }

  &.s70 { font-size: 34px;
    line-height: 70px; }

  &.s90 { font-size: 36px;
    line-height: 88px; }

  &.s100 { font-size: 36px;
    line-height: 98px; }

  &.s110 { font-size: 40px;
    line-height: 108px;
    font-weight: $gl-font-weight-normal; }

  &.s140 { font-size: 72px;
    line-height: 138px; }

  &.s160 { font-size: 96px;
    line-height: 158px; }

  // Background colors
  &.bg1 { background-color: $identicon-red; }
  &.bg2 { background-color: $identicon-purple; }
  &.bg3 { background-color: $identicon-indigo; }
  &.bg4 { background-color: $identicon-blue; }
  &.bg5 { background-color: $identicon-teal; }
  &.bg6 { background-color: $identicon-orange; }
  &.bg7 { background-color: $gray-darker; }
}

.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;
  &.s16 { border-radius: $border-radius-small; }
  &.s18 { border-radius: $border-radius-small; }
  &.s19 { border-radius: $border-radius-small; }
  &.s20 { border-radius: $border-radius-small; }
  &.s24 { border-radius: $border-radius-default; }
  &.s26 { border-radius: $border-radius-default; }
  &.s32 { border-radius: $border-radius-default; }
  &.s36 { border-radius: $border-radius-default; }
  &.s40 { border-radius: $border-radius-default; }
  &.s46 { border-radius: $border-radius-default; }
  &.s48 { border-radius: $border-radius-large; }
  &.s60 { border-radius: $border-radius-large; }
  &.s64 { border-radius: $border-radius-large; }
  &.s70 { border-radius: $border-radius-large; }
  &.s90 { border-radius: $border-radius-large; }
  &.s96 { border-radius: $border-radius-large; }
  &.s100 { border-radius: $border-radius-large; }
  &.s110 { border-radius: $border-radius-large; }
  &.s140 { border-radius: $border-radius-large; }
  &.s160 { border-radius: $border-radius-large; }
}

.avatar-counter {
  background-color: $gray-darkest;
  color: $white-light;
  border: 1px solid $gray-normal;
  border-radius: 1em;
  font-family: $regular-font;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
}