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-container {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 !important;
  border-bottom: $default-border-3;

  &.with-children:not(.collapsed) {
    @include expanded-entity();
  }

  &:hover {
    background: $hover-bg;
  }

  .adjuster {
    cursor: pointer;
    width: 100%;

    &.with-children {
      width: calc(100% - $collapse-toggler-width - 0.5em);
    }
  }
}

@include until(#{$tablet - 1}) {
  .child {
    &:not(:last-child) {
      .entity-container {
        border-bottom: $default-border-3;
        border-radius: 0;
      }
    }
  }
}

.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;
    }
  }
}

.entity-container-wrapper {
  &.with-children:not(.collapsed) {
    box-shadow: 0 3px 4px 0 $default-shadow-color;

    .children .child:last-child {
      box-shadow: 0 3px 4px 0 $default-shadow-color;
    }
  }
}

.blink {
  animation: blink-animation 1s steps(20, start);
}

@keyframes blink-animation {
  0% {
    background: initial
  }

  50% {
    background: $active-bg;
  }

  100% {
    background: initial
  }
}