filtres enquetes

assets/css/components/_sort.scss

@@ -23,6 +23,18 @@
         
     }
 
+    .icon{
+        --size:  10px;
+        height: var(--size);
+        width: var(--size);
+        position: relative;
+        top: -8px;
+        svg{
+            width: 100%;
+            fill: var(--color-txt);
+        }
+    }
+
 
     &[data-sort-type="up"]{
         .arrow{
@@ -30,18 +42,10 @@
         }
     }
 
-    &[data-sort="false"]{
-        color: var(--color-txt-light);
-        svg{
-            fill: var(--color-txt-light);
-        }
-
-    }
 
 
 
-    &[data-sort="false"],
+
-    &[data-sort="true"]{
         &:hover{
                 color: var(--grey-100);
                 svg{
@@ -50,7 +54,7 @@
             }
         
     
-    }
+    
 
 
 

assets/css/style.css

@@ -491,19 +491,24 @@ button:disabled {
   width: 100%;
   fill: var(--color-txt);
 }
+.sort .icon {
+  --size: 10px;
+  height: var(--size);
+  width: var(--size);
+  position: relative;
+  top: -8px;
+}
+.sort .icon svg {
+  width: 100%;
+  fill: var(--color-txt);
+}
 .sort[data-sort-type=up] .arrow {
   transform: rotate(-90deg);
 }
-.sort[data-sort=false] {
+.sort:hover {
-  color: var(--color-txt-light);
-}
-.sort[data-sort=false] svg {
-  fill: var(--color-txt-light);
-}
-.sort[data-sort=false]:hover, .sort[data-sort=true]:hover {
   color: var(--grey-100);
 }
-.sort[data-sort=false]:hover svg, .sort[data-sort=true]:hover svg {
+.sort:hover svg {
   fill: var(--grey-100);
 }
 

assets/icons/filter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 0h22l-9 14.094v9.906l-4-2v-7.906z"/></svg>

site/templates/investigations.php

@@ -12,8 +12,9 @@
 <?php snippet('search-form') ?>
 
 <div class="page__sort">
-    <button class="sort btn--small btn--light no-link" data-sort="true" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
+    <button class="sort btn--small btn--light no-link"  data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
-    <button class="sort btn--small btn--light no-link" data-sort="false" data-sort-type="up"><p>Trier par titre</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
+    <button class="sort btn--small btn--light no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Lieu</p></button>
+    <button class="sort btn--small btn--light no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Mots-clés</p></button>
 </div>
 
 <section id="container-cards">