9a4d7b6ae1
✨ feat(DevisController): Améliore la gestion et l'édition des devis
Corrige des bugs et améliore la création/édition des devis, incluant options et lignes, et la gestion des signatures.
```
133 lines
3.5 KiB
SCSS
133 lines
3.5 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;
|
|
}
|
|
}
|