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

feat(styles): one stylesheet source for react and svelte (#3350)

Browse Source 
* feat(styles): create stylesheets for react and svelte based on one source

* refactor(styling): cleanup

* refactor(postcss): share a config

* refactor(postcss): replace env hack with env file
This commit is contained in:
Moritz Klack
2023-08-24 14:02:57 +02:00
committed by GitHub
parent d2c23c5149
commit bd922889b4
47 changed files with 1422 additions and 962 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/system/src/styles/node-resizer.css
+105
View File
@@ -0,0 +1,105 @@
.xy-flow__resize-control {
position: absolute;
}
.xy-flow__resize-control.left,
.xy-flow__resize-control.right {
cursor: ew-resize;
}
.xy-flow__resize-control.top,
.xy-flow__resize-control.bottom {
cursor: ns-resize;
}
.xy-flow__resize-control.top.left,
.xy-flow__resize-control.bottom.right {
cursor: nwse-resize;
}
.xy-flow__resize-control.bottom.left,
.xy-flow__resize-control.top.right {
cursor: nesw-resize;
}
/* handle styles */
.xy-flow__resize-control.handle {
width: 4px;
height: 4px;
border: 1px solid #fff;
border-radius: 1px;
background-color: #3367d9;
transform: translate(-50%, -50%);
}
.xy-flow__resize-control.handle.left {
left: 0;
top: 50%;
}
.xy-flow__resize-control.handle.right {
left: 100%;
top: 50%;
}
.xy-flow__resize-control.handle.top {
left: 50%;
top: 0;
}
.xy-flow__resize-control.handle.bottom {
left: 50%;
top: 100%;
}
.xy-flow__resize-control.handle.top.left {
left: 0;
}
.xy-flow__resize-control.handle.bottom.left {
left: 0;
}
.xy-flow__resize-control.handle.top.right {
left: 100%;
}
.xy-flow__resize-control.handle.bottom.right {
left: 100%;
}
/* line styles */
.xy-flow__resize-control.line {
border-color: #3367d9;
border-width: 0;
border-style: solid;
}
.xy-flow__resize-control.line.left,
.xy-flow__resize-control.line.right {
width: 1px;
transform: translate(-50%, 0);
top: 0;
height: 100%;
}
.xy-flow__resize-control.line.left {
left: 0;
border-left-width: 1px;
}
.xy-flow__resize-control.line.right {
left: 100%;
border-right-width: 1px;
}
.xy-flow__resize-control.line.top,
.xy-flow__resize-control.line.bottom {
height: 1px;
transform: translate(0, -50%);
left: 0;
width: 100%;
}
.xy-flow__resize-control.line.top {
top: 0;
border-top-width: 1px;
}
.xy-flow__resize-control.line.bottom {
border-bottom-width: 1px;
top: 100%;
}