mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-27 05:21:05 +08:00
1b95a8e1e0
We were using a zero width space added by CSS here, but have run into occasional encoding issues for some reason? a couple people have reported getting this instead of an empty space:  I can't repro the issue, but we can avoid it by removing this space in CSS — setting the container height to `1em` along with `line-height: normal` should make it consistent with the height of the text within. In the blame it seems this static height on the container was added after the pseudo hack, and achieves the same goal when I test it across a Firefox/Chrome/Safari
48 lines
923 B
SCSS
Vendored
48 lines
923 B
SCSS
Vendored
.chat-replying-indicator {
|
|
color: var(--primary-medium);
|
|
display: inline-flex;
|
|
font-size: var(--font-down-2);
|
|
|
|
&-container {
|
|
display: flex;
|
|
height: 1em; // Ensures the height is consistent even when empty
|
|
line-height: normal;
|
|
}
|
|
|
|
.chat-replying-indicator__text {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.chat-replying-indicator__wave {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
|
|
.chat-replying-indicator__dot {
|
|
display: inline-block;
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
animation: chat-replying-indicator__wave 1.8s linear infinite;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
animation-delay: -1.6s;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
animation-delay: -1.4s;
|
|
}
|
|
}
|
|
|
|
@keyframes chat-replying-indicator__wave {
|
|
0%,
|
|
60%,
|
|
100% {
|
|
transform: initial;
|
|
}
|
|
|
|
30% {
|
|
transform: translateY(-0.2em);
|
|
}
|
|
}
|
|
}
|
|
}
|
