add non-compliant pie style

[pya35]

No description provided.

[github-actions]

PR Preview Action v1.6.0
🚀 View preview at https://Orange-OpenSource.github.io/La-Va11ydette/pr-preview/pr-243/
Built to branch gh-pages at 2025-03-28 07:52 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[MewenLeHo]

I would say no to your pull request.
I do not understand why you created a new CSS class instead of updating an existing one?

I can see two solutions:

First, we can keep the existing markup:

<span class="pie-val pie-noncompliant">${langStatement.template.status2}</span>

and just add your modifications to the already existing .pie-noncompliant:

.pie-noncompliant {
    font-size: 1.75em !important;
    padding-top: 25%;
    padding-left: 2%;
}

Other properties are useless cause already defined in .pie-val so you can just add the two properties you want to override.

Cons: we will need to double check for CSS specificity rule.

Alternate solution:

We change your suggestion by adding your new CSS class instead of replacing the actual styles, making it:

<span class="pie-val pie-noncompliant-val pie-noncompliant">${langStatement.template.status2}</span>

Then we can do:

.pie-val {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  right: 15px;
  z-index: 2;
  border-radius: 50%;
  background-color: #fff;
  padding-top: 28%;
  padding-left: 8%;
}

.pie-noncompliant-val {
  padding-top: 25%;
  padding-left: 2%;
}

instead of:

.pie-val {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  right: 15px;
  z-index: 2;
  border-radius: 50%;
  background-color: #fff;
  padding-top: 28%;
  padding-left: 8%;
}

.pie-noncompliant-val {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  right: 15px;
  z-index: 2;
  border-radius: 50%;
  background-color: #fff;
  padding-top: 25%;
  padding-left: 2%;
}

and it will save us 8 lines of CSS.

In my opinion the first solution is the better since we can keep the same markup and just add two lines of CSS.