From 1e43866978fb71625d8fc5a08a1f956aeade1c6f Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 1 May 2023 01:21:18 +0200
Subject: [PATCH] Moved more entity common CSS out of the Vue component.

---
 .../src/components/panels/Entities/Entity.vue | 35 ---------------
 .../components/panels/Entities/common.scss    | 43 +++++++++++++++----
 2 files changed, 34 insertions(+), 44 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
index 028450bcc..b0a8323d8 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
@@ -186,12 +186,6 @@ export default {
   }
 }
 
-@mixin expanded-entity {
-  background: $selected-bg;
-  font-weight: bold;
-  box-shadow: 0 0 3px 2px $default-shadow-color;
-}
-
 .entity-container {
   width: 100%;
   display: flex;
@@ -218,35 +212,6 @@ export default {
   }
 }
 
-:deep(.entity-container) {
-  .entity.expanded {
-    @include expanded-entity();
-  }
-
-  .head {
-    .name {
-      display: inline-flex;
-      word-break: break-all;
-
-      &:hover {
-        color: $hover-fg;
-      }
-    }
-
-    .label {
-      margin-left: 0.5em;
-    }
-
-    .value {
-      word-break: break-all;
-    }
-
-    .icon:hover {
-      color: $hover-fg;
-    }
-  }
-}
-
 .blink {
   animation: blink-animation 1s steps(20, start);
 }
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/common.scss b/platypush/backend/http/webapp/src/components/panels/Entities/common.scss
index 4e524b6e7..7f6208eac 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/common.scss
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/common.scss
@@ -2,11 +2,21 @@
 
 $collapse-toggler-width: 2em;
 
+@mixin expanded-entity {
+  background: $selected-bg;
+  font-weight: bold;
+  box-shadow: 0 0 3px 2px $default-shadow-color;
+}
+
 .entity {
   width: 100%;
   display: flex;
   flex-direction: column;
 
+  &.expanded {
+    @include expanded-entity();
+  }
+
   .head {
     height: 100%;
     display: flex;
@@ -15,20 +25,41 @@ $collapse-toggler-width: 2em;
     min-height: 3.5em;
     position: relative;
 
+    &.expanded {
+      background: $selected-bg;
+      font-weight: bold;
+    }
+
     .icon {
       @extend .col-1;
-      margin-right: 1em;
+      margin-right: 0.5em;
+
+      &:hover {
+        color: $hover-fg;
+      }
     }
 
     .label {
       @extend .col-s-8;
       @extend .col-m-9;
       margin-top: 0.25em;
+      margin-left: 0.5em;
     }
 
-    &.expanded {
-      background: $selected-bg;
+    .name {
+      display: inline-flex;
+      word-break: break-all;
+
+      &:hover {
+        color: $hover-fg;
+      }
+    }
+
+    .value {
+      font-size: 1.1em;
       font-weight: bold;
+      word-break: break-all;
+      opacity: 0.8;
     }
 
     .value-and-toggler {
@@ -50,12 +81,6 @@ $collapse-toggler-width: 2em;
       min-width: 7em;
     }
 
-    .value {
-      font-size: 1.1em;
-      font-weight: bold;
-      opacity: 0.8;
-    }
-
     .unit {
       margin-left: 0.2em;
     }