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

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