<commit_before>@import 'colors/variables';
@import '../../json-editor.extensions.scss';

.json-editor--popover-template {
  font-weight: 600;
  font-size: 12px;
  line-height: 13px;
  max-width: 300px;
  color: $color-blue-grey-800;

  .label {
    color: $color-blue-grey-550;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
  }

  .separator {
    height: 8px;
    background: transparent;
  }
}

ngx-json-editor-node-flat {
  max-width: 100%;
}

.json-tree-node-flat {
  .indentation {
    @extend %indentation;
    flex: 1 0 15px;
  }

  .node-container {
    display: flex;
    padding-bottom: 0px;
  }

  .node {
    background-color: $color-blue-grey-700;
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    display: flex;
    padding: 25px 10px;
    position: relative;
    flex: 0 1 100%;
    height: 96px;
    min-width: 0; // https://css-tricks.com/flexbox-truncated-text/#the-solution-is-min-width-0-on-the-flex-child

    .error-box {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 2px;
      top: 0;
      left: 0;
      border: 2px solid $color-error;
    }

    .left-options {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-right: 10px;
      color: $color-blue-grey-400;
      flex: 0 0 15px;

      .required-indicator {
        position: absolute;
        top: 12px;
        left: 12px;

        span {
          display: flex;

          svg path {
            fill: $color-blue-grey-400;
            stroke: $color-blue-grey-400;
          }

          &.not-required {
            svg path {
              fill: transparent;
            }
          }

          &.invalid {
            svg path {
              fill: $color-error;
              stroke: $color-error;
            }
          }
        }
      }

      .drag-drop-handle {
        cursor: grab;
      }
    }

    .node-content {
      display: flex;
      justify-content: space-between;
      flex: 0 0 100%;
      align-items: center;
      min-width: 0;

      &.extra-margin {
        margin-top: -15px;
      }

      .node-info {
        flex: 0 0 40%;
        padding-right: 25px;
        overflow: hidden;
      }

      .node-input {
        flex: 0 1 60%;
        padding-top: 5px;
<commit_msg>SPT-12553: Json items aligments and code button (#767)<commit_after>@import 'colors/variables';
@import '../../json-editor.extensions.scss';
.code-editor .ngx-select .ngx-select-input .ngx-select-input-box__controls {
  .ngx-select-caret,
  .ngx-select-clear {
    display: none;
  }
}
.json-editor--popover-template {
  font-weight: 600;
  font-size: 12px;
  line-height: 13px;
  max-width: 300px;
  color: $color-blue-grey-800;

  .label {
    color: $color-blue-grey-550;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
  }

  .separator {
    height: 8px;
    background: transparent;
  }
}

ngx-json-editor-node-flat {
  max-width: 100%;
}

.json-tree-node-flat {
  .indentation {
    @extend %indentation;
    flex: 1 0 15px;
  }

  .node-container {
    display: flex;
    padding-bottom: 0px;
  }

  .node {
    background-color: $color-blue-grey-700;
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    display: flex;
    padding: 25px 10px;
    position: relative;
    flex: 0 1 100%;
    height: 96px;
    min-width: 0; // https://css-tricks.com/flexbox-truncated-text/#the-solution-is-min-width-0-on-the-flex-child

    .error-box {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 2px;
      top: 0;
      left: 0;
      border: 2px solid $color-error;
    }

    .left-options {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-right: 10px;
      color: $color-blue-grey-400;
      flex: 0 0 15px;

      .required-indicator {
        position: absolute;
        top: 12px;
        left: 12px;

        span {
          display: flex;

          svg path {
            fill: $color-blue-grey-400;
            stroke: $color-blue-grey-400;
          }

          &.not-required {
            svg path {
              fill: transparent;
            }
          }

          &.invalid {
            svg path {
              fill: $color-error;
              stroke: $color-error;
            }
          }
        }
      }

      .drag-drop-handle {
        cursor: grab;
      }
    }

    .node-content {
      display: flex;
      justify-content: space-between;
      flex: 0 0 100%;
      align-items: center;
      min-width: 0;

      &.extra-margin {
        margin-top: -15px;
      }

      .node-info {
        flex: 0 0 40%;
        padding-right: 25px;
        overflow: hidden;
        padding-top: 3px;
      }

      .node-input {
        flex: 0 1 60%;
        padding-top: 5px;
        margin-bottom: 2px;

{'fraction_non_alphanumeric': 0.134054274637829, 'fraction_numerical': 0.04284839828606407, 'mean_word_length': 1.589540412044374, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6006098', 'n_tokens_mistral': 1907, 'n_tokens_neox': 1665, 'n_words': 357}