mobile : center text button. homogenize close / open nav btns
This commit is contained in:
parent
455801a0d2
commit
6c245966e1
9 changed files with 92 additions and 64 deletions
|
|
@ -1,8 +1,4 @@
|
|||
|
||||
<nav
|
||||
class="panel"
|
||||
x-data="{search: ''}"
|
||||
>
|
||||
<nav class="panel" x-data="{search: ''}">
|
||||
<header>
|
||||
<p class="sort-btns">
|
||||
<button class="sort-btn sort-btn--years active">années</span></button>
|
||||
|
|
@ -10,30 +6,20 @@
|
|||
<button class="sort-btn sort-btn--all">voir tout</button>
|
||||
</p>
|
||||
<div class="search">
|
||||
<input
|
||||
class="search__input"
|
||||
type="text"
|
||||
placeholder="Chercher"
|
||||
x-model="search"
|
||||
>
|
||||
<img
|
||||
x-show="search.length === 0"
|
||||
src="<?= url('assets/images/icons/search.svg') ?>"
|
||||
class="search__icon"
|
||||
alt="Icône loupe indiquant le champ de recherche."
|
||||
>
|
||||
<button
|
||||
x-show="search.length > 0"
|
||||
@click="search = ''"
|
||||
class="search__icon"
|
||||
>
|
||||
<img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
|
||||
<input class="search__input" type="text" placeholder="Chercher" x-model="search">
|
||||
<img x-show="search.length === 0"
|
||||
src="<?= url('assets/images/icons/search.svg') ?>"
|
||||
class="search__icon" alt="Icône loupe indiquant le champ de recherche.">
|
||||
<button x-show="search.length > 0" @click="search = ''" class="search__icon">
|
||||
<img
|
||||
src="<?= url('assets/images/icons/close.svg') ?>"
|
||||
alt="">
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<?php snippet('nav__texts--all') ?>
|
||||
<?php snippet('nav__texts--collection', ["collection" => "categories"]) ?>
|
||||
<?php snippet('nav__texts--collection', ["collection" => "years"]) ?>
|
||||
<button class="panel-close">fermer</button>
|
||||
<?php snippet('nav__texts--collection', ['collection' => 'categories']) ?>
|
||||
<?php snippet('nav__texts--collection', ['collection' => 'years']) ?>
|
||||
<button class="less panel-close">textes</button>
|
||||
</nav>
|
||||
<div id="nav-overlay"></div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue