From eb0b1b9def4a50e76e5cf4ce90532c014194a2df Mon Sep 17 00:00:00 2001
From: antoine37120 <ant.dupre@gmail.com>
Date: Wed, 26 Apr 2023 18:03:38 +0200
Subject: [PATCH] feature: ajout styles circles creation step

---
 src/index.js              |  2 +-
 src/styles/circles.scss   | 74 +++++++++++++++++++++++++++++++++++++++
 src/styles/dashboard.scss |  1 +
 3 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 src/styles/circles.scss

diff --git a/src/index.js b/src/index.js
index 22a9a27..4eaecb9 100644
--- a/src/index.js
+++ b/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");
diff --git a/src/styles/circles.scss b/src/styles/circles.scss
new file mode 100644
index 0000000..34ae7c8
--- /dev/null
+++ b/src/styles/circles.scss
@@ -0,0 +1,74 @@
+.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
diff --git a/src/styles/dashboard.scss b/src/styles/dashboard.scss
index a9c3f4e..68f9ef8 100644
--- a/src/styles/dashboard.scss
+++ b/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);
-- 
GitLab