app/assets/stylesheets/components/avatar.scss
& {
@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%;
}