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

Feature: Update design for web widget (#408)

Browse Source
This commit is contained in:
Nithin David Thomas
2020-01-13 12:10:40 +05:30
committed by Pranav Raj S
parent 655c585358
commit 7cf19e0b52
11 changed files with 184 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
app/javascript/widget/assets/scss/sdk.js
View File

@@ -1,44 +1,47 @@
export const SDK_CSS = `
.woot-widget-holder {
z-index: 2147483000!important;
position: fixed!important;
-moz-box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
-o-box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
-webkit-box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
overflow: hidden!important;
export const SDK_CSS = ` .woot-widget-holder {
z-index: 2147483000 !important;
position: fixed !important;
-moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
-o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
-webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
overflow: hidden !important;
opacity: 1;
transition-property: opacity, bottom;
transition-duration: 0.5s, 0.5s;
}
.woot-widget-holder iframe { width: 100% !important; height: 100% !important; border: 0; }
.woot-widget-holder iframe {
width: 100% !important;
height: 100% !important;
border: 0;
}
.woot-widget-bubble {
z-index: 2147483000!important;
-moz-box-shadow: 0 8px 24px rgba(0,0,0,.16)!important;
-o-box-shadow: 0 8px 24px rgba(0,0,0,.16)!important;
-webkit-box-shadow: 0 8px 24px rgba(0,0,0,.16)!important;
box-shadow: 0 8px 24px rgba(0,0,0,.16)!important;
-o-border-radius: 100px!important;
-moz-border-radius: 100px!important;
-webkit-border-radius: 100px!important;
border-radius: 100px!important;
z-index: 2147483000 !important;
-moz-box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
-o-box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
-webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
-o-border-radius: 100px !important;
-moz-border-radius: 100px !important;
-webkit-border-radius: 100px !important;
border-radius: 100px !important;
background: #1f93ff;
position: fixed;
cursor: pointer;
right: 20px;
bottom: 20px;
width: 64px!important;
height: 64px!important;
width: 64px !important;
height: 64px !important;
}
.woot-widget-bubble:hover {
background: #1f93ff;
-moz-box-shadow: 0 8px 32px rgba(0,0,0,.4)!important;
-o-box-shadow: 0 8px 32px rgba(0,0,0,.4)!important;
-webkit-box-shadow: 0 8px 32px rgba(0,0,0,.4)!important;
box-shadow: 0 8px 32px rgba(0,0,0,.4)!important;
-moz-box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
-o-box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
-webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
}
.woot-widget-bubble img {
@@ -47,15 +50,29 @@ export const SDK_CSS = `
margin: 20px;
}
.woot-widget-bubble.woot--close img {
width: 16px;
height: 16px;
margin: 24px;
.woot--close:hover {
opacity: 1;
}
.woot--close:before, .woot--close:after {
position: absolute;
left: 30px;
top: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: white;
}
.woot--close:before {
transform: rotate(45deg);
}
.woot--close:after {
transform: rotate(-45deg);
}
.woot--hide {
visibility: hidden !important;
z-index: -1!important;
z-index: -1 !important;
opacity: 0;
bottom: 60px;
}
@@ -69,12 +86,17 @@ export const SDK_CSS = `
}
.woot-widget-bubble.woot--close {
top: 0;
right: 0;
top: 8px;
right: 8px;
box-shadow: none !important;
-moz-box-shadow: none !important;
-o-box-shadow: none !important;
-webkit-box-shadow: none !important;
background: transparent !important;
}
.woot--close:before, .woot--close:after {
background-color: black;
}
}
@@ -83,13 +105,13 @@ export const SDK_CSS = `
bottom: 104px;
right: 20px;
height: calc(85% - 64px - 20px);
width: 370px!important;
min-height: 250px!important;
max-height: 590px!important;
-o-border-radius: 8px!important;
-moz-border-radius: 8px!important;
-webkit-border-radius: 8px!important;
border-radius: 8px!important;
width: 400px !important;
min-height: 250px !important;
max-height: 590px !important;
-o-border-radius: 8px !important;
-moz-border-radius: 8px !important;
-webkit-border-radius: 8px !important;
border-radius: 8px !important;
}
}