react-json-schema-editor-antd/dist/JsonSchemaEditor/SchemaItem/index.less

Json Schema Editor

.ant-input.is-hidden,
.ant-input.is-repeat,
.schema-type.is-repeat,
.schema-type.is-hidden {
  text-decoration: line-through;
}

.schema-input-div {
  width: 100%;
  height: 100%;
  height: 30px;
  line-height: 30px;
  border: 1px solid transparent;
  font-size: 14px;
  padding-left: 6px;
  overflow: hidden;
  word-break: break-all;

  &.is-desc {
    color: var(--font-light-color);
  }

  &.schema-key-input-div {
    line-height: 30px;
    height: 31.5px;
  }

  &.schema-mock-input-div {
    line-height: 32px;
    height: 32px;
    padding-left: 4px;
  }

  &.schema-desc-input-div {
    line-height: 30px;
    height: 31.5px;
  }

  &.is-disabled {
    color: var(--font-light-color);
  }
}

.ant-select.is-hidden,
.ant-select.is-repeat {
  .ant-select-selection-overflow,
  .ant-select-selection-placeholder {
    text-decoration: line-through;
  }
}

.sortable-table-item {
  position: relative;
  align-items: center;

  .schema-key-group {
    overflow: hidden;
    min-width: 50px;
    max-width: 1000px;
  }

  .mini-editor {
    position: relative;
    border: 1px solid transparent;
    background-color: transparent;
    transition: 0.3s;
    box-sizing: border-box;
    height: 32px;
    padding-left: 4px;

    .insert-icon {
      opacity: 0;
    }

    &:hover {
      .insert-icon {
        opacity: 1;
        color: var(--icon-color);
      }
    }
  }

  .mini-editor.editor-active {
    border: 1px solid var(--color-primary, #0787ff);
    color: var(--icon-color);
  }

  .spn-import-model {
    margin-left: 5px;
    color: var(--color-primary, #0787ff);
    cursor: pointer;
  }

  .ref-property-actions {
    display: none;
    position: absolute;
    right: 20px;
  }

  .schema-btn-controls {
    opacity: 0;
  }

  .schema-btn-delete {
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-border, #f2f4f6);
    border-radius: 4px;

    .ant-btn-icon {
      font-size: 10px;
      color: var(--font-light-color, #33363966);
    }
  }

  .sortable-table-drag-empty {
    height: 20px;
    width: 20px;
    flex-shrink: 0;
  }

  .sortable-table-expand-empty {
    width: 18px;
    height: 20px;
    flex-shrink: 0;
  }

  .sortable-table-drag {
    // position: absolute;
    // left: -10px;
    // top: 50%;
    // transform: translateY(-50%);
    // background: var(--color-bg-page,#fff);
    // display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 20px;
    opacity: 0;
    display: flex;
    flex-shrink: 0;
    color: var(--icon-color);
  }

  &:hover {
    & > div > div.sortable-table-drag {
      opacity: 1;
    }

    & > .ref-property-actions {
      display: flex;
    }

    & > .schema-btn-controls {
      opacity: 1;
    }
  }

  .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector,
  .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input)
    .ant-select-selector {
    border: none;
    background: transparent;
  }

  .ant-input,
  .ant-input-outlined.ant-input-disabled,
  .ant-input-outlined[disabled] {
    border-color: transparent;
    background: transparent;
    border-radius: 0;
  }

  .ant-input:focus,
  .ant-input-outlined:focus {
    border-color: var(--color-primary);
  }
}

.sortable-table-container {
  position: relative;

  .dash-line {
    display: none;
    position: absolute;
    left: 10px;
    top: 0;
    height: 100%;
    width: 1px;
    background: none, none,
      linear-gradient(0deg, var(--color-border, #f2f4f6) 50%, transparent 50%) 0
        0 / 1px 10px repeat-y,
      none;
    // background-color: white;
  }
}

.schema-type {
  font-size: 12px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 12px;
  max-width: 74px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  &.disabled {
    cursor: no-drop;
  }

  &.object {
    background: #0479ff1a;
    color: #0787ff;
  }

  &.string {
    color: #22c55e;
    background: #22c55e1a;
  }

  &.array {
    color: #d50f7c;
    background: #d50f7c1a;
  }

  &.boolean {
    color: #fa8c16;
    background: #fa8c161a;
  }

  &.number,
  &.integer {
    color: #f29c13;
    background: #f29c131a;
  }

  &.any {
    color: #0da4a1;
    background: #0da4a11a;
  }

  &.dataModel {
    color: #7178f7;
    background: #7178f71a;
  }

  &.null {
    color: #fa7600;
    background: #fa76001a;
  }

  &.anyOf,
  &.oneOf,
  &.allOf {
    color: #bf7af0;
    background: #bf7af01a;
  }
}

.schema-type-list {
  .schema-type-list-item {
    &:hover {
      background: var(--color-bg-folder-hover, #f9fafb);
    }

    &.active {
      color: var(--color-primary, #0787ff);
    }
  }
}

.schema-settings-group {
  padding-right: 4px;

  .ant-btn-icon {
    font-size: 10px;
    color: var(--font-light-color, #33363966);
  }

  .ant-btn {
    border: 1px solid var(--color-border, #f2f4f6);
    border-radius: 4px;
    width: 20px;
    height: 20px;
  }
}

.ant-select-dropdown .ant-select-item-group {
  color: var(--font-light-color);
  font-size: 12px;
}

.is-root {
  color: var(--color-primary) !important;
  padding-left: 4px !important;
  cursor: auto !important;
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item:hover {
  background-color: var(--color-bg-folder-hover);
}

.ant-popover .ant-popover-arrow::before,
.ant-popover .ant-popover-inner {
  background: var(--color-bg-tooltip);
}

.ant-popover .ant-popover-inner {
  border: 1px solid var(--color-border);
}

.ant-popover .ant-popover-inner-content {
  color: var(--font-pale-color);
}

.no-transition * {
  transition: none !important;
}