KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Add flat design for widget (#4065)

Browse source
This commit is contained in:
Pranav Raj S 2022-02-25 16:18:18 +05:30 • committed by GitHub
parent dcecbf4b80
commit 6c94768bdb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 251 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

51
app/javascript/sdk/sdk.js
View file

@ -1,5 +1,10 @@
export const SDK_CSS = `.woot-widget-holder {
box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
export const SDK_CSS = `
:root {
--b-100: #F2F3F7;
}
.woot-widget-holder {
box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
opacity: 1;
will-change: transform, opacity;
transform: translateY(0);
@ -9,6 +14,12 @@ export const SDK_CSS = `.woot-widget-holder {
z-index: 2147483000 !important;
}
.woot-widget-holder.woot-widget-holder--flat {
box-shadow: none;
border-radius: 0;
border: 1px solid var(--b-100);
}
.woot-widget-holder iframe {
border: 0;
height: 100% !important;
@ -22,21 +33,45 @@ export const SDK_CSS = `.woot-widget-holder {
height: auto;
bottom: 94px;
box-shadow: none !important;
border: 0;
}
.woot-widget-bubble {
background: #1f93ff;
border-radius: 100px !important;
border-radius: 100px;
border-width: 0px;
bottom: 20px;
padding: 0px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
cursor: pointer;
height: 64px !important;
height: 64px;
padding: 0px;
position: fixed;
width: 64px !important;
z-index: 2147483000 !important;
user-select: none;
width: 64px;
z-index: 2147483000 !important;
}
.woot-widget-bubble.woot-widget-bubble--flat {
border-radius: 0;
}
.woot-widget-holder.woot-widget-holder--flat {
bottom: 90px;
}
.woot-widget-bubble.woot-widget-bubble--flat {
height: 56px;
width: 56px;
}
.woot-widget-bubble.woot-widget-bubble--flat img {
margin: 16px;
}
.woot-widget-bubble.woot-widget-bubble--flat.woot--close::before,
.woot-widget-bubble.woot-widget-bubble--flat.woot--close::after {
left: 28px;
top: 16px;
}
.woot-widget-bubble.unread-notification::after {
@ -184,7 +219,7 @@ export const SDK_CSS = `.woot-widget-holder {
@media only screen and (min-width: 667px) {
.woot-widget-holder {
border-radius: 16px !important;
border-radius: 16px;
bottom: 104px;
height: calc(85% - 64px - 20px);
max-height: 590px !important;