.info
%h1 Draggable Chatbox
%span
Made with
%i.fa.fa-heart.animated.infinite.pulse
by
%a{:href => "http://andytran.me"} Andy Tran
.spoilers
(Click the search button) | (Scroll the chat)
.chat
%header
%h2.title
%a{:href => "https://www.elegantthemes.com/"} ElegantThemes
%ul.tools
%li
%a.fa.fa-gear{:href => "#"}
%li
%a.fa.fa-search{:href => "#"}
.body
.search
%input{:type => "text", :placeholder => "Search..."}
%ul
%li
%a.thumbnail{:href => "#"}
NR
.content
%h3 Nick Roach
%span.preview hey how are things going on the...
%span.meta
2h ago ·
%a{:href => "#"} Category
·
%a{:href => "#"} Reply
%li
%a.thumbnail{:href => "#"}
KS
.content
%h3 Kenny Sing
%span.preview make sure you take a look at the...
%span.meta
3h ago ·
%a{:href => "#"} Category
·
%a{:href => "#"} Reply
%li
%a.thumbnail{:href => "#"}
MS
.content
%h3 Mitch Skolnik
%span.preview i love wood grain things!
%span.meta
6h ago ·
%a{:href => "#"} Category
·
%a{:href => "#"} Reply
%li
%a.thumbnail{:href => "#"}
YP
.content
%h3 Yuriy Portnykh
%span.preview check issues for the latest version...
%span.meta
10h ago ·
%a{:href => "#"} Category
·
%a{:href => "#"} Reply
%li
%a.thumbnail{:href => "#"}
JR
.content
%h3 Josh Ronk
%span.preview make sure to do the following by...
%span.meta
2d ago ·
%a{:href => "#"} Category
·
%a{:href => "#"} Reply
%li
%a.thumbnail{:href => "#"}
BM
.content
%h3 Benjamin Mueller
%span.preview Hi nice to meet you!
%span.meta
1w ago ·
%a{:href => "#"} Category
·
%a{:href => "#"} Reply
%footer
%a{:href => "#"} View All Messages
View Compiled
@accent: #bd6982;
@white: #ffffff;
@black: #000000;
@dark_gray: lighten(@black, 20%);
@gray: lighten(@black, 40%);
@light_gray: lighten(@black, 60%);
.transitions( @property: all; @duration: 0.3s; @timing: linear; @delay: 0s; ) {
-webkit-transition: @arguments;
-moz-transition: @arguments;
-ms-transition: @arguments;
-o-transition: @arguments;
transition: @arguments;
}
.box-size-border-box() {
-webkti-box-size: border-box;
-moz-box-size: border-box;
box-size: border-box;
}
.font-smoothing() {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: #e9e9e9;
font-family: 'Roboto', sans-serif;
.font-smoothing;
}
.chat {
background: @white;
width: 300px;
margin: 0 auto;
header {
background: @accent;
padding: 10px 15px;
color: @white;
font-size: 14px;
cursor: move;
&:before,
&:after {
display: block;
content: '';
clear: both;
}
h2 {
margin: 0;
padding: 0;
font-size: 14px;
float: left;
a {
color: @white;
text-decoration: none;
}
}
.tools {
list-style: none;
margin: 0;
padding: 0;
float: right;
li {
display: inline-block;
margin-right: 6px;
&:last-child {
margin: 0;
}
a {
color: @white;
text-decoration: none;
.transitions;
}
}
}
}
.body {
position: relative;
max-height: 360px;
overflow-y: scroll;
.search {
display: none;
width: 100%;
&.opened {
display: block;
}
input {
width: 100%;
margin: 0;
padding: 10px 15px;
border: none;
.box-size-border-box;
}
}
ul {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid darken(@white, 5%);
li {
position: relative;
background: @white;
display: block;
width: 100%;
padding: 10px;
box-sizing: border-box;
&:before,
&:after {
display: block;
content: '';
clear: both;
}
&:hover {
.thumbnail {
background: @accent;
}
}
&:nth-child(2n) {
background: darken(@white, 5%);
}
.thumbnail {
display: inline-block;
background: darken(@white, 25%);
width: 50px;
color: @white;
line-height: 50px;
text-align: center;
text-decoration: none;
.transitions(@property: background;);
img {
width: 100%;
}
}
.content {
display: inline-block;
margin-left: 6px;
vertical-align: top;
line-height: 1;
h3 {
&:extend(.chat header h2);
display: block;
width: 100%;
margin-bottom: 5px;
color: lighten(@black, 50%);
}
.preview {
display: block;
width: 100%;
max-width: 200px;
margin-bottom: 5px;
color: darken(@white, 20%);
font-size: 12px;
}
.meta {
color: darken(@white, 30%);
font-size: 12px;
a {
color: darken(@white, 40%);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.message {
display: none;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
height: 100%;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
}
}
}
footer {
a {
background: @accent;
display: block;
width: 100%;
padding: 10px 15px;
color: @white;
font-size: 14px;
text-align: center;
text-decoration: none;
box-sizing: border-box;
&:hover {
background: lighten(@accent, 10%);
.transitions(@property: background;)
}
}
}
}
.info {
width: 300px;
margin: 25px auto;
text-align: center;
h1 {
margin: 0;
padding: 0;
font-size: 24px;
font-weight: 400;
color: @dark_gray;
}
span {
color: @gray;
font-size: 12px;
a {
color: @black;
text-decoration: none;
}
.fa {
color: @accent;
}
.spoilers {
color: @light_gray;
margin-top: 5px;
font-size: 10px;
}
}
}
View Compiled
$('.fa-search').click(function(){
$(this).stop().toggleClass('fa-close');
$('.search').stop().animate({height: "toggle", opacity: "toggle"}, 300);
});
$('.chat').draggable({ handle: 'header' });
