From 8e7461229b7fb6905b52c64577b01a9ccd2861dd Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Tue, 10 Sep 2024 18:09:05 +0200
Subject: [PATCH] Update inspirations/Selector component style

---
 src/components/inspirations/Selector.vue | 105 ++++++++++++++++++++---
 1 file changed, 94 insertions(+), 11 deletions(-)

diff --git a/src/components/inspirations/Selector.vue b/src/components/inspirations/Selector.vue
index b88932a..bdf8d16 100644
--- a/src/components/inspirations/Selector.vue
+++ b/src/components/inspirations/Selector.vue
@@ -1,20 +1,21 @@
 <template>
   <!-- TODO: dynamiser la valeur de l'attribut style: url('inspiration.cover') -->
   <div
-    id="inspiration-select"
+    id="inspirations-dropdown"
     class="flex"
     style="
       --image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
     "
   >
-    <label for="inspirations">Choisir une inspiration</label>
+    <label for="inspirations-select" class="text-sm">Choisir une inspiration</label>
     <Select
-      id="inspirations"
+      id="inspirations-select"
       v-model="selectedInspiration"
       :options="inspirations"
       optionLabel="name"
       optionValue="value"
-      class=""
+      class="font-serif"
+      data-icon="chevron-single-down"
     />
   </div>
 </template>
@@ -29,30 +30,112 @@ const inspirations = ref([
 ]);
 </script>
 
-<style scoped>
-#inspiration-select {
+<style>
+#inspirations-dropdown {
   --direction: column;
   --items: flex-start;
   --wrap: no-wrap;
   --row-gap: 0;
-  position: relative;
-  float: right;
+  position: absolute;
+  top: 0;
+  right: 0;
   background: var(--color-background);
-  border-radius: var(--rounded-full);
+  border-radius: var(--rounded-lg);
   height: 3.75rem;
+  width: 20rem;
   padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
   margin-bottom: var(--space-16);
 }
-#inspiration-select::before {
+#inspirations-dropdown::before {
   content: "";
   position: absolute;
   left: var(--space-8);
   width: 2.75rem;
   height: 2.75rem;
-  border-radius: var(--rounded-full);
+  border-radius: var(--rounded-md);
   background-image: var(--image);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
 }
+
+#inspirations-select,
+#inspirations-select_list {
+  border: 1px solid var(--color-grey-200);
+}
+#inspirations-select:hover {
+  border-color: var(--color-grey-300);
+}
+[role="combobox"][aria-expanded="true"] {
+  outline: 2px solid var(--color-focus-ring);
+}
+#inspirations-select,
+[role="combobox"] {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1.875rem var(--space-48) var(--space-8) var(--space-64);
+  cursor: pointer;
+}
+
+/* Icon */
+#inspirations-select svg {
+  display: none; /* Hide default component svg */
+}
+#inspirations-select[data-icon]::before {
+  --icon-color: var(--color-grey-700);
+  position: absolute;
+  right: var(--space-8);
+  top: .625rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: .625rem;
+}
+#inspirations-dropdown label {
+  color: var(--color-grey-700);
+  letter-spacing: var(--tracking-wider);
+}
+
+/* Options */
+#inspirations-select_list {
+  margin-top: var(--space-4);
+  border-radius: var(--rounded-md);
+  background: var(--color-background);
+  box-shadow: var(--shadow);
+  padding: var(--space-8);
+}
+#inspirations-select_list > * {
+  font-family: var(--font-serif);
+  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-48);
+  border-radius: var(--rounded-sm);
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 2.75rem;
+  cursor: pointer;
+}
+#inspirations-select_list > * + * {
+  margin-top: var(--space-4);
+}
+#inspirations-select_list > *::before {
+  content: "";
+  position: absolute;
+  left: var(--space-8);
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--rounded-sm);
+  background-image: var(--image);
+  background-color: var(--color-grey-200);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+#inspirations-select_list > *:hover {
+  background-color: var(--color-grey-50);
+}
+#inspirations-select_list > *:focus,
+#inspirations-select_list > *:focus-visible,
+#inspirations-select_list > [data-p-focused="true"] {
+  outline: 2px solid var(--color-focus-ring);
+}
 </style>