studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

filtres enquetes
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-08 16:27:21 +01:00
parent 0cd10384c0
commit 8fc46375a0
5 changed files with 32 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

24
assets/css/components/_sort.scss
View file

@ -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 @@
}
}

21
assets/css/style.css
View file

@ -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] {
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 {
.sort:hover {
color: var(--grey-100);
}
.sort[data-sort=false]:hover svg, .sort[data-sort=true]:hover svg {
.sort:hover svg {
fill: var(--grey-100);
}

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

1
assets/icons/filter.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 137 B

5
site/templates/investigations.php
View file

@ -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="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" 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" ><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">