/* * Minimal custom CSS for the SortableList package. * This file primarily handles styling for classes applied by Sortable.js * and ARIA attributes for visual accessibility feedback, leveraging Tailwind's @apply. * * NOTE: This CSS file needs to be compiled by Vite and then included * in the consuming Laravel application's main CSS or directly in their Blade layout. * The consuming application's Tailwind CSS should be configured to scan * the published package views for Tailwind classes. */ /* * The following Tailwind directives are commented out. * If you want to compile Tailwind within your package for isolated development * or if the consuming app isn't guaranteed to use Tailwind, you might uncomment these. * However, the common approach for a Tailwind-based package is for the consuming * application to compile the Tailwind utilities. */ /* @tailwind base; */ /* @tailwind components; */ /* @tailwind utilities; */ /* ------------------------------------------- */ /* Styles for Sortable.js specific classes */ /* ------------------------------------------- */ /* Styles for the "ghost" element (the clone of the original item that follows the cursor) */ .sortable-ghost { opacity: 0.4; /* Make it semi-transparent */ /* Example Tailwind utilities applied via @apply */ @apply bg-blue-100 border-dashed border-blue-400 border-2 rounded-lg; } /* Styles for the actual element being dragged (often made invisible by Sortable.js by default) */ .sortable-drag { /* You might not need specific styles here, as Sortable.js handles its visual state */ } /* ------------------------------------------- */ /* Styles for ARIA attributes & global states */ /* ------------------------------------------- */ /* Visual feedback for when a sortable item is "grabbed" (aria-grabbed="true") */ .sortable-item[aria-grabbed="true"] { /* Use Tailwind utilities for styling */ @apply outline-none ring-2 ring-blue-600 ring-offset-2 shadow-lg scale-[1.01]; /* Example: blue ring, shadow, slight scale */ cursor: grabbing; /* Change cursor to indicate active grab */ } /* Global class added to the element when a sorting operation is active */ body.sorting-active { user-select: none; /* Prevents accidental text selection during dragging */ } /* ------------------------------------------- */ /* Utility for Screen Reader Only Content */ /* ------------------------------------------- */ /* This class visually hides content but keeps it accessible to screen readers. */ /* It should be consistent with Tailwind's default 'sr-only' utility. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }