grafana/public/sass/components/_panel_gettingstarted.scss

// Colours
$progress-color-dark:       $panel-bg !default;
$progress-color:            $panel-bg !default;
$progress-color-light:      $panel-bg !default;
$progress-color-grey-light: $body-bg !default;
$progress-color-grey:       $iconContainerBackground !default;
$progress-color-grey-dark:  $iconContainerBackground !default;

// Sizing
$marker-size:               60px !default;
$marker-size-half:          ($marker-size / 2);
$path-height:               4px !default;
$path-position:             $marker-size-half - ($path-height / 2);


.gettingstarted-blurb-copy {
  margin-bottom: $spacer/2;
  text-align: center;
}

.gettingstarted-blurb {
  @extend .gettingstarted-blurb-copy;
  color: $text-color;
  display: block;

  &:hover{
    text-decoration: underline;
  }
}

.gettingstarted-blurb-success {
  @extend .gettingstarted-blurb-copy;
  color: $text-color-weak;
  text-decoration: line-through;
}

.gettingstarted-blurb-upcoming {
  @extend .gettingstarted-blurb-copy;
  color: $text-color-weak;
}

.gettingstarted-icon-upcoming {
  color: $text-color-weak;
  text-decoration:none;
  font-size: 35px;
  vertical-align: sub;
}

.gettingstarted-icon-success {
  color: $online;
  font-size: 35px;
  text-decoration:none;
  vertical-align: sub;
}

.dashlist-cta-close-btn {
  color: $text-color-weak;
  float: right;
  padding: 0;
  margin: 0 2px 0 0;
  background-color: transparent;
  border: none;

  i {
    font-size: 80%;
  }

  &:hover {
    color: $white;
  }
}

// Container element
.progress-tracker {
  display: flex;
  margin: 20px auto;
  padding: 0;
  list-style: none;
}

// Step container that creates lines between steps
.progress-step {
  display: block;
  position: relative;
  flex: 1 1 0%;
  margin: 0;
  padding: 0;
  min-width: $marker-size; // For a flexbox bug in firefox that wont allow the text overflow on the text

  // Stops the last step growing
  &:last-child {
    flex-grow: 0;
  }

  // Path between markers, this is not created for the last step
  &:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    top: $path-position;
    bottom: $path-position;
    right: - $marker-size-half;
    width: 100%;
    height: $path-height;
  }

  // Active state
  &.active {
    .progress-title {
      font-weight: 400;
    }
  }

  > a {
    display: block;
  }

}

// Progress marker
.progress-marker {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: $marker-size;
  height: $marker-size;
  padding-bottom: 2px; // To align text within the marker
  z-index: 20;
  background-color: $panel-bg;
}


// Progress text
.progress-text {
  display: block;
  padding: $spacer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-title {
  margin-top: 0;
}

@mixin progress-state($marker-color-bg, $marker-color-border: null, $marker-color-text: null, $path-color: null, $text-color: null) {
  .progress-marker {
    color: $marker-color-text;
    background-color: $marker-color-bg;
    border-color: $marker-color-border;
  }

  &::after {
    background-color: $path-color;
  }

  .progress-text,
  .progress-text a {
    color: $text-color;
  }
}

// States
.progress-step {
  text-align: center;

  // Active state
  &.active {
    @include progress-state($progress-color);
  }

  &.completed {
    @include progress-state($progress-color-dark, $path-color: $progress-color-grey);
  }

  &:hover {
    @include progress-state($progress-color-light);
  }

  &:last-child {
    flex-grow: 1;
  }

  &::after {
    right: -50%;
  }
}

.progress-marker {
  margin-left: auto;
  margin-right: auto;
}