ck-ops/code/grafana/public/sass/components/_search.scss

.search-results-container {
  display: block;
  padding: $spacer;
  position: relative;
  flex-grow: 10;
  margin-bottom: $space-md;
  background: $panel-bg;
  border: $panel-border;
  border-radius: 3px;

  // Fix for search scroller in mobile view
  height: unset;

  .label-tag {
    margin-top: 2px;
    margin-left: 6px;
    font-size: 11px;
    padding: 2px 6px;
  }

  .selected {
    .search-result-tag {
      opacity: 0.7;
      color: white;
    }
  }
}

.search-section {
  background: $panel-bg;
  border-bottom: 1px solid lightOrDark($gray95, $gray25);
  padding: 0px 4px 4px 4px;
  margin-bottom: 3px;
}

.search-section__header {
  font-size: $font-size-h6;
  padding: 7px 4px 3px 0;
  color: $text-color-weak;
  display: flex;
  flex-grow: 1;

  &:hover,
  &.selected {
    color: $text-color;
  }

  &:hover {
    .search-section__header__link {
      opacity: 1;
    }
  }
}

.search-section__header__icon {
  padding: 5px 0px;
  width: 43px;
  text-align: center;
}

.search-section__header__toggle {
  padding: 5px;
}

.search-section__header__text {
  flex-grow: 1;
  line-height: 24px;
}

.search-section__header__link {
  padding: 2px 10px 0;
  color: $text-muted;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

.search-item {
  @include list-item();

  display: flex;
  flex-grow: 1;
  align-items: center;
  height: auto;
  min-height: 37px;
  white-space: initial;
  padding: 0px;

  &:hover,
  &.selected {
    background: $list-item-hover-bg;

    .search-item__body-title {
      color: $text-color-strong;
    }
  }
}

.search-item__body {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
}

.search-item__body-folder-title {
  color: $text-color-weak;
  font-size: $font-size-xs;
  line-height: 11px;
  position: relative;
  top: -1px;
}

.search-item__icon {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 19px;
  padding: 0 2px 0 10px;
}

.search-item__tags {
  display: none;
  padding: 10px;
}

.search-item__actions {
  flex: 0 0 auto;
  padding: 0 10px 0 0;
}

.search-item__actions__item {
  display: inline-block;
  opacity: 0;
  width: 0;
  transition: all 0.2s ease-in-out;
  .fa-star,
  .fa-star-o {
    color: $orange;
    line-height: 37px;
  }
}

.search-item:hover {
  .search-item__actions__item {
    width: 15px;
    opacity: 1;
  }
}

.search-button-row {
  text-align: center;
  padding: $spacer * 2 $spacer;
  background: $panel-bg;
}

@include media-breakpoint-up(md) {
  .search-item__tags {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: -2px;
  }
}