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 028450bcc5..b0a8323d8a 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 4e524b6e74..7f6208eac5 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; }