grafana/public/sass/pages/_explore.scss

// TODO: this is used in Loki & Prometheus, move it
.explore-input-margin {
  margin-right: 4px;
}

.graph-legend {
  flex-wrap: wrap;
}

// TODO: move to Loki and Prometheus
.query-row-break {
  flex-basis: 100%;
}

// TODO: Prometheus-specifics, to be extracted to datasource soon
.explore {
  .prom-query-field-info {
    margin: 0.25em 0.5em 0.5em;
    display: flex;

    details {
      margin-left: 1em;
    }
  }
}

// ReactTable basic overrides (does not include pivot/groups/filters)
// When integrating ReactTable as new panel plugin, move to _panel_table.scss

.ReactTable {
  border: none;
}

.ReactTable .rt-table {
  // Allow some space for the no-data text
  min-height: 90px;
}

.ReactTable .rt-thead.-header {
  box-shadow: none;
  background: $list-item-bg;
  border-top: 2px solid $body-bg;
  border-bottom: 2px solid $body-bg;
  height: 2em;
}

.ReactTable .rt-thead.-header .rt-th {
  text-align: left;
  color: $blue;
  font-weight: $font-weight-semi-bold;
}

.ReactTable .rt-thead .rt-td,
.ReactTable .rt-thead .rt-th {
  padding: 0.45em 0 0.45em 1.1em;
  border-right: none;
  box-shadow: none;
}

.ReactTable .rt-tbody .rt-td {
  padding: 0.45em 0 0.45em 1.1em;
  border-bottom: 2px solid $body-bg;
  border-right: 2px solid $body-bg;
}

.ReactTable .rt-tbody .rt-td:last-child {
  border-right: none;
}

.ReactTable .-pagination {
  border-top: none;
  box-shadow: none;
  margin-top: $space-sm;
}

.ReactTable .-pagination .-btn {
  color: $blue;
  background: $list-item-bg;
}

.ReactTable .-pagination input,
.ReactTable .-pagination select {
  color: $input-color;
  background-color: $input-bg;
}

.ReactTable .-loading {
  background: $input-bg;
}

.ReactTable .-loading.-active {
  opacity: 0.8;
}

.ReactTable .-loading > div {
  color: $input-color;
}

.ReactTable .rt-tr .rt-td:last-child {
  text-align: right;
}

.ReactTable .rt-noData {
  top: 60px;
  z-index: inherit;
}

// React-component cascade fix: show "loading" when loading children
.rc-cascader-menu-item-loading:after {
  position: absolute;
  right: 12px;
  content: 'loading';
  color: #767980;
  font-style: italic;
}

// React-component cascade fix: vertical alignment issue with Safari
.rc-cascader-menu {
  vertical-align: top;
  // To fix cascader button width issue in windows + firefox
  scrollbar-width: thin;
}

// TODO Experimental

.cheat-sheet-item {
  margin: $space-lg 0;
}

.cheat-sheet-item__title {
  font-size: $font-size-h3;
}

.cheat-sheet-item__example {
  margin: $space-xs 0;
  // element is interactive, clear button styles
  text-align: left;
  border: none;
  background: transparent;
  display: block;
}

.query-type-toggle {
  margin-left: 5px;

  .btn.active {
    background-color: $input-bg;
    background-image: none;
    background-clip: padding-box;
    border: $input-border;
    border-radius: $input-border-radius;
    @include box-shadow($input-box-shadow);
    color: $input-color;
  }
}