studio-variable/nouveau-theatre-de-besancon
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

start calendar-strip__date

Browse source
This commit is contained in:
isUnknown 2024-07-24 18:19:25 +02:00
parent bedbf7712a
commit bb3d4a4be0
2 changed files with 18 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

15
assets/css/src/calendar-strip.css
View file

@ -1,4 +1,5 @@
.calendar-strip { .calendar-strip {
position: relative;
background-color: var(--color-yellow); background-color: var(--color-yellow);
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
@ -22,11 +23,21 @@
width: 100%; width: 100%;
} }
.calendar-strip__day.event { .calendar-strip__day {
text-decoration: underline; transition: opacity 0.2s ease-in-out;
} }
.calendar-strip__calendar-btn { .calendar-strip__calendar-btn {
border: var(--border); border: var(--border);
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
} }
.calendar-strip__date {
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: 10rem;
background-color: var(--color-yellow);
z-index: -1;
}

6
site/snippets/calendar-strip.php
View file

@ -32,8 +32,12 @@
</div> </div>
<ul class="calendar-strip__days"> <ul class="calendar-strip__days">
<template x-for="(date, index) in dates"> <template x-for="(date, index) in dates">
<li class="calendar-strip__day" :class="date.length > 0 ? 'event' : false" x-text="index"></li> <li class="calendar-strip__day">
<button x-text="index" :disabled="date.length === 0 ? true : false" title="Voir les événements"></button>
</li>
</template> </template>
</ul> </ul>
<button class="calendar-strip__calendar-btn">calendrier</button> <button class="calendar-strip__calendar-btn">calendrier</button>
<div class="calendar-strip__date"></div>
</div> </div>