blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Moved more entity common CSS out of the Vue component.

Browse source
This commit is contained in:
Fabio Manganiello 2023-05-01 01:21:18 +02:00
parent de84a65a22
commit 1e43866978
Signed by: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 34 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
View file

@ -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 { .entity-container {
width: 100%; width: 100%;
display: flex; 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 { .blink {
animation: blink-animation 1s steps(20, start); animation: blink-animation 1s steps(20, start);
} }

43
platypush/backend/http/webapp/src/components/panels/Entities/common.scss
View file

@ -2,11 +2,21 @@
$collapse-toggler-width: 2em; $collapse-toggler-width: 2em;
@mixin expanded-entity {
background: $selected-bg;
font-weight: bold;
box-shadow: 0 0 3px 2px $default-shadow-color;
}
.entity { .entity {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&.expanded {
@include expanded-entity();
}
.head { .head {
height: 100%; height: 100%;
display: flex; display: flex;
@ -15,20 +25,41 @@ $collapse-toggler-width: 2em;
min-height: 3.5em; min-height: 3.5em;
position: relative; position: relative;
&.expanded {
background: $selected-bg;
font-weight: bold;
}
.icon { .icon {
@extend .col-1; @extend .col-1;
margin-right: 1em; margin-right: 0.5em;
&:hover {
color: $hover-fg;
}
} }
.label { .label {
@extend .col-s-8; @extend .col-s-8;
@extend .col-m-9; @extend .col-m-9;
margin-top: 0.25em; margin-top: 0.25em;
margin-left: 0.5em;
} }
&.expanded { .name {
background: $selected-bg; display: inline-flex;
word-break: break-all;
&:hover {
color: $hover-fg;
}
}
.value {
font-size: 1.1em;
font-weight: bold; font-weight: bold;
word-break: break-all;
opacity: 0.8;
} }
.value-and-toggler { .value-and-toggler {
@ -50,12 +81,6 @@ $collapse-toggler-width: 2em;
min-width: 7em; min-width: 7em;
} }
.value {
font-size: 1.1em;
font-weight: bold;
opacity: 0.8;
}
.unit { .unit {
margin-left: 0.2em; margin-left: 0.2em;
} }