ontology.component.scss

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

$width: 340px;

.app-toolbar-action {
  &.select-form {
    margin-top: -18px;
  }

  .form-content {
    display: contents;

    .select-ontology {
      margin: 0 24px 0 0;
    }
  }

  .create-data-model-btn {
    margin: 0 0 16px;
    min-width: 140px;
  }
}

.ontology-editor {
  width: 98vw;
  max-width: 1280px;
  min-height: calc(100vh - #{$header-height} - #{$tab-bar-margin} - 100px);
  border: 1px dotted $primary_200;
  position: relative;
  margin: 0 auto 60px auto;
}
.ontology-viewer {
  width: 98vw;
  max-width: 1280px;
  min-height: calc(100vh - #{$header-height} - #{$tab-bar-margin} - 100px);
  border: 1px dotted $primary_200;
  position: relative;
  margin: 0 auto 60px auto;
}

.ontology-editor-container {
  .ontology-editor-subheader {
    height: $sub-header-height;
  }

  .ontology-editor-sidenav {
    width: 160px;

    button {
      width: 100%;
      text-align: left;
    }
  }

  .ontology-editor-canvas {
    min-height: calc(100vh - #{$sub-header-height} - #{$header-height} - #{$tab-bar-margin} - 100px);
    border-right: 1px solid rgba(0, 0, 0, 0.12);

    .ontology-editor-grid {
      display: grid;
      grid-template-rows: auto; // value would be "masonry" as soon it's implemented in all browsers
      grid-template-columns: repeat(auto-fill, minmax($width, 1fr));
      grid-gap: 6px;
    }
    .ontology-editor-list {
      margin: 16px;
    }
  }
}

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

  .resource-class-header {
    margin: -12px -12px 0 -12px;
    width: calc(100% + 24px);
    min-height: 48px !important;
    height: 48px;
    cursor: move;
  }

  .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);
  }
}
.ontology-editor-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  position: sticky !important;
  top: 0;

  .switch-view-label {
    margin-right: 16px;
  }
}

.active {
  background-color: $black-12-opacity;
}

.note {
  padding: 2px;
}

.add-resource-class {
  position: absolute;
  right: 12px;
  top: 80px;
}

.mat-caption.space-reducer {
  margin-top: 0;
  margin-bottom: 6px;
}
.ontology-actions {
  border-left: 1px solid $primary_200;
  padding: 0 12px;
  .mat-caption.space-reducer {
    margin-top: -6px;
    margin-bottom: 6px;
  }
}

button.space-reducer {
  margin: 0;
}