mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Optimize typing animation

Browse source
This commit is contained in:
Fedor Indutny 2021-07-01 16:43:10 -07:00 • committed by GitHub
parent c186517e42
commit 622b9df077
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
stylesheets/_modules.scss
View file

@ -4293,7 +4293,7 @@ button.module-image__border-overlay:focus {
.module-typing-animation { .module-typing-animation {
display: inline-flex; display: inline-flex;
flex-directin: row; flex-direction: row;
align-items: center; align-items: center;
height: 8px; height: 8px;
@ -4308,6 +4308,7 @@ button.module-image__border-overlay:focus {
height: 6px; height: 6px;
width: 6px; width: 6px;
opacity: 0.4; opacity: 0.4;
will-change: transform, opacity;
@include dark-theme { @include dark-theme {
background-color: $color-white; background-color: $color-white;
@ -4315,15 +4316,15 @@ button.module-image__border-overlay:focus {
@include light-theme { @include light-theme {
background-color: $color-gray-60; background-color: $color-gray-60;
} }
animation: typing-animation 1600ms ease infinite;
}
.module-left-pane .module-typing-animation__dot {
animation-name: typing-animation-bare;
} }
.module-typing-animation__dot--light { .module-typing-animation__dot--light {
border-radius: 50%;
height: 6px;
width: 6px;
opacity: 0.4;
background-color: $color-white; background-color: $color-white;
@include light-theme { @include light-theme {
@ -4331,7 +4332,7 @@ button.module-image__border-overlay:focus {
} }
} }
@keyframes typing-animation-first { @keyframes typing-animation {
0% { 0% {
opacity: 0.4; opacity: 0.4;
} }
@ -4344,42 +4345,24 @@ button.module-image__border-overlay:focus {
} }
} }
@keyframes typing-animation-second { @keyframes typing-animation-bare {
10% { 0% {
opacity: 0.4; opacity: 0.4;
} }
30% {
transform: scale(1.3);
opacity: 1;
}
50% {
opacity: 0.4;
}
}
@keyframes typing-animation-third {
20% { 20% {
opacity: 0.4; opacity: 1;
} }
40% { 40% {
transform: scale(1.3);
opacity: 1;
}
60% {
opacity: 0.4; opacity: 0.4;
} }
} }
.module-typing-animation__dot--first {
animation: typing-animation-first 1600ms ease infinite;
}
.module-typing-animation__dot--second { .module-typing-animation__dot--second {
animation: typing-animation-second 1600ms ease infinite; animation-delay: 160ms;
} }
.module-typing-animation__dot--third { .module-typing-animation__dot--third {
animation: typing-animation-third 1600ms ease infinite; animation-delay: 320ms;
} }
.module-typing-animation__spacer { .module-typing-animation__spacer {