From 61000256138e87e5a3fd62061394a2573dea9a88 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Wed, 6 Dec 2023 16:31:07 +0100
Subject: [PATCH] refactoring component and its classes

---
 resources/css/components/filters-toolbar.css | 122 ++++++++++++++++---
 1 file changed, 104 insertions(+), 18 deletions(-)

diff --git a/resources/css/components/filters-toolbar.css b/resources/css/components/filters-toolbar.css
index 412e4c1..c83b18e 100644
--- a/resources/css/components/filters-toolbar.css
+++ b/resources/css/components/filters-toolbar.css
@@ -1,30 +1,22 @@
 .filters-toolbar {
   @apply py-8;
-  ul {
-    @apply flex
-    flex-row
-    justify-start
-    md:justify-center
-    lg:justify-start
-  
-    flex-wrap
-    container
-    mx-auto 
-    gap-x-4 gap-y-3 p-0;
-  }
   li {
     @apply h-auto;
   }
+  hr {
+    @apply border-neutral-300 my-6;
+  }
 
   &__posts-results-indications {
-    @apply flex justify-between items-center;
+    @apply flex flex-wrap justify-between items-center pb-4;
   }
   &__posts-results-amount {
-    @apply pb-4;
-
     .results-filter-name {
       @apply font-bold;
     }
+    .results-amount {
+      @apply font-semibold;
+    }
     &.filter-disable {
       .results-filter-name,
       .results-for {
@@ -32,6 +24,12 @@
       }
     }
   }
+  &__accessibility-action-buttons {
+    @apply flex flex-wrap gap-x-6 justify-start;
+    button {
+      @apply underline;
+    }
+  }
   &__action-button {
     @apply bg-white shadowed py-4 px-4 rounded-xl 
     font-bold 
@@ -39,8 +37,7 @@
     justify-center
     items-center
     gap-3
-    w-fit
-    h-full;
+    w-fit;
     outline-offset: 0 !important;
     transition: transform 0.2s ease-in-out;
     &:hover {
@@ -53,7 +50,6 @@
       @apply block;
     }
   }
-
   &__action-button--load-all {
     @apply underline;
   }
@@ -61,4 +57,94 @@
     @apply text-secondary;
     outline: transparent;
   }
+
+  /* FILTERS */
+  &__filters-container {
+    @apply flex gap-4;
+  }
+  .publication-type-filters-wrapper {
+    @apply flex
+    flex-row
+    justify-start
+    md:justify-center
+    lg:justify-start
+    flex-wrap
+    container
+    w-fit
+    gap-x-4 gap-y-3 p-0;
+  }
+
+  .action-thematiques-filters-wrapper {
+    @apply h-20  border-b border-neutral-300;
+  }
+  &__action-thematiques-filters {
+    @apply absolute pb-0 border-b border-neutral-400 bg-white border  w-fit rounded-xl;
+    /* THEMATIQUES FILTERS  */
+    .filter-by-thematiques-submenu-toggle {
+      @apply font-bold p-4 rounded-xl flex items-center gap-12;
+      box-sizing: border-box;
+      outline-offset: 0;
+      outline-radius: 10px;
+
+      &:after {
+        @apply inline-block top-0 right-0 bottom-0 w-3 h-3;
+        content: '';
+        filter: invert(17%) sepia(69%) saturate(4735%) hue-rotate(351deg) brightness(94%)
+          contrast(94%);
+        background-image: url('../resources/img/graphic-assets/chevron_down.svg');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        transform: translateY(1px);
+        transition: transform 0.2s ease-in-out;
+      }
+      &[active] {
+        &:after {
+          transform: translateY(2px) rotate(180deg);
+        }
+      }
+    }
+
+    .action-thematiques-filters-list {
+      @apply w-full flex-col items-start gap-0 pb-4 mt-4;
+      /* @apply bg-red-500 absolute bottom-0 left-0 translate-y-full w-full; */
+    }
+    li {
+      @apply flex gap-2 items-center justify-start w-full px-4 py-1;
+    }
+    li:hover {
+      @apply bg-neutral-100 rounded-md;
+    }
+  }
+
+  &__active-filters-viewer {
+    @apply mt-2 flex flex-wrap gap-6 items-center;
+    .active-filters-button-container {
+      @apply flex gap-4 flex-wrap;
+      button {
+        @apply bg-neutral-100 px-4 py-3 rounded-xl font-bold h-fit;
+      }
+    }
+    .filters-toolbar__action-button--reset-filter {
+      @apply !py-2;
+    }
+
+    .filters-toolbar__action-button--active-filter-remover {
+      @apply flex items-center gap-3;
+      &:after {
+        @apply inline-block w-5 h-5;
+        content: '';
+        background-image: url('../resources/img/graphic-assets/cross-in-cirle-thick.svg');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+      }
+    }
+  }
+
+  &:not([thematique-filter-active]) {
+    .filters-toolbar__active-filters-viewer {
+      @apply hidden;
+    }
+  }
 }