discourse/plugins/chat/assets/stylesheets/desktop/chat-message-thread-indicator.scss
Joffrey JAFFEUX 7dafd275ac
FIX: various mobile chat improvements (#22132)
- FIX: improves reactions and thread indicator touch event on mobile
These "buttons" are located inside a scroll list which makes them very specific. The general idea is to ensure these events are passive and are not bubbling to the parent.
- DEV: moves state on top level message node
- FIX: ensures popover arrow has the correct border
- FIX: makes a message expanded by default
- FIX applies the same ios scroll fix on thread and channel
- UI: better active/hover state for thread indicator
- UI: attempts to follow more closely our BEM naming scheme
- FIX: reduces bottom padding on message with thread indicator and user info hidden
- UI: add padding for first message in thread
- FIX: prevents actions backdrop to open thread
- UI: makes thread indicator resizable
2023-06-16 11:36:43 +02:00

60 lines
954 B
SCSS

.chat-message-thread-indicator {
max-width: 600px;
.chat-drawer & {
align-items: stretch;
flex-wrap: wrap;
width: auto;
max-width: 100%;
min-width: auto;
gap: 0.25rem;
}
&__last-reply-avatar {
.chat-drawer & {
display: inline-block;
}
}
&__last-reply-user {
margin-right: 0.25rem;
.chat-drawer & {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: auto;
}
}
&__last-reply-metadata {
.chat-drawer & {
flex-wrap: wrap;
}
}
&__last-reply-excerpt {
.chat-drawer & {
white-space: wrap;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
margin-left: calc(26px + 0.5rem);
}
}
&__body {
.chat-drawer & {
flex-grow: 1;
}
}
&__participants {
margin-left: auto;
.chat-drawer & {
align-self: flex-end;
flex-basis: 100%;
}
}
}