chore(styles): Next styles iteration

lordrip · Nov 12, 2024 · fe6b695 · fe6b695
1 parent fadd499
commit fe6b695
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.scss b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.scss
@@ -15,26 +15,33 @@
         position: relative;
         align-items: center;
         font-weight: bold;
+        background-color: var(--pf-v5-global--primary-color--light-100);
+        padding: calc(var(--pf-v5-global--spacer--xs) / 2) var(--pf-v5-global--spacer--xs);
 
         img {
           display: inline-block;
           position: relative;
-          margin: var(--pf-v5-global--spacer--xs);
-          max-height: 32px;
-          max-width: 32px;
+          max-height: 20px;
+          max-width: 20px;
+          background-color: var(--pf-v5-global--palette--white);
+          border-radius: calc(var(--custom-node-BorderRadius) / 2);
+          padding: calc(var(--pf-v5-global--spacer--xs) / 2);
         }
 
         span {
           @include custom.text;
 
-          border: 2px solid var(--custom-node-BorderColor);
-          padding: 0 calc(var(--pf-v5-global--spacer--xs) * 0.75);
-          border-radius: calc(var(--custom-node-BorderRadius) * 0.4);
-          background-color: var(--pf-v5-global--palette--blue-50);
+          margin: 0 var(--pf-v5-global--spacer--sm);
+        }
+
+        [data-selected='true'] & {
+          color: var(--pf-v5-global--palette--white);
+          background-color: var(--pf-v5-global--palette--blue-300);
         }
       }
 
-      &:hover {
+      &:hover,
+      [data-selected='true'] & {
         border-color: var(--custom-node-hover-BorderColor);
         box-shadow: var(--custom-node-Shadow);
       }

diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss
@@ -14,7 +14,6 @@
         display: flex;
         flex-flow: column;
         align-items: center;
-        justify-content: center;
         border: 2px solid var(--custom-node-BorderColor);
         border-radius: var(--custom-node-BorderRadius);
         background-color: var(--custom-node-BackgroundColor);
@@ -28,7 +27,8 @@
         }
       }
 
-      &:hover &__image {
+      &:hover &__image,
+      [data-selected='true'] & &__image {
         border-color: var(--custom-node-hover-BorderColor);
         box-shadow: var(--custom-node-Shadow);
       }
@@ -47,6 +47,8 @@
 
       text-align: center;
       background-color: var(--custom-node-BackgroundColor);
+      padding: 0 calc(var(--pf-v5-global--spacer--xs) * 0.75);
+      border-radius: calc(var(--custom-node-BorderRadius) * 0.4);
 
       &__error {
         color: var(--custom-node-BorderColor);

diff --git a/packages/ui/src/components/Visualization/Custom/_custom.scss b/packages/ui/src/components/Visualization/Custom/_custom.scss
@@ -1,8 +1,3 @@
-.phantom-rect {
-  stroke: transparent;
-  fill: transparent;
-}
-
 .disabled-step-icon {
   position: absolute;
   top: 0;
@@ -25,6 +20,10 @@
     --custom-node-BorderColor: var(--pf-v5-global--danger-color--100);
   }
 
+  foreignObject:first-of-type {
+    overflow: visible;
+  }
+
   @content;
 }
 
@@ -33,7 +32,6 @@
   height: 100%;
   position: relative;
   overflow: auto;
-  text-align: center;
   cursor: pointer;
 }