feature: ajout styles circles creation step

src/index.js

@@ -3,7 +3,7 @@ import('./utils.js').then(utils => {
     core.Helpers.importCSS(utils.path() + '/styles/index.css?min');
     core.Helpers.importCSS(utils.path() + '/styles/custom-grid.css?min');
     core.Helpers.importCSS(utils.path() + '/styles/dashboard.css?min');
-    core.Helpers.importCSS(utils.path() + '/styles/user-profile.css?min');
+    core.Helpers.importCSS(utils.path() + '/styles/circles.css?min');
   
     await import("./custom-tzcld.js");
     await import("./widjets-display-user-tzcld.js");

src/styles/circles.scss

+.step-progress {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 300px;
+    max-width: 80%;
+    margin: 15px auto;
+    padding-bottom: 60px;
+    &>div {
+        position: relative;
+    }
+    .first,
+    .two {
+        width: 40px;
+        height: 40px;
+        background:  var(--color-third);
+        line-height: 34px;
+        border: 3px solid var(--color-third);
+        position: relative;
+        border-radius: 50%;
+        color: #fff;
+        text-align: center;
+        font-size: 20px;
+        font-weight: 600;
+
+        &>div {
+            position: absolute;
+            top: 140%;
+            left: 50%;
+            transform: translate(-50%, 0);
+            content: 'test';
+            white-space: nowrap;
+            font-size: 18px;
+            font-weight: 900;
+            color:  var(--color-secondary);
+            line-height: 25px;
+        }
+    }
+    .first {
+        
+    }
+    .line {
+        flex: 1;
+        height: 4px;
+        background:  var(--color-third);
+        margin: 0 3px;
+    }
+    .two {
+        
+    }
+}
+#admin-circles-create {
+    .step-progress {
+        .line {
+            background:  var(--color-gray-1);
+        }
+        .two {
+            background:  #fff;
+            color:  var(--color-gray-1);
+            border: 3px solid var(--color-gray-1);
+            &>div {
+                color: var(--color-gray-1);
+            }
+        }
+    }
+}
+#circles-create-step-2 {
+    .step-progress {
+        .first {
+            background:  var(--color-secondary);
+            border: 3px solid var(--color-secondary);
+        }
+    }
+}
\ No newline at end of file

src/styles/dashboard.scss

@@ -6,6 +6,7 @@
     --color-dev-heading: #1a2c5f;
     --color-fourth: #1F82C0;
     --color-body: #636363;
+    --color-gray-1: #D3D5DD;
   }
 body {
     color: var(--color-body);