@patternfly/react-styles 4.47.1 → 4.48.2

package/src/css/components/Topology/topology-components.css

@@ -5,7 +5,40 @@
 
 .pf-topology-connector-arrow {
   stroke-width: 1;
-  stroke: var(--pf-global--BackgroundColor--dark-200);
+  stroke: var(--edge--stroke);
+}
+
+.pf-topology-connector-arrow.pf-m-alt-connector-arrow {
+  fill: var(--pf-global--palette--white);
+}
+
+.pf-topology-connector-cross {
+  stroke-width: 1;
+  stroke: var(--edge--stroke);
+}
+.pf-topology-connector-cross.pf-m-source {
+  fill: var(--edge--stroke);
+}
+
+.pf-topology-connector-square, .pf-topology-connector-circle {
+  stroke-width: 1;
+  stroke: var(--edge--stroke);
+  fill: var(--edge--stroke);
+}
+
+.pf-topology-connector-square.pf-m-source, .pf-topology-connector-circle.pf-m-source {
+  fill: var(--pf-global--palette--white);
+}
+
+.pf-topology-connector-x {
+  stroke-width: 1;
+  stroke: var(--edge--stroke);
+}
+
+.pf-topology-default-create-connector {
+}
+
+.pf-topology-default-create-connector__create {
 }
 
 .pf-topology-default-create-connector__line {
@@ -43,6 +76,10 @@
   height: 100%;
 }
 
+.pf-topology-visualization-surface__svg g:focus {
+  outline: none;
+}
+
 .pf-topology-context-menu__c-dropdown__menu {
   position: initial !important;
 }
@@ -58,3 +95,359 @@
   top: 50%;
   transform: translateY(-50%);
 }
+
+.pf-topology__node {
+  outline: none;
+}
+
+.pf-topology__node__background {
+  fill: var(--pf-global--palette--white);
+  stroke-width: 1px;
+  stroke: var(--pf-global--palette--black-300);
+}
+
+.pf-topology__node__background.pf-m-disabled {
+  fill: var(--pf-global--BackgroundColor--200);
+}
+
+.pf-topology__node.pf-m-dragging .pf-topology__node__background {
+  cursor: grab;
+}
+
+.pf-topology__node.pf-m-selected .pf-topology__node__background {
+  stroke-width: 2px;
+  stroke: var(--pf-global--active-color--100);
+}
+
+.pf-topology__node.pf-m-info .pf-topology__node__background {
+  stroke: var(--pf-global--primary-color--light-100);
+}
+
+.pf-topology__node.pf-m-success .pf-topology__node__background {
+  stroke: var(--pf-global--success-color--100);
+}
+
+.pf-topology__node.pf-m-warning .pf-topology__node__background {
+  stroke: var(--pf-global--warning-color--100);
+}
+
+.pf-topology__node.pf-m-danger .pf-topology__node__background {
+  stroke: var(--pf-global--danger-color--100);
+}
+
+.pf-topology__node.pf-m-drop-target .pf-topology__node__background {
+}
+
+.pf-topology__node__decorator {
+  color: var(--pf-global--Color--200);
+  transition: color 0.2s ease;
+  outline: none;
+}
+
+.pf-topology__node__decorator__bg {
+  fill: var(--pf-global--BackgroundColor--light-100);
+}
+
+.pf-topology__node__decorator__icon {
+  font-size: var(--pf-global--icon--FontSize--sm);
+}
+
+.pf-topology__node__decorator__status .pf-m-info {
+  color: var(--pf-global--primary-color--light-100);
+}
+.pf-topology__node__decorator__status .pf-m-danger {
+  color: var(--pf-global--danger-color--100);
+}
+.pf-topology__node__decorator__status .pf-m-warning {
+  color: var(--pf-global--warning-color--100);
+}
+.pf-topology__node__decorator__status .pf-m-success {
+  color: var(--pf-global--success-color--100);
+}
+
+.pf-topology__node__label > text {
+  fill: var(--pf-global--palette--black-1000);
+  font-size: var(--pf-global--FontSize--sm);
+  pointer-events: none;
+}
+
+.pf-topology__node__label > text.pf-m-secondary {
+  fill: var(--pf-global--secondary-color--100);
+  font-size: var(--pf-global--FontSize--xs);
+}
+
+.pf-topology__node.pf-m-selected .pf-topology__node__label > text {
+  fill: var(--pf-global--palette--white);
+}
+
+.pf-topology__node__label__background {
+  fill: var(--pf-global--palette--white);
+  stroke-width: 1px;
+  stroke: var(--pf-global--palette--black-300);
+}
+
+.pf-topology__node.pf-m-selected .pf-topology__node__label__background {
+  stroke-width: 2px;
+  stroke: var(--pf-global--active-color--100);
+}
+
+.pf-topology__node.pf-m-info .pf-topology__node__label__background {
+  stroke: var(--pf-global--primary-color--light-100);
+}
+
+.pf-topology__node.pf-m-success .pf-topology__node__label__background {
+  stroke: var(--pf-global--success-color--100);
+}
+
+.pf-topology__node.pf-m-warning .pf-topology__node__label__background {
+  stroke: var(--pf-global--warning-color--100);
+}
+
+.pf-topology__node.pf-m-danger .pf-topology__node__label__background {
+  stroke: var(--pf-global--danger-color--100);
+}
+
+.pf-topology__node.pf-m-selected .pf-topology__node__label__background {
+  fill: var(--pf-global--active-color--100);
+}
+
+.pf-topology__node.pf-m-selected.pf-m-info .pf-topology__node__label__background {
+  fill: var(--pf-global--primary-color--light-100);
+}
+
+.pf-topology__node.pf-m-selected.pf-m-danger .pf-topology__node__label__background {
+  fill: var(--pf-global--danger-color--100);
+}
+
+.pf-topology__node.pf-m-selected.pf-m-warning .pf-topology__node__label__background {
+  fill: var(--pf-global--warning-color--100);
+}
+
+.pf-topology__node.pf-m-selected.pf-m-success .pf-topology__node__label__background {
+  fill: var(--pf-global--success-color--100);
+}
+
+.pf-topology__node__label__badge > rect {
+  fill: var(--pf-global--palette--blue-50);
+  stroke: var(--pf-global--palette--blue-300);
+  stroke-width: 1px;
+}
+
+.pf-topology__node__label__badge > text {
+  font-size: var(--pf-global--FontSize--xs);
+  pointer-events: none;
+}
+
+.pf-topology__node__separator {
+  stroke: var(--pf-global--palette--black-300);
+  stroke-width: 1;
+}
+
+.pf-topology__node__action-icon {
+  cursor: pointer;
+}
+
+.pf-topology__node__action-icon__background {
+  stroke-width: 0;
+  fill: transparent;
+}
+
+.pf-topology__node__action-icon__icon {
+  color: var(--pf-global--palette--black-1000);
+}
+
+.pf-topology__group.pf-m-selected .pf-topology__node__action-icon__icon {
+  color: var(--pf-global--palette--white);
+}
+
+.pf-topology__node.pf-m-selected .pf-topology__node__icon .pf-topology__node__label__background {
+  fill: var(--pf-global--palette--white);
+}
+
+.pf-topology__group {
+  outline: none;
+}
+
+.pf-topology__group__background {
+  fill: var(--pf-global--BackgroundColor--200);
+  stroke: var(--pf-global--palette--white);
+  stroke-width: 5px;
+}
+
+.pf-topology__group.pf-m-alt-group .pf-topology__group__background {
+  fill: var(--pf-global--palette--white);
+}
+
+.pf-topology__group.pf-m-selected .pf-topology__group__background {
+  fill: var(--pf-global--palette--blue-50);
+  stroke: var(--pf-global--active-color--100);
+}
+
+.pf-topology__group.pf-m-hover .pf-topology__group__background {
+  stroke: var(--pf-global--BackgroundColor--dark-400);
+}
+
+.pf-topology__group.pf-m-drop-target .pf-topology__group__background {
+  fill: var(--pf-global--palette--blue-50);
+  stroke: var(--pf-global--active-color--100);
+  stroke-dasharray: 12;
+}
+
+.pf-topology__group__collapsed-badge.pf-topology__node__label__badge > rect {
+  fill: var(--pf-global--palette--white);
+  stroke: var(--pf-global--palette--black-300);
+}
+
+.pf-topology__group__collapsed-badge.pf-topology__node__label__badge > text {
+  font-size: var(--pf-global--FontSize--xs);
+  pointer-events: none;
+  fill: var(--pf-global--palette--black-800);
+}
+
+.pf-topology__group__label .pf-topology__node__label__background {
+  fill: var(--pf-global--BackgroundColor--dark-300);
+}
+
+.pf-topology__group__label > text {
+  fill: var(--pf-global--palette--white);
+  font-size: var(--pf-global--FontSize--sm);
+  pointer-events: none;
+}
+
+.pf-topology__group__label .pf-topology__node__action-icon__icon {
+  color: var(--pf-global--palette--white);
+}
+
+.pf-topology__group.pf-m-selected .pf-topology__group__label .pf-topology__node__label__background {
+  fill: var(--pf-global--active-color--100);
+}
+
+.pf-topology__edge {
+  --edge--stroke-width: 2px;
+  --edge--stroke-dasharray: 0;
+  --edge--stroke: var(--pf-global--secondary-color--100);
+  --edge--fill: var(--edge--stroke);
+  --edge--opacity: 1;
+  --edge--cursor: pointer;
+  --edge--active--stroke: var(--pf-global--active-color--100);
+  --edge--active--fill: var(--edge--active--stroke);
+  --edge--drag-active--opacity: 0.4;
+  --edge__arrow--cursor: default;
+  --edge--interactive--stroke: var(--pf-global--active-color--100);
+  --edge--interactive--fill: var(--edge--interactive--stroke);
+
+  cursor: var(--edge--cursor);
+  stroke: var(--edge--stroke);
+  fill: var(--edge--fill);
+  opacity: var(--edge--opacity);
+}
+
+.pf-topology__edge.pf-m-info {
+  --edge--stroke: var(--pf-global--primary-color--light-100);
+}
+
+.pf-topology__edge.pf-m-success {
+  --edge--stroke: var(--pf-global--success-color--100);
+}
+
+.pf-topology__edge.pf-m-warning {
+  --edge--stroke: var(--pf-global--warning-color--100);
+}
+
+.pf-topology__edge.pf-m-danger {
+  --edge--stroke: var(--pf-global--danger-color--100);
+}
+
+.pf-topology__edge__link {
+   stroke-width: var(--edge--stroke-width);
+   stroke-dasharray: var(--edge--stroke-dasharray);
+  fill-opacity: 0;
+   animation: pf-topology__edge__dash 0s linear infinite forwards;
+ }
+.pf-topology__edge__link.pf-m-dotted {
+  stroke-dasharray: 2;
+  stroke-dashoffset: 2;
+}
+.pf-topology__edge__link.pf-m-dashed {
+  stroke-dasharray: 4 2;
+  stroke-dashoffset: 6;
+}
+.pf-topology__edge__link.pf-m-dashed-md {
+  stroke-dasharray: 8 2;
+  stroke-dashoffset: 10;
+}
+.pf-topology__edge__link.pf-m-dashed-lg {
+  stroke-dasharray: 16 2;
+  stroke-dashoffset: 18;
+}
+.pf-topology__edge__link.pf-m-dashed-xl {
+  stroke-dasharray: 32 2;
+  stroke-dashoffset: 34;
+}
+
+@keyframes pf-topology__edge__dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.pf-topology__edge.pf-m-selected .pf-topology__edge__link {
+  fill: var(--edge--active--fill);
+  stroke: var(--edge--active--stroke);
+}
+
+.pf-topology__edge.pf-m-selected .pf-topology__edge__link,
+.pf-topology__edge.pf-m-selected .pf-topology-connector-arrow {
+  stroke: var(--edge--active--stroke);
+}
+
+.pf-topology__edge.pf-m-hover .pf-topology__edge__link,
+.pf-topology__edge.pf-m-dragging .pf-topology__edge__link {
+  fill: var(--edge--interactive--fill);
+  stroke: var(--edge--interactive--stroke);
+}
+.pf-topology__edge.pf-m-hover .pf-topology__edge__link,
+.pf-topology__edge.pf-m-dragging .pf-topology__edge__link,
+.pf-topology__edge.pf-m-hover .pf-topology-connector-arrow,
+.pf-topology__edge.pf-m-dragging .pf-topology-connector-arrow {
+  stroke: var(--edge--interactive--stroke);
+}
+
+.pf-topology__edge .pf-topology-connector-arrow {
+  cursor: var(--edge__arrow--cursor);
+  stroke: var(--edge--stroke);
+}
+
+.pf-topology__edge__tag__background {
+  fill: var(--edge--stroke);
+  stroke-width: 0;
+}
+
+.pf-topology__edge__tag > text {
+  stroke: var(--pf-global--palette--white);
+  stroke-width: 0.5;
+  font-size: 10px;
+  pointer-events: none;
+  fill: var(--pf-global--palette--white);
+}
+
+.pf-topology__edge__tag.pf-m-info .pf-topology__edge__tag__background {
+  fill: var(--pf-global--primary-color--light-100);
+}
+
+.pf-topology__edge__tag.pf-m-success .pf-topology__edge__tag__background {
+  fill: var(--pf-global--success-color--100);
+}
+
+.pf-topology__edge__tag.pf-m-warning .pf-topology__edge__tag__background {
+  fill: var(--pf-global--warning-color--100);
+}
+.pf-topology__edge__tag.pf-m-warning > text {
+  stroke: var(--pf-global--palette--black-1000);
+  fill: var(--pf-global--palette--black-1000);
+}
+
+.pf-topology__edge__tag.pf-m-danger .pf-topology__edge__tag__background {
+  fill: var(--pf-global--danger-color--100);
+}
+

package/src/css/components/Topology/topology-side-bar.css

@@ -39,6 +39,7 @@
   background-color: var(--pf-global--BackgroundColor--100);
   overflow-x: hidden;
 }
+
 .pf-topology-side-bar > .pf-topology-side-bar__dismiss + * {
   margin-right: 2rem;
 }