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

Set envs to animate on loading only (except PROD) (#18)

Browse Source 
Simply update the code with what i've been using lately so it only animate when the `.Loader` is created by react. Except for PROD where animation runs anytime.

Use both the new `:has()` pseudo-class and fallback to regular `:not(:only-child())` for unsupported browser (Firefox)
This commit is contained in:
Simon Priet
2023-05-25 23:15:05 +02:00
committed by GitHub
parent 18ff7c284e
commit d258f86c9a
16 changed files with 91 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@@ -19,13 +19,14 @@ Repeate for each styles you want to enables.
## What each styles do?
* `PPR banner.css`: Change the Preproduction banner and login's footer
![example of PPR banner](public/PPR_banner_ex.png)
* `PLR banner.css`: Change your Pillar banner and login's footer
![example of Pillar banner](public/PLR_banner_ex.png)
* `LTG banner.css`: Change the Load Testing banner and login's footer
* `PRD banner.css`: Change the Production banner and login's footer
![example of Prod banner](public/PRD_banner_ex.png)
* `PREP banner.css`: Change the Preproduction banner and login's footer
![example of PREP banner](public/PREP_banner_animated.mov)
* `PLLR banner.css`: Change your Pillar banner and login's footer
![example of PLLR banner](public/PLLR_banner_animated.mov)
* `PERF banner.css`: Change the Load Testing banner and login's footer
![example of PERF banner](public/PERF_banner_animated.mov)
* `PROD banner.css`: Change the Production banner and login's footer
![example of Prod banner](public/PROD_banner_animated.mov)
* `Whiter banner.css`: Look & feel, mainly changing text to pure white and the hover and active elements. A _must have_. Works with the others files.
* `Sigils.css`: Change the top-right user icon to a Shop or Factory depending on if you are logged as ar Retailer or a Supplier.
* ![example of orange shop icon](public/user-orange-shop.png) ![example of violet factory icon](public/user-violet-factory.png)