Add public-samples/refunds-wyx7mz/src/web/src/styles/tailwind.css

src/web/src/styles/tailwind.css

@@ -0,0 +1,258 @@
+/* 
+ * Refunds Service Tailwind CSS
+ * 
+ * This file serves as the entry point for Tailwind CSS configuration,
+ * defining custom component and utility classes for both Pike (merchant)
+ * and Barracuda (admin) interfaces.
+ *
+ * tailwindcss: ^3.3.0
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  /* Button styles */
+  .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 
+           text-sm font-medium rounded-md 
+           transition-colors duration-200
+           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-primary {
+    @apply btn bg-indigo-600 text-white 
+           hover:bg-indigo-700 
+           active:bg-indigo-800;
+  }
+
+  .btn-secondary {
+    @apply btn bg-white text-gray-700 border border-gray-300
+           hover:bg-gray-50
+           active:bg-gray-100;
+  }
+
+  .btn-danger {
+    @apply btn bg-red-600 text-white
+           hover:bg-red-700
+           active:bg-red-800;
+  }
+
+  /* Card component */
+  .card {
+    @apply bg-white rounded-lg border border-gray-200 shadow-sm p-4 sm:p-6
+           overflow-hidden;
+  }
+
+  /* Form elements */
+  .input-field {
+    @apply block w-full rounded-md border-gray-300 shadow-sm
+           focus:border-indigo-500 focus:ring-indigo-500
+           disabled:bg-gray-100 disabled:cursor-not-allowed
+           text-gray-900 sm:text-sm;
+  }
+
+  /* Refund status badges */
+  .refund-status-badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium;
+  }
+
+  .refund-status-badge.completed {
+    @apply bg-green-100 text-green-800;
+  }
+
+  .refund-status-badge.processing {
+    @apply bg-blue-100 text-blue-800;
+  }
+
+  .refund-status-badge.pending {
+    @apply bg-yellow-100 text-yellow-800;
+  }
+
+  .refund-status-badge.failed {
+    @apply bg-red-100 text-red-800;
+  }
+
+  /* Refund method selector */
+  .refund-method-selector {
+    @apply flex flex-col space-y-2 p-3 rounded-md border-2 border-gray-200
+           cursor-pointer transition-colors duration-200
+           hover:bg-gray-50;
+  }
+
+  .refund-method-selector.selected {
+    @apply border-indigo-500 bg-indigo-50;
+  }
+
+  /* Approval badges */
+  .approval-badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium;
+  }
+
+  .approval-badge.approved {
+    @apply bg-green-100 text-green-800;
+  }
+
+  .approval-badge.rejected {
+    @apply bg-red-100 text-red-800;
+  }
+
+  .approval-badge.pending {
+    @apply bg-yellow-100 text-yellow-800;
+  }
+
+  .approval-badge.escalated {
+    @apply bg-orange-100 text-orange-800;
+  }
+
+  /* Table styles */
+  .table-container {
+    @apply overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg;
+  }
+
+  .table {
+    @apply min-w-full divide-y divide-gray-300;
+  }
+
+  .table-header {
+    @apply bg-gray-50;
+  }
+
+  .table-header-cell {
+    @apply py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6;
+  }
+
+  .table-body {
+    @apply divide-y divide-gray-200 bg-white;
+  }
+
+  .table-row {
+    @apply hover:bg-gray-50;
+  }
+
+  .table-cell {
+    @apply whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6;
+  }
+
+  /* Notification styles */
+  .notification {
+    @apply p-4 border-l-4 rounded-md shadow-sm;
+  }
+
+  .notification.info {
+    @apply bg-blue-50 border-blue-500;
+  }
+
+  .notification.success {
+    @apply bg-green-50 border-green-500;
+  }
+
+  .notification.warning {
+    @apply bg-yellow-50 border-yellow-500;
+  }
+
+  .notification.error {
+    @apply bg-red-50 border-red-500;
+  }
+
+  /* Progress indicators for refund status */
+  .progress-indicator {
+    @apply h-2 rounded-full overflow-hidden bg-gray-200;
+  }
+
+  .progress-indicator-completed {
+    @apply bg-green-500 h-full;
+  }
+
+  .progress-indicator-processing {
+    @apply bg-blue-500 h-full;
+  }
+
+  .progress-indicator-pending {
+    @apply bg-yellow-500 h-full;
+  }
+
+  .progress-indicator-failed {
+    @apply bg-red-500 h-full;
+  }
+}
+
+@layer utilities {
+  /* Text balance utility */
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  /* Clickable utility for non-button interactive elements */
+  .clickable {
+    @apply cursor-pointer transition-opacity duration-150
+           hover:opacity-80 active:opacity-70 
+           focus:outline-none focus:ring-2 focus:ring-indigo-500;
+  }
+
+  /* Vertical scrolling container */
+  .scrollable-y {
+    @apply overflow-y-auto overscroll-contain scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent;
+  }
+
+  /* Multi-line truncation (2 lines default) */
+  .truncate-multiline {
+    @apply overflow-hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .truncate-multiline-3 {
+    -webkit-line-clamp: 3;
+  }
+
+  /* Refund status utilities */
+  .status-completed {
+    @apply text-green-700 bg-green-50 border-green-200;
+  }
+
+  .status-processing {
+    @apply text-blue-700 bg-blue-50 border-blue-200;
+  }
+
+  .status-pending {
+    @apply text-yellow-700 bg-yellow-50 border-yellow-200;
+  }
+
+  .status-failed {
+    @apply text-red-700 bg-red-50 border-red-200;
+  }
+
+  /* Focus visible utility for accessibility */
+  .focus-visible-ring {
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2;
+  }
+
+  /* Screen reader only utility */
+  .sr-only {
+    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
+  }
+
+  /* Responsive utilities */
+  .hide-on-mobile {
+    @apply hidden sm:block;
+  }
+
+  .show-on-mobile {
+    @apply block sm:hidden;
+  }
+
+  /* Print-specific utilities */
+  @media print {
+    .print-hide {
+      display: none !important;
+    }
+
+    .print-break-inside-avoid {
+      break-inside: avoid;
+    }
+  }
+}