Fix Mermaid labels inheriting theme .label styling (#1278)

This is the minimum code change that fixes the issue discussed in #1271 and #1272. In short, Mermaid has its own `.label` that it uses for styling + JS behaviour. To fix this, I add a relatively simple `:not()` that prevents usage with `g`, which is invalid in non-SVG HTML anyways. There should be minimal performance impact.

To test, observe:

- on `main`, selecting the "A" label in https://just-the-docs.com/docs/ui-components/code/#mermaid-diagram-code-blocks has the class `.label`; dev tools will indicate that JtD's `.label` styling is applied
- but, on this branch, dev tools will indicate that the `.label` styling is not applied; observe otherwise that the page behaves the same

Closes #1272.
This commit is contained in:
Matt Wang 2023-06-24 16:57:01 -07:00 committed by GitHub
parent 24372f02a9
commit 1359fcb9ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,6 +1,10 @@
// Labels (not the form kind)
.label,
// this :not() prevents a style clash with Mermaid.js's
// diagram labels, which also use .label
// for more, see https://github.com/just-the-docs/just-the-docs/issues/1272
// and the accompanying PR
.label:not(g),
.label-blue {
display: inline-block;
padding: 0.16em 0.56em;