@import compass
@import application/mixins
@import application/variables

.user
  $small-avatar-size: 2em
  $large-avatar-size: 128px

  position: relative
  width:    $small-avatar-size
  height    auto

  .avatar
    +background-size(cover)
    +border-radius(2px)

    +filter(saturate(5%))
    &:hover
      +filter(none)

  // make the avatar square
  .avatar
    width:     auto
    padding:   50%
    +box-sizing(border-box)

  .name
    white-space: nowrap

  &.user-large
    $padding-size:        8px

    padding: $padding-size
    width:   $large-avatar-size
    +box-shadow($medium_gray 0px 4px 7px -2px)

    .avatar
      & + .name
        margin-top: $padding-size
        text-align: center
      &:last-child
        margin-bottom: (3 * $padding-size)

  &.user-fit
    width: 100%
    height: auto

  &.user-inline
    display: inline-block
    .name
      display: inline

@import compass
@import application/mixins
@import application/variables

.user
  $small-avatar-size: 2em
  $large-avatar-size: 128px

  position: relative
  width:    $small-avatar-size
  height    auto

  .avatar
    +background-size(cover)
    +border-radius(2px)

    +filter(saturate(5%))
    &:hover
      +filter(none)

  // make the avatar square
  .avatar
    width:     auto
    padding:   50%
    +box-sizing(border-box)

  .name
    white-space: nowrap

  &.user-large
    $padding-size:        8px

    padding: $padding-size
    width:   $large-avatar-size
    +box-shadow($medium_gray 0px 4px 7px -2px)

    .avatar
      & + .name
        margin-top: $padding-size
        text-align: center
      &:last-child
        margin-bottom: (3 * $padding-size)

  &.user-fit
    width: 100%
    height: auto

  &.user-inline
    display: inline-block
    .name
      display: inline-block

Fix product manager user name layout-36
Fix product manager user name layout-36
