agneta-angularjs/source/ui/account-picture/index.styl

Create your agneta applications with AngularJS

.ag-account-picture{
  background-color: color-primary;
  background-position: center;
  background-size: cover;
  padding: 8px;
  position: relative;
  border-radius: 100%;
  margin-right: 10px;
  width: 60px;
  height: 60px;
  &.md-button.md-fab{
    box-shadow: none;
  }
  &.editable{
    .action{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      background: alpha(black,0.3);
      transition: opacity 500ms ease;
      md-icon{
        color: color-primary;
        width: 40px;
        background: white;
        border-radius: 100%;
        padding: 6px;
        height: 40px;
      }
    }
    &:hover{
      .action{
        opacity: 1
      }
    }
  }
  .icon{
    color: white;
    padding: 0;
  }
}