waveterm/frontend/app/element/typingindicator.scss
Evan Simkowitz d8edea9fbc
Oops i actually made the tabs wrong (#1384)
forgot to update .editorconfig to include scss...
2024-12-04 13:49:14 -08:00

47 lines
856 B
SCSS

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
$dot-width: 11px;
$dot-color: var(--success-color);
$speed: 1.5s;
.typing {
position: relative;
height: $dot-width;
span {
content: "";
animation: blink $speed infinite;
animation-fill-mode: both;
height: $dot-width;
width: $dot-width;
background: $dot-color;
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
&:nth-child(2) {
animation-delay: 0.2s;
margin-left: $dot-width * 1.5;
}
&:nth-child(3) {
animation-delay: 0.4s;
margin-left: $dot-width * 3;
}
}
}
@keyframes blink {
0% {
opacity: 0.1;
}
20% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}