2 Commits

Author SHA1 Message Date
5e06d6fc18 docs(PREP): Updated com image 2022-04-08 17:32:03 +02:00
7c6d88d7f5 feat(PREP): Strips fades in and animate on loading pages content
Worked on a new feature that make the strips hidden while idle. They fade in and move during loading, then fade out.

I don't know the performance toll on usage.
2022-04-07 20:44:40 +02:00
2 changed files with 7 additions and 7 deletions

View File

@ -5,26 +5,26 @@ domain("ppr-admin.alkemics.com") {
--color1: hsla(194, 71%, 30%, 1); --color1: hsla(194, 71%, 30%, 1);
--color2: hsla(194, 77%, 35%, 1); --color2: hsla(194, 77%, 35%, 1);
--duration: 1s; --duration: 1s;
--state: paused; --state: running;
} }
.AuthLayoutFooter, .AuthLayoutFooter,
.Navbar.navbar.Navbar--PPR.bg-inverse { .Navbar.navbar.Navbar--PPR.bg-inverse {
background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%); background: repeating-linear-gradient(-45deg, hsla(194, 77%, 35%, 0) 25%, var(--color1) 50%, var(--color1) 75%);
background-color: var(--color1); background-color: var(--color2);
background-size: var(--stripe-size) var(--stripe-size); background-size: var(--stripe-size) var(--stripe-size);
animation: alkegrad var(--duration) linear 0s infinite normal var(--state); animation: alkegrad var(--duration) linear 0s infinite normal var(--state);
transition: background 200ms linear;
} }
.AuthLayoutFooter { .AuthLayoutFooter {
--stripe-size: 200px; --stripe-size: 200px;
--duration: 40s; --duration: 40s;
} }
.PageTop>.navbar:not(:only-child) { .navbar:only-child {
--state: running; --state: paused;
--color2: hsla(194, 71%, 30%, 1);
} }
.PageTop>.Loader { .PageTop>.Loader {
visibility: hidden; visibility: hidden;
animation: none;
--state: paused;
} }
@keyframes alkegrad { @keyframes alkegrad {
from { from {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 55 KiB