client/src/app/+signup/+register/custom-stepper.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 $grey-color: #9CA3AB;
   5 $index-block-height: 32px;
   6
   7 header {
   8   display: flex;
   9   justify-content: space-between;
  10   font-size: 15px;
  11   margin-bottom: 30px;
  12
  13   .step-info {
  14     color: $grey-color;
  15     display: flex;
  16     flex-direction: column;
  17     align-items: center;
  18     width: $index-block-height;
  19
  20     .step-index {
  21       display: flex;
  22       justify-content: center;
  23       align-items: center;
  24       width: $index-block-height;
  25       height: $index-block-height;
  26       border-radius: 100px;
  27       border: 2px solid $grey-color;
  28       margin-bottom: 10px;
  29
  30       my-global-icon {
  31         @include apply-svg-color(var(--mainBackgroundColor));
  32
  33         width: 22px;
  34         height: 22px;
  35       }
  36     }
  37
  38     .step-label {
  39       width: max-content;
  40     }
  41
  42     &.active,
  43     &.completed {
  44       .step-index {
  45         border-color: var(--mainColor);
  46         background-color: var(--mainColor);
  47         color: var(--mainBackgroundColor);
  48       }
  49
  50       .step-label {
  51         color: var(--mainColor);
  52       }
  53     }
  54
  55     &.completed {
  56       cursor: pointer;
  57     }
  58   }
  59
  60   .connector {
  61     flex: auto;
  62     margin: $index-block-height/2 10px 0 10px;
  63     height: 2px;
  64     background-color: $grey-color;
  65   }
  66 }