LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: Add animation to live chat trigger button (#6252)

Browse Source 
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Nithin David Thomas
2023-01-16 22:37:10 +05:30
committed by GitHub
parent 72f206025a
commit 0d894e0abc
1 changed files with 47 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/javascript/sdk/sdk.js
View File

@@ -180,7 +180,6 @@ export const SDK_CSS = `
.woot--hide {
bottom: -100vh !important;
transform: translateY(40px);
top: unset !important;
opacity: 0;
visibility: hidden !important;
@@ -190,6 +189,53 @@ export const SDK_CSS = `
.woot-widget--without-bubble {
bottom: 20px !important;
}
.woot-widget-holder.woot--hide{
transform: translateY(40px);
}
.woot-widget-bubble.woot--close {
transform: translateX(0px) scale(1) rotate(0deg);
transition: transform 300ms ease, opacity 100ms ease, visibility 0ms linear 0ms, bottom 0ms linear 0ms;
}
.woot-widget-bubble.woot--close.woot--hide {
transform: translateX(8px) scale(.75) rotate(45deg);
transition: transform 300ms ease, opacity 200ms ease, visibility 0ms linear 500ms, bottom 0ms ease 200ms;
}
.woot-widget-bubble {
transform-origin: center;
will-change: transform, opacity;
transform: translateX(0) scale(1) rotate(0deg);
transition: transform 300ms ease, opacity 100ms ease, visibility 0ms linear 0ms, bottom 0ms linear 0ms;
}
.woot-widget-bubble.woot--hide {
transform: translateX(8px) scale(.75) rotate(-30deg);
transition: transform 300ms ease, opacity 200ms ease, visibility 0ms linear 500ms, bottom 0ms ease 200ms;
}
.woot-widget-bubble.woot-widget--expanded {
transform: translateX(0px);
transition: transform 300ms ease, opacity 100ms ease, visibility 0ms linear 0ms, bottom 0ms linear 0ms;
}
.woot-widget-bubble.woot-widget--expanded.woot--hide {
transform: translateX(8px);
transition: transform 300ms ease, opacity 200ms ease, visibility 0ms linear 500ms, bottom 0ms ease 200ms;
}
.woot-widget-bubble.woot-widget-bubble--flat.woot--close {
transform: translateX(0px);
transition: transform 300ms ease, opacity 10ms ease, visibility 0ms linear 0ms, bottom 0ms linear 0ms;
}
.woot-widget-bubble.woot-widget-bubble--flat.woot--close.woot--hide {
transform: translateX(8px);
transition: transform 300ms ease, opacity 200ms ease, visibility 0ms linear 500ms, bottom 0ms ease 200ms;
}
.woot-widget-bubble.woot-widget--expanded.woot-widget-bubble--flat {
transform: translateX(0px);
transition: transform 300ms ease, opacity 200ms ease, visibility 0ms linear 0ms, bottom 0ms linear 0ms;
}
.woot-widget-bubble.woot-widget--expanded.woot-widget-bubble--flat.woot--hide {
transform: translateX(8px);
transition: transform 300ms ease, opacity 200ms ease, visibility 0ms linear 500ms, bottom 0ms ease 200ms;
}
@media only screen and (max-width: 667px) {
.woot-widget-holder {