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

Simplify SCSS code

Browse Source
This commit is contained in:
Tyler Long
2018-03-11 17:26:55 +08:00
parent c0c7c96f28
commit a40d89ba0d
23 changed files with 18 additions and 1220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/themes/dark/classDiagram.scss → src/themes/classDiagram.scss
View File

39
src/themes/dark/flow.scss
View File

@@ -1,39 +0,0 @@
.mermaid .label {
color: $darkTextColor
}
.node rect,
.node circle,
.node ellipse,
.node polygon {
fill: $mainBkg;
stroke: $border1;
stroke-width: 1px;
}
.node.clickable {
cursor: pointer;
}
.arrowheadPath {
fill: $arrowheadColor;
}
.edgePath .path {
stroke: $lineColor;
}
.edgeLabel {
background-color: $edgeLabelBackground;
}
.cluster rect {
fill: $secondBkg !important;
rx: 4 !important;
stroke: $clusterBorder !important;
stroke-width: 1px !important;
}
.cluster text {
fill: $titleColor;
}

212
src/themes/dark/gantt.scss
View File

@@ -1,212 +0,0 @@
/** Section styling */
.section {
stroke: none;
opacity: 0.2;
}
.section0 {
fill: $sectionBkgColor;
}
.section2 {
fill: $sectionBkgColor2;
}
.section1,
.section3 {
fill: $altSectionBkgColor;
opacity: 0.2;
}
.sectionTitle0 {
fill: $titleColor;
}
.sectionTitle1 {
fill: $titleColor;
}
.sectionTitle2 {
fill: $titleColor;
}
.sectionTitle3 {
fill: $titleColor;
}
.sectionTitle {
text-anchor: start;
font-size: 11px;
text-height: 14px;
}
/* Grid and axis */
.grid .tick {
stroke: $sectionBkgColor;
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid .tick text {
fill: $taskTextLightColor;
opacity: 0.5;
}
.grid path {
stroke-width: 0;
}
/* Today line */
.today {
fill: none;
stroke: $todayLineColor;
stroke-width: 2px;
}
/* Task styling */
/* Default task */
.task {
stroke-width: 1;
}
.taskText {
text-anchor: middle;
font-size: 11px;
}
.taskTextOutsideRight {
fill: $taskTextDarkColor;
text-anchor: start;
font-size: 11px;
}
.taskTextOutsideLeft {
fill: $taskTextDarkColor;
text-anchor: end;
font-size: 11px;
}
/* Specific task settings for the sections*/
.taskText0,
.taskText1,
.taskText2,
.taskText3 {
fill: $taskTextColor;
}
.task0,
.task1,
.task2,
.task3 {
fill: $taskBkgColor;
stroke: $taskBorderColor;
}
.taskTextOutside0,
.taskTextOutside2,
{
fill: $taskTextOutsideColor;
}
.taskTextOutside1,
.taskTextOutside3 {
fill: $taskTextOutsideColor;
}
/* Active task */
.active0,
.active1,
.active2,
.active3 {
fill: $activeTaskBkgColor;
stroke: $activeTaskBorderColor;
}
.activeText0,
.activeText1,
.activeText2,
.activeText3 {
fill: $taskTextDarkColor !important;
}
/* Completed task */
.done0,
.done1,
.done2,
.done3 {
fill: $doneTaskBkgColor;
}
.doneText0,
.doneText1,
.doneText2,
.doneText3 {
fill: $taskTextDarkColor !important;
}
/* Tasks on the critical line */
.crit0,
.crit1,
.crit2,
.crit3 {
stroke: $critBorderColor;
fill: $critBkgColor;
stroke-width: 2;
}
.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
stroke: $critBorderColor;
fill: $activeTaskBkgColor;
stroke-width: 2;
}
.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
stroke: $critBorderColor;
fill: $doneTaskBkgColor;
stroke-width: 1;
cursor: pointer;
shape-rendering: crispEdges;
}
.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
fill: $taskTextLightColor !important;
}
.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
fill: $taskTextDarkColor !important;
}
.titleText {
text-anchor: middle;
font-size: 18px;
fill: $taskTextLightColor;
}

10
src/themes/dark/mermaid.scss
View File

@@ -1,9 +1,9 @@
@import "variables"; @import "variables";
@import "flow"; @import "../flow";
@import "sequenceDiagram"; @import "../sequenceDiagram";
@import "gantt"; @import "../gantt";
@import "classDiagram"; @import "../classDiagram";
@import "gitGraph"; @import "../gitGraph";
.node text { .node text {
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
font-size: 14px; font-size: 14px;

75
src/themes/dark/sequenceDiagram.scss
View File

@@ -1,75 +0,0 @@
.actor {
stroke: $actorBorder;
fill: $actorBkg;
}
text.actor {
fill: $actorTextColor;
stroke: none;
}
.actor-line {
stroke: $actorLineColor;
}
.messageLine0 {
stroke-width: 1.5;
stroke-dasharray: "2 2";
marker-end: "url(#arrowhead)";
stroke: $signalColor;
}
.messageLine1 {
stroke-width: 1.5;
stroke-dasharray: "2 2";
stroke: $signalColor;
}
#arrowhead {
fill: $signalColor !important;
}
#crosshead path {
fill: $signalColor !important;
stroke: $signalColor !important;
}
.messageText {
fill: $signalTextColor;
stroke: none;
}
.labelBox {
stroke: $labelBoxBorderColor;
fill: $labelBoxBkgColor;
}
.labelText {
fill: $darkTextColor;
stroke: none;
}
.loopText {
fill: $labelTextColor;
stroke: none;
}
.loopLine {
stroke-width: 2;
stroke-dasharray: "2 2";
marker-end: "url(#arrowhead)";
stroke: $labelBoxBorderColor;
}
.note {
//stroke: #decc93;
stroke: $noteBorderColor;
fill: $noteBkgColor;
}
.noteText {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}

78
src/themes/default/classDiagram.scss
View File

@@ -1,78 +0,0 @@
g.classGroup text {
fill: $nodeBorder;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 10px;
}
g.classGroup rect {
fill: $nodeBkg;
stroke: $nodeBorder;
}
g.classGroup line {
stroke: $nodeBorder;
stroke-width: 1;
}
svg .classLabel .box {
stroke: none;
stroke-width: 0;
fill: $nodeBkg;
opacity: 0.5;
}
svg .classLabel .label {
fill: $nodeBorder;
font-size: 10px;
}
.relation {
stroke: $nodeBorder;
stroke-width: 1;
fill: none;
}
@mixin composition {
fill: $nodeBorder;
stroke: $nodeBorder;
stroke-width: 1;
}
#compositionStart {
@include composition;
}
#compositionEnd {
@include composition;
}
@mixin aggregation {
fill: $nodeBkg;
stroke: $nodeBorder;
stroke-width: 1;
}
#aggregationStart {
@include aggregation;
}
#aggregationEnd {
@include aggregation;
}
#dependencyStart {
@include composition;
}
#dependencyEnd {
@include composition;
}
#extensionStart {
@include composition;
}
#extensionEnd {
@include composition;
}

39
src/themes/default/flow.scss
View File

@@ -1,39 +0,0 @@
.mermaid .label {
color: #333
}
.node rect,
.node circle,
.node ellipse,
.node polygon {
fill: $mainBkg;
stroke: $border1;
stroke-width: 1px;
}
.node.clickable {
cursor: pointer;
}
.arrowheadPath {
fill: $arrowheadColor;
}
.edgePath .path {
stroke: $lineColor;
}
.edgeLabel {
background-color: $edgeLabelBackground;
}
.cluster rect {
fill: $secondBkg !important;
rx: 4 !important;
stroke: $clusterBorder !important;
stroke-width: 1px !important;
}
.cluster text {
fill: $titleColor;
}

8
src/themes/default/mermaid.scss
View File

@@ -1,8 +1,8 @@
@import "variables"; @import "variables";
@import "flow"; @import "../flow";
@import "sequenceDiagram"; @import "../sequenceDiagram";
@import "gantt"; @import "../gantt";
@import "classDiagram"; @import "../classDiagram";
.node text { .node text {
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
font-size: 14px; font-size: 14px;

0
src/themes/forest/flow.scss → src/themes/flow.scss
View File

78
src/themes/forest/classDiagram.scss
View File

@@ -1,78 +0,0 @@
g.classGroup text {
fill: $nodeBorder;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 10px;
}
g.classGroup rect {
fill: $nodeBkg;
stroke: $nodeBorder;
}
g.classGroup line {
stroke: $nodeBorder;
stroke-width: 1;
}
svg .classLabel .box {
stroke: none;
stroke-width: 0;
fill: $nodeBkg;
opacity: 0.5;
}
svg .classLabel .label {
fill: $nodeBorder;
font-size: 10px;
}
.relation {
stroke: $nodeBorder;
stroke-width: 1;
fill: none;
}
@mixin composition {
fill: $nodeBorder;
stroke: $nodeBorder;
stroke-width: 1;
}
#compositionStart {
@include composition;
}
#compositionEnd {
@include composition;
}
@mixin aggregation {
fill: $nodeBkg;
stroke: $nodeBorder;
stroke-width: 1;
}
#aggregationStart {
@include aggregation;
}
#aggregationEnd {
@include aggregation;
}
#dependencyStart {
@include composition;
}
#dependencyEnd {
@include composition;
}
#extensionStart {
@include composition;
}
#extensionEnd {
@include composition;
}

209
src/themes/forest/gantt.scss
View File

@@ -1,209 +0,0 @@
/** Section styling */
.section {
stroke: none;
opacity: 0.2;
}
.section0 {
fill: $sectionBkgColor;
}
.section2 {
fill: $sectionBkgColor2;
}
.section1,
.section3 {
fill: $altSectionBkgColor;
opacity: 0.2;
}
.sectionTitle0 {
fill: $titleColor;
}
.sectionTitle1 {
fill: $titleColor;
}
.sectionTitle2 {
fill: $titleColor;
}
.sectionTitle3 {
fill: $titleColor;
}
.sectionTitle {
text-anchor: start;
font-size: 11px;
text-height: 14px;
}
/* Grid and axis */
.grid .tick {
stroke: $gridColor;
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
/* Today line */
.today {
fill: none;
stroke: $todayLineColor;
stroke-width: 2px;
}
/* Task styling */
/* Default task */
.task {
stroke-width: 2;
}
.taskText {
text-anchor: middle;
font-size: 11px;
}
.taskTextOutsideRight {
fill: $taskTextDarkColor;
text-anchor: start;
font-size: 11px;
}
.taskTextOutsideLeft {
fill: $taskTextDarkColor;
text-anchor: end;
font-size: 11px;
}
/* Specific task settings for the sections*/
.taskText0,
.taskText1,
.taskText2,
.taskText3 {
fill: $taskTextColor;
}
.task0,
.task1,
.task2,
.task3 {
fill: $taskBkgColor;
stroke: $taskBorderColor;
}
.taskTextOutside0,
.taskTextOutside2,
{
fill: $taskTextOutsideColor;
}
.taskTextOutside1,
.taskTextOutside3 {
fill: $taskTextOutsideColor;
}
/* Active task */
.active0,
.active1,
.active2,
.active3 {
fill: $activeTaskBkgColor;
stroke: $activeTaskBorderColor;
}
.activeText0,
.activeText1,
.activeText2,
.activeText3 {
fill: $taskTextDarkColor !important;
}
/* Completed task */
.done0,
.done1,
.done2,
.done3 {
stroke: $doneTaskBorderColor;
fill: $doneTaskBkgColor;
stroke-width: 2;
}
.doneText0,
.doneText1,
.doneText2,
.doneText3 {
fill: $taskTextDarkColor !important;
}
/* Tasks on the critical line */
.crit0,
.crit1,
.crit2,
.crit3 {
stroke: $critBorderColor;
fill: $critBkgColor;
stroke-width: 2;
}
.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
stroke: $critBorderColor;
fill: $activeTaskBkgColor;
stroke-width: 2;
}
.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
stroke: $critBorderColor;
fill: $doneTaskBkgColor;
stroke-width: 2;
cursor: pointer;
shape-rendering: crispEdges;
}
.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
fill: $taskTextDarkColor !important;
}
.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
fill: $taskTextDarkColor !important;
}
.titleText {
text-anchor: middle;
font-size: 18px;
fill: $taskTextDarkColor;
}

8
src/themes/forest/mermaid.scss
View File

@@ -1,8 +1,8 @@
@import "variables"; @import "variables";
@import "flow"; @import "../flow";
@import "sequenceDiagram"; @import "../sequenceDiagram";
@import "gantt"; @import "../gantt";
@import "classDiagram"; @import "../classDiagram";
.node text { .node text {
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
font-size: 14px; font-size: 14px;

75
src/themes/forest/sequenceDiagram.scss
View File

@@ -1,75 +0,0 @@
.actor {
stroke: $actorBorder;
fill: $actorBkg;
}
text.actor {
fill: $actorTextColor;
stroke: none;
}
.actor-line {
stroke: $actorLineColor;
}
.messageLine0 {
stroke-width: 1.5;
stroke-dasharray: "2 2";
marker-end: "url(#arrowhead)";
stroke: $signalColor;
}
.messageLine1 {
stroke-width: 1.5;
stroke-dasharray: "2 2";
stroke: $signalColor;
}
#arrowhead {
fill: $signalColor;
}
#crosshead path {
fill: $signalColor !important;
stroke: $signalColor !important;
}
.messageText {
fill: $signalTextColor;
stroke: none;
}
.labelBox {
stroke: $labelBoxBorderColor;
fill: $labelBoxBkgColor;
}
.labelText {
fill: $labelTextColor;
stroke: none;
}
.loopText {
fill: $labelTextColor;
stroke: none;
}
.loopLine {
stroke-width: 2;
stroke-dasharray: "2 2";
marker-end: "url(#arrowhead)";
stroke: $labelBoxBorderColor;
}
.note {
//stroke: #decc93;
stroke: $noteBorderColor;
fill: $noteBkgColor;
}
.noteText {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}

0
src/themes/default/gantt.scss → src/themes/gantt.scss
View File

0
src/themes/dark/gitGraph.scss → src/themes/gitGraph.scss
View File

78
src/themes/neutral/classDiagram.scss
View File

@@ -1,78 +0,0 @@
g.classGroup text {
fill: $nodeBorder;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 10px;
}
g.classGroup rect {
fill: $nodeBkg;
stroke: $nodeBorder;
}
g.classGroup line {
stroke: $nodeBorder;
stroke-width: 1;
}
svg .classLabel .box {
stroke: none;
stroke-width: 0;
fill: $nodeBkg;
opacity: 0.5;
}
svg .classLabel .label {
fill: $nodeBorder;
font-size: 10px;
}
.relation {
stroke: $nodeBorder;
stroke-width: 1;
fill: none;
}
@mixin composition {
fill: $nodeBorder;
stroke: $nodeBorder;
stroke-width: 1;
}
#compositionStart {
@include composition;
}
#compositionEnd {
@include composition;
}
@mixin aggregation {
fill: $nodeBkg;
stroke: $nodeBorder;
stroke-width: 1;
}
#aggregationStart {
@include aggregation;
}
#aggregationEnd {
@include aggregation;
}
#dependencyStart {
@include composition;
}
#dependencyEnd {
@include composition;
}
#extensionStart {
@include composition;
}
#extensionEnd {
@include composition;
}

36
src/themes/neutral/flow.scss
View File

@@ -1,36 +0,0 @@
.mermaid .label {
color: $text
}
.node rect,
.node circle,
.node ellipse,
.node polygon {
fill: $mainBkg;
stroke: $nodeBorder;
stroke-width: 1px;
}
.node.clickable {
cursor: pointer;
}
.edgePath .path {
stroke: $lineColor;
stroke-width: 1.5px;
}
.edgeLabel {
background-color: $edgeLabelBackground;
}
.cluster rect {
fill: $secondBkg !important;
rx: 4 !important;
stroke: $clusterBorder !important;
stroke-width: 1px !important;
}
.cluster text {
fill: $titleColor;
}

208
src/themes/neutral/gantt.scss
View File

@@ -1,208 +0,0 @@
/** Section styling */
.section {
stroke: none;
opacity: 0.2;
}
.section0 {
fill: $sectionBkgColor;
}
.section2 {
fill: $sectionBkgColor2;
}
.section1,
.section3 {
fill: $altSectionBkgColor;
opacity: 0.2;
}
.sectionTitle0 {
fill: $titleColor;
}
.sectionTitle1 {
fill: $titleColor;
}
.sectionTitle2 {
fill: $titleColor;
}
.sectionTitle3 {
fill: $titleColor;
}
.sectionTitle {
text-anchor: start;
font-size: 11px;
text-height: 14px;
}
/* Grid and axis */
.grid .tick {
stroke: $gridColor;
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
/* Today line */
.today {
fill: none;
stroke: $todayLineColor;
stroke-width: 2px;
}
/* Task styling */
/* Default task */
.task {
stroke-width: 2;
}
.taskText {
text-anchor: middle;
font-size: 11px;
}
.taskTextOutsideRight {
fill: $taskTextDarkColor;
text-anchor: start;
font-size: 11px;
}
.taskTextOutsideLeft {
fill: $taskTextDarkColor;
text-anchor: end;
font-size: 11px;
}
/* Specific task settings for the sections*/
.taskText0,
.taskText1,
.taskText2,
.taskText3 {
fill: $taskTextColor;
}
.task0,
.task1,
.task2,
.task3 {
fill: $taskBkgColor;
stroke: $taskBorderColor;
}
.taskTextOutside0,
.taskTextOutside2,
{
fill: $taskTextOutsideColor;
}
.taskTextOutside1,
.taskTextOutside3 {
fill: $taskTextOutsideColor;
}
/* Active task */
.active0,
.active1,
.active2,
.active3 {
fill: $activeTaskBkgColor;
stroke: $activeTaskBorderColor;
}
.activeText0,
.activeText1,
.activeText2,
.activeText3 {
fill: $taskTextDarkColor !important;
}
/* Completed task */
.done0,
.done1,
.done2,
.done3 {
stroke: $doneTaskBorderColor;
fill: $doneTaskBkgColor;
stroke-width: 2;
}
.doneText0,
.doneText1,
.doneText2,
.doneText3 {
fill: $taskTextDarkColor !important;
}
/* Tasks on the critical line */
.crit0,
.crit1,
.crit2,
.crit3 {
stroke: $critBorderColor;
fill: $critBkgColor;
stroke-width: 2;
}
.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
stroke: $critBorderColor;
fill: $activeTaskBkgColor;
stroke-width: 2;
}
.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
stroke: $critBorderColor;
fill: $doneTaskBkgColor;
stroke-width: 2;
cursor: pointer; //shape-rendering: crispEdges;
}
.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
fill: $taskTextDarkColor !important;
}
.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
fill: $taskTextDarkColor !important;
}
.titleText {
text-anchor: middle;
font-size: 18px;
fill: $taskTextDarkColor;
}

8
src/themes/neutral/mermaid.scss
View File

@@ -1,8 +1,8 @@
@import "variables"; @import "variables";
@import "flow"; @import "../flow";
@import "sequenceDiagram"; @import "../sequenceDiagram";
@import "gantt"; @import "../gantt";
@import "classDiagram"; @import "../classDiagram";
.node text { .node text {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 14px; font-size: 14px;

75
src/themes/neutral/sequenceDiagram.scss
View File

@@ -1,75 +0,0 @@
.actor {
stroke: $actorBorder;
fill: $actorBkg;
}
text.actor {
fill: $actorTextColor;
stroke: none;
}
.actor-line {
stroke: $actorLineColor;
}
.messageLine0 {
stroke-width: 1.5;
stroke-dasharray: "2 2";
marker-end: "url(#arrowhead)";
stroke: $signalColor;
}
.messageLine1 {
stroke-width: 1.5;
stroke-dasharray: "2 2";
stroke: $signalColor;
}
#arrowhead {
fill: $signalColor;
}
#crosshead path {
fill: $signalColor !important;
stroke: $signalColor !important;
}
.messageText {
fill: $signalTextColor;
stroke: none;
}
.labelBox {
stroke: $labelBoxBorderColor;
fill: $labelBoxBkgColor;
}
.labelText {
fill: $labelTextColor;
stroke: none;
}
.loopText {
fill: $labelTextColor;
stroke: none;
}
.loopLine {
stroke-width: 2;
stroke-dasharray: "2 2";
marker-end: "url(#arrowhead)";
stroke: $labelBoxBorderColor;
}
.note {
//stroke: #decc93;
stroke: $noteBorderColor;
fill: $noteBkgColor;
}
.noteText {
fill: black;
stroke: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

1
src/themes/neutral/variables.scss
View File

@@ -8,6 +8,7 @@ $note: #ffa;
$text: #333; $text: #333;
$critical: #d42; $critical: #d42;
$done: #bbb; $done: #bbb;
$arrowheadColor: #333333;
/* Flowchart variables */ /* Flowchart variables */

0
src/themes/default/sequenceDiagram.scss → src/themes/sequenceDiagram.scss
View File

1
todo.md
View File

@@ -7,4 +7,3 @@
- Flowchart interpolate is useless because there is no rendering code using it - Flowchart interpolate is useless because there is no rendering code using it
- Rewrite SCSS code to reduce duplication - Rewrite SCSS code to reduce duplication
- No global CSS. Should limit the CSS to mermaid charts only - No global CSS. Should limit the CSS to mermaid charts only
- Remove gulp, add jison commands to readme file