discourse/plugins/discourse-presence/assets/stylesheets/presence.scss
David Taylor a6230b8138
UX: Improve composer presence-display positioning (#15235)
Previously the discourse-presence plugin was using a `position: absolute` hack to display the 'replying...' users in the top right of the composer. This commit adds a more suitable plugin outlet, and updates the discourse-presence styling so it slots into the flex-box layout at the top of the composer
2021-12-08 16:18:49 +00:00

85 lines
1.3 KiB
SCSS

.topic-above-footer-buttons-outlet.presence {
min-height: 1.8em; // height of the avatars, prevents layout shift
margin: var(--below-topic-margin) 0;
}
.presence-users {
background-color: var(--secondary);
color: var(--primary-medium);
display: flex;
span.presence-text {
margin-left: 5px;
margin-right: 2px;
flex: 0 0 auto;
padding-top: 3px;
}
.presence-avatars {
display: flex;
overflow: hidden;
flex-wrap: wrap;
}
.wave {
flex: 0 0 auto;
.dot {
display: inline-block;
animation: wave 1.8s linear infinite;
&:nth-child(2) {
animation-delay: -1.6s;
}
&:nth-child(3) {
animation-delay: -1.4s;
}
}
}
@keyframes wave {
0%,
60%,
100% {
transform: initial;
}
30% {
transform: translateY(-0.2em);
}
}
}
.composer-fields .presence-users {
overflow: hidden;
flex-shrink: 1;
.presence-avatars {
flex-wrap: nowrap;
}
}
.mobile-view .composer-fields .presence-users .description {
display: none;
}
// TMP: RTL overrides
.rtl {
span.presence-text {
margin-left: 2px;
margin-right: 5px;
}
.composer-fields .presence-users {
right: unset;
left: 95px;
}
&.mobile-view {
.composer-fields .presence-users {
right: unset;
left: 65px;
}
}
}