@textback/notification-widget 2.0.1-84986 → 2.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. package/.eslintrc.js +291 -291
  2. package/.idea/inspectionProfiles/Project_Default.xml +6 -0
  3. package/.idea/misc.xml +6 -0
  4. package/.idea/modules.xml +8 -0
  5. package/.idea/notificationwidget.iml +9 -0
  6. package/.idea/vcs.xml +6 -0
  7. package/build/index.js +3 -3
  8. package/build/sdk.js +2 -2
  9. package/package.json +70 -70
  10. package/promote_tag.sh +1 -1
  11. package/readme.md +569 -569
  12. package/server.js +1 -1
  13. package/src/libraries/ai.1.0.11.js +4088 -4088
  14. package/src/libraries/localization/locales/index.js +8 -8
  15. package/src/libraries/localization/text.js +9 -9
  16. package/src/libraries/t.js +82 -82
  17. package/src/sdk/channels/channel.js +30 -30
  18. package/src/sdk/channels/facebook.js +13 -13
  19. package/src/sdk/channels/skype.js +12 -12
  20. package/src/sdk/channels/telegram.js +18 -18
  21. package/src/sdk/channels/viber.js +12 -12
  22. package/src/sdk/channels/vk-modal/vk-modal.html +17 -17
  23. package/src/sdk/channels/vk-modal/vk-modal.js +25 -25
  24. package/src/sdk/channels/vk-modal/vk-modal.scss +116 -116
  25. package/src/sdk/channels/vk.js +195 -195
  26. package/src/sdk/events/observer.js +46 -46
  27. package/src/sdk/index.js +5 -5
  28. package/src/sdk/sdk.js +67 -67
  29. package/src/sdk/utils/apiErrorHandler.js +11 -11
  30. package/src/sdk/utils/appInsights.js +88 -88
  31. package/src/sdk/utils/browserInfo.js +8 -8
  32. package/src/sdk/utils/constants.js +17 -17
  33. package/src/sdk/utils/cookies.js +67 -67
  34. package/src/sdk/utils/find.js +7 -7
  35. package/src/sdk/utils/loadConfig.js +20 -20
  36. package/src/sdk/utils/loadDeepLink.js +48 -48
  37. package/src/sdk/utils/loadScript.js +25 -25
  38. package/src/sdk/utils/loadSubscriptions.js +6 -6
  39. package/src/sdk/utils/parseQueryString.js +33 -33
  40. package/src/sdk/utils/windowHelper.js +25 -25
  41. package/src/sdk/widget/widget.js +192 -192
  42. package/src/widget/components/tb-notification-button/index.js +34 -34
  43. package/src/widget/components/tb-notification-button/styles.scss +657 -657
  44. package/src/widget/components/tb-notification-widget/normalize.scss +395 -395
  45. package/src/widget/components/tb-nw-wahunter/styles.scss +471 -471
  46. package/src/widget/config.js +5 -5
  47. package/src/widget/icons/icon_chat_window.svg +1 -1
  48. package/src/widget/icons/icon_close.svg +1 -1
  49. package/src/widget/icons/icon_facebook.svg +7 -7
  50. package/src/widget/icons/icon_facebook_circle.svg +7 -7
  51. package/src/widget/icons/icon_instagram_circle.svg +95 -95
  52. package/src/widget/icons/icon_skype.svg +44 -44
  53. package/src/widget/icons/icon_skype_circle.svg +46 -46
  54. package/src/widget/icons/icon_skype_new.svg +113 -113
  55. package/src/widget/icons/icon_tg.svg +25 -25
  56. package/src/widget/icons/icon_tg_circle.svg +17 -17
  57. package/src/widget/icons/icon_viber.svg +75 -75
  58. package/src/widget/icons/icon_viber_circle.svg +67 -67
  59. package/src/widget/icons/icon_viber_new.svg +102 -102
  60. package/src/widget/icons/icon_vk.svg +14 -14
  61. package/src/widget/icons/icon_vk_circle.svg +16 -16
  62. package/src/widget/icons/icon_whatsapp.svg +147 -147
  63. package/src/widget/icons/icon_whatsapp_circle.svg +3 -3
  64. package/src/widget/icons/icon_whatsapp_new.svg +127 -127
  65. package/src/widget/icons/icon_whatsappb.svg +147 -147
  66. package/src/widget/icons/icon_whatsappb_circle.svg +3 -3
  67. package/src/widget/icons/icon_whatsappb_new.svg +127 -127
  68. package/src/widget/icons/paper-plane-arrow.svg +3 -3
  69. package/src/widget/icons/tb-logo.svg +21 -21
  70. package/src/widget/index.js +28 -28
  71. package/src/widget/locales/cs.js +42 -42
  72. package/src/widget/locales/en.js +42 -42
  73. package/src/widget/locales/ro.js +41 -41
  74. package/src/widget/utils/cookiesEx.js +41 -41
  75. package/src/widget/utils/stringifyAttributes.js +19 -19
  76. package/src/widget/utils/widgetsStorage.js +28 -28
  77. package/src/widget/widget.entry.js +3 -3
  78. package/tests/gf.html +35 -35
  79. package/tests/gf.js +21 -21
  80. package/tests/index.js +61 -61
  81. package/views/examples.ejs +3 -3
  82. package/views/sdk.html +274 -274
  83. package/webpack.common.js +72 -72
  84. package/webpack.dev.js +15 -15
  85. package/webpack.prod.js +10 -10
@@ -1,657 +1,657 @@
1
- $color-fb: #3b5998;
2
- $color-fb-gradient: #6077a6;
3
-
4
- $color-vk: #4a76a8;
5
- $color-vk-gradient: #0f65c6;
6
-
7
- $color-tg: #61A8DE;
8
- $color-tg-gradient:#408AC2;
9
-
10
- $color-skype: #00aff0;
11
- $color-skype-gradient:#00d0e7;
12
-
13
- $color-viber: #574e92;
14
- $color-viber-gradient:#655bab;
15
-
16
- $color-whatsapp: #25D366;
17
- $color-whatsappb: #25D366;
18
- $color-whatsapp-gradient:#2fc368;
19
-
20
- @mixin shadow-on-hover() {
21
- transition: box-shadow 0.4s;
22
-
23
- &:hover {
24
- box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
25
- }
26
- }
27
-
28
- @mixin shadow-on-hover-gradient() {
29
- transition: box-shadow 0.4s;
30
-
31
- &:hover {
32
- box-shadow:inset 0 0 3px 3px rgba(0, 0, 0, 0.4);
33
- }
34
- }
35
-
36
- @mixin set-channel-button-brand-color($color) {
37
- .tb-notification-button__inner > a {
38
- background-color: $color;
39
- }
40
-
41
- tb-notification-button__icon > svg path {
42
- fill: $color;
43
- }
44
- }
45
-
46
- @mixin set-channel-button-brand-linear-gradient-color($color, $color-gradient) {
47
- background: linear-gradient(309.02deg, $color -6.45%, $color-gradient 111.08%);
48
- }
49
-
50
- tb-notification-widget {
51
- #tb-notification-widget-inner.tb-notification-widget-inner {
52
- tb-notification-button a {
53
- cursor: pointer !important;
54
- }
55
-
56
- .tb-notification-button__tip {
57
- position: absolute;
58
- font-size: 10px;
59
- text-align: center;
60
- margin-top: 19px;
61
- left: 0;
62
- width: 100%;
63
- color: #6f7b8a;
64
- }
65
-
66
- .tb-btn-align-center {
67
- text-align: center;
68
- }
69
-
70
- .tb-btn-align-left {
71
- text-align: left;
72
- }
73
-
74
- .tb-btn-align-right {
75
- text-align: right;
76
- }
77
- }
78
-
79
- /* new design */
80
-
81
- #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
82
- /* inline & popup */
83
- tb-notification-button {
84
- display: block;
85
- width: 100%;
86
- margin: 0px 0px 20px;
87
- padding: 0px;
88
- background-color: transparent;
89
- height: 30px;
90
-
91
-
92
-
93
- &[channel="skype"] {
94
- @include set-channel-button-brand-color($color-skype);
95
- }
96
-
97
- &[channel="facebook"] {
98
- @include set-channel-button-brand-color($color-fb);
99
- }
100
-
101
- &[channel="vk"] {
102
- @include set-channel-button-brand-color($color-vk);
103
-
104
- .tb-notification-button__inner > div {
105
- @include shadow-on-hover();
106
- }
107
- }
108
-
109
- &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
110
- display: none;
111
- }
112
-
113
- &[channel="viber"] {
114
- // @include set-channel-button-brand-color($color-viber);
115
- .tb-notification-button__inner > a {
116
- background-color: $color-viber;
117
- }
118
- }
119
-
120
- &[channel="tg"] {
121
- @include set-channel-button-brand-color($color-tg);
122
- }
123
-
124
- &[channel="whatsapp"] {
125
- .tb-notification-button__inner > a {
126
- background-color: $color-whatsapp;
127
- }
128
- }
129
-
130
- &[channel="whatsappb"] {
131
- .tb-notification-button__inner > a {
132
- background-color: $color-whatsappb;
133
- }
134
- }
135
-
136
- &[loading] {
137
- color: transparent;
138
- &:after {
139
- content: "";
140
- border-radius: 100%;
141
- border: 3px solid #fff;
142
- border-bottom-color: transparent;
143
- position: absolute;
144
- top: 50%;
145
- left: 50%;
146
- width: 16px;
147
- height: 16px;
148
- margin: -11px 0 0 -11px;
149
- animation-name: spin;
150
- animation-duration: 1000ms;
151
- animation-iteration-count: infinite;
152
- }
153
- }
154
-
155
-
156
-
157
- .tb-notification-button__inner {
158
- position: relative;
159
- display: inline-block;
160
- box-sizing: border-box;
161
- width: 219px;
162
- padding-left: 35px;
163
- float: initial;
164
-
165
- > a {
166
- all: initial;
167
- display: block;
168
- box-sizing: content-box;
169
- border-radius: 4px;
170
- cursor: pointer;
171
- color: #fff;
172
- position: relative;
173
- font-size: 12px;
174
- font-family: Arial,Helvetica,sans-serif;
175
- padding: 0px;
176
- line-height: 29px;
177
- height: 30px;
178
- text-align: center;
179
- text-decoration: none !important;
180
- &:hover {
181
- color: #fff;
182
- }
183
-
184
- @include shadow-on-hover();
185
- }
186
-
187
- tb-notification-button__text {
188
- display: inline-block;
189
- vertical-align: middle;
190
- }
191
-
192
- tb-notification-button__icon {
193
- position: absolute;
194
- top: 0px;
195
- left: 0px;
196
- width: 30px;
197
- height: 30px;
198
- margin: 0px;
199
- > svg {
200
- width: 100%;
201
- height: 100%;
202
- }
203
- }
204
-
205
- }
206
- }
207
- }
208
-
209
- /* old design */
210
- #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded {
211
-
212
- /* inline */
213
- tb-notification-button {
214
- @include shadow-on-hover();
215
-
216
- box-sizing: content-box;
217
- padding: 10px 20px;
218
- border-radius: 25px;
219
- cursor: pointer;
220
- background-color: #2979FF;
221
- color: #fff;
222
- display: inline-block;
223
- margin: 0 13px 45px 0;
224
- position: relative;
225
-
226
- &[channel="skype"] {
227
- background-color: $color-skype;
228
- }
229
- &[channel="facebook"] {
230
- background-color: $color-fb;
231
- }
232
- &[channel="vk"] {
233
- background-color: $color-vk;
234
- }
235
- &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
236
- display: none;
237
- }
238
- &[channel="viber"] {
239
- background-color: $color-viber;
240
- }
241
- &[channel="tg"] {
242
- background-color: $color-tg;
243
- }
244
- &[channel="whatsapp"] {
245
- background-color: $color-whatsapp;
246
- }
247
- &[channel="whatsappb"] {
248
- background-color: $color-whatsappb;
249
- }
250
- &[loading] {
251
- color: transparent;
252
- &:after {
253
- content: "";
254
- border-radius: 100%;
255
- border: 3px solid #fff;
256
- border-bottom-color: transparent;
257
- position: absolute;
258
- top: 50%;
259
- left: 50%;
260
- width: 16px;
261
- height: 16px;
262
- margin: -11px 0 0 -11px;
263
- animation-name: spin;
264
- animation-duration: 1000ms;
265
- animation-iteration-count: infinite;
266
- }
267
- }
268
- > a {
269
- all: initial;
270
- display: block;
271
- text-decoration: none;
272
- color: #fff;
273
- font-family: inherit;
274
- //font-size: 17px;
275
- margin: -10px -20px;
276
- //padding: 10px 20px;
277
- text-decoration: none !important;
278
-
279
- padding: 6px 30px 8px;
280
- min-width: 110px;
281
- text-align: center;
282
- font-size: 15px;
283
-
284
- &:hover {
285
- color: #fff;
286
- }
287
- }
288
- }
289
-
290
- tb-notification-button__text {
291
- display: inline-block;
292
- vertical-align: middle;
293
- }
294
-
295
- tb-notification-button__icon {
296
- display: inline-block;
297
- vertical-align: middle;
298
- //width: 40px;
299
- //height: 40px;
300
- width: 30px;
301
- height: 30px;
302
- margin: -10px 0 -10px -15px;
303
- > svg {
304
- width: 100%;
305
- height: 100%;
306
- }
307
- }
308
- }
309
-
310
- &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded tb-notification-button {
311
- margin-bottom: 13px;
312
- }
313
-
314
- /* popup */
315
- #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
316
- tb-notification-button {
317
- display: inline-block;
318
- width: 120px;
319
- height: 24px;
320
- padding: 0px;
321
- margin: 0px 0px 18px 0px;
322
-
323
- > a {
324
- position: relative;
325
- text-align: center;
326
- font-size: 12px;
327
- padding: 5px 20px;
328
- margin: 0px;
329
- }
330
- }
331
- tb-notification-button__icon {
332
- display: block;
333
- position: absolute;
334
- left: 8px;
335
- top: 2px;
336
- width: 20px;
337
- height: 20px;
338
- margin: 0px;
339
- padding: 0px;
340
- }
341
- tb-notification-button__text {
342
- vertical-align: baseline;
343
- width: 60px;
344
- text-align: center;
345
- color: #fff;
346
- }
347
- }
348
-
349
- /* old design */
350
- #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient {
351
-
352
- /* inline */
353
- tb-notification-button {
354
- @include shadow-on-hover-gradient();
355
-
356
- box-sizing: content-box;
357
- padding: 21px 36px;
358
- border-radius: 5px;
359
- cursor: pointer;
360
- background-color: #2979FF;
361
- color: #fff;
362
- display: inline-block;
363
- margin: 0 13px 45px 0;
364
- position: relative;
365
-
366
- &[channel="skype"] {
367
- @include set-channel-button-brand-linear-gradient-color($color-skype, $color-skype-gradient);
368
- }
369
- &[channel="facebook"] {
370
- @include set-channel-button-brand-linear-gradient-color($color-fb, $color-fb-gradient);
371
- }
372
- &[channel="vk"] {
373
- @include set-channel-button-brand-linear-gradient-color($color-vk, $color-vk-gradient);
374
- padding: 19px 36px;
375
- }
376
- &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
377
- display: none;
378
- }
379
- &[channel="viber"] {
380
- @include set-channel-button-brand-linear-gradient-color($color-viber, $color-viber-gradient);
381
- }
382
- &[channel="tg"] {
383
- @include set-channel-button-brand-linear-gradient-color($color-tg, $color-tg-gradient);
384
- }
385
- &[channel="whatsapp"] {
386
- @include set-channel-button-brand-linear-gradient-color($color-whatsapp, $color-whatsapp-gradient);
387
- }
388
- &[channel="whatsappb"] {
389
- @include set-channel-button-brand-linear-gradient-color($color-whatsappb, $color-whatsapp-gradient);
390
- }
391
- &[loading] {
392
- color: transparent;
393
- &:after {
394
- content: "";
395
- border-radius: 100%;
396
- border: 3px solid #fff;
397
- border-bottom-color: transparent;
398
- position: absolute;
399
- top: 50%;
400
- left: 50%;
401
- width: 16px;
402
- height: 16px;
403
- margin: -11px 0 0 -11px;
404
- animation-name: spin;
405
- animation-duration: 1000ms;
406
- animation-iteration-count: infinite;
407
- }
408
- }
409
- > a {
410
- all: initial;
411
- display: block;
412
- text-decoration: none;
413
- color: #fff;
414
- font-family: inherit;
415
- //font-size: 17px;
416
- margin: -10px -20px;
417
- //padding: 10px 20px;
418
- text-decoration: none !important;
419
-
420
- padding: 6px 30px 8px;
421
- min-width: 110px;
422
- text-align: center;
423
- font-size: 15px;
424
-
425
- &:hover {
426
- color: #fff;
427
- }
428
- }
429
-
430
- &[channel="viber"] tb-notification-button__icon {
431
- > svg {
432
- width: 110%;
433
- height: 110%;
434
- }
435
- }
436
- }
437
-
438
- tb-notification-button__text {
439
- display: inline-block;
440
- vertical-align: middle;
441
- }
442
-
443
- tb-notification-button__icon {
444
- display: inline-block;
445
- vertical-align: middle;
446
- //width: 40px;
447
- //height: 40px;
448
- width: 30px;
449
- height: 30px;
450
- margin: -10px 0 -10px -15px;
451
- > svg {
452
- width: 100%;
453
- height: 100%;
454
- }
455
- }
456
- }
457
-
458
- &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient tb-notification-button {
459
- margin-bottom: 13px;
460
- }
461
-
462
- /* popup */
463
- #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-gradient {
464
- tb-notification-button {
465
- display: inline-block;
466
- width: 120px;
467
- height: 24px;
468
- padding: 0px;
469
- margin: 0px 0px 18px 0px;
470
-
471
- > a {
472
- position: relative;
473
- text-align: center;
474
- font-size: 12px;
475
- padding: 5px 20px;
476
- margin: 0px;
477
- }
478
- }
479
- tb-notification-button__icon {
480
- display: block;
481
- position: absolute;
482
- left: 8px;
483
- top: 2px;
484
- width: 20px;
485
- height: 20px;
486
- margin: 0px;
487
- padding: 0px;
488
- }
489
- tb-notification-button__text {
490
- vertical-align: baseline;
491
- width: 60px;
492
- text-align: center;
493
- color: #fff;
494
- }
495
- }
496
-
497
-
498
- /* circle icons design */
499
- #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-icons {
500
-
501
- /* inline */
502
- tb-notification-button {
503
- display: inline-block;
504
- position: relative;
505
- margin: 0px 13px 13px 0px;
506
-
507
- &:hover {
508
- cursor: pointer;
509
- }
510
-
511
- &[loading] {
512
- color: transparent;
513
- &:after {
514
- content: "";
515
- border-radius: 100%;
516
- border: 3px solid #fff;
517
- border-bottom-color: transparent;
518
- position: absolute;
519
- top: 50%;
520
- left: 50%;
521
- width: 16px;
522
- height: 16px;
523
- margin: -11px 0 0 -11px;
524
- animation-name: spin;
525
- animation-duration: 1000ms;
526
- animation-iteration-count: infinite;
527
- }
528
- }
529
- > a {
530
- all: initial;
531
- display: block;
532
- text-decoration: none;
533
- font-family: inherit;
534
- text-decoration: none !important;
535
-
536
- min-width: 80px;
537
- text-align: center;
538
- font-size: 15px;
539
- color: #333;
540
-
541
- &:hover {
542
- cursor: pointer;
543
- }
544
- }
545
-
546
- &[channel="whatsappb"] tb-notification-button__icon, &[channel="whatsapp"] tb-notification-button__icon {
547
- background: $color-whatsapp;
548
- }
549
-
550
- &[channel="viber"] tb-notification-button__icon {
551
- background: $color-viber;
552
- }
553
-
554
- &[channel="tg"] tb-notification-button__icon {
555
- background: $color-tg;
556
- }
557
-
558
- &[channel="facebook"] tb-notification-button__icon {
559
- background: $color-fb;
560
- }
561
- }
562
-
563
- tb-notification-button__text {
564
- display: block;
565
- margin-top: 4px;
566
- }
567
-
568
- tb-notification-button__icon {
569
- display: block;
570
- position: relative;
571
- width: 50px;
572
- height: 50px;
573
- margin: 0 auto;
574
- transition: all .3s ease;
575
- border-radius: 50%;
576
- box-shadow: 0 6px 12px rgba(0,0,0,.25);
577
- > svg {
578
- width: 100%;
579
- height: 100%;
580
- }
581
-
582
- &[channel="whatsappb"] svg {
583
- display: block;
584
- position: absolute;
585
- top: 0;
586
- bottom: 0;
587
- left: 0;
588
- right: 0;
589
- margin: auto;
590
- width: 50%;
591
- height: 50%;
592
- }
593
-
594
- &:hover {
595
- -webkit-transform: scale(1.3);
596
- -ms-transform: scale(1.3);
597
- transform: scale(1.3);
598
- }
599
- }
600
- }
601
- }
602
-
603
- /*styles for non mobile*/
604
- @media only screen and (min-device-width: 736px) {
605
-
606
- /* new design */
607
-
608
- #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
609
- tb-notification-button {
610
- .tb-notification-button__inner {
611
- padding-left: 55px;
612
- width: 239px;
613
-
614
- tb-notification-button__icon {
615
- top: -5px;
616
- left: 0px;
617
- width: 40px;
618
- height: 40px;
619
- }
620
- }
621
- }
622
- }
623
-
624
- /* old design*/
625
-
626
- #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
627
- tb-notification-button {
628
- margin: 0px 19px 24px 0px;
629
- width: 206px;
630
- height: 50px;
631
-
632
- > a {
633
- padding: 10px 20px;
634
- font-size: 20px;
635
- }
636
- }
637
-
638
- tb-notification-button__icon {
639
- width: 40px;
640
- height: 40px;
641
- left: 15px;
642
- top: 5px;
643
- }
644
-
645
- tb-notification-button__text {
646
- width: 100px;
647
- line-height: 30px;
648
- }
649
- }
650
- }
651
-
652
- // Dirty crutch. There is no other way now *'(
653
- tb-notification-widget-popup.tb-popup-with-image .tb-widget-buttons > div:last-child {
654
- tb-notification-button {
655
- margin-bottom: 0 !important;
656
- }
657
- }
1
+ $color-fb: #3b5998;
2
+ $color-fb-gradient: #6077a6;
3
+
4
+ $color-vk: #4a76a8;
5
+ $color-vk-gradient: #0f65c6;
6
+
7
+ $color-tg: #61A8DE;
8
+ $color-tg-gradient:#408AC2;
9
+
10
+ $color-skype: #00aff0;
11
+ $color-skype-gradient:#00d0e7;
12
+
13
+ $color-viber: #574e92;
14
+ $color-viber-gradient:#655bab;
15
+
16
+ $color-whatsapp: #25D366;
17
+ $color-whatsappb: #25D366;
18
+ $color-whatsapp-gradient:#2fc368;
19
+
20
+ @mixin shadow-on-hover() {
21
+ transition: box-shadow 0.4s;
22
+
23
+ &:hover {
24
+ box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
25
+ }
26
+ }
27
+
28
+ @mixin shadow-on-hover-gradient() {
29
+ transition: box-shadow 0.4s;
30
+
31
+ &:hover {
32
+ box-shadow:inset 0 0 3px 3px rgba(0, 0, 0, 0.4);
33
+ }
34
+ }
35
+
36
+ @mixin set-channel-button-brand-color($color) {
37
+ .tb-notification-button__inner > a {
38
+ background-color: $color;
39
+ }
40
+
41
+ tb-notification-button__icon > svg path {
42
+ fill: $color;
43
+ }
44
+ }
45
+
46
+ @mixin set-channel-button-brand-linear-gradient-color($color, $color-gradient) {
47
+ background: linear-gradient(309.02deg, $color -6.45%, $color-gradient 111.08%);
48
+ }
49
+
50
+ tb-notification-widget {
51
+ #tb-notification-widget-inner.tb-notification-widget-inner {
52
+ tb-notification-button a {
53
+ cursor: pointer !important;
54
+ }
55
+
56
+ .tb-notification-button__tip {
57
+ position: absolute;
58
+ font-size: 10px;
59
+ text-align: center;
60
+ margin-top: 19px;
61
+ left: 0;
62
+ width: 100%;
63
+ color: #6f7b8a;
64
+ }
65
+
66
+ .tb-btn-align-center {
67
+ text-align: center;
68
+ }
69
+
70
+ .tb-btn-align-left {
71
+ text-align: left;
72
+ }
73
+
74
+ .tb-btn-align-right {
75
+ text-align: right;
76
+ }
77
+ }
78
+
79
+ /* new design */
80
+
81
+ #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
82
+ /* inline & popup */
83
+ tb-notification-button {
84
+ display: block;
85
+ width: 100%;
86
+ margin: 0px 0px 20px;
87
+ padding: 0px;
88
+ background-color: transparent;
89
+ height: 30px;
90
+
91
+
92
+
93
+ &[channel="skype"] {
94
+ @include set-channel-button-brand-color($color-skype);
95
+ }
96
+
97
+ &[channel="facebook"] {
98
+ @include set-channel-button-brand-color($color-fb);
99
+ }
100
+
101
+ &[channel="vk"] {
102
+ @include set-channel-button-brand-color($color-vk);
103
+
104
+ .tb-notification-button__inner > div {
105
+ @include shadow-on-hover();
106
+ }
107
+ }
108
+
109
+ &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
110
+ display: none;
111
+ }
112
+
113
+ &[channel="viber"] {
114
+ // @include set-channel-button-brand-color($color-viber);
115
+ .tb-notification-button__inner > a {
116
+ background-color: $color-viber;
117
+ }
118
+ }
119
+
120
+ &[channel="tg"] {
121
+ @include set-channel-button-brand-color($color-tg);
122
+ }
123
+
124
+ &[channel="whatsapp"] {
125
+ .tb-notification-button__inner > a {
126
+ background-color: $color-whatsapp;
127
+ }
128
+ }
129
+
130
+ &[channel="whatsappb"] {
131
+ .tb-notification-button__inner > a {
132
+ background-color: $color-whatsappb;
133
+ }
134
+ }
135
+
136
+ &[loading] {
137
+ color: transparent;
138
+ &:after {
139
+ content: "";
140
+ border-radius: 100%;
141
+ border: 3px solid #fff;
142
+ border-bottom-color: transparent;
143
+ position: absolute;
144
+ top: 50%;
145
+ left: 50%;
146
+ width: 16px;
147
+ height: 16px;
148
+ margin: -11px 0 0 -11px;
149
+ animation-name: spin;
150
+ animation-duration: 1000ms;
151
+ animation-iteration-count: infinite;
152
+ }
153
+ }
154
+
155
+
156
+
157
+ .tb-notification-button__inner {
158
+ position: relative;
159
+ display: inline-block;
160
+ box-sizing: border-box;
161
+ width: 219px;
162
+ padding-left: 35px;
163
+ float: initial;
164
+
165
+ > a {
166
+ all: initial;
167
+ display: block;
168
+ box-sizing: content-box;
169
+ border-radius: 4px;
170
+ cursor: pointer;
171
+ color: #fff;
172
+ position: relative;
173
+ font-size: 12px;
174
+ font-family: Arial,Helvetica,sans-serif;
175
+ padding: 0px;
176
+ line-height: 29px;
177
+ height: 30px;
178
+ text-align: center;
179
+ text-decoration: none !important;
180
+ &:hover {
181
+ color: #fff;
182
+ }
183
+
184
+ @include shadow-on-hover();
185
+ }
186
+
187
+ tb-notification-button__text {
188
+ display: inline-block;
189
+ vertical-align: middle;
190
+ }
191
+
192
+ tb-notification-button__icon {
193
+ position: absolute;
194
+ top: 0px;
195
+ left: 0px;
196
+ width: 30px;
197
+ height: 30px;
198
+ margin: 0px;
199
+ > svg {
200
+ width: 100%;
201
+ height: 100%;
202
+ }
203
+ }
204
+
205
+ }
206
+ }
207
+ }
208
+
209
+ /* old design */
210
+ #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded {
211
+
212
+ /* inline */
213
+ tb-notification-button {
214
+ @include shadow-on-hover();
215
+
216
+ box-sizing: content-box;
217
+ padding: 10px 20px;
218
+ border-radius: 25px;
219
+ cursor: pointer;
220
+ background-color: #2979FF;
221
+ color: #fff;
222
+ display: inline-block;
223
+ margin: 0 13px 45px 0;
224
+ position: relative;
225
+
226
+ &[channel="skype"] {
227
+ background-color: $color-skype;
228
+ }
229
+ &[channel="facebook"] {
230
+ background-color: $color-fb;
231
+ }
232
+ &[channel="vk"] {
233
+ background-color: $color-vk;
234
+ }
235
+ &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
236
+ display: none;
237
+ }
238
+ &[channel="viber"] {
239
+ background-color: $color-viber;
240
+ }
241
+ &[channel="tg"] {
242
+ background-color: $color-tg;
243
+ }
244
+ &[channel="whatsapp"] {
245
+ background-color: $color-whatsapp;
246
+ }
247
+ &[channel="whatsappb"] {
248
+ background-color: $color-whatsappb;
249
+ }
250
+ &[loading] {
251
+ color: transparent;
252
+ &:after {
253
+ content: "";
254
+ border-radius: 100%;
255
+ border: 3px solid #fff;
256
+ border-bottom-color: transparent;
257
+ position: absolute;
258
+ top: 50%;
259
+ left: 50%;
260
+ width: 16px;
261
+ height: 16px;
262
+ margin: -11px 0 0 -11px;
263
+ animation-name: spin;
264
+ animation-duration: 1000ms;
265
+ animation-iteration-count: infinite;
266
+ }
267
+ }
268
+ > a {
269
+ all: initial;
270
+ display: block;
271
+ text-decoration: none;
272
+ color: #fff;
273
+ font-family: inherit;
274
+ //font-size: 17px;
275
+ margin: -10px -20px;
276
+ //padding: 10px 20px;
277
+ text-decoration: none !important;
278
+
279
+ padding: 6px 30px 8px;
280
+ min-width: 110px;
281
+ text-align: center;
282
+ font-size: 15px;
283
+
284
+ &:hover {
285
+ color: #fff;
286
+ }
287
+ }
288
+ }
289
+
290
+ tb-notification-button__text {
291
+ display: inline-block;
292
+ vertical-align: middle;
293
+ }
294
+
295
+ tb-notification-button__icon {
296
+ display: inline-block;
297
+ vertical-align: middle;
298
+ //width: 40px;
299
+ //height: 40px;
300
+ width: 30px;
301
+ height: 30px;
302
+ margin: -10px 0 -10px -15px;
303
+ > svg {
304
+ width: 100%;
305
+ height: 100%;
306
+ }
307
+ }
308
+ }
309
+
310
+ &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded tb-notification-button {
311
+ margin-bottom: 13px;
312
+ }
313
+
314
+ /* popup */
315
+ #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
316
+ tb-notification-button {
317
+ display: inline-block;
318
+ width: 120px;
319
+ height: 24px;
320
+ padding: 0px;
321
+ margin: 0px 0px 18px 0px;
322
+
323
+ > a {
324
+ position: relative;
325
+ text-align: center;
326
+ font-size: 12px;
327
+ padding: 5px 20px;
328
+ margin: 0px;
329
+ }
330
+ }
331
+ tb-notification-button__icon {
332
+ display: block;
333
+ position: absolute;
334
+ left: 8px;
335
+ top: 2px;
336
+ width: 20px;
337
+ height: 20px;
338
+ margin: 0px;
339
+ padding: 0px;
340
+ }
341
+ tb-notification-button__text {
342
+ vertical-align: baseline;
343
+ width: 60px;
344
+ text-align: center;
345
+ color: #fff;
346
+ }
347
+ }
348
+
349
+ /* old design */
350
+ #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient {
351
+
352
+ /* inline */
353
+ tb-notification-button {
354
+ @include shadow-on-hover-gradient();
355
+
356
+ box-sizing: content-box;
357
+ padding: 21px 36px;
358
+ border-radius: 5px;
359
+ cursor: pointer;
360
+ background-color: #2979FF;
361
+ color: #fff;
362
+ display: inline-block;
363
+ margin: 0 13px 45px 0;
364
+ position: relative;
365
+
366
+ &[channel="skype"] {
367
+ @include set-channel-button-brand-linear-gradient-color($color-skype, $color-skype-gradient);
368
+ }
369
+ &[channel="facebook"] {
370
+ @include set-channel-button-brand-linear-gradient-color($color-fb, $color-fb-gradient);
371
+ }
372
+ &[channel="vk"] {
373
+ @include set-channel-button-brand-linear-gradient-color($color-vk, $color-vk-gradient);
374
+ padding: 19px 36px;
375
+ }
376
+ &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
377
+ display: none;
378
+ }
379
+ &[channel="viber"] {
380
+ @include set-channel-button-brand-linear-gradient-color($color-viber, $color-viber-gradient);
381
+ }
382
+ &[channel="tg"] {
383
+ @include set-channel-button-brand-linear-gradient-color($color-tg, $color-tg-gradient);
384
+ }
385
+ &[channel="whatsapp"] {
386
+ @include set-channel-button-brand-linear-gradient-color($color-whatsapp, $color-whatsapp-gradient);
387
+ }
388
+ &[channel="whatsappb"] {
389
+ @include set-channel-button-brand-linear-gradient-color($color-whatsappb, $color-whatsapp-gradient);
390
+ }
391
+ &[loading] {
392
+ color: transparent;
393
+ &:after {
394
+ content: "";
395
+ border-radius: 100%;
396
+ border: 3px solid #fff;
397
+ border-bottom-color: transparent;
398
+ position: absolute;
399
+ top: 50%;
400
+ left: 50%;
401
+ width: 16px;
402
+ height: 16px;
403
+ margin: -11px 0 0 -11px;
404
+ animation-name: spin;
405
+ animation-duration: 1000ms;
406
+ animation-iteration-count: infinite;
407
+ }
408
+ }
409
+ > a {
410
+ all: initial;
411
+ display: block;
412
+ text-decoration: none;
413
+ color: #fff;
414
+ font-family: inherit;
415
+ //font-size: 17px;
416
+ margin: -10px -20px;
417
+ //padding: 10px 20px;
418
+ text-decoration: none !important;
419
+
420
+ padding: 6px 30px 8px;
421
+ min-width: 110px;
422
+ text-align: center;
423
+ font-size: 15px;
424
+
425
+ &:hover {
426
+ color: #fff;
427
+ }
428
+ }
429
+
430
+ &[channel="viber"] tb-notification-button__icon {
431
+ > svg {
432
+ width: 110%;
433
+ height: 110%;
434
+ }
435
+ }
436
+ }
437
+
438
+ tb-notification-button__text {
439
+ display: inline-block;
440
+ vertical-align: middle;
441
+ }
442
+
443
+ tb-notification-button__icon {
444
+ display: inline-block;
445
+ vertical-align: middle;
446
+ //width: 40px;
447
+ //height: 40px;
448
+ width: 30px;
449
+ height: 30px;
450
+ margin: -10px 0 -10px -15px;
451
+ > svg {
452
+ width: 100%;
453
+ height: 100%;
454
+ }
455
+ }
456
+ }
457
+
458
+ &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient tb-notification-button {
459
+ margin-bottom: 13px;
460
+ }
461
+
462
+ /* popup */
463
+ #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-gradient {
464
+ tb-notification-button {
465
+ display: inline-block;
466
+ width: 120px;
467
+ height: 24px;
468
+ padding: 0px;
469
+ margin: 0px 0px 18px 0px;
470
+
471
+ > a {
472
+ position: relative;
473
+ text-align: center;
474
+ font-size: 12px;
475
+ padding: 5px 20px;
476
+ margin: 0px;
477
+ }
478
+ }
479
+ tb-notification-button__icon {
480
+ display: block;
481
+ position: absolute;
482
+ left: 8px;
483
+ top: 2px;
484
+ width: 20px;
485
+ height: 20px;
486
+ margin: 0px;
487
+ padding: 0px;
488
+ }
489
+ tb-notification-button__text {
490
+ vertical-align: baseline;
491
+ width: 60px;
492
+ text-align: center;
493
+ color: #fff;
494
+ }
495
+ }
496
+
497
+
498
+ /* circle icons design */
499
+ #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-icons {
500
+
501
+ /* inline */
502
+ tb-notification-button {
503
+ display: inline-block;
504
+ position: relative;
505
+ margin: 0px 13px 13px 0px;
506
+
507
+ &:hover {
508
+ cursor: pointer;
509
+ }
510
+
511
+ &[loading] {
512
+ color: transparent;
513
+ &:after {
514
+ content: "";
515
+ border-radius: 100%;
516
+ border: 3px solid #fff;
517
+ border-bottom-color: transparent;
518
+ position: absolute;
519
+ top: 50%;
520
+ left: 50%;
521
+ width: 16px;
522
+ height: 16px;
523
+ margin: -11px 0 0 -11px;
524
+ animation-name: spin;
525
+ animation-duration: 1000ms;
526
+ animation-iteration-count: infinite;
527
+ }
528
+ }
529
+ > a {
530
+ all: initial;
531
+ display: block;
532
+ text-decoration: none;
533
+ font-family: inherit;
534
+ text-decoration: none !important;
535
+
536
+ min-width: 80px;
537
+ text-align: center;
538
+ font-size: 15px;
539
+ color: #333;
540
+
541
+ &:hover {
542
+ cursor: pointer;
543
+ }
544
+ }
545
+
546
+ &[channel="whatsappb"] tb-notification-button__icon, &[channel="whatsapp"] tb-notification-button__icon {
547
+ background: $color-whatsapp;
548
+ }
549
+
550
+ &[channel="viber"] tb-notification-button__icon {
551
+ background: $color-viber;
552
+ }
553
+
554
+ &[channel="tg"] tb-notification-button__icon {
555
+ background: $color-tg;
556
+ }
557
+
558
+ &[channel="facebook"] tb-notification-button__icon {
559
+ background: $color-fb;
560
+ }
561
+ }
562
+
563
+ tb-notification-button__text {
564
+ display: block;
565
+ margin-top: 4px;
566
+ }
567
+
568
+ tb-notification-button__icon {
569
+ display: block;
570
+ position: relative;
571
+ width: 50px;
572
+ height: 50px;
573
+ margin: 0 auto;
574
+ transition: all .3s ease;
575
+ border-radius: 50%;
576
+ box-shadow: 0 6px 12px rgba(0,0,0,.25);
577
+ > svg {
578
+ width: 100%;
579
+ height: 100%;
580
+ }
581
+
582
+ &[channel="whatsappb"] svg {
583
+ display: block;
584
+ position: absolute;
585
+ top: 0;
586
+ bottom: 0;
587
+ left: 0;
588
+ right: 0;
589
+ margin: auto;
590
+ width: 50%;
591
+ height: 50%;
592
+ }
593
+
594
+ &:hover {
595
+ -webkit-transform: scale(1.3);
596
+ -ms-transform: scale(1.3);
597
+ transform: scale(1.3);
598
+ }
599
+ }
600
+ }
601
+ }
602
+
603
+ /*styles for non mobile*/
604
+ @media only screen and (min-device-width: 736px) {
605
+
606
+ /* new design */
607
+
608
+ #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
609
+ tb-notification-button {
610
+ .tb-notification-button__inner {
611
+ padding-left: 55px;
612
+ width: 239px;
613
+
614
+ tb-notification-button__icon {
615
+ top: -5px;
616
+ left: 0px;
617
+ width: 40px;
618
+ height: 40px;
619
+ }
620
+ }
621
+ }
622
+ }
623
+
624
+ /* old design*/
625
+
626
+ #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
627
+ tb-notification-button {
628
+ margin: 0px 19px 24px 0px;
629
+ width: 206px;
630
+ height: 50px;
631
+
632
+ > a {
633
+ padding: 10px 20px;
634
+ font-size: 20px;
635
+ }
636
+ }
637
+
638
+ tb-notification-button__icon {
639
+ width: 40px;
640
+ height: 40px;
641
+ left: 15px;
642
+ top: 5px;
643
+ }
644
+
645
+ tb-notification-button__text {
646
+ width: 100px;
647
+ line-height: 30px;
648
+ }
649
+ }
650
+ }
651
+
652
+ // Dirty crutch. There is no other way now *'(
653
+ tb-notification-widget-popup.tb-popup-with-image .tb-widget-buttons > div:last-child {
654
+ tb-notification-button {
655
+ margin-bottom: 0 !important;
656
+ }
657
+ }