app/assets/stylesheets/pages/profile.scss
.avatar-circle {
float: left;
margin-right: 15px;
border-radius: $avatar-radius;
&.s36 { @include avatar-size(36px, 16px); }
&.s160 { @include avatar-size(160px, 16px); }
}
.avatar-uploader {
.avatar-cropper-overlay {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
}
.avatar-cropper-img-input {
display: none;
}
.avatar-cropper-close {
float: right;
padding: 20px;
font-size: 3rem;
color: $white;
font-weight: 100;
text-shadow: 0px 1px rgba(40, 40, 40, 0.3);
}
.avatar-cropper-mark {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
}
.avatar-cropper-container {
background: $white;
z-index: 999;
box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.14);
.avatar-cropper-image-container {
position: relative;
max-width: 400px;
height: 300px;
}
img {
max-width: 100%;
height: 100%;
}
.avatar-cropper-footer {
display: flex;
align-items: stretch;
align-content: stretch;
justify-content: space-between;
.avatar-cropper-btn {
width: 50%;
padding: 15px 0;
cursor: pointer;
border: none;
background: transparent;
outline: none;
&:hover {
background-color: $primary;
color: $white;
}
}
}
}
}