Skip to content

Instantly share code, notes, and snippets.

@gogl92
Created October 17, 2017 14:15
Show Gist options
  • Save gogl92/59302631cb6c4ba591a499260ed28a1f to your computer and use it in GitHub Desktop.
Save gogl92/59302631cb6c4ba591a499260ed28a1f to your computer and use it in GitHub Desktop.
Material Live Support
<div class="fabs">
<div class="chat">
<div class="chat_header">
<span id="chat_head">Live Chat</span>
<div class="chat_loader"></div>
<div class="chat_option"><i class="zmdi zmdi-more-vert"></i>
<ul>
<li><span class="chat_color" style="border:solid 5px #2196F3" color="blue"></span></li>
<li><span class="chat_color" style="border:solid 5px #00bcd4" color="cyan"></span></li>
<li><span class="chat_color" style="border:solid 5px #607d8b" color="blue-grey"></span></li>
<li><span class="chat_color" style="border:solid 5px #4caf50" color="green"></span></li>
<li><span class="chat_color" style="border:solid 5px #8bc34a" color="light-green"></span></li>
<li><span class="chat_color" style="border:solid 5px #cddc39" color="lime"></span></li>
<li><span class="chat_color" style="border:solid 5px #ffc107" color="amber"></span></li>
<li><span class="chat_color" style="border:solid 5px #ff5722" color="deep-orange"></span></li>
<li><span class="chat_color" style="border:solid 5px #f44336" color="red"></span></li>
</ul>
</div>
</div>
<div class="chat_login">
<a id="chat_send_email" class="fab"><i class="zmdi zmdi-email"></i></a>
<input id="chat_log_email" placeholder="Email"></input>
<div class="chat_login_alert"></div>
</div>
<div id="chat_converse" class="chat_converse">
<span class="chat_msg_item chat_msg_item_admin">
<div class="chat_avatar">
<i class="zmdi zmdi-headset-mic"></i>
</div>Hi! How may I be of service</span>
<span class="chat_msg_item chat_msg_item_user">
<div class="chat_avatar">
<i class="zmdi zmdi-account"></i>
</div>Ermm..</span>
</div>
<div class="fab_field">
<a id="fab_listen" class="fab"><i class="zmdi zmdi-mic-outline"></i></a>
<a id="fab_send" class="fab"><i class="zmdi zmdi-mail-send"></i></a>
<textarea id="chatSend" name="chat_message" placeholder="Write a message" class="chat_field chat_message"></textarea>
</div>
</div>
<a target="_blank" id="fab_help" class="fab"><i class="zmdi zmdi-help-outline"></i></a>
<a id="prime" class="fab"><i class="prime zmdi zmdi-plus"></i></a>
</div>
toggleFab();
//define chat color
if (typeof(Storage) !== "undefined") {
if (localStorage.getItem('fab-color') === null) {
localStorage.setItem("fab-color", "blue");
}
$('.fabs').addClass(localStorage.getItem("fab-color"));
} else {
$('.fabs').addClass("blue");
}
//Fab click
$('#prime').click(function() {
toggleFab();
});
//Speak admin msg
function botSpeak(text) {
if ('speechSynthesis' in window) {
var msg = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(msg);
}
}
//Toggle chat and links
function toggleFab() {
$('.prime').toggleClass('zmdi-plus');
$('.prime').toggleClass('zmdi-close');
$('.prime').toggleClass('is-active');
$('#prime').toggleClass('is-float');
$('.chat').toggleClass('is-visible');
$('.fab').toggleClass('is-visible');
}
//User msg
function userSend(text) {
var img = '<i class="zmdi zmdi-account"></i>';
$('#chat_converse').append('<div class="chat_msg_item chat_msg_item_user"><div class="chat_avatar">' + img + '</div>' + text + '</div>');
$('#chatSend').val('');
if ($('.chat_converse').height() >= 256) {
$('.chat_converse').addClass('is-max');
}
$('.chat_converse').scrollTop($('.chat_converse')[0].scrollHeight);
}
//Admin msg
function adminSend(text) {
$('#chat_converse').append('<div class="chat_msg_item chat_msg_item_admin"><div class="chat_avatar"><i class="zmdi zmdi-headset-mic"></i></div>' + text + '</div>');
botSpeak(text);
if ($('.chat_converse').height() >= 256) {
$('.chat_converse').addClass('is-max');
}
$('.chat_converse').scrollTop($('.chat_converse')[0].scrollHeight);
}
//Send input using enter and send key
$('#chatSend').bind("enterChat", function(e) {
userSend($('#chatSend').val());
adminSend('How may I help you.');
});
$('#fab_send').bind("enterChat", function(e) {
userSend($('#chatSend').val());
adminSend('How may I help you.');
});
$('#chatSend').keypress(function(event) {
if (event.keyCode === 13) {
event.preventDefault();
if (jQuery.trim($('#chatSend').val()) !== '') {
$(this).trigger("enterChat");
}
}
});
$('#fab_send').click(function(e) {
if (jQuery.trim($('#chatSend').val()) !== '') {
$(this).trigger("enterChat");
}
});
//Listen user voice
$('#fab_listen').click(function() {
var recognition = new webkitSpeechRecognition();
recognition.onresult = function(event) {
userSend(event.results[0][0].transcript);
}
recognition.start();
});
// Color options
$(".chat_color").click(function(e) {
$('.fabs').removeClass(localStorage.getItem("fab-color"));
$('.fabs').addClass($(this).attr('color'));
localStorage.setItem("fab-color", $(this).attr('color'));
});
$('.chat_option').click(function(e) {
$(this).toggleClass('is-dropped');
});
//Loader effect
function loadBeat(beat) {
beat ? $('.chat_loader').addClass('is-loading') : $('.chat_loader').removeClass('is-loading');
}
// Ripple effect
var target, ink, d, x, y;
$(".fab").click(function(e) {
target = $(this);
//create .ink element if it doesn't exist
if (target.find(".ink").length == 0)
target.prepend("<span class='ink'></span>");
ink = target.find(".ink");
//incase of quick double clicks stop the previous animation
ink.removeClass("animate");
//set size of .ink
if (!ink.height() && !ink.width()) {
//use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
d = Math.max(target.outerWidth(), target.outerHeight());
ink.css({
height: d,
width: d
});
}
//get click coordinates
//logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
x = e.pageX - target.offset().left - ink.width() / 2;
y = e.pageY - target.offset().top - ink.height() / 2;
//set the position and add class .animate
ink.css({
top: y + 'px',
left: x + 'px'
}).addClass("animate");
});
//Cookies handler
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = encodeURIComponent(name) + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
//User login
function logUser() {
hideChat(true);
$('#chat_send_email').click(function(e) {
var email = $('#chat_log_email').val();
if (jQuery.trim(email) !== '' && validateEmail(email)) {
$('.chat_login_alert').html('');
loadBeat(true);
createCookie('fab_chat_email', email, 100);
if (checkEmail(email)) {
//email exist and get and set username in session
hideChat(false);
} else {
setTimeout(createUsername, 3000);
}
} else {
$('.chat_login_alert').html('Invalid email.');
}
});
}
function createUsername() {
loadBeat(false);
$('#chat_log_email').val('');
$('#chat_send_email').children('i').removeClass('zmdi-email').addClass('zmdi-account');
$('#chat_log_email').attr('placeholder', 'Username');
$('#chat_send_email').attr('id', 'chat_send_username');
$('#chat_log_email').attr('id', 'chat_log_username');
$('#chat_send_username').click(function(e) {
var username = $('#chat_log_username').val();
if (jQuery.trim(username) !== '') {
loadBeat(true);
if (checkUsername(username)) {
//username is taken
$('.chat_login_alert').html('Username is taken.');
} else {
//save username in DB and session
createCookie('fab_chat_username', username, 100);
hideChat(false);
}
} else {
$('.chat_login_alert').html('Please provide username.');
}
});
}
function hideChat(hide) {
if (hide) {
$('.chat_converse').css('display', 'none');
$('.fab_field').css('display', 'none');
} else {
$('#chat_head').html(readCookie('fab_chat_username'));
// Help
$('#fab_help').click(function(){userSend('Help!');});
$('.chat_login').css('display', 'none');
$('.chat_converse').css('display', 'block');
$('.fab_field').css('display', 'inline-block');
}
}
function checkEmail(email) {
//check if email exist in DB
return false;
}
function checkUsername(username) {
//check if username exist in DB
return false;
}
function validateEmail(email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if (!emailReg.test(email)) {
return false;
} else {
return true;
}
}
if (readCookie('fab_chat_username') === null || readCookie('fab_chat_email') === null) {
logUser();
} else {
hideChat(false);
}
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic);
@import url(https://zavoloklom.github.io/material-design-iconic-font/css/docs.md-iconic-font.min.css);
/*Floating Action Button*/
.fabs {
bottom: 0;
position: fixed;
margin: 1em;
right: 0;
z-index: 998;
}
.fab {
display: block;
width: 56px;
height: 56px;
border-radius: 50%;
text-align: center;
color: #263238;
margin: 25px auto 0;
box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
cursor: pointer;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
position: relative;
z-index: 998;
overflow: hidden;
}
.fab > i {
font-size: 2em;
line-height: 55px;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-in-out;
}
.fab:not(:last-child) {
width: 0;
height: 0;
margin: 20px auto 0;
opacity: 0;
visibility: hidden;
}
.fab:not(:last-child) > i {
font-size: 1.4em;
line-height: 40px;
}
.fab:not(:last-child).is-visible {
width: 40px;
height: 40px;
margin: 15px auto 10;
opacity: 1;
visibility: visible;
}
.fab:nth-last-child(1) {
-webkit-transition-delay: 25ms;
-moz-transition-delay: 25ms;
-o-transition-delay: 25ms;
transition-delay: 25ms;
}
.fab:not(:last-child):nth-last-child(2) {
-webkit-transition-delay: 20ms;
-moz-transition-delay: 20ms;
-o-transition-delay: 20ms;
transition-delay: 20ms;
}
.fab:not(:last-child):nth-last-child(3) {
-webkit-transition-delay: 40ms;
-moz-transition-delay: 40ms;
-o-transition-delay: 40ms;
transition-delay: 40ms;
}
.fab:not(:last-child):nth-last-child(4) {
-webkit-transition-delay: 60ms;
-moz-transition-delay: 60ms;
-o-transition-delay: 60ms;
transition-delay: 60ms;
}
.fab:not(:last-child):nth-last-child(5) {
-webkit-transition-delay: 80ms;
-moz-transition-delay: 80ms;
-o-transition-delay: 80ms;
transition-delay: 80ms;
}
.fab:not(:last-child):active,
.fab:not(:last-child):focus,
.fab:not(:last-child):hover {
box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}
/*Chatbox*/
.chat {
position: fixed;
right: 85px;
bottom: 0;
width: 400px;
font-size: 12px;
line-height: 22px;
font-family: 'Roboto';
font-weight: 500;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
opacity: 0;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
border-radius: 3px;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.chat_header {
margin: 10px;
font-size: 14px;
font-family: 'Roboto';
font-weight: 500;
}
.chat_header .span {
float:right;
}
.chat_loader {
display: none;
float: right;
background: rgba(0, 0, 0, 0);
height: 8px;
width: 8px;
margin: 5px 10px 0 0;
border-radius: 50%;
border: solid 2px #263238;
}
.chat.is-visible {
opacity: 1;
-webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
-moz-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
-o-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
}
.chat_option {
float: left;
font-size: 1.5em;
list-style: none;
position: relative;
width: 20px;
height: 100%;
cursor: pointer;
text-align: relative;
margin-right: 10px;
}
.chat_option ul {
display: none;
position: absolute;
list-style: none;
top: 100%;
left: 0;
background: #eceff1;
border-radius: 5px;
box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
padding: 0;
z-index: 1000;
width: 150px;
}
.chat_option ul li {
float: none;
position: relative;
}
.chat_color {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 10px;
float: left;
}
.chat_option.is-dropped>ul {
display: block;
}
.chat_login {
width: 100%;
height: 150px;
display: inline-block;
text-align: center;
box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}
.chat_login a {
width: 10%;
text-align: center;
border: none;
box-shadow: none;
}
.chat_login a>i {
font-size: 1.6em;
line-height: 35px;
}
.chat_login input {
position: relative;
margin: 5px 0 5px 0;
width: 90%;
font-family: 'Roboto';
font-size: 12px;
line-height: 30px;
font-weight: 500;
color: #4b4b4b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
border: none;
outline: none;
background: #eceff1;
display: inline-block;
height: 30px;
resize: none;
padding: 5px;
border-radius: 3px;
box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
margin: 10px 0 0 0;
}
.chat_login .chat_login_alert {
margin-top: 10px;
font-size: 12px;
font-family: 'Roboto';
font-weight: 500;
}
.chat_field {
position: relative;
margin: 5px 0 5px 0;
width: 50%;
font-family: 'Roboto';
font-size: 12px;
line-height: 30px;
font-weight: 500;
color: #4b4b4b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
border: none;
outline: none;
background: #eceff1;
display: inline-block;
}
.chat_field.chat_message {
height: 30px;
resize: none;
}
.fab_field {
width: 100%;
display: inline-block;
text-align: center;
background: #eceff1;
box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}
.fab_field a {
display: inline-block;
text-align: center;
}
#fab_listen {
float: left;
background: rgba(0, 0, 0, 0);
}
#fab_send {
float: right;
background: rgba(0, 0, 0, 0);
}
.fab_field .fab {
width: 35px;
height: 35px;
box-shadow: none;
margin: 5px;
}
.fab_field .fab>i {
font-size: 1.6em;
line-height: 35px;
color: #263238;
}
.chat_converse {
position: relative;
background: inherit;
margin: 6px 0 0 0;
max-height: 256px;
min-height: 0;
font-size: 12px;
line-height: 18px;
overflow-y: auto;
width: 100%;
float: right;
}
.chat_list {
opacity: 0;
visibility: hidden;
height: 0;
}
.chat_list .chat_list_item {
opacity: 0;
visibility: hidden;
}
.chat .chat_converse .chat_msg_item {
position: relative;
margin: 8px 0 15px 0;
padding: 8px 10px;
max-width: 40%;
display: block;
word-wrap: break-word;
box-shadow: 0 4px 8px rgba(0, 0, 0, .28);
border-radius: 3px;
-webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
-moz-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
-o-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
clear: both;
z-index: 999;
}
.chat .chat_converse .chat_msg_item .chat_avatar {
position: absolute;
top: 0;
box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
}
.chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar {
left: -52px;
background: rgba(255, 255, 255, 0.6);
}
.chat .chat_converse .chat_msg_item.chat_msg_item_user .chat_avatar {
right: -52px;
background: rgba(0, 0, 0, 0.6);
}
.chat .chat_converse .chat_msg_item .chat_avatar {
width: 40px;
height: 40px;
text-align: center;
border-radius: 50%;
}
.chat .chat_converse .chat_msg_item .chat_avatar > i {
font-size: 22px;
line-height: 40px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.chat .chat_converse .chat_msg_item_user .chat_avatar > img {
width: inherit;
height: inherit;
border-radius: 50%;
}
.chat .chat_converse .chat_msg_item_user .chat_avatar > img {
width: inherit;
height: inherit;
border-radius: 50%;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_admin {
margin-left: 60px;
float: left;
background: rgba(255, 255, 255, 0.4);
color: #263238;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_user {
margin-right: 60px;
float: right;
background: rgba(0, 0, 0, 0.4);
color: #eceff1;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_admin:before {
content: '';
position: absolute;
top: 15px;
left: -12px;
z-index: 998;
border: 6px solid transparent;
border-right-color: rgba(255, 255, 255, .4);
}
.chat_msg_item.chat_msg_item_user:before {
content: '';
position: absolute;
top: 15px;
right: -12px;
z-index: 998;
border: 6px solid transparent;
border-left-color: rgba(0, 0, 0, .4);
}
strong.chat_time {
padding: 0 1px 1px 0;
font-weight: 500;
font-size: 8px;
display: block;
}
/*Chatbox scrollbar*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
border-radius: 0;
}
::-webkit-scrollbar-thumb {
margin: 2px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
}
/*Element state*/
.is-active {
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.is-float {
box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}
.is-max {
box-shadow: inset 0 -12px 10px -10px rgba(0, 0, 0, 0.18), inset 0 12px 10px -10px rgba(0, 0, 0, 0.10);
}
.is-loading {
display: block;
-webkit-animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
-moz-animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
-o-animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
}
/*Animation*/
@keyframes zoomIn {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0.0;
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes load {
0% {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0.0;
}
50% {
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {
.chat {
width: 200px;
}
}
/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {
.chat {
width: 300px;
}
.chat_field {
width: 65%;
}
}
/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {
.chat {
width: 300px;
}
.chat_field {
width: 65%;
}
}
/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {
.chat {
width: 400px;
}
.chat_field {
width: 65%;
}
}
/*Color Options*/
.red .fab {
background: #F44336;
color: #eceff1;
}
.pink .fab {
background: #E91E63;
color: #eceff1;
}
.purple .fab {
background: #9C27B0;
color: #eceff1;
}
.deep-purple .fab {
background: #673AB7;
color: #eceff1;
}
.indigo .fab {
background: #3F51B5;
color: #eceff1;
}
.blue .fab {
background: #2196F3;
color: #eceff1;
}
.light-blue .fab {
background: #03A9F4;
color: #263238;
}
.cyan .fab {
background: #00BCD4;
color: #263238;
}
.teal .fab {
background: #009688;
color: #eceff1;
}
.green .fab {
background: #4CAF50;
color: #263238;
}
.light-green .fab {
background: #8BC34A;
color: #263238;
}
.lime .fab {
background: #CDDC39;
color: #263238;
}
.yellow .fab {
background: #FFEB3B;
color: #263238;
}
.amber .fab {
background: #FFC107;
color: #263238;
}
.orange .fab {
background: #FF9800;
color: #eceff1;
}
.deep-orange .fab {
background: #FF5722;
color: #eceff1;
}
.brown .fab {
background: #795548;
color: #eceff1;
}
.grey .fab {
background: #9E9E9E;
color: #eceff1;
}
.blue-grey .fab {
background: #607D8B;
color: #eceff1;
}
.red .chat {
background: #F44336;
color: #eceff1;
}
.pink .chat {
background: #E91E63;
color: #eceff1;
}
.purple .chat {
background: #9C27B0;
color: #eceff1;
}
.deep-purple .chat {
background: #673AB7;
color: #eceff1;
}
.indigo .chat {
background: #3F51B5;
color: #eceff1;
}
.blue .chat {
background: #2196F3;
color: #eceff1;
}
.light-blue .chat {
background: #03A9F4;
color: #263238;
}
.cyan .chat {
background: #00BCD4;
color: #263238;
}
.teal .chat {
background: #009688;
color: #eceff1;
}
.green .chat {
background: #4CAF50;
color: #263238;
}
.light-green .chat {
background: #8BC34A;
color: #263238;
}
.lime .chat {
background: #CDDC39;
color: #263238;
}
.yellow .chat {
background: #FFEB3B;
color: #263238;
}
.amber .chat {
background: #FFC107;
color: #263238;
}
.orange .chat {
background: #FF9800;
color: #eceff1;
}
.deep-orange .chat {
background: #FF5722;
color: #eceff1;
}
.brown .chat {
background: #795548;
color: #eceff1;
}
.grey .chat {
background: #9E9E9E;
color: #eceff1;
}
.blue-grey .chat {
background: #607D8B;
color: #eceff1;
}
/* Ripple */
.ink {
display: block;
position: absolute;
background: rgba(38, 50, 56, 0.4);
border-radius: 100%;
-moz-transform: scale(0);
-ms-transform: scale(0);
webkit-transform: scale(0);
transform: scale(0);
}
/*animation effect*/
.ink.animate {
animation: ripple 0.5s ease-in-out;
}
@keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(5);
-ms-transform: scale(5);
webkit-transform: scale(5);
transform: scale(5);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment