marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 23:39:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3829 from DanInProgress/fix/stylis-add-idselector

Browse Source 
Use stylis to prepend idSelector
This commit is contained in:
Knut Sveidqvist
2022-11-29 17:10:27 +01:00
committed by GitHub
parent b949da9ae4 1f64302ae2
commit 5e98e99f86
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/mermaid/src/mermaidAPI.ts
View File

@@ -510,7 +510,7 @@ const render = function (
); );
const style1 = document.createElement('style'); const style1 = document.createElement('style');
style1.innerHTML = `${idSelector} ` + rules; style1.innerHTML = rules;
svg.insertBefore(style1, firstChild); svg.insertBefore(style1, firstChild);
// ------------------------------------------------------------------------------- // -------------------------------------------------------------------------------
@@ -706,7 +706,7 @@ const renderAsync = async function (
); );
const style1 = document.createElement('style'); const style1 = document.createElement('style');
style1.innerHTML = `${idSelector} ` + rules; style1.innerHTML = rules;
svg.insertBefore(style1, firstChild); svg.insertBefore(style1, firstChild);
// ------------------------------------------------------------------------------- // -------------------------------------------------------------------------------

20
packages/mermaid/src/styles.ts
View File

@@ -53,7 +53,7 @@ const getStyles = (
} else { } else {
log.warn(`No theme found for ${type}`); log.warn(`No theme found for ${type}`);
} }
return ` { return ` & {
font-family: ${options.fontFamily}; font-family: ${options.fontFamily};
font-size: ${options.fontSize}; font-size: ${options.fontSize};
fill: ${options.textColor} fill: ${options.textColor}
@@ -61,40 +61,40 @@ const getStyles = (
/* Classes common for multiple diagrams */ /* Classes common for multiple diagrams */
.error-icon { & .error-icon {
fill: ${options.errorBkgColor}; fill: ${options.errorBkgColor};
} }
.error-text { & .error-text {
fill: ${options.errorTextColor}; fill: ${options.errorTextColor};
stroke: ${options.errorTextColor}; stroke: ${options.errorTextColor};
} }
.edge-thickness-normal { & .edge-thickness-normal {
stroke-width: 2px; stroke-width: 2px;
} }
.edge-thickness-thick { & .edge-thickness-thick {
stroke-width: 3.5px stroke-width: 3.5px
} }
.edge-pattern-solid { & .edge-pattern-solid {
stroke-dasharray: 0; stroke-dasharray: 0;
} }
.edge-pattern-dashed{ & .edge-pattern-dashed{
stroke-dasharray: 3; stroke-dasharray: 3;
} }
.edge-pattern-dotted { .edge-pattern-dotted {
stroke-dasharray: 2; stroke-dasharray: 2;
} }
.marker { & .marker {
fill: ${options.lineColor}; fill: ${options.lineColor};
stroke: ${options.lineColor}; stroke: ${options.lineColor};
} }
.marker.cross { & .marker.cross {
stroke: ${options.lineColor}; stroke: ${options.lineColor};
} }
svg { & svg {
font-family: ${options.fontFamily}; font-family: ${options.fontFamily};
font-size: ${options.fontSize}; font-size: ${options.fontSize};
} }