21ecf299e5
✨ feat(crm/planning): Ajoute le planning logistique
Ce commit ajoute le planning logistique utilisant FullCalendar pour
visualiser les réservations. Il inclut la récupération des données
de l'API et l'affichage des détails dans une modale.
```
138 lines
3.6 KiB
SCSS
138 lines
3.6 KiB
SCSS
@import "tailwindcss";
|
|
@import "tom-select/dist/css/tom-select.css";
|
|
|
|
/* --- CONFIGURATION GLOBALE --- */
|
|
@layer base {
|
|
form label {
|
|
@apply text-white;
|
|
}
|
|
|
|
.custom-scrollbar {
|
|
&::-webkit-scrollbar {
|
|
@apply w-[5px] h-[5px];
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply bg-slate-300 rounded-full dark:bg-slate-700;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* --- ANIMATIONS --- */
|
|
@theme {
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
.page-transition {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
/* --- UI COMPONENTS --- */
|
|
/* Menu Accordion sans JS */
|
|
details {
|
|
& summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
&[open] .arrow-icon {
|
|
@apply rotate-180 transition-transform;
|
|
}
|
|
}
|
|
|
|
.ts-control {
|
|
.item {
|
|
color: white !important;
|
|
}
|
|
}
|
|
|
|
/* --- TOMSELECT CUSTOM DARK THEME --- */
|
|
/* On augmente la spécificité par le nesting pour éviter les !important */
|
|
.ts-wrapper {
|
|
& .ts-control {
|
|
@apply bg-slate-900/60 border-white/5 rounded p-2 flex flex-wrap transition-all shadow-none relative z-1;
|
|
|
|
& > input {
|
|
@apply text-slate-50 text-sm flex-1 min-w-[7rem] bg-transparent border-none outline-none;
|
|
&::placeholder { @apply text-slate-500; }
|
|
}
|
|
}
|
|
|
|
&.focus .ts-control {
|
|
@apply ring-2 ring-blue-500/20 border-blue-500;
|
|
}
|
|
|
|
/* Tags (Multi-select) */
|
|
&.multi .ts-control > div {
|
|
@apply bg-blue-600 text-white rounded px-1.5 py-0.5 border border-blue-700 mr-1 mb-1 cursor-pointer;
|
|
&.active { @apply bg-blue-800 border-blue-900; }
|
|
}
|
|
|
|
/* Dropdown menu */
|
|
& .ts-dropdown {
|
|
@apply absolute top-full left-0 w-full z-10 bg-slate-900 border border-white/10 shadow-2xl rounded-b mt-1 text-slate-50;
|
|
|
|
& .option {
|
|
@apply px-2 py-1.5 cursor-pointer transition-colors opacity-100;
|
|
&.active { @apply bg-slate-800 text-blue-500; }
|
|
&[data-selectable]:hover { @apply bg-slate-800; }
|
|
&.highlight { @apply bg-blue-500/30 rounded-sm; }
|
|
}
|
|
|
|
& .optgroup-header {
|
|
@apply px-2 py-1.5 text-slate-400 bg-slate-900 font-bold text-[10px] uppercase tracking-widest cursor-default border-t border-white/5;
|
|
}
|
|
|
|
& .no-results, & .create { @apply px-2 py-1.5; }
|
|
}
|
|
|
|
/* Plugins */
|
|
&.plugin-clear_button .clear-button {
|
|
@apply opacity-0 transition-opacity cursor-pointer text-red-500 absolute right-2 top-1/2 -translate-y-1/2;
|
|
}
|
|
&:hover.has-items .clear-button, &.focus.has-items .clear-button {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
&.disabled {
|
|
@apply opacity-50;
|
|
& .ts-control { @apply bg-slate-900 cursor-default; }
|
|
}
|
|
}
|
|
|
|
/* --- LOGIQUE MÉTIER & FIXES --- */
|
|
.form-repeater__row {
|
|
@apply relative z-[90];
|
|
}
|
|
|
|
/* Fix pour l'affichage des dropdowns dans les repeaters */
|
|
.ts-dropdown.single {
|
|
@apply relative;
|
|
}
|
|
|
|
/* --- BOUTON BACK TO TOP (Injected via JS) --- */
|
|
/* --- BOUTON BACK TO TOP (Injected via JS) --- */
|
|
#back-to-top {
|
|
/* Utilisation de la classe standard Tailwind pour la fluidité */
|
|
@apply transition-all duration-500 ease-in-out;
|
|
|
|
/* Optionnel : si tu veux vraiment un cubic-bezier spécifique, utilise les crochets : */
|
|
/* transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); */
|
|
|
|
&:active {
|
|
@apply scale-95;
|
|
}
|
|
}
|
|
|
|
.fc-event{
|
|
background: rgba(177, 59, 246, 0.4) !important;
|
|
display: block !important;
|
|
}
|