src/SCSS/components/_reactionModel.scss
.rm-parent-cont {
display: flex;
flex-direction: column;
width: 600px;
height: 650px;
.rm-user-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p {
margin: 0.7rem 0rem;
}
span {
margin: 0rem 0.2rem;
font-size: 3rem;
}
.rm-profile-pic {
width: 12rem !important;
border-radius: 50%;
}
.rm-job-title {
font-size: 1.8rem;
}
.rm-badge {
width: 9rem !important;
}
.rm-buttons {
display: flex;
margin-top: 1.5rem;
width: 100%;
height: 50px;
justify-content: space-around;
align-items: center;
.reaction-button {
color: rgba(0, 13, 34, 0.7);
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
background-color: $color-white-dark;
border-radius: 38%;
border: none;
width: 50px;
height: 28px;
.heart-full {
fill: $color-primary;
}
.heart-empty {
fill: rgba(0, 13, 34, 0.7);
cursor: pointer;
}
}
.comment-button {
color: rgba(0, 13, 34, 0.7);
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
background-color: $color-white-dark;
border-radius: 38%;
border: none;
width: 50px;
height: 28px;
.comment-full {
fill: $color-primary;
}
.comment-empty {
fill: rgba(0, 13, 34, 0.7);
}
}
}
.rm-message {
font-size: 2rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
}
.rm-comment-box {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-top: 1rem;
textarea {
width: 100%;
height: 150px;
margin-bottom: 4rem;
}
.rm-comments {
display: flex;
flex-direction: column;
align-items: left;
margin-top: 1rem;
width: 90%;
height: 350px;
max-height: 60%;
overflow: auto;
.comm-container {
display: flex;
justify-content: left;
align-items: center;
margin: 0.4rem 0rem;
.comm-pic {
border-radius: 50%;
width: 30px;
margin-right: 20px;
}
}
}
}
}