From b0b153be93144e036e988dde2ae32289f9f3fa09 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 2 Sep 2025 13:58:35 +0200
Subject: [PATCH] style multi selector

---
 .../filters/filters-group/filters-group.scss  |  6 +++
 .../inputs/multi-selector/multi-selector.html | 13 +++--
 .../inputs/multi-selector/multi-selector.scss | 49 ++++++++++++++++---
 3 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
index f5f37ac..bfafa39 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
@@ -4,6 +4,11 @@
   display: flex;
   flex-direction: row;
   gap: 10px;
+
+  sae-multi-selector {
+    margin-left: 20px;
+ 
+  }
 }
 
 .dropdown {
@@ -40,6 +45,7 @@
 
 .chips-listing {
   display: flex;
+  border-radius: 8px;
 }
 
 .filter-group {
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
index bee9fae..7399fa7 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
@@ -1,13 +1,16 @@
 <!--    sélecteurs-->
 <div class="input-box">
-  <i class="ri-search-line"></i>
-  <div class="label">{{ label }}</div>
+  <i class="ri-search-line search-placeholder"></i>
+  <div class="label">
+    <span class="d-none">
+    {{ label }}
+    </span>
+  </div>
   <input class="is-hidden" placeholder="{{label}}" type="text">
   <div class="dropdown">
-    <div class="dropdown-button">
-
+    <div class="dropdown-button selector-button">
       <!--          bouton-->
-      <i class="ri-arrow-down-box-fill"></i>
+      <i class="ri-arrow-down-s-line"></i>
     </div>
     <div class="dropdown-list">
       <!--      selected:-->
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
index 16a0347..4ba7fcd 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
@@ -3,12 +3,42 @@
 .input-box {
   margin-left: -1rem;
 
-  i {
-    position: relative;
-    left: 2rem;
-
+  .d-none {
+    display: none;
   }
 
+  i {
+
+    top: 10px;
+    left: 1rem;
+
+    &::before {
+      left: 10px;
+      top: 10px;
+    }
+
+    .disabled & {
+      color: #525668;
+      fill: #525668;
+    }
+  }
+
+  .search-placeholder,
+  .selector-button {
+    position: relative;
+  }
+
+  .search-placeholder {
+    top: 30px;
+    left: 16px;
+  }
+
+  .selector-button {
+    top: -30px;
+    right: -177px;
+  }
+
+
   input {
 
     border-radius: 8px;
@@ -16,14 +46,19 @@
     background: var(--color-background-card-on-base, #FFF);
 
 
-    padding-left: 2rem;
-    padding-top: 6px;
-    padding-bottom: 6px;
+    padding: 10px 40px;
+
+    width: 210px;
+    height: 42px;
 
     overflow: hidden;
     color: var(--color-text-secondary, #525668);
     text-overflow: ellipsis;
     font-size: var(--Font-Base, 14px);
 
+
+    .disabled & {
+      border-color: #525668;
+    }
   }
 }