mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-08 04:51:23 -06:00
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:
parent
24372f02a9
commit
1359fcb9ca
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user