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

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4
   5 $index-block-height: 40px;
   6
   7 header {
   8   margin-bottom: 40px;
   9   padding-bottom: 60px;
  10   width: 100%;
  11   background-color: pvar(--mainColorVeryLight);
  12 }
  13
  14 .header-steps {
  15   max-width: 800px;
  16   display: flex;
  17   justify-content: space-between;
  18   margin: auto;
  19
  20   // Useful on small screens
  21   padding: 0 20px;
  22 }
  23
  24 .step-index {
  25   display: flex;
  26   justify-content: center;
  27   align-items: center;
  28   width: $index-block-height;
  29   height: $index-block-height;
  30   border-radius: $index-block-height;
  31   border: 1px solid pvar(--mainColor);
  32   margin-bottom: 10px;
  33   font-size: 24px;
  34   position: relative;
  35
  36   .completed-icon {
  37     width: 16px;
  38     height: 16px;
  39     border-radius: 16px;
  40     background-color: pvar(--mainBackgroundColor);
  41     position: absolute;
  42     bottom: 0;
  43     right: 0;
  44     display: flex;
  45     justify-content: center;
  46     align-items: center;
  47     border: 1px solid pvar(--mainColor);
  48
  49     my-global-icon {
  50       @include apply-svg-color(pvar(--mainColor));
  51
  52       display: flex;
  53       width: 12px;
  54       height: 12px;
  55     }
  56   }
  57 }
  58
  59 .step-label {
  60   width: max-content;
  61   font-size: 18px;
  62 }
  63
  64 .step-info {
  65   color: pvar(--mainColor);
  66   display: flex;
  67   flex-direction: column;
  68   align-items: center;
  69   width: $index-block-height;
  70   opacity: 0.5;
  71   cursor: default;
  72
  73   &.c-hand {
  74     cursor: pointer;
  75   }
  76
  77   &.active,
  78   &.completed {
  79     .step-index {
  80       background-color: pvar(--mainColor);
  81       color: pvar(--mainBackgroundColor);
  82     }
  83
  84     .step-label {
  85       color: pvar(--mainColor);
  86     }
  87   }
  88
  89   &.active {
  90     opacity: 1;
  91   }
  92 }
  93
  94 .connector {
  95   flex: auto;
  96   margin: math.div($index-block-height, 2) 10px 0 10px;
  97   height: 2px;
  98   background-color: pvar(--mainColor);
  99   opacity: 0.3;
 100 }
 101
 102 @media screen and (min-width: $small-view) {
 103   .margin-content {
 104     max-width: 1000px;
 105     margin: auto;
 106   }
 107 }
 108
 109 @media screen and (max-width: $small-view) {
 110   .step-label {
 111     width: auto;
 112     text-align: center;
 113   }
 114 }