<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container text-center">
<div class="row">
<div class="text-center">
<a href="#" class="open-btn" id="addClass"><img src="http://loveupari.in/images/family-8.jpg" style="width: 60px; height: 60px; border-radius: 60px;"></a>
</div>
</div>
</div>
<aside id="sidebar_secondary" class="tabbed_sidebar ng-scope chat_sidebar">
<div class="popup-head">
<div class="popup-head-left pull-left">
<img class="md-user-image" title="User-Image" src="../Nawfell Billing/Nawfell/img/user6-128x128.jpg" >
<h1>John Doe</h1></div>
<div class="popup-head-right pull-right">
<button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-minus"></i></button>
</div>
</div>
<div id="chat" class="chat_box_wrapper chat_box_small chat_box_active" style="opacity: 1; display: block; transform: translateX(0px);">
<div class="chat_box touchscroll chat_box_colors_a">
<div class="chat_message_wrapper">
<div class="chat_user_avatar">
<a href="#" target="_blank" >
<img alt="Nawfell" title="Nawfell" src="http://loveupari.in/images/family-8.jpg" class="md-user-image">
</a>
</div>
<ul class="chat_message">
<li>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eum? </p>
</li>
<li>
<p> Lorem ipsum dolor sit amet.<span class="chat_message_time">13:38</span> </p>
</li>
</ul>
</div>
<div class="chat_message_wrapper chat_message_right">
<div class="chat_user_avatar">
<a href="#" target="_blank" >
<img alt="Nawfell" title="Nawfell" src="http://loveupari.in/images/family-8.jpg" class="md-user-image">
</a>
</div>
<ul class="chat_message">
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem delectus distinctio dolor earum est hic id impedit ipsum minima mollitia natus nulla perspiciatis quae quasi, quis recusandae, saepe, sunt totam.
<span class="chat_message_time">13:34</span>
</p>
</li>
</ul>
</div>
<div class="chat_message_wrapper">
<div class="chat_user_avatar">
<a href="#" target="_blank" >
<img alt="Nawfell" title="Nawfell" src="http://loveupari.in/images/family-8.jpg" class="md-user-image">
</a>
</div>
<ul class="chat_message">
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ea mollitia pariatur porro quae sed sequi sint tenetur ut veritatis.
<span class="chat_message_time">23 Jun 1:10am</span>
</p>
</li>
</ul>
</div>
<div class="chat_message_wrapper chat_message_right">
<div class="chat_user_avatar">
<a href="#" target="_blank" >
<img alt="Nawfell" title="Nawfell" src="http://loveupari.in/images/family-8.jpg" class="md-user-image">
</a>
</div>
<ul class="chat_message">
<li>
<p> Lorem ipsum dolor sit amet, consectetur. </p>
</li>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="chat_message_time">Friday 13:34</span>
</p>
</li>
</ul>
</div>
</div>
</div>
<div class="chat_submit_box">
<div class="uk-input-group">
<div class="nawfell-chat-box">
<span style="vertical-align: sub;" class="uk-input-group-addon">
<a href="#"><i class="fa fa-smile-o"></i></a>
</span>
<input type="text" placeholder="Type a message" id="submit_message" name="submit_message" class="md-input">
<span style="vertical-align: sub;" class="uk-input-group-addon">
<a href="#"><i class="fa fa-camera"></i></a>
</span>
</div>
<span class="uk-input-group-addon">
<a href="#"><img src="../Nawfell Billing/Nawfell/img/btn-send.png"></a>
</span>
</div>
</div>
</div>
</aside>
body
{
font-family: 'Open Sans', sans-serif;
}
.chat_box .chat_message_wrapper ul.chat_message > li + li {
margin-top: 4px;
}
.popup-box-on {
display: block !important;
}
a:focus {
outline: none;
outline-offset: 0px;
}
.popup-head-left.pull-left h1 {
color: #fff;
float: left;
font-family: oswald;
font-size: 18px;
margin: 13px 0 0 5px;
}
.popup-head-left a small {
display: table;
font-size: 11px;
color: #fff;
line-height: 4px;
opacity: 0.5;
padding: 0 0 0 7px;
}
.chat-header-button {
background: transparent none repeat scroll 0 0;
border: 1px solid #fff;
border-radius: 7px;
font-size: 15px;
height: 26px;
opacity: 0.9;
padding: 0;
text-align: center;
width: 26px;
}
.popup-head-right {
margin: 9px 0 0;
}
.popup-head .btn-group {
margin: -5px 3px 0 -1px;
}
.nawfell-chat .dropdown-menu {
padding: 6px;
}
.nawfell-chat .dropdown-menu li a span {
border: 1px solid;
border-radius: 50px;
display: list-item;
font-size: 19px;
height: 40px;
line-height: 36px;
margin: auto;
text-align: center;
width: 40px;
}
.nawfell-chat .dropdown-menu li {
float: left;
text-align: center;
width: 33%;
}
.nawfell-chat .dropdown-menu li a {
border-radius: 7px;
font-family: oswald;
padding: 3px;
transition: all 0.3s ease-in-out 0s;
}
.nawfell-chat .dropdown-menu li a:hover {
background:#304445 none repeat scroll 0 0 !important;
color: #fff;
}
.popup-head {
background: #009efa none repeat scroll 0 0 !important;
color: #fff;
display: table;
width: 100%;
padding: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.popup-head .md-user-image {
border-radius: 43px;
float: left;
width: 44px;
}
.uk-input-group-addon .glyphicon.glyphicon-send {
color: #ffffff;
font-size: 21px;
line-height: 36px;
padding: 0 6px;
}
.chat_box_wrapper.chat_box_small.chat_box_active {
height: 342px;
overflow-y: scroll;
width: 300px;
}
aside {
background-attachment: fixed;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: url("https://scontent.fixc1-1.fna.fbcdn.net/v/t1.0-9/12670232_624826600991767_3547881030871377118_n.jpg?oh=92b8b3e25bdd56df4af5dc466feb46ce&oe=57CC10E7");
background-origin: padding-box;
background-position: center top;
background-repeat: repeat;
bottom: 0;
display: none;
height: 466px;
position: fixed;
right: 70px;
width: 300px;
font-family: 'Open Sans', sans-serif;
}
.chat_box {
padding: 16px;
background: #f1f1f1;
}
.chat_box .chat_message_wrapper::after {
clear: both;
}
.chat_box .chat_message_wrapper::after, .chat_box .chat_message_wrapper::before {
content: " ";
display: table;
}
.chat_box .chat_message_wrapper .chat_user_avatar {
float: left;
}
.chat_box .chat_message_wrapper {
margin-bottom: 32px;
}
.md-user-image {
border-radius: 50%;
width: 34px;
}
img {
border: 0 none;
box-sizing: border-box;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.chat_box .chat_message_wrapper ul.chat_message, .chat_box .chat_message_wrapper ul.chat_message > li {
list-style: outside none none;
padding: 0;
}
.chat_box .chat_message_wrapper ul.chat_message {
float: left;
margin: 0 0 0 20px;
max-width: 77%;
}
.chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li:first-child::before {
border-right-color: #f8f8f8;
}
.chat_box .chat_message_wrapper ul.chat_message > li:first-child::before {
border-color: transparent #ededed transparent transparent;
border-style: solid;
border-width: 0 16px 16px 0;
content: "";
height: 0;
left: -14px;
position: absolute;
top: 0;
width: 0;
}
.chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li {
background: #f8f8f8;
color: #000000;
-webkit-box-shadow: -4px 2px 72px -31px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 2px 72px -31px rgba(0,0,0,0.75);
box-shadow: -4px 2px 72px -31px rgba(0,0,0,0.75);
}
.open-btn {
border-radius: 32px;
color: #189d0e !important;
display: inline-block;
margin: 10px 0 0;
text-decoration: none !important;
text-transform: uppercase;
}
.chat_box .chat_message_wrapper ul.chat_message > li {
background: #ededed none repeat scroll 0 0;
border-radius: 4px;
clear: both;
color: #212121;
display: block;
float: left;
font-size: 13px;
padding: 8px 16px;
position: relative;
word-break: break-all;
}
.chat_box .chat_message_wrapper ul.chat_message, .chat_box .chat_message_wrapper ul.chat_message > li {
list-style: outside none none;
padding: 0;
}
.chat_box .chat_message_wrapper ul.chat_message > li {
margin: 0;
}
.chat_box .chat_message_wrapper ul.chat_message > li p {
margin: 0;
}
.chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li .chat_message_time {
color: rgba(185, 186, 180, 0.9);
}
.chat_box .chat_message_wrapper ul.chat_message > li .chat_message_time {
color: #727272;
display: block;
font-size: 11px;
padding-top: 2px;
text-transform: uppercase;
}
.chat_box .chat_message_wrapper.chat_message_right .chat_user_avatar {
float: right;
}
.chat_box .chat_message_wrapper.chat_message_right ul.chat_message {
float: right;
margin-left: 0 !important;
margin-right: 24px !important;
}
.chat_box.chat_box_colors_a .chat_message_wrapper.chat_message_right ul.chat_message > li:first-child::before {
border-left-color: #E8FFD4;
}
.chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li:first-child::before {
border-right-color: #f8f8f8;
}
.chat_box .chat_message_wrapper.chat_message_right ul.chat_message > li:first-child::before {
border-color: transparent transparent transparent #ededed;
border-width: 0 0 29px 29px;
left: auto;
right: -14px;
}
.chat_box .chat_message_wrapper ul.chat_message > li:first-child::before {
border-color: transparent #ededed transparent transparent;
border-style: solid;
border-width: 0 29px 29px 0;
content: "";
height: 0;
left: -14px;
position: absolute;
top: 0;
width: 0;
}
.chat_box.chat_box_colors_a .chat_message_wrapper.chat_message_right ul.chat_message > li {
background: #E8FFD4 none repeat scroll 0 0;
}
.chat_box .chat_message_wrapper ul.chat_message > li {
background: #ededed none repeat scroll 0 0;
border-radius: 12px;
clear: both;
color: #212121;
display: block;
float: left;
font-size: 13px;
padding: 8px 16px;
position: relative;
}
.nawfell-chat-box {
border-radius: 5px;
float: left;
padding: 3px;
width: 240px;
}
#submit_message {
background: transparent none repeat scroll 0 0;
border: medium none;
padding: 4px;
width: 100%;
}
.nawfell-chat-box i {
color: #333;
font-size: 21px;
line-height: 1px;
}
.chat_submit_box {
bottom: 8px;
left: 0;
overflow: hidden;
padding: 10px;
position: absolute;
width: 100%;
background: #eaeaea;
}
.uk-input-group {
border-collapse: separate;
display: table;
position: relative;
}
$(function(){
$("#addClass").click(function () {
$('#sidebar_secondary').addClass('popup-box-on');
});
$("#removeClass").click(function () {
$('#sidebar_secondary').removeClass('popup-box-on');
});
});
