resource-class-form.component.scss

@import "../../../../assets/style/config";
@import "../../../../assets/style/mixins";

.form-content {
  width: 100%;
  margin-top: 0;

  .form-panel {
    width: 100%;
  }

  .large-field,
  .medium-field,
  .small-field {
    margin: 0 2px;

    &.string-literal-container {
      display: inline-block;
      position: relative;
      top: -3px;
    }
  }

  .form-action {
    margin-top: 48px;
  }
}

.hidden {
  display: none;
}

.submit-progress {
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 2px;
}

.properties-language {
  position: absolute;
  margin-left: 600px;
  margin-top: -$header-height;
}

// properties
.property-line {
  display: flex;
  margin: 12px 0 0 12px;
  border-bottom: 1px solid $primary_50;
  position: relative;

  &:focus-within {
    border-left: 2px solid $primary_400;
    @include box-shadow();
  }

  &.cdk-drag-preview {
    background-color: rgba(254, 254, 254, 1);
    @include box-shadow();
  }

  .prefix {
    margin-left: -40px;
  }

  .suffix {
    margin-right: 0;
  }
}

button {
  &.drag-n-drop-line {
    cursor: move;

    &.disabled {
      cursor: auto;
      display: none;
    }

    .mat-icon {
      color: grey;
    }
  }

  &.delete-line {
    position: absolute;
    right: 12px;
  }

  &.add-new-line {
    top: 12px;
  }

  &.delete-line {
    top: 0;
    .mat-icon {
      color: grey;
      &:hover {
        color: $warn;
      }
    }
  }
}

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