resource-class-info.component.scss

@import "~@angular/material/theming";
@import "../../../../assets/style/config";
@import "../../../../assets/style/mixins";

.resource-class {
  min-height: 60px;
  height: auto;
  position: relative;
  @include mat-elevation-transition;
  @include mat-elevation(2);
  padding: 12px;
  margin: 6px;
  background-color: #fff;

  .resource-class-header {
    cursor: move;
    margin-left: -12px;

    .resource-class-header-action {
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .resource-class-footer {
    position: absolute;
    bottom: 14px;
    right: 14px;
  }

  .resource-class-properties {
    li.property-info {
      list-style-type: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: -24px;
      list-style-position: inside;
    }
  }

  &:active {
    @include mat-elevation(8);
  }
}

.drag-n-drop-placeholder {
  background: #ccc;
  border: dotted 3px #999;
  min-height: 54px;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.drag-n-drop-property {
  &:hover,
  &:active,
  &:focus {
    background-color: $black-12-opacity;

    .gui-order {
      .display-on-hover {
        display: block;
      }

      .hide-on-hover {
        display: none;
      }
    }
  }

  .gui-order {
    font-size: 16px;
    color: $primary_700;
    margin-left: -16px;
    .display-on-hover {
      display: none;
    }

    .drag-n-drop-handle {
      cursor: move;
    }
  }

}

.cdk-drag-preview {
  background-color: rgba(254, 254, 254, 1);
  @include box-shadow();
  cursor: move;
  .gui-order {
    .display-on-hover {
      display: block;
    }

    .hide-on-hover {
      display: none;
    }
  }
  .property-info {
    position: fixed;
    left: 32px;
    top: 4px;
  }
}