From f9ad9444a9862ffd18d97f693941bdd54744a63e Mon Sep 17 00:00:00 2001
From: Christophe Robillard <christophe.robillard@beta.gouv.fr>
Date: Thu, 11 Feb 2021 15:37:45 +0100
Subject: [PATCH] add style for ComboMultipleDropdownList

---
 app/assets/stylesheets/forms.scss             | 66 +++++++++++++++++++
 .../stylesheets/personnes_impliquees.scss     | 43 +++++++++++-
 app/assets/stylesheets/procedure_show.scss    | 38 +++++++++++
 3 files changed, 146 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index 3d6afeccf..d37c4c8df 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -305,6 +305,28 @@
     border-color: $blue;
   }
 
+  [data-reach-combobox-token-list] {
+    padding: $default-padding;
+    display: flex;
+  }
+
+  [data-reach-combobox-token] {
+    border: solid 1px $border-grey;
+    color: $black;
+    margin-top: $default-padding;
+    margin-bottom: $default-padding;
+    margin-right: 0.5 * $default-padding;
+    border-radius: 4px;
+    padding: $default-padding;
+    cursor: pointer;
+    list-style: none;
+  }
+
+  [data-reach-combobox-token]:focus {
+    background-color: $black;
+    color: $white;
+  }
+
   .select2 {
     min-width: 50%;
   }
@@ -481,11 +503,55 @@
   }
 }
 
+[data-react-class="ComboMultipleDropdownList"] {
+  margin-bottom: $default-fields-spacer;
+
+  [data-reach-combobox-input] {
+    outline: none;
+    border: none;
+    flex-grow: 1;
+    margin: 0.25rem;
+    background-image: image-url("icons/chevron-down");
+    background-size: 14px;
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+  }
+
+  [data-reach-combobox-input]:focus {
+    outline: solid;
+    outline-color: $light-blue;
+  }
+}
+
+[data-combobox-token-label] {
+  border: 1px solid #CCCCCC;
+  border-radius: 4px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
 [data-reach-combobox-option] {
   font-size: 16px;
+  list-style-type: none;
 }
 
 [data-reach-combobox-option][aria-selected="true"] {
   background: $light-blue !important;
   color: $white;
 }
+
+[data-combobox-separator] {
+  font-size: 16px;
+  color: $dark-grey;
+  margin-top: 6px;
+}
+
+[data-combobox-remove-token] {
+  color: $dark-grey;
+  padding-right: 4px;
+}
+
+
+[data-reach-combobox-input]:focus {
+  outline-color: $light-blue;
+}
diff --git a/app/assets/stylesheets/personnes_impliquees.scss b/app/assets/stylesheets/personnes_impliquees.scss
index ac908f538..829abbf38 100644
--- a/app/assets/stylesheets/personnes_impliquees.scss
+++ b/app/assets/stylesheets/personnes_impliquees.scss
@@ -1,7 +1,10 @@
+@import "constants";
+@import "colors";
+
 .personnes-impliquees {
   padding-bottom: 50px;
 
-  ul {
+  ul.tab-list {
     list-style-type: disc;
     margin-left: 16px;
   }
@@ -11,4 +14,42 @@
     padding: 12px;
   }
   // scss-lint:enable
+  [data-react-class="ComboMultipleDropdownList"] {
+    margin-bottom: $default-fields-spacer;
+
+    [data-reach-combobox-token-list] {
+      padding: 0.5 * $default-padding;
+      display: flex;
+    }
+
+    [data-reach-combobox-token] {
+      border: solid 1px $border-grey;
+      color: $black;
+      margin-top: 0.5 * $default-padding;
+      margin-bottom: 0.5 * $default-padding;
+      margin-right: 0.5 * $default-padding;
+      border-radius: 4px;
+      padding: 0.5 * $default-padding;
+      cursor: pointer;
+      list-style: none;
+    }
+
+    [data-reach-combobox-token]:focus {
+      background-color: $black;
+      color: $white;
+    }
+
+
+    [data-reach-combobox-input] {
+      outline: none;
+      border: none;
+      flex-grow: 1;
+      margin: 0.25rem;
+    }
+
+    [data-reach-combobox-input]:focus {
+      outline: solid;
+      outline-color: $light-blue;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/procedure_show.scss b/app/assets/stylesheets/procedure_show.scss
index 9303ad8ca..c05969248 100644
--- a/app/assets/stylesheets/procedure_show.scss
+++ b/app/assets/stylesheets/procedure_show.scss
@@ -61,4 +61,42 @@
     margin-bottom: 3 * $default-spacer;
     text-align: center;
   }
+
+  [data-react-class="ComboMultipleDropdownList"] {
+    margin-bottom: $default-fields-spacer;
+
+    [data-reach-combobox-token-list] {
+      padding: 0.25 * $default-padding;
+      display: inline-block;
+      width: 100%;
+    }
+
+    [data-reach-combobox-token] {
+      border: solid 1px $border-grey;
+      color: $black;
+      margin: 0.25 * $default-padding;
+      border-radius: 2px;
+      padding: 0.25 * $default-padding;
+      cursor: pointer;
+      list-style: none;
+    }
+
+    [data-reach-combobox-token]:focus {
+      background-color: $black;
+      color: $white;
+    }
+
+
+    [data-reach-combobox-input] {
+      outline: none;
+      border: none;
+      flex-grow: 1;
+      margin: 0.25rem;
+    }
+
+    [data-reach-combobox-input]:focus {
+      outline: solid;
+      outline-color: $light-blue;
+    }
+  }
 }