packages/styles/scss/components/_wizard.scss

   1 @use 'sass:math';
   2
   3 $height-wizard: rem(6) !default;
   4 $size-current-pin: rem(16) !default;
   5
   6 .wizard {
   7         block-size: $height-wizard;
   8         display: flex;
   9
  10         &-container {
  11                 padding-inline-start: rem(2); // "optical" alignment, difficult to align text and circle ^^
  12         }
  13
  14         &-marker {
  15                 display: flex;
  16                 inline-size: $size-current-pin;
  17                 block-size: $size-current-pin;
  18                 margin-inline-start: -1px; // trick for high zoom level ^^
  19                 border-radius: 50%;
  20                 position: relative;
  21                 inset-block-start: -#{$height-wizard - rem(1)};
  22                 background-image: radial-gradient(
  23                         circle,
  24                         var(--primary) 0,
  25                         var(--primary) #{math.div($height-wizard, 2)},
  26                         transparent #{math.div($height-wizard, 2)}
  27                 );
  28         }
  29
  30         &-marker-icon {
  31                 &#{&} {
  32                         fill: var(--primary-contrast);
  33                 }
  34         }
  35
  36         &-item {
  37                 background: var(--background-strong);
  38                 position: relative;
  39
  40                 &:not(:last-child) {
  41                         @extend .flex-1;
  42                 }
  43
  44                 // positionned first element always with a aria-current/is-complete
  45                 &:first-child {
  46                         background: none;
  47                         background-image: linear-gradient(
  48                                 to left,
  49                                 var(--background-strong) 0,
  50                                 var(--background-strong) calc(100% - #{math.div($height-wizard, 2)}),
  51                                 transparent calc(100% - #{math.div($height-wizard, 2)})
  52                         );
  53                 }
  54
  55                 &:last-child {
  56                         background: none;
  57                         background-image: linear-gradient(
  58                                 to right,
  59                                 var(--background-strong) 0,
  60                                 var(--background-strong) 50%,
  61                                 transparent 50%
  62                         );
  63
  64                         &.is-complete::after {
  65                                 content: none;
  66                         }
  67                 }
  68
  69                 &.is-complete {
  70                         .wizard-marker {
  71                                 background-color: var(--primary);
  72                                 position: relative;
  73                                 inset-block-start: -#{$height-wizard - rem(1)};
  74                         }
  75                 }
  76
  77                 &[aria-current='step'] {
  78                         .wizard-marker {
  79                                 background-image: radial-gradient(
  80                                         circle,
  81                                         var(--primary-contrast) 0,
  82                                         var(--primary-contrast) #{math.div($height-wizard, 2)},
  83                                         var(--primary) #{math.div($height-wizard, 2)}
  84                                 );
  85                         }
  86                 }
  87
  88                 &.is-complete::before {
  89                         content: '';
  90                         background: var(--primary);
  91                 }
  92
  93                 &.is-complete::after {
  94                         content: '';
  95                         position: relative;
  96                         display: block;
  97                         inline-size: 100%;
  98                         block-size: $height-wizard;
  99                         inset-block-start: -$size-current-pin;
 100                         background-color: var(--primary);
 101                 }
 102         }
 103
 104         &-container--no-text-displayed &-item[aria-current='step'] &-item-inner {
 105                 @extend .invisible;
 106         }
 107
 108         &-label {
 109                 flex: 1;
 110                 text-align: center;
 111
 112                 &:first-child {
 113                         text-align: start;
 114                 }
 115
 116                 &:last-child {
 117                         text-align: end;
 118                 }
 119
 120                 &.is-complete {
 121                         opacity: 0.5;
 122                 }
 123
 124                 &[aria-current='step'] {
 125                         font-size: 1em;
 126                         font-weight: var(--font-weight-semibold);
 127                 }
 128         }
 129 }