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

Update LTG, PLR to use new backgroud gradient, and not resort on ::before element

Browse Source
This commit is contained in:
scar 2021-12-24 14:57:50 +01:00
parent 31eb4d9505
commit 428180de22
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
LTG banner.css
View File

@ -14,16 +14,16 @@ domain("ltg-admin.alkemics.com") {
left: 0; left: 0;
width: calc(100% + var(--stripe-size)); width: calc(100% + var(--stripe-size));
height: 100%; height: 100%;
background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%); background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 75%);
background-size: var(--stripe-size) var(--stripe-size); background-size: var(--stripe-size) var(--stripe-size);
animation: stripeTransform var(--duration) linear infinite; animation: stripeTransform var(--duration) linear infinite;
} }
@keyframes stripeTransform { @keyframes stripeTransform {
0% { from {
transform: translateX(0); background-position: 0 0;
} }
100% { to {
transform: translateX(calc(var(--stripe-size) * -1)); background-position: var(--stripe-size) 0;
} }
} }
} }

10
PLR banner.css
View File

@ -13,16 +13,16 @@
left: 0; left: 0;
width: calc(100% + var(--stripe-size)); width: calc(100% + var(--stripe-size));
height: 100%; height: 100%;
background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%); background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 75%);
background-size: var(--stripe-size) var(--stripe-size); background-size: var(--stripe-size) var(--stripe-size);
animation: stripeTransform var(--duration) linear infinite; animation: stripeTransform var(--duration) linear infinite;
} }
@keyframes stripeTransform { @keyframes stripeTransform {
0% { from {
transform: translateX(0); background-position: 0 0;
} }
100% { to {
transform: translateX(calc(var(--stripe-size) * -1)); background-position: var(--stripe-size) 0;
} }
} }
} }