KevinMidboe/planetposen-frontend
1
0
Fork 0
mirror of https://github.com/KevinMidboe/planetposen-frontend.git synced 2025-10-29 13:10:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

css effects for tracking pulse component

Browse Source
This commit is contained in:
Kevin
2022-12-29 23:57:40 +01:00
parent a352926831
commit e6083077ac
1 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/styles/effects.scss Normal file
View File

@@ -0,0 +1,31 @@
@keyframes pulse-live {
0% {
box-shadow: 0 0 0 0 rgba(214, 0, 0, 0.7);
box-shadow: 0 0 0 0 rgba(227, 45, 34, 0.7);
}
70% {
box-shadow: 0 0 0 12px rgba(214, 0, 0, 0);
box-shadow: 0 0 0 12px rgba(227, 45, 34, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(214, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(227, 45, 34, 0);
}
}
@mixin pulse-dot {
&::after {
content: '';
top: 50%;
position: absolute;
display: block;
border-radius: 50%;
background-color: #d60000;
background-color: rgb(227, 45, 34);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: pulse-live 2s infinite;
height: 16px;
width: 16px;
}
}