imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Pulse animation option for voice record button

Browse source
This commit is contained in:
Travis Ralston 2021-04-14 15:08:11 -06:00
parent 2fb241cfc2
commit e77d3bea04
3 changed files with 28 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

22
res/css/views/rooms/_VoiceRecordComposerTile.scss
View file

@ -53,7 +53,9 @@ limitations under the License.
font-size: $font-14px;
&::before {
// TODO: @@ TravisR: Animate
// Pulsing animation
animation: recording-pulse 1.5s infinite;
content: '';
background-color: $voice-record-live-circle-color;
width: 10px;
@ -74,3 +76,21 @@ limitations under the License.
width: 42px; // we're not using a monospace font, so fake it
}
}
@keyframes recording-pulse {
// Source: https://codepen.io/FlorinPop17/pen/drJJzK
// Same source: https://www.florin-pop.com/blog/2019/03/css-pulse-effect/
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 $voice-record-live-circle-color;
}
70% {
transform: scale(1);
box-shadow: 0 0 0 6px transparent;
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 transparent;
}
}