128 lines
2.3 KiB
SCSS
128 lines
2.3 KiB
SCSS
/**
|
|
* Styles personnalisés pour les composants Chantier
|
|
*/
|
|
|
|
// Styles pour les barres de progression
|
|
.progress-small {
|
|
.p-progressbar-value {
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
|
|
.progress-normal {
|
|
.p-progressbar-value {
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
.progress-large {
|
|
.p-progressbar-value {
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
|
|
// Animation pour les indicateurs d'urgence
|
|
.urgency-indicator {
|
|
animation: pulse 2s infinite;
|
|
|
|
&.retard {
|
|
animation: pulse-red 2s infinite;
|
|
}
|
|
|
|
&.bientot-termine {
|
|
animation: pulse-green 2s infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-red {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; color: #ef4444; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes pulse-green {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.7; color: #10b981; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
// Styles pour les boutons d'actions
|
|
.chantier-actions {
|
|
.p-button {
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
// Couleurs spécifiques pour les boutons
|
|
.action-view:hover {
|
|
color: var(--blue-500) !important;
|
|
background: var(--blue-50) !important;
|
|
}
|
|
|
|
.action-phases:hover {
|
|
color: var(--green-500) !important;
|
|
background: var(--green-50) !important;
|
|
}
|
|
|
|
.action-planning:hover {
|
|
color: var(--purple-500) !important;
|
|
background: var(--purple-50) !important;
|
|
}
|
|
|
|
.action-stats:hover {
|
|
color: var(--cyan-500) !important;
|
|
background: var(--cyan-50) !important;
|
|
}
|
|
|
|
.action-menu:hover {
|
|
color: var(--gray-600) !important;
|
|
background: var(--gray-100) !important;
|
|
}
|
|
}
|
|
|
|
// Styles pour les tags de statut
|
|
.chantier-status-tag {
|
|
font-weight: 500;
|
|
|
|
&.status-en-cours {
|
|
background: var(--green-100);
|
|
color: var(--green-700);
|
|
}
|
|
|
|
&.status-planifie {
|
|
background: var(--blue-100);
|
|
color: var(--blue-700);
|
|
}
|
|
|
|
&.status-en-retard {
|
|
background: var(--red-100);
|
|
color: var(--red-700);
|
|
}
|
|
|
|
&.status-termine {
|
|
background: var(--green-200);
|
|
color: var(--green-800);
|
|
}
|
|
|
|
&.status-suspendu {
|
|
background: var(--orange-100);
|
|
color: var(--orange-700);
|
|
}
|
|
}
|
|
|
|
// Responsive design
|
|
@media (max-width: 768px) {
|
|
.chantier-actions {
|
|
.p-button {
|
|
padding: 0.5rem;
|
|
}
|
|
}
|
|
} |