<section class="chat">
<ul class="chat__list">
<li class="chat__message chat__message--incoming">
<div class="chat__username">
Admin
</div>
<div class="chat__message-content">
<p class="chat__message-text">
Please, provide us with additional details and attach photos if possible so that we could approve your request.
</p>
<div class="chat__message-date">
2019-08-20 13:05:27
</div>
</div>
</li>
<li class="chat__message chat__message--sent">
<div class="chat__username">
User
</div>
<div class="chat__message-content chat__message-content--sent">
<p class="chat__message-text">
Hello. I want to return this item because of the material, it is not as good as I expected!
</p>
<div class="chat__message-date">
2019-08-20 13:06:33
</div>
</div>
</li>
</ul>
<div class="chat__control">
<div class="chat__message-field">
<div class="input ">
<label class="
label
input__label
label--hidden
" for="input-5">
Comment / Questions
</label>
<textarea class="input__field input__field--textarea chat__textarea" id="input-5" name="input-5" placeholder="Message"></textarea>
</div>
</div>
<div class="chat__message-send">
<button class="button " type="button" aria-label="button">
Send
</button>
</div>
</div>
<div class="file-upload file-upload--native button-extend">
<div class="file-upload__wrapper" data-role="send-files">
<label tabindex="0" for="file">
<input
id="file"
type="file"
name="file"
accept=".pdf,.doc,.png"
data-size="1024"
/>
Your file (pdf, doc, max 1 MB)
</label>
</div>
<div class="file-upload__attachments">
<div data-role="attached-item">
<span>
some-file.jpg
</span>
<button type="button" data-role="delete-button">
<span>
Delete
</span>
</button>
</div>
<div data-role="attached-item">
<span>
some-file.jpg
</span>
<button type="button" data-role="delete-button">
<span>
Delete
</span>
</button>
</div>
</div>
</div>
</section>
<section class="chat">
<ul class="chat__list">
<li class="chat__message chat__message--incoming">
<div class="chat__username">
{{ message.incoming.username }}
</div>
<div class="chat__message-content">
<p class="chat__message-text">
{{ message.incoming.text }}
</p>
<div class="chat__message-date">
{{ message.incoming.date }}
</div>
</div>
</li>
<li class="chat__message chat__message--sent">
<div class="chat__username">
{{ message.sent.username }}
</div>
<div class="chat__message-content chat__message-content--sent">
<p class="chat__message-text">
{{ message.sent.text }}
</p>
<div class="chat__message-date">
{{ message.sent.date }}
</div>
</div>
</li>
</ul>
<div class="chat__control">
<div class="chat__message-field">
{{ render '@input--textarea' input merge=true }}
</div>
<div class="chat__message-send">
{{ render '@button' button merge=true }}
</div>
</div>
{{ render '@file-upload--native' }}
</section>
{
"message": {
"incoming": {
"username": "Admin",
"text": "Please, provide us with additional details and attach photos if possible so that we could approve your request.",
"date": "2019-08-20 13:05:27"
},
"sent": {
"username": "User",
"text": "Hello. I want to return this item because of the material, it is not as good as I expected!",
"date": "2019-08-20 13:06:33"
}
},
"input": {
"label": {
"hidden": true
},
"field": {
"class": "chat__textarea",
"placeholder": "Message"
}
},
"button": {
"text": "Send"
}
}
$chat__padding : $spacer--semi-medium !default;
$chat__background : $gray-lighter !default;
$chat__list-margin : 0 0 $spacer--medium !default;
$chat__list-padding : 0 !default;
$chat__list-max-height : 300px !default;
$chat__list-overflow-y : auto !default;
$chat__message-padding : $spacer $spacer--medium !default;
$chat__message-text-align--sent : right !default;
$chat__message-align-self--incoming : flex-start !default;
$chat__message-content-padding : $spacer--medium !default;
$chat__message-content-background : $gray !default;
$chat__message-content-background--sent : $gray-light !default;
$chat__message-content-border-radius : 10px !default;
$chat__message-text-font-size : $font-size-base !default;
$chat__message-date-text-align : right !default;
$chat__message-date-color : $gray-dark !default;
$chat__message-date-font-size : $font-size-small !default;
$chat__message-send-margin : 0 0 $spacer--medium !default;
$chat__message-field-width : 100% !default;
$chat__message-field-margin : 0 $spacer 0 0 !default;
$chat__textarea-min-height : 48px !default;
$chat__username-color : $gray-dark !default;
@import 'chat-variables';
.chat {
padding: $chat__padding;
background: $chat__background;
&__list {
display: flex;
flex-direction: column;
align-items: flex-end;
margin: $chat__list-margin;
padding: $chat__list-padding;
max-height: $chat__list-max-height;
overflow-y: $chat__list-overflow-y;
list-style: none;
}
&__message {
padding: $chat__message-padding;
&--sent {
text-align: $chat__message-text-align--sent;
}
&--incoming {
align-self: $chat__message-align-self--incoming;
}
}
&__message-content {
padding: $chat__message-content-padding;
background: $chat__message-content-background;
border-radius: $chat__message-content-border-radius;
&--sent {
background: $chat__message-content-background--sent;
}
}
&__message-text {
font-size: $chat__message-text-font-size;
}
&__message-date {
text-align: $chat__message-date-text-align;
color: $chat__message-date-color;
font-size: $chat__message-date-font-size;
}
&__message-send {
margin: $chat__message-send-margin;
}
&__message-field {
width: $chat__message-field-width;
margin: $chat__message-field-margin;
}
&__control {
display: flex;
align-items: center;
}
&__textarea {
min-height: $chat__textarea-min-height;
}
&__username {
color: $chat__username-color;
}
}
There are no notes for this item.