iger
/
engelsystem
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

animation for alert messages

This commit is contained in:
Felix Favre 2014-12-07 21:02:22 +01:00
parent 663f9f6d2d
commit ac82f3dcd2
3 changed files with 226 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
public/css/theme0.css
View File

@ -6337,3 +6337,77 @@ a#shifts td.collides:hover {
.messages a:focus { .messages a:focus {
outline: none; outline: none;
} }
.messages span.text-danger {
animation: pulse 1s infinite;
-webkit-animation: pulse 1s infinite;
-moz-animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(5deg) translateY(-2px);
}
20% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg) translateY(-2px);
}
40% {
transform: rotate(-5deg);
}
50% {
transform: rotate(0deg) translateY(-2px);
}
75% {
transform: rotate(0deg) translateY(0px);
}
}
@-webkit-keyframes pulse {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(5deg) translateY(-2px);
}
20% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg) translateY(-2px);
}
40% {
transform: rotate(-5deg);
}
50% {
transform: rotate(0deg) translateY(-2px);
}
75% {
transform: rotate(0deg) translateY(0px);
}
}
@-moz-keyframes pulse {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(5deg) translateY(-2px);
}
20% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg) translateY(-2px);
}
40% {
transform: rotate(-5deg);
}
50% {
transform: rotate(0deg) translateY(-2px);
}
75% {
transform: rotate(0deg) translateY(0px);
}
}

74
public/css/theme1.css
View File

@ -6360,6 +6360,80 @@ a#shifts td.collides:hover {
.messages a:focus { .messages a:focus {
outline: none; outline: none;
} }
.messages span.text-danger {
animation: pulse 1s infinite;
-webkit-animation: pulse 1s infinite;
-moz-animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(5deg) translateY(-2px);
}
20% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg) translateY(-2px);
}
40% {
transform: rotate(-5deg);
}
50% {
transform: rotate(0deg) translateY(-2px);
}
75% {
transform: rotate(0deg) translateY(0px);
}
}
@-webkit-keyframes pulse {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(5deg) translateY(-2px);
}
20% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg) translateY(-2px);
}
40% {
transform: rotate(-5deg);
}
50% {
transform: rotate(0deg) translateY(-2px);
}
75% {
transform: rotate(0deg) translateY(0px);
}
}
@-moz-keyframes pulse {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(5deg) translateY(-2px);
}
20% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg) translateY(-2px);
}
40% {
transform: rotate(-5deg);
}
50% {
transform: rotate(0deg) translateY(-2px);
}
75% {
transform: rotate(0deg) translateY(0px);
}
}
.text-primary, .text-primary,
.text-primary:hover { .text-primary:hover {
color: #428bca; color: #428bca;

78
themes/base.less
View File

@ -42,3 +42,81 @@ body {
outline: none; outline: none;
} }
} }
.messages span.text-danger {
animation: pulse 1s infinite;
-webkit-animation: pulse 1s infinite;
-moz-animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(5deg) translateY(-2px);
}
20% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg) translateY(-2px);;
}
40% {
transform: rotate(-5deg);
}
50% {
transform: rotate(0deg) translateY(-2px);
}
75% {
transform: rotate(0deg) translateY(0px);
}
}
@-webkit-keyframes pulse {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(5deg) translateY(-2px);
}
20% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg) translateY(-2px);
}
40% {
transform: rotate(-5deg);
}
50% {
transform: rotate(0deg) translateY(-2px);
}
75% {
transform: rotate(0deg) translateY(0px);
}
}
@-moz-keyframes pulse {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(5deg) translateY(-2px);
}
20% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg) translateY(-2px);
}
40% {
transform: rotate(-5deg);
}
50% {
transform: rotate(0deg) translateY(-2px);
}
75% {
transform: rotate(0deg) translateY(0px);
}
}