GeekPark/gpk_account

View on GitHub
app/assets/stylesheets/components/avatar.scss

Summary

Maintainability
Test Coverage
& {
  @include flexCenter;
  width: 120px;
  height: 120px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  transform: scaleZ(1);

  &.editable {
    cursor: pointer;
  }
}

img {
  width: 100%;
  height: 100%;
}

.button-tip {
  position: absolute;
  width: 100%;
  background-color: rgba(74, 74, 74, .8);
  text-align: center;
  font-size: 1.4rem;
  color: #fff;
  left: 0;
  bottom: 0;
  padding: 2px 0 4px;
}

&.needhover {
  .button-tip {
    display: none;
  }

  &:hover .button-tip {
    display: block;
  }
}


input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}