studio-variable/hecq-et-lesort
5
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

css : composant bottom-tab générique partagé entre filtres et infos carte

Browse source 
Extrait le style onglet-bas en classes réutilisables (.bottom-tab,
.bottom-tab--invert) dans _generic.scss. Appliqué aux boutons de filtre
et à l'étiquette infos des cartes événement.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-05-28 09:37:41 +02:00
parent da7b13380a
commit 7fb0fedf6c
6 changed files with 35 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

20
assets/css/src/_generic.scss Normal file
View file

@ -0,0 +1,20 @@
.bottom-tab {
font-size: 1rem;
width: fit-content;
padding: 1.5rem 0.9rem 0.5rem 0.9rem;
margin-top: -1rem;
border-radius: 0 0 0.5rem 0.5rem;
font-family: "SancySlab", serif;
}
.bottom-tab--invert {
background-color: var(--color-beige);
color: #000;
border: 3px solid #000;
}
.bottom-tab:not(.bottom-tab--invert) {
background-color: #000;
color: #fff;
}

28
assets/css/src/_header.scss
View file

@ -77,31 +77,23 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.7rem;
bottom: -8rem; bottom: calc(-8.5rem);
button { button {
font-size: 1rem;
width: fit-content;
padding: 1.5rem 0.8rem 0.5rem 0.8rem;
margin-top: -1rem;
border-radius: 0 0 0.5rem 0.5rem;
background-color: #000;
color: #fff;
font-family: "SancySlab", serif;
transform: translateY(0rem); transform: translateY(0rem);
transition: all 0.2s var(--curve); transition: background-color 0.2s var(--curve),
transform 0.3s var(--curve);
&:hover, &:hover {
&.active { transform: translateY(0.5rem) !important;
transform: translateY(0.5rem);
} }
&.active { &.active {
background-color: var(--color-green); transform: translateY(0rem);
color: #000; background-color: #000;
color: #fff;
outline: 2px solid var(--color-beige);
} }
} }
} }

13
assets/css/src/pages/_events.scss
View file

@ -8,7 +8,7 @@
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
align-items: flex-end; align-items: flex-end;
gap: 3rem; gap: 3rem;
background-color: #fff; background-color: var(--color-beige);
.event-card { .event-card {
h2 { h2 {
@ -48,17 +48,6 @@
} }
} }
} }
.infos {
width: fit-content;
padding: 1.5rem 0.8rem 0.5rem 0.8rem;
margin-top: -1rem;
border-radius: 0 0 0.5rem 0.5rem;
background-color: #000;
color: #fff;
font-family: "SancySlab", serif;
}
} }
} }
} }

1
assets/css/style.scss
View file

@ -2,6 +2,7 @@
@import "src/fonts"; @import "src/fonts";
@import "src/variables"; @import "src/variables";
@import "src/global"; @import "src/global";
@import "src/generic";
@import "src/header"; @import "src/header";
@import "src/strip"; @import "src/strip";
@import "src/pages/home"; @import "src/pages/home";

4
site/snippets/header.php
View file

@ -28,8 +28,8 @@
</div> </div>
<div class="filters"> <div class="filters">
<button class="filter" data-target="inside-company" title="filtrer">compagnie</button> <button class="filter bottom-tab bottom-tab--invert" data-target="inside-company" title="filtrer">compagnie</button>
<button class="filter" data-target="outside-company" title="filtrer">hors-compagnie</button> <button class="filter bottom-tab bottom-tab--invert" data-target="outside-company" title="filtrer">hors-compagnie</button>
</div> </div>
</header> </header>
<main> <main>

2
site/templates/events.php
View file

@ -17,7 +17,7 @@
'alt' => $event->title()->value(), 'alt' => $event->title()->value(),
]) ?> ]) ?>
</div> </div>
<div class="infos"> <div class="infos bottom-tab">
<?php if ($event->isFromCompany()->isTrue()): ?> <?php if ($event->isFromCompany()->isTrue()): ?>
<p>Compagnie</p> <p>Compagnie</p>
<?php else: ?> <?php else: ?>