mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix for issue #128 - flowchart - styling of edges via css overrides specific styles set in the graph definition

This commit is contained in:
knsv 2015-03-07 13:51:47 +01:00
parent 3fedc1263c
commit cbebf126ce
11 changed files with 58 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
dist/mermaid.css vendored
View File

@ -12,7 +12,7 @@
stroke-width: 1px; stroke-width: 1px;
} }
.edgePath .path { .edgePath .path {
stroke: #333333 !important; stroke: #333333;
} }
.cluster rect { .cluster rect {
fill: #ffffde; fill: #ffffde;
@ -28,11 +28,11 @@
fill: #ececff; fill: #ececff;
} }
text.actor { text.actor {
fill: #000000; fill: black;
stroke: none; stroke: none;
} }
.actor-line { .actor-line {
stroke: #808080; stroke: grey;
} }
.messageLine0 { .messageLine0 {
stroke-width: 1.5; stroke-width: 1.5;
@ -61,11 +61,11 @@ text.actor {
fill: #ececff; fill: #ececff;
} }
.labelText { .labelText {
fill: #000000; fill: black;
stroke: none; stroke: none;
} }
.loopText { .loopText {
fill: #000000; fill: black;
stroke: none; stroke: none;
} }
.loopLine { .loopLine {
@ -97,7 +97,7 @@ text.actor {
} }
.section1, .section1,
.section3 { .section3 {
fill: #ffffff; fill: white;
opacity: 0.2; opacity: 0.2;
} }
.sectionTitle0 { .sectionTitle0 {
@ -119,7 +119,7 @@ text.actor {
} }
/* Grid and axis */ /* Grid and axis */
.grid .tick { .grid .tick {
stroke: #d3d3d3; stroke: lightgrey;
opacity: 0.3; opacity: 0.3;
shape-rendering: crispEdges; shape-rendering: crispEdges;
} }
@ -129,7 +129,7 @@ text.actor {
/* Today line */ /* Today line */
.today { .today {
fill: none; fill: none;
stroke: #ff0000; stroke: red;
stroke-width: 2px; stroke-width: 2px;
} }
/* Task styling */ /* Task styling */
@ -142,12 +142,12 @@ text.actor {
font-size: 11px; font-size: 11px;
} }
.taskTextOutsideRight { .taskTextOutsideRight {
fill: #000000; fill: black;
text-anchor: start; text-anchor: start;
font-size: 11px; font-size: 11px;
} }
.taskTextOutsideLeft { .taskTextOutsideLeft {
fill: #000000; fill: black;
text-anchor: end; text-anchor: end;
font-size: 11px; font-size: 11px;
} }
@ -156,7 +156,7 @@ text.actor {
.taskText1, .taskText1,
.taskText2, .taskText2,
.taskText3 { .taskText3 {
fill: #ffffff; fill: white;
} }
.task0, .task0,
.task1, .task1,
@ -167,11 +167,11 @@ text.actor {
} }
.taskTextOutside0, .taskTextOutside0,
.taskTextOutside2 { .taskTextOutside2 {
fill: #000000; fill: black;
} }
.taskTextOutside1, .taskTextOutside1,
.taskTextOutside3 { .taskTextOutside3 {
fill: #000000; fill: black;
} }
/* Active task */ /* Active task */
.active0, .active0,
@ -185,22 +185,22 @@ text.actor {
.activeText1, .activeText1,
.activeText2, .activeText2,
.activeText3 { .activeText3 {
fill: #000000 !important; fill: black !important;
} }
/* Completed task */ /* Completed task */
.done0, .done0,
.done1, .done1,
.done2, .done2,
.done3 { .done3 {
stroke: #808080; stroke: grey;
fill: #d3d3d3; fill: lightgrey;
stroke-width: 2; stroke-width: 2;
} }
.doneText0, .doneText0,
.doneText1, .doneText1,
.doneText2, .doneText2,
.doneText3 { .doneText3 {
fill: #000000 !important; fill: black !important;
} }
/* Tasks on the critical line */ /* Tasks on the critical line */
.crit0, .crit0,
@ -208,7 +208,7 @@ text.actor {
.crit2, .crit2,
.crit3 { .crit3 {
stroke: #ff8888; stroke: #ff8888;
fill: #ff0000; fill: red;
stroke-width: 2; stroke-width: 2;
} }
.activeCrit0, .activeCrit0,
@ -224,7 +224,7 @@ text.actor {
.doneCrit2, .doneCrit2,
.doneCrit3 { .doneCrit3 {
stroke: #ff8888; stroke: #ff8888;
fill: #d3d3d3; fill: lightgrey;
stroke-width: 2; stroke-width: 2;
cursor: pointer; cursor: pointer;
shape-rendering: crispEdges; shape-rendering: crispEdges;
@ -233,18 +233,18 @@ text.actor {
.doneCritText1, .doneCritText1,
.doneCritText2, .doneCritText2,
.doneCritText3 { .doneCritText3 {
fill: #000000 !important; fill: black !important;
} }
.activeCritText0, .activeCritText0,
.activeCritText1, .activeCritText1,
.activeCritText2, .activeCritText2,
.activeCritText3 { .activeCritText3 {
fill: #000000 !important; fill: black !important;
} }
.titleText { .titleText {
text-anchor: middle; text-anchor: middle;
font-size: 18px; font-size: 18px;
fill: #000000; fill: black;
} }
/* /*

45
dist/mermaid.forest.css vendored
View File

@ -12,7 +12,8 @@
stroke-width: 1px; stroke-width: 1px;
} }
.edgePath .path { .edgePath .path {
stroke: #1a3318 !important; stroke: green;
stroke-width: 1.5px;
} }
.cluster rect { .cluster rect {
fill: #cdffb2; fill: #cdffb2;
@ -28,11 +29,11 @@
fill: #cde498; fill: #cde498;
} }
text.actor { text.actor {
fill: #000000; fill: black;
stroke: none; stroke: none;
} }
.actor-line { .actor-line {
stroke: #808080; stroke: grey;
} }
.messageLine0 { .messageLine0 {
stroke-width: 1.5; stroke-width: 1.5;
@ -61,11 +62,11 @@ text.actor {
fill: #cde498; fill: #cde498;
} }
.labelText { .labelText {
fill: #000000; fill: black;
stroke: none; stroke: none;
} }
.loopText { .loopText {
fill: #000000; fill: black;
stroke: none; stroke: none;
} }
.loopLine { .loopLine {
@ -97,7 +98,7 @@ text.actor {
} }
.section1, .section1,
.section3 { .section3 {
fill: #ffffff; fill: white;
opacity: 0.2; opacity: 0.2;
} }
.sectionTitle0 { .sectionTitle0 {
@ -119,7 +120,7 @@ text.actor {
} }
/* Grid and axis */ /* Grid and axis */
.grid .tick { .grid .tick {
stroke: #d3d3d3; stroke: lightgrey;
opacity: 0.3; opacity: 0.3;
shape-rendering: crispEdges; shape-rendering: crispEdges;
} }
@ -129,7 +130,7 @@ text.actor {
/* Today line */ /* Today line */
.today { .today {
fill: none; fill: none;
stroke: #ff0000; stroke: red;
stroke-width: 2px; stroke-width: 2px;
} }
/* Task styling */ /* Task styling */
@ -142,12 +143,12 @@ text.actor {
font-size: 11px; font-size: 11px;
} }
.taskTextOutsideRight { .taskTextOutsideRight {
fill: #000000; fill: black;
text-anchor: start; text-anchor: start;
font-size: 11px; font-size: 11px;
} }
.taskTextOutsideLeft { .taskTextOutsideLeft {
fill: #000000; fill: black;
text-anchor: end; text-anchor: end;
font-size: 11px; font-size: 11px;
} }
@ -156,7 +157,7 @@ text.actor {
.taskText1, .taskText1,
.taskText2, .taskText2,
.taskText3 { .taskText3 {
fill: #ffffff; fill: white;
} }
.task0, .task0,
.task1, .task1,
@ -167,11 +168,11 @@ text.actor {
} }
.taskTextOutside0, .taskTextOutside0,
.taskTextOutside2 { .taskTextOutside2 {
fill: #000000; fill: black;
} }
.taskTextOutside1, .taskTextOutside1,
.taskTextOutside3 { .taskTextOutside3 {
fill: #000000; fill: black;
} }
/* Active task */ /* Active task */
.active0, .active0,
@ -185,22 +186,22 @@ text.actor {
.activeText1, .activeText1,
.activeText2, .activeText2,
.activeText3 { .activeText3 {
fill: #000000 !important; fill: black !important;
} }
/* Completed task */ /* Completed task */
.done0, .done0,
.done1, .done1,
.done2, .done2,
.done3 { .done3 {
stroke: #808080; stroke: grey;
fill: #d3d3d3; fill: lightgrey;
stroke-width: 2; stroke-width: 2;
} }
.doneText0, .doneText0,
.doneText1, .doneText1,
.doneText2, .doneText2,
.doneText3 { .doneText3 {
fill: #000000 !important; fill: black !important;
} }
/* Tasks on the critical line */ /* Tasks on the critical line */
.crit0, .crit0,
@ -208,7 +209,7 @@ text.actor {
.crit2, .crit2,
.crit3 { .crit3 {
stroke: #ff8888; stroke: #ff8888;
fill: #ff0000; fill: red;
stroke-width: 2; stroke-width: 2;
} }
.activeCrit0, .activeCrit0,
@ -224,7 +225,7 @@ text.actor {
.doneCrit2, .doneCrit2,
.doneCrit3 { .doneCrit3 {
stroke: #ff8888; stroke: #ff8888;
fill: #d3d3d3; fill: lightgrey;
stroke-width: 2; stroke-width: 2;
cursor: pointer; cursor: pointer;
shape-rendering: crispEdges; shape-rendering: crispEdges;
@ -233,18 +234,18 @@ text.actor {
.doneCritText1, .doneCritText1,
.doneCritText2, .doneCritText2,
.doneCritText3 { .doneCritText3 {
fill: #000000 !important; fill: black !important;
} }
.activeCritText0, .activeCritText0,
.activeCritText1, .activeCritText1,
.activeCritText2, .activeCritText2,
.activeCritText3 { .activeCritText3 {
fill: #000000 !important; fill: black !important;
} }
.titleText { .titleText {
text-anchor: middle; text-anchor: middle;
font-size: 18px; font-size: 18px;
fill: #000000; fill: black;
} }
/* /*

3
dist/mermaid.full.js vendored
View File

@ -25734,6 +25734,7 @@ exports.addEdges = function (edges, g) {
var defaultStyle; var defaultStyle;
if(typeof edges.defaultStyle !== 'undefined'){ if(typeof edges.defaultStyle !== 'undefined'){
defaultStyle = edges.defaultStyle.toString().replace(/,/g , ';'); defaultStyle = edges.defaultStyle.toString().replace(/,/g , ';');
} }
edges.forEach(function (edge) { edges.forEach(function (edge) {
@ -25758,7 +25759,7 @@ exports.addEdges = function (edges, g) {
else{ else{
switch(edge.stroke){ switch(edge.stroke){
case 'normal': case 'normal':
style = 'stroke: #333; stroke-width: 1.5px;fill:none'; style = 'fill:none';
if(typeof defaultStyle !== 'undefined'){ if(typeof defaultStyle !== 'undefined'){
style = defaultStyle; style = defaultStyle;
} }

2
dist/mermaid.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
dist/mermaid.slim.js vendored
View File

@ -25702,6 +25702,7 @@ exports.addEdges = function (edges, g) {
var defaultStyle; var defaultStyle;
if(typeof edges.defaultStyle !== 'undefined'){ if(typeof edges.defaultStyle !== 'undefined'){
defaultStyle = edges.defaultStyle.toString().replace(/,/g , ';'); defaultStyle = edges.defaultStyle.toString().replace(/,/g , ';');
} }
edges.forEach(function (edge) { edges.forEach(function (edge) {
@ -25726,7 +25727,7 @@ exports.addEdges = function (edges, g) {
else{ else{
switch(edge.stroke){ switch(edge.stroke){
case 'normal': case 'normal':
style = 'stroke: #333; stroke-width: 1.5px;fill:none'; style = 'fill:none';
if(typeof defaultStyle !== 'undefined'){ if(typeof defaultStyle !== 'undefined'){
style = defaultStyle; style = defaultStyle;
} }

2
dist/mermaid.slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/diagrams/flowchart/flowRenderer.js
View File

@ -112,6 +112,7 @@ exports.addEdges = function (edges, g) {
var defaultStyle; var defaultStyle;
if(typeof edges.defaultStyle !== 'undefined'){ if(typeof edges.defaultStyle !== 'undefined'){
defaultStyle = edges.defaultStyle.toString().replace(/,/g , ';'); defaultStyle = edges.defaultStyle.toString().replace(/,/g , ';');
} }
edges.forEach(function (edge) { edges.forEach(function (edge) {
@ -136,7 +137,7 @@ exports.addEdges = function (edges, g) {
else{ else{
switch(edge.stroke){ switch(edge.stroke){
case 'normal': case 'normal':
style = 'stroke: #333; stroke-width: 1.5px;fill:none'; style = 'fill:none';
if(typeof defaultStyle !== 'undefined'){ if(typeof defaultStyle !== 'undefined'){
style = defaultStyle; style = defaultStyle;
} }

2
src/less/default/flow.less
View File

@ -7,7 +7,7 @@
} }
.edgePath .path { .edgePath .path {
stroke: @lineColor !important; stroke: @lineColor;
} }
.cluster rect{ .cluster rect{

3
src/less/forest/flow.less
View File

@ -7,7 +7,8 @@
} }
.edgePath .path { .edgePath .path {
stroke: @lineColor !important; stroke: @lineColor;
stroke-width: 1.5px;
} }
.cluster rect{ .cluster rect{

1
src/less/forest/variables.less
View File

@ -1,6 +1,7 @@
@mainBkg: #cde498; @mainBkg: #cde498;
@secondBkg: #cdffb2; @secondBkg: #cdffb2;
@lineColor: #1a3318; @lineColor: #1a3318;
@lineColor: green;
@border1: #13540c; @border1: #13540c;
@border2: #6eaa49; @border2: #6eaa49;

2
test/web.html
View File

@ -25,7 +25,7 @@
</style> </style>
<link rel="stylesheet" href="seq.css"/> <link rel="stylesheet" href="seq.css"/>
<lnk rel="stylesheet" href="https://raw.githubusercontent.com/knsv/mermaid/master/dist/mermaid.forest.css"/> <lnk rel="stylesheet" href="https://raw.githubusercontent.com/knsv/mermaid/master/dist/mermaid.forest.css"/>
<link rel="stylesheet" href="../dist/mermaid.forest.css"/> <link rel="stylesheet" href="../dist/mermaid.css"/>
</head> </head>
<body> <body>
<div class="mermaid"> <div class="mermaid">