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

@import "vars";

$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;
  justify-content: center;

  &.expanded {
    @include expanded-entity();
  }

  .head {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0.75em 0.25em;
    min-height: 3.5em;
    position: relative;

    &.expanded {
      background: $selected-bg;
      font-weight: bold;
    }

    .icon {
      @extend .col-1;
      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;
    }

    .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 {
      @extend .col-3;
      display: flex;
      align-items: center;
      justify-content: right;
      min-width: 7em;

      .value {
        margin-right: 2.5em;
      }
    }

    .value-container {
      @extend .col-s-3;
      @extend .col-m-2;
      @extend .pull-right;
      min-width: 7em;
    }

    .unit {
      margin-left: 0.2em;
    }

    .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: $collapse-toggler-width;
  margin-right: 1.25em;
  cursor: pointer;

  &:hover {
    color: $default-hover-fg;
  }
}

.attributes .child {
  display: flex;
  align-items: center;
  padding: 0.5em 1em;

  @include until($tablet - 1) {
    flex-direction: column;
  }

  &:not(:last-child) {
    border-bottom: 1px solid $border-color-1;
  }

  &:hover {
    cursor: initial;
  }

  &.head {
    cursor: pointer;
    &:hover {
      background: $hover-bg;
    }
  }

  .label {
    font-weight: bold;
    @extend .col-s-12;
    @extend .col-m-6;
  }

  .value {
    font-size: 0.95em;
    word-break: break-all;
    @extend .col-s-12;
    @extend .col-m-6;

    @include from($tablet) {
      text-align: right;
    }
  }
}