alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaned up edge label styles and added default edge label background in svelte flow

Browse Source
This commit is contained in:
peterkogo
2024-01-18 13:14:44 +01:00
parent 7b4e385eb7
commit 6bb9c5360d
5 changed files with 11 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/styles/base.css
-18
View File
@@ -1,21 +1,3 @@
/* this will be exported as base.css and can be used for a basic styling */ /* this will be exported as base.css and can be used for a basic styling */
@import '../../../system/src/styles/init.css'; @import '../../../system/src/styles/init.css';
@import '../../../system/src/styles/base.css'; @import '../../../system/src/styles/base.css';
.react-flow {
--edge-label-background-color-default: #ffffff;
--edge-label-color-default: inherit;
}
.react-flow.dark {
--edge-label-background-color-default: #141414;
--edge-label-color-default: #f8f8f8;
}
.react-flow__edge-textbg {
fill: var(--edge-label-background-color, var(--edge-label-background-color-default));
}
.react-flow__edge-text {
fill: var(--edge-label-color, var(--edge-label-color-default));
}
packages/react/src/styles/style.css
+2 -12
View File
@@ -3,20 +3,10 @@
@import '../../../system/src/styles/style.css'; @import '../../../system/src/styles/style.css';
@import '../../../system/src/styles/node-resizer.css'; @import '../../../system/src/styles/node-resizer.css';
.react-flow {
--edge-label-background-color-default: #ffffff;
--edge-label-color-default: inherit;
}
.react-flow.dark {
--edge-label-background-color-default: #141414;
--edge-label-color-default: #f8f8f8;
}
.react-flow__edge-textbg { .react-flow__edge-textbg {
fill: var(--edge-label-background-color, var(--edge-label-background-color-default)); fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
} }
.react-flow__edge-text { .react-flow__edge-text {
fill: var(--edge-label-color, var(--edge-label-color-default)); fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
} }
packages/svelte/src/styles/base.css
-9
View File
@@ -2,16 +2,7 @@
@import '../../../system/src/styles/init.css'; @import '../../../system/src/styles/init.css';
@import '../../../system/src/styles/base.css'; @import '../../../system/src/styles/base.css';
.svelte-flow {
--edge-label-color-default: inherit;
}
.svelte-flow.dark {
--edge-label-color-default: #f8f8f8;
}
.svelte-flow__edge-label { .svelte-flow__edge-label {
text-align: center; text-align: center;
position: absolute; position: absolute;
color: var(--edge-label-color, var(--edge-label-color-default));
} }
packages/svelte/src/styles/style.css
+3 -9
View File
@@ -3,19 +3,13 @@
@import '../../../system/src/styles/style.css'; @import '../../../system/src/styles/style.css';
@import '../../../system/src/styles/node-resizer.css'; @import '../../../system/src/styles/node-resizer.css';
.svelte-flow {
--edge-label-color-default: inherit;
}
.svelte-flow.dark {
--edge-label-color-default: #f8f8f8;
}
.svelte-flow__edge-label { .svelte-flow__edge-label {
text-align: center; text-align: center;
position: absolute; position: absolute;
padding: 2px;
font-size: 10px; font-size: 10px;
color: var(--edge-label-color, var(--edge-label-color-default)); color: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
background: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
} }
.svelte-flow__nodes { .svelte-flow__nodes {
packages/system/src/styles/style.css
+6
View File
@@ -19,6 +19,9 @@
--xy-controls-button-color-hover-default: inherit; --xy-controls-button-color-hover-default: inherit;
--xy-controls-button-border-color-default: #eee; --xy-controls-button-border-color-default: #eee;
--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08); --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
--xy-edge-label-background-color-default: #ffffff;
--xy-edge-label-color-default: inherit;
} }
.xy-flow.dark { .xy-flow.dark {
@@ -41,6 +44,9 @@
--xy-controls-button-color-hover-default: #fff; --xy-controls-button-color-hover-default: #fff;
--xy-controls-button-border-color-default: #5b5b5b; --xy-controls-button-border-color-default: #5b5b5b;
--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08); --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
--xy-edge-label-background-color-default: #141414;
--xy-edge-label-color-default: #f8f8f8;
} }
.xy-flow__edge { .xy-flow__edge {