EQ stepper and select style

eqlair/src/app/app.scss

@@ -46,6 +46,10 @@ textarea {
   border-radius: 6px;
 }
 
+select {
+  min-width: 235px;
+}
+
 // forms
 select, input {
   padding: 10px 16px;

eqlair/src/app/pages/home/home.html

@@ -63,19 +63,18 @@
     name="keywords"
     placeholder="Saisir des mots clés pour affiner votre rechrche"
     type="text">
-  <sae-wip-block>
-    rechercher
   <br>
   <sae-m-button
     [disabled]="disableSearch"
     kind="secondary"
     label="Réinitialiser"
+    size="medium"
   ></sae-m-button>
   <sae-m-button
     [disabled]="disableSearch"
     kind="primary"
     label="Rechercher des cas similaires"
+    size="medium"
   ></sae-m-button>
 
-  </sae-wip-block>
 </div>

eqlair/src/app/pages/home/home.scss

@@ -1,6 +1,17 @@
 :host {
+  sae-stepper {
+    display: block;
+    width: 100%;
+    margin-bottom: 1rem;
+    height: 50px;
+  }
+
   textarea {
     margin: 1rem 0;
     width: 100%;
   }
+
+  .optionnal {
+    color: grey;
+  }
 }

my-workspace/projects/sae-lib/stepper/stepper.html

@@ -1,7 +1,13 @@
 <div class="stepper">
   @for (ii of stepArray; track ii) {
+
+    @if (ii > 0) {
+      <div class="separator"></div>
+    }
     <div class="step {{ currentStep >= ii ? 'is-active' : 'is-inactive'}}">
+      <span class="label">
       {{ ii }}
+      </span>
     </div>
   }
 </div>

my-workspace/projects/sae-lib/stepper/stepper.scss

@@ -1,8 +1,25 @@
 :host {
+  .separator {
+    width: 100px;
+    background: grey;
+    height: 4px;
+    border-radius: 3px;
+
+    &.is-active {
+      background: blue;
+    }
+  }
+
   .step {
-    border-radius: 1px solid grey;
-    padding: 1rem;
+    border-radius: 100px;
+    border: solid 2px grey;
+    padding: 1rem 1.5rem;
     background: white;
+    width: 1.5rem;
+    float: left;
+    display: flex;
+    margin-right: 1rem;
+
 
     &.is-active {
       color: black;
@@ -11,6 +28,7 @@
 
     &.is-inactive {
       background: grey;
+      border-color: black;
       color: white;
     }
   }