Initial commit

styles/components/chantiers.scss

@@ -0,0 +1,128 @@
+/**
+ * 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;
+    }
+  }
+}