162 lines
3.0 KiB
SCSS
162 lines
3.0 KiB
SCSS
@import "_variables";
|
|
|
|
.b-message {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: calc(100% - 40px);
|
|
|
|
@media (min-width: 768px) {
|
|
height: calc(100% - 56px);
|
|
}
|
|
|
|
&__inner {
|
|
flex-grow: 1;
|
|
height: 0;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
&__list {
|
|
padding-top: 18px;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
|
|
&--me {
|
|
justify-content: flex-end;
|
|
.b-message__item {
|
|
flex-direction: row-reverse;
|
|
|
|
.b-message__text {
|
|
border-radius: 8px 8px 0px 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__item {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
justify-content: flex-start;
|
|
position: revert;
|
|
width: 100%;
|
|
max-width: 85%;
|
|
|
|
.date {
|
|
position: absolute;
|
|
top: -17px;
|
|
left: 0;
|
|
color: #66A5AD;
|
|
@include rem(13);
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 123.077%;
|
|
}
|
|
|
|
}
|
|
|
|
&__avatar {
|
|
width: 36px;
|
|
min-width: 36px;
|
|
height: 36px;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
background: lightgray 50%;
|
|
box-shadow: 0px 8px 16px 0px rgba(102, 165, 173, 0.32);
|
|
|
|
img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
background: #DFF5FB;
|
|
padding: 8px 16px;
|
|
border-radius: 8px 8px 8px 0px;
|
|
position: relative;
|
|
}
|
|
|
|
&__form {
|
|
height: 72px;
|
|
width: 100%;
|
|
border-radius: 48px;
|
|
border: 1px solid #6FB98F;
|
|
background: #FFF;
|
|
display: flex;
|
|
padding: 8px;
|
|
align-items: center;
|
|
|
|
textarea {
|
|
width: calc(100% - 136px);
|
|
height: 24px;
|
|
padding: 0 8px;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: #66A5AD;
|
|
@include rem(15);
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 160%;
|
|
}
|
|
}
|
|
|
|
&__btn {
|
|
user-select: none;
|
|
outline: none;
|
|
border: none;
|
|
text-decoration: none;
|
|
width: 56px;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
box-shadow: none;
|
|
display: flex;
|
|
height: 56px;
|
|
padding: 8px ;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #6FB98F;
|
|
background-image: url(/images/paper-plane-outline.svg);
|
|
background-position: 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
&__upload-file {
|
|
position: relative;
|
|
cursor: pointer;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(/images/attach.svg);
|
|
background-position: 50%;
|
|
background-repeat: no-repeat;
|
|
margin-right: 16px;
|
|
|
|
input {
|
|
width: 0.1px;
|
|
height: 0.1px;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
&__microphone {
|
|
cursor: pointer;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(/images/mic-outline.svg);
|
|
background-position: 50%;
|
|
background-repeat: no-repeat;
|
|
margin-right: 16px;
|
|
}
|
|
}
|