discourse/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss
Joffrey JAFFEUX f45d1e6791
UX: implements new composer design (#21588)
This is only the first steps of a redesign

- redesigns the buttons to have a larger hitzone
- generally bigger composer
- clicking near textarea focuses the input
- relies on the fact that safe-area-inset-bottom is set globally and doesn’t need to be set in sub components
2023-05-16 17:17:12 +02:00

43 lines
863 B
SCSS

.chat-replying-indicator {
color: var(--primary-medium);
display: inline-flex;
font-size: var(--font-down-2);
&:before {
// unicode zero width space character
// Ensures the span height is consistent even when empty
content: "\200b";
}
.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;
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);
}
}
}
}