From 27a3c0a3088d686a8ac9ca41633c67bcab9e7764 Mon Sep 17 00:00:00 2001
From: Simon <spriet@salsify.com>
Date: Fri, 24 Mar 2023 17:41:51 +0100
Subject: [PATCH] feat(#11): Add new style with blinkers animations

---
 .vscode/settings.json |  5 +++++
 Blinkers.less         | 17 +++++++++++++++++
 PREP banner.css       |  6 +++++-
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 Blinkers.less

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..ba1694a
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "conventionalCommits.scopes": [
+        "#11"
+    ]
+}
\ No newline at end of file
diff --git a/Blinkers.less b/Blinkers.less
new file mode 100644
index 0000000..42215c9
--- /dev/null
+++ b/Blinkers.less
@@ -0,0 +1,17 @@
+@-moz-document domain("supplierxm.salsify.com"),
+domain("alkemics.com") {
+
+    button:not([disabled]) .mdi-arrow-right-bold,
+    button:not([disabled]) .mdi-arrow-left-bold {
+
+        &:not([disabled]):hover {
+            animation: car-blinkers 900ms steps(1, end) infinite;
+        }
+    }
+
+    @keyframes car-blinkers {
+        45% {
+            color: lightgreen;
+        }
+    }
+}
\ No newline at end of file
diff --git a/PREP banner.css b/PREP banner.css
index b18a631..6230848 100644
--- a/PREP banner.css	
+++ b/PREP banner.css	
@@ -1,25 +1,29 @@
 @-moz-document domain("ppr-app.supplierxm.salsify.com"),
 domain("ppr-admin.alkemics.com") {
-     :root {
+    :root {
         --stripe-size: 100px;
         --color1: hsl(194, 71%, 30%);
         --color2: hsl(194, 77%, 35%);
         --duration: 20s;
     }
+
     .AuthLayoutFooter,
     .Navbar.navbar.Navbar--PPR.bg-inverse {
         background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 50%, var(--color1) 75%);
         background-size: var(--stripe-size) var(--stripe-size);
         animation: alkegrad var(--duration) linear infinite;
     }
+
     .AuthLayoutFooter {
         --stripe-size: 200px;
         --duration: 40s;
     }
+
     @keyframes alkegrad {
         from {
             background-position: 0 0;
         }
+
         to {
             background-position: var(--stripe-size) 0;
         }