<div class="fx-container">
<div class="fx-tab-container asc-container">
<a class="fx-tab asc-trigger" fx-tab-trigger="asc-window">
<i class="fa fa-comments"></i>
<i class="fa fa-times"></i>
</a>
<div class="asc-window" fx-tab="asc-window">
<div class="asc-conversation-list-small asc-scroll-container">
<div class="fx-scrollview dragscroll ">
<div class="fx-row fx-col-md-12 asc-scroll-height">
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15 asc-conversation-link-small" fx-tab-trigger="demo-conversation">
<div class="asc-profile-pic" style="background-image:url('data:image/jpeg;base64,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')"></div>
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15 asc-conversation-link-small" fx-tab-trigger="demo-conversation">
<div class="asc-profile-pic" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Pepsi_logo_2014.svg/1920px-Pepsi_logo_2014.svg.png')"></div>
<span class="asc-float-badge">3</span>
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15 asc-conversation-link-small" fx-tab-trigger="demo-conversation">
<div class="asc-profile-pic" style="background-image:url(http://brandmark.io/logo-rank/random/beats.png)"></div>
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15 asc-conversation-link-small" fx-tab-trigger="demo-conversation">
<div class="asc-profile-pic" style="background-image:url(https://image.freepik.com/free-icon/apple-logo_318-40184.jpg)"></div>
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15" fx-tab-trigger="demo-conversation">
<div class="asc-profile-pic" style="background-image:url(images/logo3.jpg)"></div>
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15" fx-tab-trigger="demo-conversation">
<img class="asc-profile-pic" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6WsF0oBXXQBuOcZ40Y0MqUDHYXcjpVhcWBecXZWHBzorcVtH5oeDo-eQ" />
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15" fx-tab-trigger="demo-conversation">
<img class="asc-profile-pic" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6WsF0oBXXQBuOcZ40Y0MqUDHYXcjpVhcWBecXZWHBzorcVtH5oeDo-eQ" />
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15" fx-tab-trigger="demo-conversation">
<img class="asc-profile-pic" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6WsF0oBXXQBuOcZ40Y0MqUDHYXcjpVhcWBecXZWHBzorcVtH5oeDo-eQ" />
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15" fx-tab-trigger="demo-conversation">
<img class="asc-profile-pic" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6WsF0oBXXQBuOcZ40Y0MqUDHYXcjpVhcWBecXZWHBzorcVtH5oeDo-eQ" />
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15" fx-tab-trigger="demo-conversation">
<img class="asc-profile-pic" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6WsF0oBXXQBuOcZ40Y0MqUDHYXcjpVhcWBecXZWHBzorcVtH5oeDo-eQ" />
</a>
</div>
</div>
<div class="asc-scroll-handle"></div>
</div>
<div class="fx-row fx-col-md-12 fx-valign-center asc-title-bar ">
<a class="asc-close-conversation"><i class="fa fa-arrow-left"></i></a>
<div class="asc-conversation-title">
<div class="fx-row fx-col-md-12 fx-valign-center">
<div class="asc-profile-pic" style="background-image:url(images/logo4.png)"></div>
<div class="fx-row">
<h3 class="fx-col-md-12">John Johnson</h3>
<label>Active 4h ago</label>
</div>
</div>
</div>
<h3 class="asc-window-title">Conversations</h3>
<a class="fx-mobile asc-mobile-close"><i class="fa fa-times"></i></a>
</div>
<div class="fx-row fx-col-md-12 asc-view-container">
<div class="fx-row fx-col-md-12 fx-tab-container">
<div fx-tab="demo-conversation" class="fx-row fx-col-md-12 asc-conversation-view">
<div class="fx-row fx-col-md-12 fx-scrollview">
<div class="fx-row fx-row-nowrap fx-col-md-12 asc-recived">
<div class="asc-profile-pic" style="background-image:url(images/logo4.png)"></div>
<div class="fx-row fx-col-md-12 asc-chat-bubble ">
<a class="asc-related-ad fx-col-md-12">Ad 4012 - iPhone 7 64 GB, 12 megapixel camera with aud...</a>
<label><small>1h ago</small></label>
<p class="fx-col-md-12">Hello There!</p>
</div>
</div>
<div class="fx-row fx-row-nowrap fx-col-md-12 asc-sent">
<div class="asc-profile-pic" style="background-image:url(images/logo2.jpg)"></div>
<div class="fx-row fx-col-md-12 asc-chat-bubble ">
<label><small>2h ago</small></label>
<p class="fx-col-md-12">Hello!</p>
</div>
</div>
<div class="fx-row fx-row-nowrap fx-col-md-12 asc-recived">
<div class="asc-profile-pic" style="background-image:url(images/logo4.png)"></div>
<div class="fx-row fx-col-md-12 asc-chat-bubble ">
<a class="asc-related-ad fx-col-md-12">Ad 4012 - iPhone 7 64 GB, 12 megapixel camera with aud...</a>
<label><small>Now</small></label>
<p class="fx-col-md-12">I was contacting you about the iPhone 7 you want to sell</p>
</div>
</div>
<div class="fx-row fx-row-nowrap fx-col-md-12 asc-sent">
<div class="asc-profile-pic" style="background-image:url(images/logo2.jpg)"></div>
<div class="fx-row fx-col-md-12 asc-chat-bubble ">
<label><small>Now</small></label>
<p class="fx-col-md-12">What iPhone?</p>
</div>
</div>
<div class="fx-row fx-row-nowrap fx-col-md-12 asc-recived">
<div class="asc-profile-pic" style="background-image:url(images/logo4.png)"></div>
<div class="fx-row fx-col-md-12 asc-chat-bubble ">
<a class="asc-related-ad fx-col-md-12">Ad 4012 - iPhone 7 64 GB, 12 megapixel camera with aud...</a>
<label><small>Now</small></label>
<p class="fx-col-md-12">Click on the messages you recive from me in order to see exactly of what I am talking about </p>
</div>
</div>
</div>
<div class="asc-scoll-handle"></div>
<div class="fx-row fx-col-md-12 asc-footer">
<textarea placeholder="Your Message"></textarea>
<a class="asc-send-button"><i class="fa fa-send"></i></a>
</div>
</div>
<div class="fx-row fx-col-md-12 asc-conversation-list">
<div class="fx-row fx-col-md-12 fx-scrollview">
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15 fx-tab asc-conversation-link" fx-tab-trigger="demo-conversation">
<div class="asc-profile-pic" style="background-image:url('data:image/jpeg;base64,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')"></div>
<div class="fx-row fx-col-md-10 fx-padding-left-15 fx-pull-flex-right fx-justify-space-between">
<label>Aswaq Staff</label>
<p class="fx-col-md-12 asc-conversation-preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat eros vel nibh consequat sagittis. Integer nulla elit, condimentum a ipsum nec,</p>
<label class="fx-padding-top-5">4h ago</label>
</div>
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15 fx-tab asc-conversation-link asc-unread" fx-tab-trigger="demo-conversation">
<div class="asc-profile-pic" style="background-image:url(images/logo4.png)"></div>
<div class="fx-row fx-col-md-10 fx-padding-left-15 fx-pull-flex-right fx-justify-space-between">
<label>John Johnson <span class="asc-inline-badge">3</span></label>
<p class="fx-col-md-12 asc-conversation-preview">Hello There!</p>
<label class="fx-padding-top-5">4h ago</label>
</div>
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15 fx-tab asc-conversation-link" fx-tab-trigger="demo-conversation">
<div class="asc-profile-pic" style="background-image:url(images/logo2.jpg)"></div>
<div class="fx-row fx-col-md-10 fx-padding-left-15 fx-pull-flex-right fx-justify-space-between">
<label>User</label>
<p class="fx-col-md-12 asc-conversation-preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat eros vel nibh consequat sagittis. Integer nulla elit, condimentum a ipsum nec,</p>
<label class="fx-padding-top-5">4h ago</label>
</div>
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15 fx-tab asc-conversation-link" fx-tab-trigger="demo-conversation">
<div class="asc-profile-pic" style="background-image:url(images/logo3.jpg)"></div>
<div class="fx-row fx-col-md-10 fx-padding-left-15 fx-pull-flex-right fx-justify-space-between">
<label>User</label>
<p class="fx-col-md-12 asc-conversation-preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat eros vel nibh consequat sagittis. Integer nulla elit, condimentum a ipsum nec,</p>
<label class="fx-padding-top-5">4h ago</label>
</div>
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15 fx-tab asc-conversation-link" fx-tab-trigger="demo-conversation">
<div class="asc-profile-pic" style="background-image:url(images/logo1.jpg)"></div>
<div class="fx-row fx-col-md-10 fx-padding-left-15 fx-pull-flex-right fx-justify-space-between">
<label>User</label>
<p class="fx-col-md-12 asc-conversation-preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat eros vel nibh consequat sagittis. Integer nulla elit, condimentum a ipsum nec,</p>
<label class="fx-padding-top-5">4h ago</label>
</div>
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15 fx-tab asc-conversation-link" fx-tab-trigger="demo-conversation">
<img class="asc-profile-pic" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6WsF0oBXXQBuOcZ40Y0MqUDHYXcjpVhcWBecXZWHBzorcVtH5oeDo-eQ" />
<div class="fx-row fx-col-md-10 fx-padding-left-15 fx-pull-flex-right fx-justify-space-between">
<label>User</label>
<p class="fx-col-md-12 asc-conversation-preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat eros vel nibh consequat sagittis. Integer nulla elit, condimentum a ipsum nec,</p>
<label class="fx-padding-top-5">4h ago</label>
</div>
</a>
<a class="fx-row fx-valign-center fx-col-md-12 fx-padding-15 fx-tab asc-conversation-link" fx-tab-trigger="demo-conversation">
<img class="asc-profile-pic" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6WsF0oBXXQBuOcZ40Y0MqUDHYXcjpVhcWBecXZWHBzorcVtH5oeDo-eQ" />
<div class="fx-row fx-col-md-10 fx-padding-left-15 fx-pull-flex-right fx-justify-space-between">
<label>User</label>
<p class="fx-col-md-12 asc-conversation-preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat eros vel nibh consequat sagittis. Integer nulla elit, condimentum a ipsum nec,</p>
<label class="fx-padding-top-5">4h ago</label>
</div>
</a>
</div>
<a class="fx-tab asc-contact-staff-button" fx-tab-trigger="demo-conversation">Contact Aswaq</a>
</div>
</div>
</div>
</div>
</div>
</div>
*{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-moz-tap-highlight-color:rgba(0,0,0,0);
-ms-tap-highlight-color:rgba(0,0,0,0);
-o-tap-highlight-color:rgba(0,0,0,0);
}
.asc-container{
position:fixed;
bottom:48px;
right:48px;
}
.asc-trigger{
width:56px;
height: 56px;
cursor:pointer;
display:block;
z-index:1;
font-size: 24px;
background: #0098ff;
color: #ffffff;
border-radius: 50%;
position:relative;
box-shadow: 0px 3px 11px rgba(0,0,0,0.26);
}
.asc-trigger:hover{
box-shadow: 0px 4px 26px rgba(0,0,0,0.3);
}
.asc-trigger i{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
transition:ease-in-out .3s;
margin:auto;
opacity:0;
transform:rotate(34deg) scale(0.6);
}
.asc-trigger .fa-comments{
opacity:1;
transform:rotate(0deg) scale(1);
}
.asc-trigger.asc-toggled .fa-comments{
opacity:0;
transform:rotate(34deg) scale(0.6);
}
.asc-trigger.asc-toggled .fa-times{
opacity:1;
transform:rotate(0deg) scale(1);
transition:ease-in-out .4s;
}
.asc-trigger.fa-comments{
opacity:1;
transform:rotate(0deg);
}
.asc-trigger.fa-comments{
opacity:0;
transform:rotate(24deg);
}
.asc-window{
position:absolute;
bottom: 74px;
right:0;
width: 361px;
box-shadow: 0px 1px 40px rgba(0,0,0,0.16);
z-index:2;
background: #ffffff;
pointer-events: none;
transition:ease-in-out .3s;
opacity:0;
transform:translate3d(0,60%,0);
border-radius: 16px;
display: flex;
flex-direction: column;
height: 460px;
will-change: opacity, transform;
}
.asc-window .asc-view-container{
overflow: hidden;
flex-basis: 100%;
height: 100%;
position: relative;
}
.asc-window * {
pointer-events: none;
}
.asc-window.fx-show * {
pointer-events: all;
}
.asc-window.fx-show{
opacity:1;
transform:translate3d(0,0,0);
pointer-events: all;
}
.asc-window .fx-tab-container{
position:relative;
}
.asc-window .asc-title-bar{
padding: 16px 22px;
background: #0098ff;
color: #ffffff;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
height: 82px;
flex-basis: 82px;
max-height: 82px;
position: relative;
z-index: 2;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.26);
}
.asc-window .asc-title-bar .asc-close-conversation{
width: 56px;
display:inline-block;
font-size:18px;
transform: translate3d(-50%,0,0);
opacity: 0;
pointer-events:none;
position: absolute;
padding-left: 22px;
left: 0;
height: 100%;
display: flex;
align-items: center;
}
.asc-window .asc-title-bar .asc-conversation-title.fx-show .asc-close-conversation:hover{
opacity: 0.8;
}
.asc-window .asc-title-bar .asc-close-conversation.fx-show{
opacity:1;
transform:translate3d(0,0,0);
pointer-events:all !important;
}
.asc-window .asc-title-bar .asc-conversation-title{
transition:ease-in-out .3s;
opacity:0;
position: absolute;
left: 62px;
top: 18px;
transform: translate3d(-50%,0,0);
pointer-events:none;
}
.asc-window .asc-title-bar .asc-conversation-title.fx-show{
opacity:1;
transform: translate3d(0,0,0);
pointer-events:all;
}
.asc-window .asc-title-bar .asc-window-title{
transition:ease-in-out .3s;
opacity:1;
transform: translate3d(0,0,0);
width: 100%;
text-align: center;
}
.asc-window .asc-title-bar .asc-conversation-title.fx-show + .asc-window-title{
opacity:0;
transform: translate3d(50%,0,0);
}
.asc-view-container > .fx-tab-container{
height:100%;
}
.asc-window .asc-title-bar .asc-conversation-title .asc-profile-pic{
width:32px;
height:32px;
margin-right:10px;
border-radius:50%;
}
.asc-window .asc-title-bar .asc-conversation-title label{
line-height:1;
}
.asc-conversation-list{
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
backface-visibility: hidden;
will-change: scroll-position, transform;
align-items: flex-start;
transition: ease-in-out .3s;
transform: translate3d(0px,0px,0px);
height:100%;
}
.asc-conversation-list:after{
content:' ';
position:absolute;
top:0px;
right: 0px;
width:100%;
height:100%;
pointer-events:none;
background: rgba(0,0,0,0.0);
transition:ease-in-out .3s;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
.asc-conversation-list .fx-scrollview{
padding-bottom:96px
}
.asc-conversation-view.fx-show +.asc-conversation-list{
transform: translate3d(-20%,0px,0px);
opacity: 0;
}
.asc-conversation-view.fx-show +.asc-conversation-list:after{
background: rgba(0,0,0,0.8);
}
.asc-conversation-link {
padding: 28px 24px;
border-bottom: 1px solid rgba(0,0,0,0.06);
flex-wrap: nowrap;
overflow: hidden;
}
.asc-conversation-link:hover{
background: #f6f8fa;
}
.asc-conversation-link p{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.asc-profile-pic{
background-size: 100%;
background-color:#ffffff;
background-position:center;
border-radius:50%;
background-repeat: no-repeat;
}
.asc-conversation-link.asc-unread{
background:#ebf2fb;
}
.asc-conversation-link.asc-unread *{
font-weight:600;
opacity;1 !important;
color:#000000;
}
.asc-conversation-link .asc-profile-pic{
width:48px;
height:48px;
}
.asc-conversation-link .asc-inline-badge{
height:18px;
display:inline-block;
background:red;
padding:2px 4px;
font-size:12px;
font-weight:600;
opacity:1;
margin:0 4px;
color:#ffffff;
border-radius:6px;
text-align:center;
}
.asc-conversation-link .asc-profile-pic{width: 36px;height: 36px;border-radius:50%;flex-basis: 36px;max-width: 36px;min-width: 36px;}
.asc-conversation-link > .fx-row{
max-width:calc(100% - 36px);
}
.asc-window .asc-conversation-list-small{
position:absolute;
left: -106px;
width: 82px;
height:100%;
overflow: hidden;
z-index: -1;
opacity: 0;
pointer-events: none;
transition: ease-in-out .3s;
transform: translate3d(100%,0,0);
}
.asc-window .asc-conversation-list-small a{
padding: 6px;
padding-bottom: 16px;
}
.asc-window .asc-conversation-list-small .fx-scrollview{
height:100%;
margin-right:-36px;
}
.asc-window .asc-conversation-list-small *{
pointer-events:none;
}
.asc-float-badge{
background: #ff5454;
padding:2px 6px;
color:#ffffff;
border-radius:6px;
font-weight:600;
font-size:12px;
position:absolute;
top: 4px;
left:0;
}
.asc-conversation-list-small.fx-show{
pointer-events:all;
opacity: 1;
transform: translate3d(0,0,0);
}
.asc-conversation-list-small.fx-show *{
pointer-events:all;
}
.asc-conversation-list-small .asc-profile-pic{
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: 0px 2px 12px rgba(0,0,0,0.14);
}
.asc-conversation-view{
position:absolute;
top:0;
left:0;
width:100%;
background: #ffffff;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
height:100%;
transition: ease-in-out .3s;
opacity:0;
align-items:flex-start;
z-index: 1;
align-content: flex-start;
pointer-events:none;
will-change: transform;
backface-visibility: hidden;
transform:translate3d(80%,0px,0px);
}
.asc-conversation-view.fx-show{
opacity:1;
pointer-events:all;
transform:translate3d(0px,0px,0px)
}
.asc-conversation-view .asc-profile-pic{
width: 45px;
height: 45px;
}
.asc-conversation-view .asc-chat-bubble{
padding:12px;
box-shadow:0px 1px 3px rgba(0,0,0,0.12);
margin-bottom: 16px;
border-radius:16px;
cursor:pointer;
position:relative;
transition: ease-in-out .3s;
}
.asc-conversation-view .asc-sent{
flex-direction: row-reverse;
}
.asc-conversation-view .asc-sent .asc-chat-bubble{
background: #0098ff;
border-top-right-radius: 0;
margin-right: 16px;
color:#ffffff;
}
.asc-conversation-view .asc-recived .asc-chat-bubble{
background: #f5f8fb;
border-top-left-radius: 0;
margin-left: 16px;
position: relative;
}
a.asc-related-ad {
position:absolute;
top: 0;
transform: translate3d(0,0,0);
color: #0098ff;
opacity:0;
font-size: 12px;
line-height: 24px;
width: 100%;
left: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.asc-chat-bubble.asc-expand {
margin-top: 24px;
}
.asc-chat-bubble.asc-expand .asc-related-ad{
transform: translate3d(0,-24px,0);
opacity:1;
}
.asc-window .fx-scrollview{
flex-basis:100%;
height:100%;
max-height:100%;
align-items:flex-start;
align-content: flex-start;
transform: translate3d(0px,0px,0px);
}
.asc-window .asc-footer{
flex-basis: 98px;
height: 98px;
position:relative;
}
.asc-window .asc-conversation-view .fx-scrollview{
max-height: calc(100% - 98px);
padding:22px;
}
.asc-window .asc-footer textarea{
background: rgba(241, 245, 250, 0.72);
height:100%;
border:none;
width: 100%;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
display: flex;
padding: 22px;
-webkit-appearance: none;
resize: none;
border: none;
padding-right: 68px;
transition: ease-in-out .3s;
}
.asc-window .asc-footer textarea:focus{
background:#ffffff;
box-shadow: 0px -18px 25px rgba(0,0,0,0.05);
}
.asc-window .asc-footer .asc-send-button{
position:absolute;
right: 0;
top:0;
height: 100%;
font-size: 20px;
color: #0098ff;
display: flex;
align-items: center;
justify-content: center;
width: 66px;
text-align: center;
}
.asc-window .asc-footer .asc-send-button:hover{
opacity:0.8;
}
.no-transition{
transition: none !important;
}
@keyframes fade-in{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
@keyframes fade-out{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
.asc-scroll-handle {
width: 2px;
height: 40px;
position: absolute;
top: 16px;
right: 0px;
opacity: 0;
background: rgba(0, 0, 0, 0.48);
animation: fade-out ease .3s;
}
.asc-scroll-container:hover .asc-scroll-handle {
opacity: 1;
animation: fade-in ease .3s;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-width:320px) and (max-width: 680px), screen and (min-resolution: 192dpi) and (min-width:320px) and (max-width: 680px),screen and (min-resolution: 288dpi) and (min-width:320px) and (max-width: 737px){
.asc-window{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
border-radius:0;
}
.asc-conversation-link p{
}
.asc-window .asc-title-bar{
border-radius:0;
}
.asc-conversation-view{
border-radius:0;
}
.asc-window .asc-footer, .asc-window .asc-footer textarea{
border-radius:0;
}
.asc-window .asc-title-bar {
display:flex;
justify-content:space-between;
}
.asc-window .asc-title-bar .asc-window-title{
width:auto;
}
.asc-window .asc-title-bar .asc-mobile-close {
font-size: 22px;
position: absolute;
padding-right: 22px;
padding-left: 22px;
right: 0;
height: 100%;
display: flex;
align-items: center;
}
.asc-conversation-list-small{
display:none;
}
}
@media screen and (min-width:640px) and (max-width: 737px), screen and (min-resolution: 288dpi) and (min-width:640px) and (max-width: 737px){
.asc-conversation-link p{
max-width:100%;
}
.asc-window-title{
display:none;
}
.asc-window .asc-title-bar .asc-conversation-title{
opacity: 1;
transform: translate3d(0,0,0);
pointer-events: all;
}
.asc-conversation-list{
width: 33.33%;
max-width: 33.33%;
transform:none !important;
opacity:1 !important;
}
.asc-conversation-list .asc-conversation-link{
padding:14px 22px
}
.asc-conversation-list:after{
content:initial;
}
.asc-window .fx-tab-container{
flex-direction:row-reverse;
}
.asc-conversation-view{
opacity:1;
transform:none;
position:relative;
width: 66.66%;
max-width: 66.66%;
}
.asc-window .asc-title-bar .asc-close-conversation{
display:none;
}
.asc-window .asc-title-bar .asc-conversation-title{
left:22px;
}
}
.asc-window:not(.fx-show) .asc-conversation-view, .asc-window:not(.fx-show) .asc-conversation-title,.asc-window:not(.fx-show) .asc-conversation-list{
transition:none;
}
.asc-conversation-link-small{
position: relative;
}
a.asc-contact-staff-button {
position: absolute;
bottom: 24px;
left: 0;
right: 0;
margin: auto;
text-align: center;
color: #ffffff;
font-size: 16px;
width: 180px;
background: #a3bad2;
padding: 16px;
border-radius: 24px;
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
a.asc-contact-staff-button:hover{
box-shadow: 0px 3px 16px rgba(0,0,0,0.28);
}
$(document).ready(function(){
$('.asc-trigger').click(function(e){
e.preventDefault();
$(this).toggleClass('asc-toggled');
if(!$('.asc-trigger.asc-toggled').length){
$(this).parent().find('.asc-window').removeClass('fx-show');
$(this).parent().find('.asc-window .fx-show').removeClass('fx-show');
}
});
$('.asc-mobile-close').click(function(e){
e.preventDefault();
$(this).parents('.asc-window').removeClass('fx-show');
$(this).parents('.asc-window').find('.fx-show').removeClass('fx-show');
$(this).parents('.asc-container').find('.asc-trigger').removeClass('asc-toggled');
});
$('.asc-conversation-link').click(function(e){
$('.asc-conversation-title').addClass('fx-show');
$('.asc-close-conversation').addClass('fx-show');
});
$('.asc-close-conversation').click(function(e){
e.preventDefault();
$('.asc-conversation-view').removeClass('fx-show');
$('.asc-conversation-title').removeClass('fx-show');
$('.asc-close-conversation').removeClass('fx-show');
});
$('.asc-chat-bubble').click(function(e){
e.preventDefault();
var related_ad = $(this).find('.asc-related-ad');
if(related_ad.length){
$(this).toggleClass('asc-expand');
}
});
function custom_scroll(target) {
var $scrollable = target;
var $scrollbar = target.parent().find('.asc-scroll-handle');
$scrollable.outerHeight(true);
var H = $scrollable.outerHeight(true);
var sH = $scrollable[0].scrollHeight;
var sbH = H*H/sH;
target.parent().find('.asc-scroll-handle').height(sbH);
$scrollable.on("scroll", function(){
$scrollbar.css({top: $scrollable.scrollTop()/H*sbH });
});
}
custom_scroll($('.asc-scroll-container .fx-scrollview'));
$(window).on('resize',function(){
custom_scroll($('.asc-scroll-container .fx-scrollview'));
});
var $div = $(".asc-conversation-view");
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === "class") {
if($(mutation.target).is('.fx-show')){
$('.asc-conversation-list-small').addClass('fx-show');
$('.asc-conversation-title').addClass('fx-show');
$('.asc-close-conversation').addClass('fx-show');
}
else{
$('.asc-conversation-list-small').removeClass('fx-show');
$('.asc-conversation-title').removeClass('fx-show');
$('.asc-close-conversation').removeClass('fx-show');
}
var attributeValue = $(mutation.target).prop(mutation.attributeName);
console.log("Class attribute changed to:", attributeValue);
}
});
});
observer.observe($div[0], {
attributes: true
});
window.onload = function() {
var t = document.getElementsByTagName('textarea')[0];
var offset= !window.opera ? (t.offsetHeight - t.clientHeight) : (t.offsetHeight + parseInt(window.getComputedStyle(t, null).getPropertyValue('border-top-width'))) ;
var resize = function(t) {
t.style.height = 'auto';
t.style.height = (t.scrollHeight + offset ) + 'px';
}
t.addEventListener && t.addEventListener('input', function(event) {
resize(t);
});
t['attachEvent'] && t.attachEvent('onkeyup', function() {
resize(t);
});
}
});
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['exports'], factory);
} else if (typeof exports !== 'undefined') {
factory(exports);
} else {
factory((root.dragscroll = {}));
}
}(this, function (exports) {
var _window = window;
var _document = document;
var mousemove = 'mousemove';
var mouseup = 'mouseup';
var mousedown = 'mousedown';
var EventListener = 'EventListener';
var addEventListener = 'add'+EventListener;
var removeEventListener = 'remove'+EventListener;
var newScrollX, newScrollY;
var dragged = [];
var reset = function(i, el) {
for (i = 0; i < dragged.length;) {
el = dragged[i++];
el = el.container || el;
el[removeEventListener](mousedown, el.md, 0);
_window[removeEventListener](mouseup, el.mu, 0);
_window[removeEventListener](mousemove, el.mm, 0);
}
dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
for (i = 0; i < dragged.length;) {
(function(el, lastClientX, lastClientY, pushed, scroller, cont){
(cont = el.container || el)[addEventListener](
mousedown,
cont.md = function(e) {
if (!el.hasAttribute('nochilddrag') ||
_document.elementFromPoint(
e.pageX, e.pageY
) == cont
) {
pushed = 1;
lastClientX = e.clientX;
lastClientY = e.clientY;
e.preventDefault();
}
}, 0
);
_window[addEventListener](
mouseup, cont.mu = function() {pushed = 0;}, 0
);
_window[addEventListener](
mousemove,
cont.mm = function(e) {
if (pushed) {
(scroller = el.scroller||el).scrollLeft -=
newScrollX = (- lastClientX + (lastClientX=e.clientX));
scroller.scrollTop -=
newScrollY = (- lastClientY + (lastClientY=e.clientY));
if (el == _document.body) {
(scroller = _document.documentElement).scrollLeft -= newScrollX;
scroller.scrollTop -= newScrollY;
}
}
}, 0
);
})(dragged[i++]);
}
}
if (_document.readyState == 'complete') {
reset();
} else {
_window[addEventListener]('load', reset, 0);
}
exports.reset = reset;
}));
