maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

animate inbox notification dot onLoad

Browse source
This commit is contained in:
Janne Koivistoinen 2017-12-01 18:57:42 +02:00
parent 17e55c8116
commit f5b52b90f7
2 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/Topbar/Topbar.css
View file

@ -99,6 +99,21 @@
/* Style: red dot with white border */
background-color: var(--failColor);
border: 2px solid var(--matterColorLight);
animation-name: notificationPop;
animation-duration: 0.1s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
opacity: 0;
transform: scale(0);
}
@keyframes notificationPop {
0% {transform: scale(0); opacity: 0;}
100% {transform: scale(1); opacity: 1;}
}
.desktop {

15
src/components/TopbarDesktop/TopbarDesktop.css
View file

@ -160,6 +160,21 @@
/* Style: red dot */
background-color: var(--failColor);
animation-name: notificationPop;
animation-duration: 0.1s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
opacity: 0;
transform: scale(0);
}
@keyframes notificationPop {
0% {transform: scale(0); opacity: 0;}
100% {transform: scale(1); opacity: 1;}
}
/* Profile menu */