app/assets/stylesheets/_avatars.sass
// Avatar sizes
// xs: 12, sm: 16, md: 26, lg: 44, xl: 144, xxl: 230
$avatar-xs: 12px
$avatar-sm: 16px
$avatar-md: 26px
$avatar-lg: 44px
$avatar-xl: 144px
$avatar-xxl: 230px

.avatar-text
  text-align: center
  background-color: $blue
  color: $white

.circle-icon
  border-radius: 50%

.avatar-icon
  cursor: inherit
  display: inline-block
  font-weight: 400
  border-radius: 50%
  text-align: center
  position: relative
  overflow: hidden
  vertical-align: top
  &.xs
    width: $avatar-xs
    height: $avatar-xs
    line-height: $avatar-xs
    font-size: $avatar-xs/2
    img
      width: $avatar-xs
      height: $avatar-xs
  &.sm
    width: $avatar-sm
    height: $avatar-sm
    line-height: $avatar-sm
    font-size: $avatar-sm/2
    img
      width: $avatar-sm
      height: $avatar-sm
  &.md
    width: $avatar-md
    height: $avatar-md
    line-height: $avatar-md
    font-size: $avatar-md/2
    img
      width: $avatar-md
      height: $avatar-md
  &.lg
    width: $avatar-lg
    height: $avatar-lg
    line-height: $avatar-lg
    font-size: $avatar-lg/2
    img
      width: $avatar-lg
      height: $avatar-lg
  &.xl
    width: $avatar-xl
    height: $avatar-xl
    line-height: $avatar-xl
    font-size: $avatar-xl/2
    img
      width: $avatar-xl
      height: $avatar-xl
  &.xxl
    width: $avatar-xxl
    height: $avatar-xxl
    line-height: $avatar-xxl
    font-size: $avatar-xxl/2
  img
    position: absolute
    top: 0
    left: 0
