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

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