@patternfly/react-styles 4.52.7 → 4.52.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/css/components/Topology/topology-components.css +133 -82
  3. package/css/components/Topology/topology-components.d.ts +23 -20
  4. package/css/components/Topology/topology-components.js +23 -20
  5. package/package.json +2 -2
  6. package/src/css/components/Topology/topology-components.css +133 -82
package/CHANGELOG.md CHANGED
@@ -3,6 +3,33 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 4.52.10 (2022-03-29)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+
11
+
12
+
13
+
14
+ ## 4.52.9 (2022-03-28)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **Select:** view more fixes ([#7107](https://github.com/patternfly/patternfly-react/issues/7107)) ([94f24f6](https://github.com/patternfly/patternfly-react/commit/94f24f65b043a2d3f3ae8fe7247aaf55b05987a7))
20
+
21
+
22
+
23
+
24
+
25
+ ## 4.52.8 (2022-03-28)
26
+
27
+ **Note:** Version bump only for package @patternfly/react-styles
28
+
29
+
30
+
31
+
32
+
6
33
  ## 4.52.7 (2022-03-28)
7
34
 
8
35
 
package/css/components/Topology/topology-components.css CHANGED
@@ -1,68 +1,8 @@
1
1
  :root {
2
- --pf-topology-create-connector-color: var(--pf-global--active-color--400);
3
- --pf-topology-create-connector-bg-color: var(--pf-global--BackgroundColor--light-100);
2
+ --pf-topology__create-connector-color: var(--pf-global--secondary-color--100);
4
3
  }
5
4
 
6
- .pf-topology-connector-arrow {
7
- stroke-width: 1;
8
- stroke: var(--edge--stroke);
9
- }
10
-
11
- .pf-topology-connector-arrow.pf-m-alt-connector-arrow {
12
- fill: var(--pf-global--palette--white);
13
- }
14
-
15
- .pf-topology-connector-cross {
16
- stroke-width: 1;
17
- stroke: var(--edge--stroke);
18
- }
19
- .pf-topology-connector-cross.pf-m-source {
20
- fill: var(--edge--stroke);
21
- }
22
-
23
- .pf-topology-connector-square, .pf-topology-connector-circle {
24
- stroke-width: 1;
25
- stroke: var(--edge--stroke);
26
- fill: var(--edge--stroke);
27
- }
28
-
29
- .pf-topology-connector-square.pf-m-source, .pf-topology-connector-circle.pf-m-source {
30
- fill: var(--pf-global--palette--white);
31
- }
32
-
33
- .pf-topology-connector-x {
34
- stroke-width: 1;
35
- stroke: var(--edge--stroke);
36
- }
37
-
38
- .pf-topology-default-create-connector {
39
- }
40
-
41
- .pf-topology-default-create-connector__create {
42
- }
43
-
44
- .pf-topology-default-create-connector__line {
45
- stroke: var(--pf-topology-create-connector-color);
46
- stroke-width: 2px;
47
- stroke-dasharray: 5px, 5px;
48
- }
49
-
50
- .pf-topology-default-create-connector__arrow {
51
- fill: var(--pf-topology-create-connector-color);
52
- stroke: var(--pf-topology-create-connector-color);
53
- }
54
-
55
- .pf-topology-default-create-connector__create__bg {
56
- stroke: var(--pf-topology-create-connector-color);
57
- fill: var(--pf-topology-create-connector-bg-color);
58
- stroke-width: 2px;
59
- }
60
-
61
- .pf-topology-default-create-connector__create__cursor {
62
- fill: var(--pf-topology-create-connector-color);
63
- }
64
-
65
- .pf-topology-visualization-surface {
5
+ .pf-topology__visualization-surface {
66
6
  height: 100%;
67
7
  flex-grow: 1;
68
8
  flex-shrink: 1;
@@ -70,26 +10,26 @@
70
10
  position: relative;
71
11
  }
72
12
 
73
- .pf-topology-visualization-surface__svg {
13
+ .pf-topology__visualization-surface__svg {
74
14
  display: block;
75
15
  width: 100%;
76
16
  height: 100%;
77
17
  }
78
18
 
79
- .pf-topology-visualization-surface__svg g:focus {
19
+ .pf-topology__visualization-surface__svg g:focus {
80
20
  outline: none;
81
21
  }
82
22
 
83
- .pf-topology-context-menu__c-dropdown__menu {
23
+ .pf-topology__context-menu__c-dropdown__menu {
84
24
  position: initial !important;
85
25
  }
86
26
 
87
- .pf-topology-context-sub-menu {
27
+ .pf-topology__context-sub-menu {
88
28
  position: relative;
89
29
  padding-right: var(--pf-global--spacer--lg) !important;
90
30
  }
91
31
 
92
- .pf-topology-context-sub-menu__arrow {
32
+ .pf-topology__context-sub-menu__arrow {
93
33
  position: absolute;
94
34
  right: var(--pf-global--spacer--xs);
95
35
  top: 50%;
@@ -250,8 +190,6 @@
250
190
  }
251
191
 
252
192
  .pf-topology__node__label__badge > rect {
253
- fill: var(--pf-global--palette--blue-50);
254
- stroke: var(--pf-global--palette--blue-300);
255
193
  stroke-width: 1px;
256
194
  }
257
195
 
@@ -260,6 +198,38 @@
260
198
  pointer-events: none;
261
199
  }
262
200
 
201
+ .pf-topology__node__label__icon > svg {
202
+ height: 100%;
203
+ width: 100%;
204
+ }
205
+
206
+ .pf-topology__node__label__icon__background {
207
+ fill: var(--pf-global--palette--white);
208
+ stroke-width: 1px;
209
+ stroke: var(--pf-global--palette--black-300);
210
+ }
211
+
212
+ .pf-topology__node.pf-m-selected .pf-topology__node__label__icon__background {
213
+ stroke-width: 2px;
214
+ stroke: var(--pf-global--active-color--100);
215
+ }
216
+
217
+ .pf-topology__node.pf-m-info .pf-topology__node__label__icon__background {
218
+ stroke: var(--pf-global--primary-color--light-100);
219
+ }
220
+
221
+ .pf-topology__node.pf-m-success .pf-topology__node__label__icon__background {
222
+ stroke: var(--pf-global--success-color--100);
223
+ }
224
+
225
+ .pf-topology__node.pf-m-warning .pf-topology__node__label__icon__background {
226
+ stroke: var(--pf-global--warning-color--100);
227
+ }
228
+
229
+ .pf-topology__node.pf-m-danger .pf-topology__node__label__icon__background {
230
+ stroke: var(--pf-global--danger-color--100);
231
+ }
232
+
263
233
  .pf-topology__node__separator {
264
234
  stroke: var(--pf-global--palette--black-300);
265
235
  stroke-width: 1;
@@ -282,10 +252,6 @@
282
252
  color: var(--pf-global--palette--white);
283
253
  }
284
254
 
285
- .pf-topology__node.pf-m-selected .pf-topology__node__icon .pf-topology__node__label__background {
286
- fill: var(--pf-global--palette--white);
287
- }
288
-
289
255
  .pf-topology__group {
290
256
  outline: none;
291
257
  }
@@ -380,6 +346,18 @@
380
346
  --edge--stroke: var(--pf-global--danger-color--100);
381
347
  }
382
348
 
349
+ .pf-topology__edge__background {
350
+ stroke-width: 10px;
351
+ stroke: transparent;
352
+ fill: none;
353
+ }
354
+ .pf-topology__edge.pf-m-selected .pf-topology__edge__background {
355
+ stroke: var(--pf-global--active-color--200);
356
+ }
357
+ .pf-topology__edge.pf-m-hover .pf-topology__edge__background {
358
+ stroke: var(--pf-global--BorderColor--100);
359
+ }
360
+
383
361
  .pf-topology__edge__link {
384
362
  stroke-width: var(--edge--stroke-width);
385
363
  stroke-dasharray: var(--edge--stroke-dasharray);
@@ -418,28 +396,32 @@
418
396
  stroke: var(--edge--active--stroke);
419
397
  }
420
398
 
421
- .pf-topology__edge.pf-m-selected .pf-topology__edge__link,
422
- .pf-topology__edge.pf-m-selected .pf-topology-connector-arrow {
399
+ .pf-topology__edge.pf-m-selected .pf-topology__connector-arrow {
423
400
  stroke: var(--edge--active--stroke);
401
+ fill: var(--edge--active--fill);
424
402
  }
425
403
 
426
404
  .pf-topology__edge.pf-m-hover .pf-topology__edge__link,
427
- .pf-topology__edge.pf-m-dragging .pf-topology__edge__link {
428
- fill: var(--edge--interactive--fill);
429
- stroke: var(--edge--interactive--stroke);
405
+ .pf-topology__edge.pf-m-hover .pf-topology__connector-arrow {
406
+ fill: var(--pf-global--Color--100);
407
+ stroke: var(--pf-global--Color--100);
430
408
  }
431
- .pf-topology__edge.pf-m-hover .pf-topology__edge__link,
409
+
432
410
  .pf-topology__edge.pf-m-dragging .pf-topology__edge__link,
433
- .pf-topology__edge.pf-m-hover .pf-topology-connector-arrow,
434
- .pf-topology__edge.pf-m-dragging .pf-topology-connector-arrow {
411
+ .pf-topology__edge.pf-m-dragging .pf-topology__connector-arrow {
435
412
  stroke: var(--edge--interactive--stroke);
413
+ fill: var(--edge--interactive--fill);
436
414
  }
437
415
 
438
- .pf-topology__edge .pf-topology-connector-arrow {
416
+ .pf-topology__edge .pf-topology__connector-arrow {
439
417
  cursor: var(--edge__arrow--cursor);
440
418
  stroke: var(--edge--stroke);
441
419
  }
442
420
 
421
+ .pf-topology__edge .pf-topology__connector-arrow.pf-m-draggable {
422
+ cursor: pointer;
423
+ }
424
+
443
425
  .pf-topology__edge__tag__background {
444
426
  fill: var(--edge--stroke);
445
427
  stroke-width: 0;
@@ -473,3 +455,72 @@
473
455
  fill: var(--pf-global--danger-color--100);
474
456
  }
475
457
 
458
+ .pf-topology__connector-arrow {
459
+ stroke-width: 1;
460
+ stroke: var(--edge--stroke);
461
+ }
462
+
463
+ .pf-topology__connector-arrow.pf-m-alt-connector-arrow {
464
+ fill: var(--pf-global--palette--white);
465
+ }
466
+
467
+ .pf-topology__connector-cross {
468
+ stroke-width: 1;
469
+ stroke: var(--edge--stroke);
470
+ }
471
+ .pf-topology__connector-cross.pf-m-source {
472
+ fill: var(--edge--stroke);
473
+ }
474
+
475
+ .pf-topology__connector-square, .pf-topology__connector-circle {
476
+ stroke-width: 1;
477
+ stroke: var(--edge--stroke);
478
+ fill: var(--edge--stroke);
479
+ }
480
+
481
+ .pf-topology__connector-square.pf-m-source, .pf-topology__connector-circle.pf-m-source {
482
+ fill: var(--pf-global--palette--white);
483
+ }
484
+
485
+ .pf-topology__connector-x {
486
+ stroke-width: 1;
487
+ stroke: var(--edge--stroke);
488
+ }
489
+
490
+ .pf-topology__create-connector {
491
+ cursor: pointer;
492
+ }
493
+
494
+ .pf-topology__create-connector__line {
495
+ stroke: var(--pf-topology__create-connector-color);
496
+ stroke-width: 2px;
497
+ stroke-dasharray: 3px, 3px;
498
+ }
499
+
500
+ .pf-topology__create-connector__arrow {
501
+ fill: var(--pf-global--Color--light-200);
502
+ stroke: var(--pf-topology__create-connector-color);
503
+ }
504
+
505
+ .pf-topology__create-connector.pf-m-hover .pf-topology__create-connector__line {
506
+ stroke: var(--pf-global--Color--100);
507
+ }
508
+
509
+ .pf-topology__create-connector.pf-m-hover .pf-topology__create-connector__arrow {
510
+ fill: var(--pf-global--Color--100);
511
+ stroke: var(--pf-global--Color--100);
512
+ }
513
+
514
+ .pf-topology__create-connector__create {
515
+ }
516
+
517
+ .pf-topology__create-connector__create__bg {
518
+ stroke-width: 10px;
519
+ stroke: transparent;
520
+ fill-opacity: 0;
521
+ }
522
+
523
+ .pf-topology__create-connector__create__cursor {
524
+ fill: var(--pf-topology__create-connector-color);
525
+ }
526
+
package/css/components/Topology/topology-components.d.ts CHANGED
@@ -1,8 +1,6 @@
1
1
  import './topology-components.css';
2
2
  declare const _default: {
3
3
  "modifiers": {
4
- "altConnectorArrow": "pf-m-alt-connector-arrow",
5
- "source": "pf-m-source",
6
4
  "disabled": "pf-m-disabled",
7
5
  "info": "pf-m-info",
8
6
  "success": "pf-m-success",
@@ -18,23 +16,27 @@ declare const _default: {
18
16
  "dashed": "pf-m-dashed",
19
17
  "dashedMd": "pf-m-dashed-md",
20
18
  "dashedLg": "pf-m-dashed-lg",
21
- "dashedXl": "pf-m-dashed-xl"
19
+ "dashedXl": "pf-m-dashed-xl",
20
+ "draggable": "pf-m-draggable",
21
+ "altConnectorArrow": "pf-m-alt-connector-arrow",
22
+ "source": "pf-m-source"
22
23
  },
23
- "topologyConnectorArrow": "pf-topology-connector-arrow",
24
- "topologyConnectorCircle": "pf-topology-connector-circle",
25
- "topologyConnectorCross": "pf-topology-connector-cross",
26
- "topologyConnectorSquare": "pf-topology-connector-square",
27
- "topologyConnectorX": "pf-topology-connector-x",
28
- "topologyContextMenuCDropdownMenu": "pf-topology-context-menu__c-dropdown__menu",
29
- "topologyContextSubMenu": "pf-topology-context-sub-menu",
30
- "topologyContextSubMenuArrow": "pf-topology-context-sub-menu__arrow",
31
- "topologyDefaultCreateConnector": "pf-topology-default-create-connector",
32
- "topologyDefaultCreateConnectorArrow": "pf-topology-default-create-connector__arrow",
33
- "topologyDefaultCreateConnectorCreate": "pf-topology-default-create-connector__create",
34
- "topologyDefaultCreateConnectorCreateBg": "pf-topology-default-create-connector__create__bg",
35
- "topologyDefaultCreateConnectorCreateCursor": "pf-topology-default-create-connector__create__cursor",
36
- "topologyDefaultCreateConnectorLine": "pf-topology-default-create-connector__line",
24
+ "topologyConnectorArrow": "pf-topology__connector-arrow",
25
+ "topologyConnectorCircle": "pf-topology__connector-circle",
26
+ "topologyConnectorCross": "pf-topology__connector-cross",
27
+ "topologyConnectorSquare": "pf-topology__connector-square",
28
+ "topologyConnectorX": "pf-topology__connector-x",
29
+ "topologyContextMenuCDropdownMenu": "pf-topology__context-menu__c-dropdown__menu",
30
+ "topologyContextSubMenu": "pf-topology__context-sub-menu",
31
+ "topologyContextSubMenuArrow": "pf-topology__context-sub-menu__arrow",
32
+ "topologyCreateConnector": "pf-topology__create-connector",
33
+ "topologyCreateConnectorArrow": "pf-topology__create-connector__arrow",
34
+ "topologyCreateConnectorCreate": "pf-topology__create-connector__create",
35
+ "topologyCreateConnectorCreateBg": "pf-topology__create-connector__create__bg",
36
+ "topologyCreateConnectorCreateCursor": "pf-topology__create-connector__create__cursor",
37
+ "topologyCreateConnectorLine": "pf-topology__create-connector__line",
37
38
  "topologyEdge": "pf-topology__edge",
39
+ "topologyEdgeBackground": "pf-topology__edge__background",
38
40
  "topologyEdgeLink": "pf-topology__edge__link",
39
41
  "topologyEdgeTag": "pf-topology__edge__tag",
40
42
  "topologyEdgeTagBackground": "pf-topology__edge__tag__background",
@@ -51,12 +53,13 @@ declare const _default: {
51
53
  "topologyNodeDecoratorBg": "pf-topology__node__decorator__bg",
52
54
  "topologyNodeDecoratorIcon": "pf-topology__node__decorator__icon",
53
55
  "topologyNodeDecoratorStatus": "pf-topology__node__decorator__status",
54
- "topologyNodeIcon": "pf-topology__node__icon",
55
56
  "topologyNodeLabel": "pf-topology__node__label",
56
57
  "topologyNodeLabelBackground": "pf-topology__node__label__background",
57
58
  "topologyNodeLabelBadge": "pf-topology__node__label__badge",
59
+ "topologyNodeLabelIcon": "pf-topology__node__label__icon",
60
+ "topologyNodeLabelIconBackground": "pf-topology__node__label__icon__background",
58
61
  "topologyNodeSeparator": "pf-topology__node__separator",
59
- "topologyVisualizationSurface": "pf-topology-visualization-surface",
60
- "topologyVisualizationSurfaceSvg": "pf-topology-visualization-surface__svg"
62
+ "topologyVisualizationSurface": "pf-topology__visualization-surface",
63
+ "topologyVisualizationSurfaceSvg": "pf-topology__visualization-surface__svg"
61
64
  };
62
65
  export default _default;
package/css/components/Topology/topology-components.js CHANGED
@@ -3,8 +3,6 @@ exports.__esModule = true;
3
3
  require('./topology-components.css');
4
4
  exports.default = {
5
5
  "modifiers": {
6
- "altConnectorArrow": "pf-m-alt-connector-arrow",
7
- "source": "pf-m-source",
8
6
  "disabled": "pf-m-disabled",
9
7
  "info": "pf-m-info",
10
8
  "success": "pf-m-success",
@@ -20,23 +18,27 @@ exports.default = {
20
18
  "dashed": "pf-m-dashed",
21
19
  "dashedMd": "pf-m-dashed-md",
22
20
  "dashedLg": "pf-m-dashed-lg",
23
- "dashedXl": "pf-m-dashed-xl"
21
+ "dashedXl": "pf-m-dashed-xl",
22
+ "draggable": "pf-m-draggable",
23
+ "altConnectorArrow": "pf-m-alt-connector-arrow",
24
+ "source": "pf-m-source"
24
25
  },
25
- "topologyConnectorArrow": "pf-topology-connector-arrow",
26
- "topologyConnectorCircle": "pf-topology-connector-circle",
27
- "topologyConnectorCross": "pf-topology-connector-cross",
28
- "topologyConnectorSquare": "pf-topology-connector-square",
29
- "topologyConnectorX": "pf-topology-connector-x",
30
- "topologyContextMenuCDropdownMenu": "pf-topology-context-menu__c-dropdown__menu",
31
- "topologyContextSubMenu": "pf-topology-context-sub-menu",
32
- "topologyContextSubMenuArrow": "pf-topology-context-sub-menu__arrow",
33
- "topologyDefaultCreateConnector": "pf-topology-default-create-connector",
34
- "topologyDefaultCreateConnectorArrow": "pf-topology-default-create-connector__arrow",
35
- "topologyDefaultCreateConnectorCreate": "pf-topology-default-create-connector__create",
36
- "topologyDefaultCreateConnectorCreateBg": "pf-topology-default-create-connector__create__bg",
37
- "topologyDefaultCreateConnectorCreateCursor": "pf-topology-default-create-connector__create__cursor",
38
- "topologyDefaultCreateConnectorLine": "pf-topology-default-create-connector__line",
26
+ "topologyConnectorArrow": "pf-topology__connector-arrow",
27
+ "topologyConnectorCircle": "pf-topology__connector-circle",
28
+ "topologyConnectorCross": "pf-topology__connector-cross",
29
+ "topologyConnectorSquare": "pf-topology__connector-square",
30
+ "topologyConnectorX": "pf-topology__connector-x",
31
+ "topologyContextMenuCDropdownMenu": "pf-topology__context-menu__c-dropdown__menu",
32
+ "topologyContextSubMenu": "pf-topology__context-sub-menu",
33
+ "topologyContextSubMenuArrow": "pf-topology__context-sub-menu__arrow",
34
+ "topologyCreateConnector": "pf-topology__create-connector",
35
+ "topologyCreateConnectorArrow": "pf-topology__create-connector__arrow",
36
+ "topologyCreateConnectorCreate": "pf-topology__create-connector__create",
37
+ "topologyCreateConnectorCreateBg": "pf-topology__create-connector__create__bg",
38
+ "topologyCreateConnectorCreateCursor": "pf-topology__create-connector__create__cursor",
39
+ "topologyCreateConnectorLine": "pf-topology__create-connector__line",
39
40
  "topologyEdge": "pf-topology__edge",
41
+ "topologyEdgeBackground": "pf-topology__edge__background",
40
42
  "topologyEdgeLink": "pf-topology__edge__link",
41
43
  "topologyEdgeTag": "pf-topology__edge__tag",
42
44
  "topologyEdgeTagBackground": "pf-topology__edge__tag__background",
@@ -53,11 +55,12 @@ exports.default = {
53
55
  "topologyNodeDecoratorBg": "pf-topology__node__decorator__bg",
54
56
  "topologyNodeDecoratorIcon": "pf-topology__node__decorator__icon",
55
57
  "topologyNodeDecoratorStatus": "pf-topology__node__decorator__status",
56
- "topologyNodeIcon": "pf-topology__node__icon",
57
58
  "topologyNodeLabel": "pf-topology__node__label",
58
59
  "topologyNodeLabelBackground": "pf-topology__node__label__background",
59
60
  "topologyNodeLabelBadge": "pf-topology__node__label__badge",
61
+ "topologyNodeLabelIcon": "pf-topology__node__label__icon",
62
+ "topologyNodeLabelIconBackground": "pf-topology__node__label__icon__background",
60
63
  "topologyNodeSeparator": "pf-topology__node__separator",
61
- "topologyVisualizationSurface": "pf-topology-visualization-surface",
62
- "topologyVisualizationSurfaceSvg": "pf-topology-visualization-surface__svg"
64
+ "topologyVisualizationSurface": "pf-topology__visualization-surface",
65
+ "topologyVisualizationSurfaceSvg": "pf-topology__visualization-surface__svg"
63
66
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "4.52.7",
3
+ "version": "4.52.10",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -29,5 +29,5 @@
29
29
  "typescript": "^4.0.0"
30
30
  },
31
31
  "license": "MIT",
32
- "gitHead": "aa38935ea3b57607894dcc53696234838dc712d5"
32
+ "gitHead": "a1d1e3253b278b497301e5c3e967afa54d5cfa7b"
33
33
  }
package/src/css/components/Topology/topology-components.css CHANGED
@@ -1,68 +1,8 @@
1
1
  :root {
2
- --pf-topology-create-connector-color: var(--pf-global--active-color--400);
3
- --pf-topology-create-connector-bg-color: var(--pf-global--BackgroundColor--light-100);
2
+ --pf-topology__create-connector-color: var(--pf-global--secondary-color--100);
4
3
  }
5
4
 
6
- .pf-topology-connector-arrow {
7
- stroke-width: 1;
8
- stroke: var(--edge--stroke);
9
- }
10
-
11
- .pf-topology-connector-arrow.pf-m-alt-connector-arrow {
12
- fill: var(--pf-global--palette--white);
13
- }
14
-
15
- .pf-topology-connector-cross {
16
- stroke-width: 1;
17
- stroke: var(--edge--stroke);
18
- }
19
- .pf-topology-connector-cross.pf-m-source {
20
- fill: var(--edge--stroke);
21
- }
22
-
23
- .pf-topology-connector-square, .pf-topology-connector-circle {
24
- stroke-width: 1;
25
- stroke: var(--edge--stroke);
26
- fill: var(--edge--stroke);
27
- }
28
-
29
- .pf-topology-connector-square.pf-m-source, .pf-topology-connector-circle.pf-m-source {
30
- fill: var(--pf-global--palette--white);
31
- }
32
-
33
- .pf-topology-connector-x {
34
- stroke-width: 1;
35
- stroke: var(--edge--stroke);
36
- }
37
-
38
- .pf-topology-default-create-connector {
39
- }
40
-
41
- .pf-topology-default-create-connector__create {
42
- }
43
-
44
- .pf-topology-default-create-connector__line {
45
- stroke: var(--pf-topology-create-connector-color);
46
- stroke-width: 2px;
47
- stroke-dasharray: 5px, 5px;
48
- }
49
-
50
- .pf-topology-default-create-connector__arrow {
51
- fill: var(--pf-topology-create-connector-color);
52
- stroke: var(--pf-topology-create-connector-color);
53
- }
54
-
55
- .pf-topology-default-create-connector__create__bg {
56
- stroke: var(--pf-topology-create-connector-color);
57
- fill: var(--pf-topology-create-connector-bg-color);
58
- stroke-width: 2px;
59
- }
60
-
61
- .pf-topology-default-create-connector__create__cursor {
62
- fill: var(--pf-topology-create-connector-color);
63
- }
64
-
65
- .pf-topology-visualization-surface {
5
+ .pf-topology__visualization-surface {
66
6
  height: 100%;
67
7
  flex-grow: 1;
68
8
  flex-shrink: 1;
@@ -70,26 +10,26 @@
70
10
  position: relative;
71
11
  }
72
12
 
73
- .pf-topology-visualization-surface__svg {
13
+ .pf-topology__visualization-surface__svg {
74
14
  display: block;
75
15
  width: 100%;
76
16
  height: 100%;
77
17
  }
78
18
 
79
- .pf-topology-visualization-surface__svg g:focus {
19
+ .pf-topology__visualization-surface__svg g:focus {
80
20
  outline: none;
81
21
  }
82
22
 
83
- .pf-topology-context-menu__c-dropdown__menu {
23
+ .pf-topology__context-menu__c-dropdown__menu {
84
24
  position: initial !important;
85
25
  }
86
26
 
87
- .pf-topology-context-sub-menu {
27
+ .pf-topology__context-sub-menu {
88
28
  position: relative;
89
29
  padding-right: var(--pf-global--spacer--lg) !important;
90
30
  }
91
31
 
92
- .pf-topology-context-sub-menu__arrow {
32
+ .pf-topology__context-sub-menu__arrow {
93
33
  position: absolute;
94
34
  right: var(--pf-global--spacer--xs);
95
35
  top: 50%;
@@ -250,8 +190,6 @@
250
190
  }
251
191
 
252
192
  .pf-topology__node__label__badge > rect {
253
- fill: var(--pf-global--palette--blue-50);
254
- stroke: var(--pf-global--palette--blue-300);
255
193
  stroke-width: 1px;
256
194
  }
257
195
 
@@ -260,6 +198,38 @@
260
198
  pointer-events: none;
261
199
  }
262
200
 
201
+ .pf-topology__node__label__icon > svg {
202
+ height: 100%;
203
+ width: 100%;
204
+ }
205
+
206
+ .pf-topology__node__label__icon__background {
207
+ fill: var(--pf-global--palette--white);
208
+ stroke-width: 1px;
209
+ stroke: var(--pf-global--palette--black-300);
210
+ }
211
+
212
+ .pf-topology__node.pf-m-selected .pf-topology__node__label__icon__background {
213
+ stroke-width: 2px;
214
+ stroke: var(--pf-global--active-color--100);
215
+ }
216
+
217
+ .pf-topology__node.pf-m-info .pf-topology__node__label__icon__background {
218
+ stroke: var(--pf-global--primary-color--light-100);
219
+ }
220
+
221
+ .pf-topology__node.pf-m-success .pf-topology__node__label__icon__background {
222
+ stroke: var(--pf-global--success-color--100);
223
+ }
224
+
225
+ .pf-topology__node.pf-m-warning .pf-topology__node__label__icon__background {
226
+ stroke: var(--pf-global--warning-color--100);
227
+ }
228
+
229
+ .pf-topology__node.pf-m-danger .pf-topology__node__label__icon__background {
230
+ stroke: var(--pf-global--danger-color--100);
231
+ }
232
+
263
233
  .pf-topology__node__separator {
264
234
  stroke: var(--pf-global--palette--black-300);
265
235
  stroke-width: 1;
@@ -282,10 +252,6 @@
282
252
  color: var(--pf-global--palette--white);
283
253
  }
284
254
 
285
- .pf-topology__node.pf-m-selected .pf-topology__node__icon .pf-topology__node__label__background {
286
- fill: var(--pf-global--palette--white);
287
- }
288
-
289
255
  .pf-topology__group {
290
256
  outline: none;
291
257
  }
@@ -380,6 +346,18 @@
380
346
  --edge--stroke: var(--pf-global--danger-color--100);
381
347
  }
382
348
 
349
+ .pf-topology__edge__background {
350
+ stroke-width: 10px;
351
+ stroke: transparent;
352
+ fill: none;
353
+ }
354
+ .pf-topology__edge.pf-m-selected .pf-topology__edge__background {
355
+ stroke: var(--pf-global--active-color--200);
356
+ }
357
+ .pf-topology__edge.pf-m-hover .pf-topology__edge__background {
358
+ stroke: var(--pf-global--BorderColor--100);
359
+ }
360
+
383
361
  .pf-topology__edge__link {
384
362
  stroke-width: var(--edge--stroke-width);
385
363
  stroke-dasharray: var(--edge--stroke-dasharray);
@@ -418,28 +396,32 @@
418
396
  stroke: var(--edge--active--stroke);
419
397
  }
420
398
 
421
- .pf-topology__edge.pf-m-selected .pf-topology__edge__link,
422
- .pf-topology__edge.pf-m-selected .pf-topology-connector-arrow {
399
+ .pf-topology__edge.pf-m-selected .pf-topology__connector-arrow {
423
400
  stroke: var(--edge--active--stroke);
401
+ fill: var(--edge--active--fill);
424
402
  }
425
403
 
426
404
  .pf-topology__edge.pf-m-hover .pf-topology__edge__link,
427
- .pf-topology__edge.pf-m-dragging .pf-topology__edge__link {
428
- fill: var(--edge--interactive--fill);
429
- stroke: var(--edge--interactive--stroke);
405
+ .pf-topology__edge.pf-m-hover .pf-topology__connector-arrow {
406
+ fill: var(--pf-global--Color--100);
407
+ stroke: var(--pf-global--Color--100);
430
408
  }
431
- .pf-topology__edge.pf-m-hover .pf-topology__edge__link,
409
+
432
410
  .pf-topology__edge.pf-m-dragging .pf-topology__edge__link,
433
- .pf-topology__edge.pf-m-hover .pf-topology-connector-arrow,
434
- .pf-topology__edge.pf-m-dragging .pf-topology-connector-arrow {
411
+ .pf-topology__edge.pf-m-dragging .pf-topology__connector-arrow {
435
412
  stroke: var(--edge--interactive--stroke);
413
+ fill: var(--edge--interactive--fill);
436
414
  }
437
415
 
438
- .pf-topology__edge .pf-topology-connector-arrow {
416
+ .pf-topology__edge .pf-topology__connector-arrow {
439
417
  cursor: var(--edge__arrow--cursor);
440
418
  stroke: var(--edge--stroke);
441
419
  }
442
420
 
421
+ .pf-topology__edge .pf-topology__connector-arrow.pf-m-draggable {
422
+ cursor: pointer;
423
+ }
424
+
443
425
  .pf-topology__edge__tag__background {
444
426
  fill: var(--edge--stroke);
445
427
  stroke-width: 0;
@@ -473,3 +455,72 @@
473
455
  fill: var(--pf-global--danger-color--100);
474
456
  }
475
457
 
458
+ .pf-topology__connector-arrow {
459
+ stroke-width: 1;
460
+ stroke: var(--edge--stroke);
461
+ }
462
+
463
+ .pf-topology__connector-arrow.pf-m-alt-connector-arrow {
464
+ fill: var(--pf-global--palette--white);
465
+ }
466
+
467
+ .pf-topology__connector-cross {
468
+ stroke-width: 1;
469
+ stroke: var(--edge--stroke);
470
+ }
471
+ .pf-topology__connector-cross.pf-m-source {
472
+ fill: var(--edge--stroke);
473
+ }
474
+
475
+ .pf-topology__connector-square, .pf-topology__connector-circle {
476
+ stroke-width: 1;
477
+ stroke: var(--edge--stroke);
478
+ fill: var(--edge--stroke);
479
+ }
480
+
481
+ .pf-topology__connector-square.pf-m-source, .pf-topology__connector-circle.pf-m-source {
482
+ fill: var(--pf-global--palette--white);
483
+ }
484
+
485
+ .pf-topology__connector-x {
486
+ stroke-width: 1;
487
+ stroke: var(--edge--stroke);
488
+ }
489
+
490
+ .pf-topology__create-connector {
491
+ cursor: pointer;
492
+ }
493
+
494
+ .pf-topology__create-connector__line {
495
+ stroke: var(--pf-topology__create-connector-color);
496
+ stroke-width: 2px;
497
+ stroke-dasharray: 3px, 3px;
498
+ }
499
+
500
+ .pf-topology__create-connector__arrow {
501
+ fill: var(--pf-global--Color--light-200);
502
+ stroke: var(--pf-topology__create-connector-color);
503
+ }
504
+
505
+ .pf-topology__create-connector.pf-m-hover .pf-topology__create-connector__line {
506
+ stroke: var(--pf-global--Color--100);
507
+ }
508
+
509
+ .pf-topology__create-connector.pf-m-hover .pf-topology__create-connector__arrow {
510
+ fill: var(--pf-global--Color--100);
511
+ stroke: var(--pf-global--Color--100);
512
+ }
513
+
514
+ .pf-topology__create-connector__create {
515
+ }
516
+
517
+ .pf-topology__create-connector__create__bg {
518
+ stroke-width: 10px;
519
+ stroke: transparent;
520
+ fill-opacity: 0;
521
+ }
522
+
523
+ .pf-topology__create-connector__create__cursor {
524
+ fill: var(--pf-topology__create-connector-color);
525
+ }
526
+