[Feature] Website live chat (#187)
Co-authored-by: Nithin David Thomas <webofnithin@gmail.com> Co-authored-by: Sojan Jose <sojan@pepalo.com>
This commit is contained in:
Pranav Raj S
co-authored by
Nithin David Thomas
Sojan Jose
Nithin David Thomas
Sojan Jose
parent
a4114288f3
commit
16fe912fbd
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
+11
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
|
||||
<title>Untitled</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="message-send" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<path d="M18.34,7.32 L4.34,0.32 C3.20803579,-0.243393454 1.84434515,-0.0365739638 0.930331262,0.837115781 C0.0163173744,1.71080553 -0.251780361,3.06378375 0.26,4.22 L2.66,9.59 L2.66,9.59 C2.77000426,9.8522654 2.77000426,10.1477346 2.66,10.41 L0.26,15.78 C-0.153051509,16.7079201 -0.0685371519,17.7818234 0.48458191,18.6337075 C1.03770097,19.4855916 1.98429967,19.9997529 3,20 C3.46823099,19.9953274 3.9294892,19.8859921 4.35,19.68 L18.35,12.68 C19.3627539,12.1705304 20.001816,11.1336797 20.001816,10 C20.001816,8.86632027 19.3627539,7.82946961 18.35,7.32 L18.34,7.32 Z M17.45,10.89 L3.45,17.89 C3.07351737,18.0707705 2.62434212,17.9985396 2.32351279,17.7088521 C2.02268345,17.4191646 1.93356002,16.9730338 2.1,16.59 L4.49,11.22 C4.5209392,11.1482915 4.54765161,11.0748324 4.57,11 L11.46,11 C12.0122847,11 12.46,10.5522847 12.46,10 C12.46,9.44771525 12.0122847,9 11.46,9 L4.57,9 C4.54765161,8.9251676 4.5209392,8.85170847 4.49,8.78 L2.1,3.41 C1.93356002,3.02696622 2.02268345,2.5808354 2.32351279,2.2911479 C2.62434212,2.00146039 3.07351737,1.92922952 3.45,2.11 L17.45,9.11 C17.7839662,9.28109597 17.9940395,9.62475706 17.9940395,10 C17.9940395,10.3752429 17.7839662,10.718904 17.45,10.89 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
+57
@@ -0,0 +1,57 @@
|
||||
$button-border-width: 1px;
|
||||
// Buttons
|
||||
.button {
|
||||
appearance: none;
|
||||
background: $color-primary;
|
||||
border: $button-border-width solid $color-primary;
|
||||
border-radius: $border-radius;
|
||||
color: $color-white;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: $font-size-default;
|
||||
height: $space-two * 2;
|
||||
line-height: $line-height;
|
||||
outline: none;
|
||||
padding: $space-smaller $space-normal;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: lighten($color-primary, 7%);
|
||||
border-color: $color-primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background: $color-primary;
|
||||
border-color: darken($color-primary, 5%);
|
||||
color: lighten($color-primary, 20%);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: $font-size-small;
|
||||
height: $space-medium;
|
||||
padding: $space-smaller $space-slab;
|
||||
}
|
||||
|
||||
&.large {
|
||||
font-size: $font-size-medium;
|
||||
height: $space-larger;
|
||||
padding: $space-small $space-medium;
|
||||
}
|
||||
}
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
// scss-lint:disable PropertySortOrder DeclarationOrder QualifyingElement
|
||||
$form-border-width: 1px;
|
||||
$input-height: $space-two * 2;
|
||||
|
||||
.form-input {
|
||||
@include placeholder {
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
appearance: none;
|
||||
background: $color-white;
|
||||
border: $form-border-width solid $color-border;
|
||||
border-radius: $border-radius;
|
||||
box-sizing: border-box;
|
||||
color: $color-body;
|
||||
display: block;
|
||||
font-size: $font-size-default;
|
||||
height: $input-height;
|
||||
line-height: 1.3;
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
padding: $space-small $space-slab;
|
||||
position: relative;
|
||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
// Input sizes
|
||||
&.small {
|
||||
font-size: $font-size-small;
|
||||
height: $space-large;
|
||||
padding: $space-small $space-slab;
|
||||
}
|
||||
|
||||
&.large {
|
||||
font-size: $font-size-medium;
|
||||
height: $space-larger;
|
||||
padding: $space-slab $space-two;
|
||||
}
|
||||
|
||||
&.input-inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Input types
|
||||
&[type="file"] {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Form element: Textarea
|
||||
textarea.form-input {
|
||||
@include placeholder {
|
||||
color: $color-light-gray;
|
||||
}
|
||||
|
||||
&,
|
||||
&.large,
|
||||
&.small {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
// scss-lint:disable PseudoElement SpaceBeforeBrace VendorPrefix
|
||||
$shadow-color-1: rgba(50, 50, 93, 0.2);
|
||||
$shadow-color-2: rgba(0, 0, 0, 0.07);
|
||||
$shadow-color-3: rgba(50, 50, 93, .08);
|
||||
$shadow-color-4: rgba(0, 0, 0, .05);
|
||||
|
||||
@mixin normal-shadow {
|
||||
box-shadow: 0 $space-small $space-normal $shadow-color-1, 0 $space-smaller $space-slab $shadow-color-2;
|
||||
}
|
||||
|
||||
@mixin light-shadow {
|
||||
box-shadow: 0 $space-smaller 6px $shadow-color-3, 0 1px 3px $shadow-color-4;
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {@content}
|
||||
&:-moz-placeholder {@content}
|
||||
&::-moz-placeholder {@content}
|
||||
&:-ms-input-placeholder {@content}
|
||||
}
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
// scss-lint:disable
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
+90
@@ -0,0 +1,90 @@
|
||||
// Font sizes
|
||||
$font-size-nano: 0.8rem;
|
||||
$font-size-micro: 0.8rem;
|
||||
$font-size-mini: 1rem;
|
||||
$font-size-small: 1.2rem;
|
||||
$font-size-default: 1.4rem;
|
||||
$font-size-medium: 1.6rem;
|
||||
$font-size-large: 2rem;
|
||||
$font-size-big: 2.4rem;
|
||||
$font-size-bigger: 3.2rem;
|
||||
$font-size-mega: 4rem;
|
||||
$font-size-giga: 5.6rem;
|
||||
|
||||
// spaces
|
||||
$zero: 0;
|
||||
$space-micro: 0.2rem;
|
||||
$space-smaller: 0.4rem;
|
||||
$space-small: 0.8rem;
|
||||
$space-one: 1rem;
|
||||
$space-slab: 1.2rem;
|
||||
$space-normal: 1.6rem;
|
||||
$space-two: 2rem;
|
||||
$space-medium: 2.4rem;
|
||||
$space-large: 3.2rem;
|
||||
$space-larger: 4.8rem;
|
||||
$space-big: 6.4rem;
|
||||
$space-jumbo: 8rem;
|
||||
$space-mega: 10rem;
|
||||
|
||||
// font-weight
|
||||
$font-weight-feather: 100;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-bold: 600;
|
||||
$font-weight-black: 700;
|
||||
|
||||
//Navbar
|
||||
$nav-bar-width: 23rem;
|
||||
$header-height: 5.6rem;
|
||||
|
||||
// Woot Logo
|
||||
$woot-logo-width: 20rem;
|
||||
$woot-logo-height: 8rem;
|
||||
$woot-logo-padding: $space-large $space-large $space-large $space-large;
|
||||
|
||||
// Colors
|
||||
$color-woot: #1f93ff;
|
||||
$color-primary: $color-woot;
|
||||
$color-gray: #6e6f73;
|
||||
$color-light-gray: #999a9b;
|
||||
$color-border: #e0e6ed;
|
||||
$color-border-transparent: rgba(224, 230, 237, 0.5);
|
||||
$color-border-light: #f0f4f5;
|
||||
$color-background: #ecf3f9;
|
||||
$color-background-light: #fafafa;
|
||||
$color-white: #fff;
|
||||
$color-body: #3c4858;
|
||||
$color-heading: #1f2d3d;
|
||||
$color-modal-header: #f1f1f1;
|
||||
// Thumbnail
|
||||
$thumbnail-radius: 4rem;
|
||||
|
||||
// chat-header
|
||||
$conv-header-height: 4rem;
|
||||
|
||||
// login
|
||||
|
||||
// Inbox List
|
||||
|
||||
$inbox-thumb-size: 4.8rem;
|
||||
|
||||
|
||||
// Spinner
|
||||
$spinkit-spinner-color: $color-white !default;
|
||||
$spinkit-spinner-margin: 0 0 0 1.6rem !default;
|
||||
$spinkit-size: 1.6rem !default;
|
||||
|
||||
// Snackbar default
|
||||
$woot-snackbar-bg: #323232;
|
||||
$woot-snackbar-button: #ffeb3b;
|
||||
|
||||
$swift-ease-out-duration: .4s !default;
|
||||
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
|
||||
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
|
||||
|
||||
$border-radius: 3px;
|
||||
$line-height: 1;
|
||||
$footer-height: 11.2rem;
|
||||
$header-expanded-height: $space-medium * 10;
|
||||
@@ -0,0 +1,65 @@
|
||||
.woot-widget-holder {
|
||||
z-index: 2147483000!important;
|
||||
position: fixed!important;
|
||||
bottom: 104px;
|
||||
right: 20px;
|
||||
height: calc(85% - 64px - 20px);
|
||||
width: 370px!important;
|
||||
min-height: 250px!important;
|
||||
max-height: 590px!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;
|
||||
-o-border-radius: 8px!important;
|
||||
-moz-border-radius: 8px!important;
|
||||
-webkit-border-radius: 8px!important;
|
||||
border-radius: 8px!important;
|
||||
overflow: hidden!important;
|
||||
opacity: 1!important;
|
||||
}
|
||||
|
||||
.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;
|
||||
background: #1f93ff;
|
||||
position: fixed;
|
||||
cursor: pointer;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
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;
|
||||
}
|
||||
|
||||
.woot-widget-bubble img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.woot-widget-bubble.woot--close img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.woot--hide {
|
||||
display: none !important;
|
||||
}
|
||||
Executable
+16
@@ -0,0 +1,16 @@
|
||||
@import 'variables';
|
||||
@import 'buttons';
|
||||
@import 'mixins';
|
||||
@import 'forms';
|
||||
@import 'reset';
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
||||
font-size: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.woot-widget-wrap {
|
||||
height: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user