Salsify/front-ui-tweaker
1
0
Fork 0
Code Issues 4 Pull Requests 3 Packages Projects Releases Wiki Activity

Refactor gradients on navbar #24 #6

Open
alk-spriet wants to merge 1 commits from prototype into main
pull from: prototype
merge into: Salsify:main
Conversation 0 Commits 1 Files Changed 2 +50 -12
2 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
PLLR banner.css
View File

@ -1,20 +1,41 @@
@-moz-document domain("pillar.alkemics.com") { @-moz-document domain("pillar.alkemics.com"),
:root { domain("localstream.alkemics.com") {
:root {
--stripe-size: 100px; --stripe-size: 100px;
--color1: hsl(205, 70%, 45%); --color1: hsl(205, 84%, 41%);
--color2: hsl(205, 70%, 50%); --color2: hsl(205, 70%, 50%);
--duration: 30s; --duration: 1s;
--state: paused;
} }
.AuthLayoutFooter, .AuthLayoutFooter,
.Navbar.navbar.bg-inverse { .Navbar.navbar.Navbar--PPR.bg-inverse {
background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 75%); background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
background-color: var(--color1);
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 0s infinite normal var(--state);
} }
.AuthLayoutFooter {
--stripe-size: 200px;
--duration: 40s;
}
.PageTop>.navbar:not(:only-child) {
--state: running;
}
.PageTop>.Loader {
visibility: hidden;
animation: none;
--state: paused;
}
@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;
} }

27
PREP banner.css
View File

@ -1,25 +1,42 @@
@-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 { domain("localstream.alkemics.com") {
: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: 1s;
--state: paused;
} }
.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(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
background-color: var(--color1);
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 0s infinite normal var(--state);
} }
.AuthLayoutFooter { .AuthLayoutFooter {
--stripe-size: 200px; --stripe-size: 200px;
--duration: 40s; --duration: 40s;
} }
.PageTop>.navbar:not(:only-child) {
--state: running;
}
.PageTop>.Loader {
visibility: hidden;
animation: none;
--state: paused;
}
@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;
} }