animation for alert messages

10 years ago · ac82f3dcd2
parent 663f9f6d2d
commit ac82f3dcd2
3 changed files with 226 additions and 0 deletions
--- a/public/css/theme0.css
+++ b/public/css/theme0.css
@ -6337,3 +6337,77 @@ a#shifts td.collides:hover {
 .messages a:focus {
  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);
+  }
+}
--- a/public/css/theme1.css
+++ b/public/css/theme1.css
@ -6360,6 +6360,80 @@ a#shifts td.collides:hover {
 .messages a:focus {
  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:hover {
  color: #428bca;
--- a/themes/base.less
+++ b/themes/base.less
@ -42,3 +42,81 @@ body {
    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);
+  }
+}