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

18
packages/react/src/styles/base.css
View File

@@ -1,21 +1,3 @@
/* 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/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));
}

14
packages/react/src/styles/style.css
View File

@@ -3,20 +3,10 @@
@import '../../../system/src/styles/style.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 {
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 {
fill: var(--edge-label-color, var(--edge-label-color-default));
fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}

9
packages/svelte/src/styles/base.css
View File

@@ -2,16 +2,7 @@
@import '../../../system/src/styles/init.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 {
text-align: center;
position: absolute;
color: var(--edge-label-color, var(--edge-label-color-default));
}

12
packages/svelte/src/styles/style.css
View File

@@ -3,19 +3,13 @@
@import '../../../system/src/styles/style.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 {
text-align: center;
position: absolute;
padding: 2px;
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 {

6
packages/system/src/styles/style.css
View File

@@ -19,6 +19,9 @@
--xy-controls-button-color-hover-default: inherit;
--xy-controls-button-border-color-default: #eee;
--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 {
@@ -41,6 +44,9 @@
--xy-controls-button-color-hover-default: #fff;
--xy-controls-button-border-color-default: #5b5b5b;
--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 {