Fix CSS for choice elements in outline docs

[nikitawootten-nist]

Committer Notes

Fixes #1365

Choices are now displayed in outlines as follows:

JSON view:

XML view:

Nested choices alternate between white (the background color) and light gray up to a depth of 3 (I assume if things get deeper then 3 levels of choices, we have other problems)

This change has been tested on both Firefox and Chrome.

UPDATE 3/3/23

@aj-stein-nist suggested changing the color to fit our palette, as well as re-adding a bit of indentation:

All Submissions:

• Have you selected the correct base branch per Contributing guidance?
• Have you set "Allow edits and access to secrets by maintainers
  "?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?
• Have you squashed any non-relevant commits and commit messages? [instructions]
• Do all automated CI/CD checks pass?

By submitting a pull request, you are agreeing to provide this contribution under the CC0 1.0 Universal public domain dedication.

Changes to Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you included examples of how to use your new feature(s)?
• Have you updated all OSCAL website and readme documentation affected by the changes you made? Changes to the OSCAL website can be made in the docs/content directory of your branch.

[nikitawootten-nist]

Relevant lines live on lines 154-173

[aj-stein-nist]

I will take this for a spin later tonight or tomorrow, personally I am preferential to Option 3. Would like to know what the rest of the team thinks.

[wendellpiez]

Approving so as not to block improvement - while a more thorough redesign/shakeout of CSS may also be in order (some day) ...

[nikitawootten-nist]

I will take this for a spin later tonight or tomorrow, personally I am preferential to Option 3. Would like to know what the rest of the team thinks.

For those reviewing this, Option 3 refers to the mock ups I posted here.

Personally Option 3 looks a little confusing to me, but if the team would rather a more muted line instead of coloring the whole background, I can probably improve the design as well.

[aj-stein-nist]

I will take this for a spin later tonight or tomorrow, personally I am preferential to Option 3. Would like to know what the rest of the team thinks.

For those reviewing this, Option 3 refers to the mock ups I posted here.

Personally Option 3 looks a little confusing to me, but if the team would rather a more muted line instead of coloring the whole background, I can probably improve the design as well.

I was going to say: you like the boxes!? But if you want more muted lines I could understand. That said: I think the most key thing is a very clear visual identifier that shows the indentation or "hierarchy" of the objects in the model, and the box options make that less obvious to me personally. But it seems we are in the same head space.

So we like the line concept, but could make it better, is that the takeaway?

[wendellpiez]

I actually like the lines, but I also wonder if the indents shouldn't be at the level down, i.e. the choices. A left-side rule might be made to span across them. So the p would in effect look like a list header. (Unfortunately we don't have yet another wrapper around the group of choice divs.)

However I am also not inclined to quibble here, as they are all improvements to legibility.

[aj-stein-nist]

I am of mixed my minds of whether to point this change to develop or main given it's a site change, but I guess we should stick with develop for now.

[aj-stein-nist]

🚢 it.