112 lines
1.7 KiB
SCSS
112 lines
1.7 KiB
SCSS
@import "vars";
|
|
|
|
.entity {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.head {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.75em 0.25em;
|
|
min-height: 3.5em;
|
|
position: relative;
|
|
|
|
.icon {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.label {
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
&.expanded {
|
|
background: $selected-bg;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pull-right {
|
|
padding-right: 0.5em;
|
|
|
|
:deep(.power-switch) {
|
|
@include pull-right;
|
|
margin-top: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.body {
|
|
@extend .fade-in;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.5em;
|
|
background: linear-gradient(0deg, $default-bg-5, $default-bg-2);
|
|
border-top: 1px solid $border-color-1;
|
|
box-shadow: $border-shadow-bottom;
|
|
font-weight: normal;
|
|
}
|
|
|
|
button {
|
|
height: 2em;
|
|
background: none;
|
|
border: none;
|
|
padding: 0 0 0 1em;
|
|
|
|
&:hover {
|
|
color: $default-hover-fg;
|
|
}
|
|
}
|
|
}
|
|
|
|
.collapse-toggler {
|
|
position: absolute;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex: 1;
|
|
min-height: 2em;
|
|
margin-right: 1.25em;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: $default-hover-fg;
|
|
}
|
|
}
|
|
|
|
.attributes .child {
|
|
padding: 0.5em 1em;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid $border-color-1;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: initial;
|
|
}
|
|
|
|
&.head {
|
|
cursor: pointer;
|
|
&:hover {
|
|
background: $hover-bg;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
font-weight: bold;
|
|
@include from($tablet) {
|
|
@extend .col-m-6;
|
|
}
|
|
}
|
|
|
|
.value {
|
|
font-size: 0.95em;
|
|
text-align: right;
|
|
|
|
@include from($tablet) {
|
|
@extend .col-m-6;
|
|
}
|
|
}
|
|
}
|