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

refactor(resizer): export resize control, add line control, styling

Browse Source
This commit is contained in:
moklick
2022-12-04 15:04:07 +01:00
parent afce7a2fee
commit 8e43021050
11 changed files with 387 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/node-resizer/src/style.css
+100
View File
@@ -0,0 +1,100 @@
.react-flow__resize-control {
position: absolute;
background-color: rgba(195, 195, 195, 1);
border: 1px solid white;
width: 4px;
height: 4px;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
left: 0;
top: 50%;
}
.react-flow__resize-control.handle.right {
left: 100%;
top: 50%;
}
.react-flow__resize-control.handle.top {
left: 50%;
top: 0;
}
.react-flow__resize-control.handle.bottom {
left: 50%;
top: 100%;
}
.react-flow__resize-control.handle.top.left {
left: 0;
}
.react-flow__resize-control.handle.bottom.left {
left: 0;
}
.react-flow__resize-control.handle.top.right {
left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
border: none;
background: none;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
width: 1px;
transform: translate(-50%, 0);
top: 0;
height: 100%;
}
.react-flow__resize-control.line.left {
left: 0;
border-left: 1px solid rgba(195, 195, 195, 1);
}
.react-flow__resize-control.line.right {
left: 100%;
border-right: 1px solid rgba(195, 195, 195, 1);
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
height: 1px;
transform: translate(0, -50%);
left: 0;
width: 100%;
}
.react-flow__resize-control.line.top {
top: 0;
border-top: 1px solid rgba(195, 195, 195, 1);
}
.react-flow__resize-control.line.bottom {
border-bottom: 1px solid rgba(195, 195, 195, 1);
top: 100%;
}