github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-07 09:14:48 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: apply skeleton animation on content only (#20376)

Browse Source
This commit is contained in:
chapoi
2023-02-21 00:54:00 +07:00
committed by GitHub
parent c8a4081a21
commit 8c80d330fa
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
plugins/chat/assets/stylesheets/common/chat-skeleton.scss
View File

@ -69,11 +69,16 @@ $radius: 10px;
} }
} }
*[class^="chat-skeleton__message-"] {
position: relative;
overflow: hidden;
}
&.-animation { &.-animation {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
&::after { *[class^="chat-skeleton__message-"]:not(.chat-skeleton__message-content):after {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -83,11 +88,10 @@ $radius: 10px;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(var(--chat-skeleton-animation-rgb), 0) 0, rgba(var(--chat-skeleton-animation-rgb), 0) 0,
rgba(var(--chat-skeleton-animation-rgb), 0.2) 20%, rgba(var(--chat-skeleton-animation-rgb), 0.3) 50%,
rgba(var(--chat-skeleton-animation-rgb), 0.5) 60%, rgba(var(--chat-skeleton-animation-rgb), 0.5) 100%
rgba(var(--chat-skeleton-animation-rgb), 0)
); );
animation: shimmer 1.5s infinite; animation: shimmer 1.25s infinite;
content: ""; content: "";
} }