studio-variable/botascopia-webiste-static
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

search

Browse source
This commit is contained in:
Julie Blanc 2026-02-16 14:04:45 +01:00
parent 1b76727eff
commit 3c10e88b18
14 changed files with 272 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/icons/search.svg
View file

@ -1,3 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z" fill-rule="nonzero"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 315 B

After

Width:  |  Height:  |  Size: 564 B

Before After
Before After

12
components/search.html
View file

@ -1,8 +1,14 @@
<div class="search">
<input type="checkbox" id="search-toggle" class="search__toggle">
<label for="search-toggle" class="search__label">
<label for="search-toggle">
<span class="search__icon search__icon--open"><include src="/components/icons/search.svg"></include></span>
<span class="search__icon search__icon--close"><include src="/components/icons/x-lg.svg"></include></span>
</label>
<input type="text" class="search__input" placeholder="Recherchez une plante ou un livret">
</label>
<div class="search__input-group">
<button><include src="/components/icons/search.svg"></include></button>
<input type="text" id="search__input" placeholder="Recherchez une plante ou un livret">
</div>
</div>