0adbc346df
* feat: Add a new design for chat bubble Signed-off-by: Pranav Raj Sreepuram <pranavrajs@gmail.com> * Add i18n * Fix stye issues * Set fixed font-size * Update docs for bubble
142 lines
2.8 KiB
JavaScript
142 lines
2.8 KiB
JavaScript
export const SDK_CSS = `.woot-widget-holder {
|
|
box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
|
|
opacity: 1;
|
|
overflow: hidden !important;
|
|
position: fixed !important;
|
|
transition-duration: 0.5s, 0.5s;
|
|
transition-property: opacity, bottom;
|
|
z-index: 2147483000 !important;
|
|
}
|
|
|
|
.woot-widget-holder iframe {
|
|
border: 0;
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.woot-widget-holder.has-unread-view {
|
|
border-radius: 0 !important;
|
|
bottom: 94px;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.woot-widget-bubble {
|
|
background: #1f93ff;
|
|
border-radius: 100px !important;
|
|
bottom: 20px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
|
|
cursor: pointer;
|
|
height: 64px !important;
|
|
position: fixed;
|
|
width: 64px !important;
|
|
z-index: 2147483000 !important;
|
|
}
|
|
|
|
.woot-widget-bubble.woot-widget--expanded {
|
|
bottom: 24px;
|
|
display: flex;
|
|
height: 48px !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
.woot-widget-bubble.woot-widget--expanded div {
|
|
align-items: center;
|
|
color: #fff;
|
|
display: flex;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
justify-content: center;
|
|
padding-right: 20px;
|
|
width: auto !important;
|
|
}
|
|
|
|
.woot-widget-bubble.woot-widget--expanded img {
|
|
height: 20px;
|
|
margin: 14px 8px 14px 16px;
|
|
width: 20px;
|
|
}
|
|
|
|
.woot-widget-bubble.woot-elements--left {
|
|
left: 20px;
|
|
}
|
|
|
|
.woot-widget-bubble.woot-elements--right {
|
|
right: 20px;
|
|
}
|
|
|
|
.woot-widget-bubble:hover {
|
|
background: #1f93ff;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
|
|
}
|
|
|
|
.woot-widget-bubble img {
|
|
height: 24px;
|
|
margin: 20px;
|
|
width: 24px;
|
|
}
|
|
|
|
@media only screen and (min-width: 667px) {
|
|
.woot-widget-holder.woot-elements--left {
|
|
left: 20px;
|
|
}
|
|
.woot-widget-holder.woot-elements--right {
|
|
right: 20px;
|
|
}
|
|
}
|
|
|
|
.woot--close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.woot--close::before, .woot--close::after {
|
|
background-color: #fff;
|
|
content: ' ';
|
|
height: 24px;
|
|
left: 32px;
|
|
position: absolute;
|
|
top: 20px;
|
|
width: 2px;
|
|
}
|
|
|
|
.woot--close::before {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.woot--close::after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.woot--hide {
|
|
bottom: -20000px;
|
|
opacity: 0;
|
|
visibility: hidden !important;
|
|
z-index: -1 !important;
|
|
}
|
|
|
|
@media only screen and (max-width: 667px) {
|
|
.woot-widget-holder {
|
|
height: 100%;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.woot-widget-bubble.woot--close {
|
|
bottom: 60px;
|
|
opacity: 0;
|
|
visibility: hidden !important;
|
|
z-index: -1 !important;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 667px) {
|
|
.woot-widget-holder {
|
|
border-radius: 16px !important;
|
|
bottom: 104px;
|
|
height: calc(85% - 64px - 20px);
|
|
max-height: 590px !important;
|
|
min-height: 250px !important;
|
|
width: 400px !important;
|
|
}
|
|
}
|
|
`;
|