feat(#11): Add new style with blinkers animations #12

Merged
alk-spriet merged 1 commits from pagination-blinkers into main 2023-03-24 17:42:19 +01:00
3 changed files with 27 additions and 1 deletions
Showing only changes of commit 27a3c0a308 - Show all commits

5
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,5 @@
{
"conventionalCommits.scopes": [
"#11"
]
}

17
Blinkers.less Normal file
View File

@ -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;
}
}
}

View File

@ -1,25 +1,29 @@
@-moz-document domain("ppr-app.supplierxm.salsify.com"), @-moz-document domain("ppr-app.supplierxm.salsify.com"),
domain("ppr-admin.alkemics.com") { domain("ppr-admin.alkemics.com") {
:root { :root {
--stripe-size: 100px; --stripe-size: 100px;
--color1: hsl(194, 71%, 30%); --color1: hsl(194, 71%, 30%);
--color2: hsl(194, 77%, 35%); --color2: hsl(194, 77%, 35%);
--duration: 20s; --duration: 20s;
} }
.AuthLayoutFooter, .AuthLayoutFooter,
.Navbar.navbar.Navbar--PPR.bg-inverse { .Navbar.navbar.Navbar--PPR.bg-inverse {
background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 50%, var(--color1) 75%); background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 50%, var(--color1) 75%);
background-size: var(--stripe-size) var(--stripe-size); background-size: var(--stripe-size) var(--stripe-size);
animation: alkegrad var(--duration) linear infinite; animation: alkegrad var(--duration) linear infinite;
} }
.AuthLayoutFooter { .AuthLayoutFooter {
--stripe-size: 200px; --stripe-size: 200px;
--duration: 40s; --duration: 40s;
} }
@keyframes alkegrad { @keyframes alkegrad {
from { from {
background-position: 0 0; background-position: 0 0;
} }
to { to {
background-position: var(--stripe-size) 0; background-position: var(--stripe-size) 0;
} }