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

refactor(styles): cleanup

Browse Source
This commit is contained in:
moklick
2022-08-16 16:39:06 +02:00
parent 5dae758361
commit aa175b4bef
7 changed files with 161 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/nextjs/styles/rf-style.css
+32 -17
View File
@@ -1,3 +1,4 @@
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow */
.react-flow__container {
position: absolute;
@@ -38,6 +39,7 @@
.react-flow__connection-path {
stroke: #b1b1b7;
stroke-width: 1;
fill: none;
}
.react-flow__edge {
pointer-events: visibleStroke;
@@ -99,15 +101,6 @@
background-color: white;
cursor: -webkit-grab;
cursor: grab;
padding: 10px;
border-radius: 3px;
width: 150px;
font-size: 12px;
color: #222;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #1a192b;
}
.react-flow__node.dragging {
cursor: -webkit-grabbing;
@@ -137,7 +130,6 @@
}
.react-flow__handle.connectable {
pointer-events: all;
cursor: crosshair;
}
.react-flow__handle-bottom {
top: auto;
@@ -211,19 +203,42 @@
.react-flow__edge-text {
font-size: 10px;
}
.react-flow__node.selectable:hover {
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
padding: 10px;
border-radius: 3px;
width: 150px;
font-size: 12px;
color: #222;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #1a192b;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__node.selectable.selected,
.react-flow__node.selectable:focus,
.react-flow__node.selectable:focus-visible {
.react-flow__node-default.selectable.selected,
.react-flow__node-default.selectable:focus,
.react-flow__node-default.selectable:focus-visible,
.react-flow__node-input.selectable.selected,
.react-flow__node-input.selectable:focus,
.react-flow__node-input.selectable:focus-visible,
.react-flow__node-output.selectable.selected,
.react-flow__node-output.selectable:focus,
.react-flow__node-output.selectable:focus-visible,
.react-flow__node-group.selectable.selected,
.react-flow__node-group.selectable:focus,
.react-flow__node-group.selectable:focus-visible {
box-shadow: 0 0 0 0.5px #1a192b;
outline: none;
}
.react-flow__node-group {
background: rgba(240, 240, 240, 0.25);
border-color: #1a192b;
}
background: rgba(240, 240, 240, 0.25);
border-color: #1a192b;
}
.react-flow__nodesselection-rect,
.react-flow__selection {
background: rgba(0, 89, 220, 0.08);