IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-02 05:29:17 -06:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 5 deletions
Show Stats 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 {
position: relative;
overflow: hidden;
&::after {
*[class^="chat-skeleton__message-"]:not(.chat-skeleton__message-content):after {
position: absolute;
top: 0;
right: 0;
@ -83,11 +88,10 @@ $radius: 10px;
background: linear-gradient(
90deg,
rgba(var(--chat-skeleton-animation-rgb), 0) 0,
rgba(var(--chat-skeleton-animation-rgb), 0.2) 20%,
rgba(var(--chat-skeleton-animation-rgb), 0.5) 60%,
rgba(var(--chat-skeleton-animation-rgb), 0)
rgba(var(--chat-skeleton-animation-rgb), 0.3) 50%,
rgba(var(--chat-skeleton-animation-rgb), 0.5) 100%
);
animation: shimmer 1.5s infinite;
animation: shimmer 1.25s infinite;
content: "";
}