From 1359fcb9ca6ce815571b8ecec8e7cfc7b149d0e1 Mon Sep 17 00:00:00 2001 From: Matt Wang Date: Sat, 24 Jun 2023 16:57:01 -0700 Subject: [PATCH] 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. --- _sass/labels.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/_sass/labels.scss b/_sass/labels.scss index 85a7ba1..bc95037 100644 --- a/_sass/labels.scss +++ b/_sass/labels.scss @@ -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;