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;
  z-index: 0;

  .ontology-editor-header {
    z-index: 2;
    top: 121px;
    .mat-toolbar-row {
      padding-right: 0;

      .ontology-actions {
        width: 176px;
      }
    }
  }
}
.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: 200px;

    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;

      &.properties {
        width: 80%;
        margin: 16px 10%;

        .property {
          height: 56px !important;
          margin: 4px 0;
          &.odd {
            background-color: $primary_50;
          }
          &:hover {
            background-color: $black-14-opacity;
          }
        }
      }
    }
  }
}

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