Skip to content

Commit

Permalink
Fixed an avatar styles
Browse files Browse the repository at this point in the history
  • Loading branch information
simba77 committed Jan 28, 2022
1 parent 4e8a4bc commit baa8192
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 122 deletions.
2 changes: 1 addition & 1 deletion themes/default/assets/css/app.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion themes/default/assets/css/app.rtl.css

Large diffs are not rendered by default.

245 changes: 125 additions & 120 deletions themes/default/src/scss/_user.scss
@@ -1,164 +1,169 @@
.user-row {
padding: 0.8rem 0;
border-bottom: 1px solid $border-color !important;
border-radius: 0;

@media (max-width: 768px) {
padding-left: 15px;
padding-right: 15px;
margin-left: -15px;
margin-right: -15px;
padding: 0.8rem 0;
border-bottom: 1px solid $border-color !important;
border-radius: 0;

@media (max-width: 768px) {
padding-left: 15px;
padding-right: 15px;
margin-left: -15px;
margin-right: -15px;
}

&.shadow {
box-shadow: none !important;
}

.card-body {
padding: 0;
}

.post-footer {
padding-top: 0 !important;

&.border-top {
border-top: none !important;
}
}

&.shadow {
box-shadow: none !important;
.user-avatar {
.avatar-image {
width: 40px;
height: 40px;
}

.card-body {
padding: 0;
.user-status {
width: 10px;
height: 10px;
}
}

.post-footer {
padding-top: 0 !important;
.user-login {
font-weight: 600;
font-size: 1rem;
line-height: 1.2;
}

&.border-top {
border-top: none !important;
}
}

.user-avatar {
.avatar-image {
width: 40px;
height: 40px;
}

.user-status {
width: 10px;
height: 10px;
}
}

.user-login {
font-weight: 600;
font-size: 1rem;
line-height: 1.2;
}
.avatar {
width: 100%;
height: 100%;
}
}

.profile-avatar {
display: block;
@media (max-width: 991px) {
.avatar-image {
width: 80px;
height: 80px;
}
.user-status {
height: 13px;
width: 13px;
}
display: block;
@media (max-width: 991px) {
.avatar-image {
width: 80px;
height: 80px;
}
.user-status {
height: 13px;
width: 13px;
}
}
}

.personal-profile {
display: flex;
display: flex;
}

.personal-profile-photo {

}

.profile-photo-upload-btn {
border: 1px dashed var(--border-color);
width: 160px;
height: 160px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover !important;
position: relative;
border: 1px dashed var(--border-color);
width: 160px;
height: 160px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover !important;
position: relative;
}

.add-photo-btn {
.add-photo-icon {
background: var(--bs-primary);
color: var(--primary-bg-text-color);
font-size: 34px;
font-weight: 200;
height: 40px;
width: 40px;
border-radius: 50%;
display: flex;
align-items: center;
margin: 0 auto 10px auto;
justify-content: center;
}
}

.change-photo-btn {
background: #fff;
.add-photo-icon {
background: var(--bs-primary);
color: var(--primary-bg-text-color);
font-size: 34px;
font-weight: 200;
height: 40px;
width: 40px;
border-radius: 50%;
width: 33px;
height: 33px;
display: flex;
align-items: center;
margin: 0 auto 10px auto;
justify-content: center;
box-shadow: 1px 1px 5px 0 rgb(50 50 50 / 75%);
position: absolute;
right: -5px;
top: -5px;
color: #76716b;
padding: 6px;
}
}

.change-photo-btn {
background: #fff;
border-radius: 50%;
width: 33px;
height: 33px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 1px 1px 5px 0 rgb(50 50 50 / 75%);
position: absolute;
right: -5px;
top: -5px;
color: #76716b;
padding: 6px;
}

.delete-photo-btn {
background: #fff;
border-radius: 50%;
width: 33px;
height: 33px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 1px 1px 5px 0 rgb(50 50 50 / 75%);
position: absolute;
right: -5px;
bottom: -5px;
padding: 6px;
font-size: 22px;
color: var(--bs-danger);

&:hover {
color: var(--bs-danger) !important;
}
background: #fff;
border-radius: 50%;
width: 33px;
height: 33px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 1px 1px 5px 0 rgb(50 50 50 / 75%);
position: absolute;
right: -5px;
bottom: -5px;
padding: 6px;
font-size: 22px;
color: var(--bs-danger);

&:hover {
color: var(--bs-danger) !important;
}
}

.profile-info-row {
padding: 2px 0;
padding: 2px 0;

.profile-info-name {
color: var(--bs-secondary);
}
.profile-info-name {
color: var(--bs-secondary);
}

.profile-info-value {
font-weight: 600;
}
.profile-info-value {
font-weight: 600;
}
}

.text-avatar {
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}

.sidebar_user_avatar {
.text-avatar {
font-size: 14px;
height: 70px;
width: 70px;
}
.text-avatar {
font-size: 14px;
height: 70px;
width: 70px;
}
}

0 comments on commit baa8192

Please sign in to comment.