diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js index 14ebe807..08b42cc3 100644 --- a/dist/ReactGraph.js +++ b/dist/ReactGraph.js @@ -33019,7 +33019,7 @@ } } - var css = ".react-graph {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-graph__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-graph__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #333;\n stroke-width: 2;\n pointer-events: all;\n}\n\n.react-graph__edge.selected {\n stroke: #ff5050;\n}\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 2;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n}\n\n.react-graph__node.selected > * {\n box-shadow: 0 0 0 2px #000;\n}\n\n.react-graph__handle {\n position: absolute;\n width: 12px;\n height: 12px;\n transform: translate(-50%, -50%);\n background: #222;\n left: 50%;\n border-radius: 50%;\n}\n\n.react-graph__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}"; + var css = ".react-graph {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-graph__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-graph__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #333;\n stroke-width: 2;\n pointer-events: all;\n}\n\n.react-graph__edge.selected {\n stroke: #ff5050;\n }\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 2;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n }\n\n.react-graph__node.selected > * {\n box-shadow: 0 0 0 2px #000;\n }\n\n.react-graph__handle {\n position: absolute;\n width: 12px;\n height: 12px;\n transform: translate(-50%, -50%);\n background: #222;\n left: 50%;\n border-radius: 50%;\n}\n\n.react-graph__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n }"; styleInject(css); var ReactGraph = diff --git a/package-lock.json b/package-lock.json index d7f505d3..2a49ab3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6507,6 +6507,16 @@ } } }, + "postcss-nested": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.1.2.tgz", + "integrity": "sha512-9bQFr2TezohU3KRSu9f6sfecXmf/x6RXDedl8CHF6fyuyVW7UqgNMRdWMHZQWuFY6Xqs2NYk+Fj4Z4vSOf7PQg==", + "dev": true, + "requires": { + "postcss": "^7.0.14", + "postcss-selector-parser": "^5.0.0" + } + }, "postcss-normalize-charset": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz", diff --git a/package.json b/package.json index 8566c6c5..f5d25c7a 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "babel-preset-react-app": "^9.0.0", "husky": "^3.0.0", "parcel-bundler": "^1.12.3", + "postcss-nested": "^4.1.2", "react-dom": "^16.8.6", "rollup": "^1.16.2", "rollup-plugin-babel": "^4.3.3", diff --git a/rollup.config.js b/rollup.config.js index b3d4c3aa..843d48f0 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -2,6 +2,7 @@ import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import babel from 'rollup-plugin-babel'; import postcss from 'rollup-plugin-postcss'; +import postCssNested from 'postcss-nested'; import autoprefixer from 'autoprefixer'; import bundleSize from 'rollup-plugin-bundle-size'; @@ -28,7 +29,10 @@ export default [{ plugins: [ bundleSize(), postcss({ - plugins: [autoprefixer()] + plugins: [ + autoprefixer(), + postCssNested() + ] }), resolve(), babel({ diff --git a/src/style.css b/src/style.css index 7923b298..0213e9be 100644 --- a/src/style.css +++ b/src/style.css @@ -50,10 +50,10 @@ stroke: #333; stroke-width: 2; pointer-events: all; -} -.react-graph__edge.selected { - stroke: #ff5050; + &.selected { + stroke: #ff5050; + } } .react-graph__nodes { @@ -75,14 +75,14 @@ user-select: none; pointer-events: all; transform-origin: 0 0; -} -.react-graph__node:hover > * { - box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08); -} + &:hover > * { + box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08); + } -.react-graph__node.selected > * { - box-shadow: 0 0 0 2px #000; + &.selected > * { + box-shadow: 0 0 0 2px #000; + } } .react-graph__handle { @@ -104,10 +104,10 @@ left: 0; transform-origin: left top; pointer-events: none; -} -.react-graph__nodesselection-rect { - position: absolute; - background: rgba(0, 89, 220, 0.08); - border: 1px dotted rgba(0, 89, 220, 0.8); + &-rect { + position: absolute; + background: rgba(0, 89, 220, 0.08); + border: 1px dotted rgba(0, 89, 220, 0.8); + } } \ No newline at end of file