energylink/public/sass/components/_panel_gettingstarted.scss

ul.gettingstarted-flex-container {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  padding:  20px;
  list-style-type: none;
}

.gettingstarted-flex-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

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

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

a.gettingstarted-blurb:hover{
  text-decoration: underline;
}

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

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

.gettingstarted-icon-container {
  height: 50px;
}

.gettingstarted-icon-active {
  color: $brand-primary;
  -webkit-text-fill-color: transparent;
  background: $brand-gradient;
  -webkit-background-clip: text;
  text-decoration:none;
  font-size: 35px;
  vertical-align: sub;
  animation: iconPulse 500ms forwards 1s;
  will-change: zoom;
}

.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 {
  float: right;
  padding: 0;
  margin: 0 2px 0 0;
  background-color: transparent;
  border: none;
  i {
    font-size: 80%;
  }
  color: $text-color-weak;
  &:hover {
    color: $white;
  }
}

@keyframes iconPulse {
  from {
    zoom: 100%;
  }

  50% {
    zoom: 102%;
  }

  to {
    zoom: 100%;
  }
}


// ----- Progress Tracker -----

// ----- Variables -----

// 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
$progress-tracker-padding:  5px !default;

$marker-size:               60px !default;
$marker-size-half:          ($marker-size / 2);
$marker-size-third:         ($marker-size / 3);
$marker-size-quarter:       ($marker-size / 4);
$marker-spacing:            10px !default;

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

$text-padding:              $marker-size-half !default;
$text-padding-X:            $marker-size-third !default;
$text-padding-Y:            5px !default;
$text-padding--vertical:    $marker-size + $marker-size-half !default;

// Only needed for short text version, the word size should be the width of the widest word without padding.
$word-size:                     54px !default;
$progress-tracker-word-padding: ($word-size + $text-padding-X + $marker-size-half) / 2;

// Animations/Transitions
$animation-duration:        0.3s !default;
$ripple-color:              rgba(0, 0, 0, 0.3) !default;

// ----- Elements -----

// 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;
      transition: background-color $animation-duration;
    }

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

    > a {
      display: block;
    }

  }

// Progress marker
    .progress-marker {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 20;
      width: $marker-size;
      height: $marker-size;
      padding-bottom: 2px; // To align text within the marker
      color: #fff;
      font-weight: 400;
      border: 2px solid transparent;
      border-radius: 50%;
      transition: background-color, border-color;
      transition-duration: $animation-duration;
    }


// Progress text
  .progress-text {
    display: block;
    padding: $text-padding-Y $text-padding-X;
    overflow: hidden;
    text-overflow: ellipsis;
  }
    .progress-title {
      margin-top: 0;
    }


// Step state mixin - The first arugment is required and the rest are optional, if you pass in null the value will not be changed.
@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-step > a .progress-text {
    color: $text-color;
  }
}


// States
  .progress-step {

    // Inactive - Default state
    @include progress-state($progress-color, null, #fff, $progress-color-grey-light, $progress-color-grey-dark);

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

    // Complete state
    &.is-complete {
      @include progress-state($progress-color-dark, $path-color: $progress-color-grey);
    }

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

  }



// ----- Modifiers -----

// Center align markers and text
.progress-tracker--center {

  .progress-step {
    text-align: center;

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

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

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


// Right align markers and text
.progress-tracker--right {

  .progress-step {
    text-align: right;

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

    &::after {
      right: calc(-100% + #{$marker-size-half});
    }
  }

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


// Border around steps (Only for use without text)
.progress-tracker--border {
  padding: $progress-tracker-padding;
  border: 2px solid $progress-color-grey;
  border-radius: $marker-size + ($progress-tracker-padding * 2);
}


// Spaces between markers
.progress-tracker--spaced {

  .progress-step {

    &::after {
      width: calc(100% - #{$marker-size + ($marker-spacing * 2)});
      margin-right: ($marker-size-half + $marker-spacing);
    }
  }

}


// Word below markers
.progress-tracker--word {
  padding-right: $progress-tracker-word-padding;
  overflow: hidden;

  .progress-text {
    display: inline-block;
    white-space: nowrap;
  }

    .progress-title {
      margin: 0;
    }

}


.progress-tracker--word-center {
  padding-right: $progress-tracker-word-padding;
  padding-left: $progress-tracker-word-padding;

  .progress-text {
    padding-right: 0;
    padding-left: 0;
    transform: translateX(calc(-50% + #{$marker-size-half}));
  }

}


.progress-tracker--word-right {
  padding-right: 0;
  padding-left: $progress-tracker-word-padding;

  .progress-text {
    padding-left: 0;
    transform: translateX(calc(-100% + #{$marker-size}));
  }

}


// Text below markers
.progress-tracker--text {

  .progress-step {

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

}


// Text above markers
.progress-tracker--text-top {

  .progress-step::after {
    top: auto;
  }

    .progress-text {
      height: 100%;
    }

    .progress-marker {
      bottom: $marker-size;
    }

}


// Text inline with markers
.progress-tracker--text-inline {

  .progress-step {
    display: flex;
  }

    .progress-text {
      position: relative;
      z-index: 30;
      max-width: 70%;
      white-space: nowrap;
      padding-top: 0;
      padding-bottom: 0;
      background-color: #fff;
    }

      .progress-title {
        margin: 0;
      }

}


// Square markers
.progress-tracker--square {

  .progress-step {
    padding-top: 0;
  }

    .progress-marker {
      transform: scaleX(0.33) translateY(- $path-position);
      border-radius: 0;
    }

}


// Overflow on small screens
@media (max-width: 399px) {
  .progress-tracker-mobile {
    overflow-x: auto;

    .progress-tracker {
      min-width: 200%;
    }
  }
}


// Vertical layout
.progress-tracker--vertical {
  flex-direction: column;

  .progress-step {
    flex: 1 1 auto;

    &::after {
      right: auto;
      top: $marker-size-half;
      left: $path-position;
      width: $path-height;
      height: 100%;
    }
  }

    .progress-marker {
      position: absolute;
      left: 0;
    }

    .progress-text {
      padding-top: $marker-size-quarter;
      padding-left: $text-padding--vertical;
    }

    .progress-step:not(:last-child) .progress-text {
      padding-bottom: $text-padding--vertical;
    }
}