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/package.json
+1 -1
View File
@@ -4,7 +4,7 @@
"private": true,
"scripts": {
"dev": "next dev",
"copystyles": "cp ../../node_modules/@react-flow/renderer/dist/style.css ./styles/rf-style.css",
"copystyles": "cp ../../node_modules/@react-flow/bundle/dist/style.css ./styles/rf-style.css && cp ../../node_modules/@react-flow/bundle/dist/base.css ./styles/rf-base.css",
"build": "next build",
"start": "next start",
"lint": "next lint"
examples/nextjs/pages/EdgeTypes/index.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
/**
* Example for checking the different edge types and source and target positions
*/
import React from 'react';
import React, { useCallback } from 'react';
import {
ReactFlow,
@@ -31,7 +31,7 @@ const deleteKeyCode = ['AltLeft+KeyD', 'Backspace'];
const EdgeTypesFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return (
<ReactFlow
examples/nextjs/styles/rf-base.css
+17 -6
View File
@@ -1,4 +1,4 @@
/* these are very simple styles so that it doesnt look broken */
/* this will be exported as base.css and can be used for a basic styling */
/* these are the necessary styles for React Flow */
.react-flow__container {
position: absolute;
@@ -9,6 +9,12 @@
}
.react-flow__pane {
z-index: 1;
cursor: -webkit-grab;
cursor: grab;
}
.react-flow__pane.dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.react-flow__viewport {
transform-origin: 0 0;
@@ -33,9 +39,11 @@
.react-flow__connection-path {
stroke: #b1b1b7;
stroke-width: 1;
fill: none;
}
.react-flow__edge {
pointer-events: visibleStroke;
cursor: pointer;
}
.react-flow__edge.animated path {
stroke-dasharray: 5;
@@ -93,6 +101,13 @@
background-color: white;
cursor: -webkit-grab;
cursor: grab;
border-width: 1px;
border-style: solid;
border-color: #bbb;
}
.react-flow__node.dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.react-flow__nodesselection {
z-index: 3;
@@ -110,6 +125,7 @@
pointer-events: none;
min-width: 5px;
min-height: 5px;
background-color: #333;
}
.react-flow__handle.connectable {
pointer-events: all;
@@ -180,11 +196,6 @@
stroke-dashoffset: 10;
}
}
.react-flow__node {
border-width: 1px;
border-style: solid;
border-color: #bbb;
}
.react-flow__node.selected,
.react-flow__node:focus,
.react-flow__node:focus-visible {
examples/nextjs/styles/rf-style.css
+29 -14
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,12 +203,35 @@
.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;
}
packages/core/package.json
+2 -2
View File
@@ -17,6 +17,8 @@
},
"dependencies": {
"@babel/runtime": "^7.18.0",
"@types/d3": "^7.4.0",
"@types/react": "^18.0.15",
"classcat": "^5.0.3",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
@@ -32,8 +34,6 @@
"nocss"
],
"devDependencies": {
"@types/d3": "^7.4.0",
"@types/react": "^18.0.15",
"autoprefixer": "^10.4.8",
"postcss": "^8.4.14",
"postcss-cli": "^10.0.0",
packages/core/src/styles/base.css
+5 -2
View File
@@ -1,11 +1,14 @@
/* these are very simple styles so that it doesnt look broken */
/* this will be exported as base.css and can be used for a basic styling */
@import './init.css';
.react-flow__handle {
background-color: #333;
}
.react-flow__node {
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
border-width: 1px;
border-style: solid;
border-color: #bbb;
packages/core/src/styles/style.css
+7 -7
View File
@@ -1,3 +1,4 @@
/* this gets exported as style.css and can be used for the default theming */
@import './init.css';
.react-flow__edge {
@@ -12,7 +13,10 @@
}
}
.react-flow__node {
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
padding: 10px;
border-radius: 3px;
width: 150px;
@@ -35,12 +39,12 @@
outline: none;
}
}
}
&-group {
.react-flow__node-group {
background: rgba(240, 240, 240, 0.25);
border-color: #1a192b;
}
}
.react-flow__nodesselection-rect,
.react-flow__selection {
@@ -59,8 +63,4 @@
background: #1a192b;
border: 1px solid white;
border-radius: 100%;
&.connectable {
cursor: crosshair;
}
}