1 | .str-chat__typing-indicator {
|
2 | display: flex;
|
3 | visibility: hidden;
|
4 | align-items: center;
|
5 |
|
6 | &--typing {
|
7 | visibility: visible;
|
8 | }
|
9 |
|
10 | &__avatars {
|
11 | display: flex;
|
12 |
|
13 | .str-chat__avatar {
|
14 | margin-right: calc(-1 * var(--xs-m));
|
15 |
|
16 | &:last-of-type {
|
17 | margin-right: var(--xs-m);
|
18 | }
|
19 | }
|
20 | }
|
21 |
|
22 | &__dots {
|
23 | position: relative;
|
24 | background: var(--white);
|
25 | border: 1px solid var(--black10);
|
26 | padding: var(--xxs-p) var(--xs-m);
|
27 | border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 2px;
|
28 | }
|
29 |
|
30 | &__dot {
|
31 | display: inline-block;
|
32 | width: 6px;
|
33 | height: 6px;
|
34 | border-radius: var(--border-radius-round);
|
35 | margin-right: var(--xxs-m);
|
36 | background: var(--primary-color);
|
37 | animation: wave 1.1s linear infinite;
|
38 |
|
39 | &:nth-child(2) {
|
40 | animation-delay: -0.9s;
|
41 | opacity: 0.5;
|
42 | }
|
43 |
|
44 | &:nth-child(3) {
|
45 | animation-delay: -0.8s;
|
46 | opacity: 0.2;
|
47 | }
|
48 | }
|
49 |
|
50 | .str-chat__typing-indicator__users {
|
51 | margin-left: 8px;
|
52 | color: var(--lighten-grey);
|
53 | }
|
54 | }
|
55 |
|
56 | .dark.str-chat {
|
57 | .str-chat__typing-indicator {
|
58 | &__avatars {
|
59 | .str-chat__avatar {
|
60 | border-color: var(--dark-grey);
|
61 | }
|
62 | }
|
63 |
|
64 | &__dots {
|
65 | background: var(--white5);
|
66 | }
|
67 | }
|
68 | }
|
69 |
|
70 | @keyframes wave {
|
71 | 0%,
|
72 | 60%,
|
73 | 100% {
|
74 | transform: initial;
|
75 | }
|
76 |
|
77 | 30% {
|
78 | transform: translateY(-8px);
|
79 | }
|
80 | }
|