energylink/public/sass/components/_json_explorer.scss

.json-formatter-row {
  font-family: monospace;

  &, a, a:hover {
    color: $json-explorer-default-color;
    text-decoration: none;
  }

  .json-formatter-row {
    margin-left: 1rem;
  }

  .json-formatter-children {
    &.json-formatter-empty {
      opacity: 0.5;
      margin-left: 1rem;

      &::after { display: none; }
      &.json-formatter-object::after { content: "No properties"; }
      &.json-formatter-array::after { content: "[]"; }
    }
  }

  .json-formatter-string {
    color: $json-explorer-string-color;
    white-space: normal;
    word-wrap: break-word;
  }
  .json-formatter-number { color: $json-explorer-number-color; }
  .json-formatter-boolean { color: $json-explorer-boolean-color; }
  .json-formatter-null { color: $json-explorer-null-color; }
  .json-formatter-undefined { color: $json-explorer-undefined-color; }
  .json-formatter-function { color: $json-explorer-function-color; }
  .json-formatter-date { background-color: fade($json-explorer-default-color, 5%); }
  .json-formatter-url {
    text-decoration: underline;
    color: $json-explorer-url-color;
    cursor: pointer;
  }

  .json-formatter-bracket { color: $json-explorer-bracket-color; }
  .json-formatter-key {
    color: $json-explorer-key-color;
    cursor: pointer;
    padding-right: 0.2rem;
    margin-right: 4px;
  }

  .json-formatter-constructor-name {
    cursor: pointer;
  }

  .json-formatter-array-comma { margin-right: 4px; }

  .json-formatter-toggler {
    line-height: 1.2rem;
    font-size: 0.7rem;
    vertical-align: middle;
    opacity: $json-explorer-toggler-opacity;
    cursor: pointer;
    padding-right: 0.2rem;

    &::after {
      display: inline-block;
      transition: transform $json-explorer-rotate-time ease-in;
      content: "►";
    }
  }

  // Inline preview on hover (optional)
  > a > .json-formatter-preview-text {
    opacity: 0;
    transition: opacity .15s ease-in;
    font-style: italic;
  }

  &:hover > a > .json-formatter-preview-text {
    opacity: 0.6;
  }

  // Open state
  &.json-formatter-open {
    > .json-formatter-toggler-link .json-formatter-toggler::after{
      transform: rotate(90deg);
    }
    > .json-formatter-children::after {
      display: inline-block;
    }
    > a > .json-formatter-preview-text {
      display: none;
    }
    &.json-formatter-empty::after {
      display: block;
    }
  }
}