1 files changed, 106 insertions, 0 deletions
diff --git a/toolkit/components/normandy/skin/shared/Heartbeat.css b/toolkit/components/normandy/skin/shared/Heartbeat.css
new file mode 100644
index 0000000000..009bf56019
--- /dev/null
+++ b/toolkit/components/normandy/skin/shared/Heartbeat.css
@@ -0,0 +1,106 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Notification overrides for Heartbeat UI */
+
+@keyframes pulse-onshow {
+  0% {
+    opacity: 0;
+    transform: scale(1);
+  }
+
+  25% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  75% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse-twice {
+  0% {
+    transform: scale(1.1);
+  }
+
+  50% {
+    transform: scale(0.8);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.messageImage.heartbeat {
+  /* Needed for the animation to not get clipped when pulsing. */
+  margin-inline: 8px;
+}
+
+.messageImage.heartbeat.pulse-onshow {
+  animation-duration: 1.5s;
+  animation-iteration-count: 1;
+  animation-name: pulse-onshow;
+  animation-timing-function: cubic-bezier(0.7, 1.8, 0.9, 1.1);
+}
+
+.messageImage.heartbeat.pulse-twice {
+  animation-duration: 1s;
+  animation-iteration-count: 2;
+  animation-name: pulse-twice;
+  animation-timing-function: linear;
+}
+
+/* Learn More link styles */
+.heartbeat > hbox > .text-link {
+  margin-inline-start: 0 !important;
+}
+
+.heartbeat > hbox > .text-link:hover {
+  text-decoration: none !important;
+}
+
+/* Heartbeat UI Rating Star Classes */
+#star-rating-container {
+  display: flex;
+  margin-block: 4px;
+}
+
+#star-rating-container > #star5 {
+  order: 5;
+}
+
+#star-rating-container > #star4 {
+  order: 4;
+}
+
+#star-rating-container > #star3 {
+  order: 3;
+}
+
+#star-rating-container > #star2 {
+  order: 2;
+}
+
+#star-rating-container > .star-x {
+  background: url("resource://normandy/skin/shared/heartbeat-star-off.svg");
+  cursor: pointer;
+  height: 16px;
+  margin-inline-end: 4px !important; /* Overrides the margin-inline-end for all platforms defined in the .plain class */
+  width: 16px;
+}
+
+#star-rating-container > .star-x:hover,
+#star-rating-container > .star-x:hover ~ .star-x {
+  background: url("resource://normandy/skin/shared/heartbeat-star-lit.svg");
+}