lens/src/renderer/components/stepper/stepper.scss

/**
 * Copyright (c) 2021 OpenLens Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */


.Stepper {
  --stepper-color: $contentColor;
  --stepper-color-text: $textColorPrimary;
  --stepper-color-active: var(--color-primary);
  --stepper-color-point: var(--stepper-color);

  $pointSize: $unit * 2.5;
  font-size: $font-size-small;

  .step {
    position: relative;
    text-align: center;
    &.active, &.done {
      .point {
        color: $textColorAccent;
        background: var(--stepper-color-active);
      }
    }
    &.active {
      .step-title {
        color: $textColorAccent;
      }
    }
    &.done > .line {
      background: var(--stepper-color-active);
    }
    .step-title {
      font-size: 120%
    }
  }

  .point {
    position: relative;
    display: block;
    margin: auto;
    width: $pointSize;
    height: $pointSize;
    line-height: $pointSize;
    background: var(--stepper-color-point);
    color: var(--stepper-color-text);
    font-size: $font-size-small;
    border-radius: 50%;
  }

  .line {
    position: absolute;
    width: 100%;
    height: 1px;
    top: $pointSize * 0.5;
    background: var(--stepper-color-point);
  }
}