UP

Author: ManukMinasyan

resources/css/flowforge.css

@@ -0,0 +1,122 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.flowforge-kanban-board {
+    @apply flex flex-row h-full w-full overflow-x-auto overflow-y-hidden py-4 px-2 gap-4;
+}
+
+.flowforge-kanban-column {
+    @apply flex flex-col h-full min-w-64 w-64 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-sm p-2;
+}
+
+.flowforge-kanban-column-header {
+    @apply flex items-center justify-between p-2 mb-2 font-medium;
+}
+
+.flowforge-kanban-column-count {
+    @apply flex items-center justify-center h-6 min-w-6 px-1.5 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-medium rounded-full;
+}
+
+.flowforge-kanban-column-content {
+    @apply flex-1 overflow-y-auto overflow-x-hidden p-1;
+    scrollbar-width: thin;
+}
+
+.flowforge-kanban-column-content::-webkit-scrollbar {
+    @apply w-1.5;
+}
+
+.flowforge-kanban-column-content::-webkit-scrollbar-track {
+    @apply bg-transparent rounded-full;
+}
+
+.flowforge-kanban-column-content::-webkit-scrollbar-thumb {
+    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
+}
+
+.flowforge-kanban-card {
+    @apply bg-white dark:bg-gray-700 rounded-md shadow-sm mb-2 p-3 cursor-grab select-none transition-all duration-200;
+    @apply hover:shadow-md hover:translate-y-[-2px];
+}
+
+.flowforge-kanban-card-title {
+    @apply text-sm font-medium text-gray-900 dark:text-white mb-1;
+}
+
+.flowforge-kanban-card-description {
+    @apply text-xs text-gray-500 dark:text-gray-400 line-clamp-2;
+}
+
+.flowforge-kanban-card-attributes {
+    @apply flex flex-wrap gap-2 mt-2;
+}
+
+.flowforge-kanban-card-attribute {
+    @apply inline-flex items-center text-xs px-2 py-0.5 rounded-full;
+}
+
+.flowforge-kanban-empty-column {
+    @apply flex flex-col items-center justify-center text-center p-4 text-sm text-gray-400 dark:text-gray-500;
+}
+
+.flowforge-kanban-drop-placeholder {
+    @apply border-2 border-dashed border-primary-500 rounded-md h-16 mb-2 bg-primary-50 dark:bg-primary-950/30;
+}
+
+.flowforge-kanban-header {
+    @apply flex items-center justify-between p-2 mb-4;
+}
+
+.flowforge-kanban-search {
+    @apply relative;
+}
+
+.flowforge-kanban-search-icon {
+    @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500;
+}
+
+.flowforge-kanban-search-input {
+    @apply pl-8 pr-4 py-1.5 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
+}
+
+
+/* Animations */
+.animate-success {
+    animation: successPulse 1s ease-in-out;
+}
+
+.animate-error {
+    animation: errorShake 0.6s ease-in-out;
+}
+
+@keyframes successPulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+    }
+    50% {
+        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+    }
+}
+
+@keyframes errorShake {
+    0% {
+        transform: translateX(0);
+    }
+    25% {
+        transform: translateX(-5px);
+    }
+    50% {
+        transform: translateX(5px);
+    }
+    75% {
+        transform: translateX(-5px);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}

resources/css/index.css

@@ -1 +1,3 @@
 @import '../../vendor/filament/filament/resources/css/theme.css';
+
+@import 'flowforge.css';