apollo-client-devtools/src/devtools/components/Logger/Logger.less

Developer tools for Apollo Client, with GraphiQL integration, cache inspection, and query watching.

.Logger {
  display: flex;
  flex-direction: row;

  .sidebar {
    flex: none;
    width: 200px;
    overflow: scroll;
    border-right: 1px solid #DDD;

    .queries-sidebar-title {
      font-weight: bold;
      background-color: #FBFBFB;
      border-bottom: 1px solid #CCC;
      line-height: 33px;
      padding-left: 10px;
    }

    .item {
      padding: 3px 10px;
      font-size: 12px;
      font-family: monospace;
      border-bottom: 1px solid #EEE;
      cursor: pointer;

      &:hover {
        background-color: fade(#22a699, 10%);
      }

      &.active {
        background-color: fade(#22a699, 40%);

        &:hover {
          background-color: fade(#22a699, 30%);
        }
      }
    }

    .loading {
      color: LightGray;
    }
  }

  .main {
    flex: 1;
    overflow: scroll;
    padding: 20px;

    pre {
      border: none;
      font-family: monospace;
      font-size: 12px;
    }

    .loading {
      background: LightGray;
    }
  }

  .toggle {
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
  }

  .labeled {
    padding-left: 16px;
  }
}