/* * AjaxSortable - minimal drag-to-reorder visual cues. * * ajaxslim-sortable.js already marks the drag state with classes; this stylesheet only paints them, so * the cues need no JavaScript of their own and an app can override or replace the file wholesale: * * [data-sortable-grip] the grab handle inside a row -> grab cursor (it's draggable) * .ajaxslim-dragging the row currently being dragged -> a "picked up" lift; it also tracks * the cursor via an inline translateY the JS sets (so no transition here) * html.ajaxslim-sorting set on for the duration of any drag -> grabbing cursor + * suppress text selection so a drag doesn't select row text * * The dragged row follows the cursor and the other rows slide (FLIP) to open a gap where it will land, * previewing the drop - both pure transforms (work on table rows too) driven by the JS. This CSS * only supplies the lift and the cursor/selection affordances; the motion is inline transforms. * * Tunable custom properties (set on the sortable container or :root): * --ajaxslim-drag-opacity the dragged row's opacity (default 0.9) * --ajaxslim-drag-shadow the dragged row's lift shadow (default a soft drop shadow) * --ajaxslim-drag-flip sibling slide duration in ms (default 150; 0 disables the slide) * --ajaxslim-drag-follow set to `none` to disable follow-cursor (dragged row snaps to slots) * * Everything is class-scoped and low-specificity with no !important, so app CSS wins by default. */ /* The grip advertises itself as draggable. Scoped to grips so the rest of the row keeps its own cursors. */ [data-sortable-grip] { cursor: grab; touch-action: none; /* let the JS own touch gestures on the grip (no scroll-stealing of the drag) */ } /* * While a drag is in flight: grabbing cursor, and don't let the drag select row text. Scoped under * html.ajaxslim-sorting (a transient state set only during a drag) and kept free of !important so app * CSS can still override - the contract is "no !important, app styling wins". */ html.ajaxslim-sorting, html.ajaxslim-sorting * { cursor: grabbing; user-select: none; -webkit-user-select: none; } /* * The dragged row - a subtle "picked up" lift. opacity + shadow read as lifted on both desktop and * mobile without moving layout. Tunable: an app can set --ajaxslim-drag-opacity / --ajaxslim-drag-shadow * (or just restyle .ajaxslim-dragging) to taste. */ .ajaxslim-dragging { opacity: var(--ajaxslim-drag-opacity, 0.9); box-shadow: var(--ajaxslim-drag-shadow, 0 2px 10px rgba(0, 0, 0, 0.25)); position: relative; /* lift it above its neighbours so the shadow isn't clipped by sibling rows */ z-index: 2; /* keep the lifted row above its sliding neighbours */ /* The JS sets translateY every pointer move to follow the cursor; it must apply instantly, so the dragged row must NOT transition its transform (a sibling FLIP transition would make it lag). */ transition: none; will-change: transform; }