| 1 |
/* -------------------------------------------------------------------------- |
| 2 |
Sortable (wpsubs-sort-handle) |
| 3 |
|
| 4 |
Vertical drag-and-drop reordering. The handle is the only place a drag |
| 5 |
starts; the item lifts while dragged and its siblings slide out of the way. |
| 6 |
|
| 7 |
JS: the plan detail page wires this in admin/plans.js |
| 8 |
(data-subscrpt-sortable / -sort-item / -sort-handle). |
| 9 |
-------------------------------------------------------------------------- */ |
| 10 |
.wpsubs-sort-handle { |
| 11 |
appearance: none; |
| 12 |
flex: 0 0 auto; |
| 13 |
display: inline-flex; |
| 14 |
align-items: center; |
| 15 |
justify-content: center; |
| 16 |
width: 24px; |
| 17 |
height: 28px; |
| 18 |
padding: 0; |
| 19 |
margin: 0; |
| 20 |
border: 0; |
| 21 |
border-radius: var(--wpsubs-radius-sm, 5px); |
| 22 |
background: transparent; |
| 23 |
color: var(--wpsubs-text-subtle, #9ca3af); |
| 24 |
cursor: grab; |
| 25 |
touch-action: none; |
| 26 |
transition: |
| 27 |
color 0.15s ease, |
| 28 |
background-color 0.15s ease; |
| 29 |
} |
| 30 |
|
| 31 |
.wpsubs-sort-handle:hover { |
| 32 |
color: var(--wpsubs-text, #374151); |
| 33 |
background: var(--wpsubs-border, #e5e7eb); |
| 34 |
} |
| 35 |
|
| 36 |
.wpsubs-sort-handle:focus-visible { |
| 37 |
outline: none; |
| 38 |
color: var(--wpsubs-brand, #ff4d00); |
| 39 |
box-shadow: 0 0 0 3px var(--wpsubs-brand-ring, rgba(255, 77, 0, 0.2)); |
| 40 |
} |
| 41 |
|
| 42 |
.wpsubs-sort-handle:active { |
| 43 |
cursor: grabbing; |
| 44 |
} |
| 45 |
|
| 46 |
/* Nothing to reorder with a single item. */ |
| 47 |
[data-subscrpt-sortable] > [data-subscrpt-sort-item]:only-child .wpsubs-sort-handle { |
| 48 |
display: none; |
| 49 |
} |
| 50 |
|
| 51 |
/* The item being dragged: lifted above its siblings. */ |
| 52 |
.wpsubs-sort-item--dragging { |
| 53 |
position: relative; |
| 54 |
z-index: 20; |
| 55 |
box-shadow: |
| 56 |
var(--wpsubs-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.1)), |
| 57 |
0 0 0 1px var(--wpsubs-brand-ring, rgba(255, 77, 0, 0.2)); |
| 58 |
transition: box-shadow 0.18s ease; |
| 59 |
will-change: transform; |
| 60 |
} |
| 61 |
|
| 62 |
/* Dropping: glides into its slot. */ |
| 63 |
.wpsubs-sort-item--settling { |
| 64 |
position: relative; |
| 65 |
z-index: 20; |
| 66 |
transition: |
| 67 |
transform 0.22s cubic-bezier(0.2, 0, 0, 1), |
| 68 |
box-shadow 0.22s ease; |
| 69 |
} |
| 70 |
|
| 71 |
/* While dragging, the whole page shows the closed hand and text stays put. */ |
| 72 |
body.wpsubs-sorting, |
| 73 |
body.wpsubs-sorting * { |
| 74 |
cursor: grabbing !important; |
| 75 |
user-select: none !important; |
| 76 |
} |
| 77 |
|
| 78 |
@media (prefers-reduced-motion: reduce) { |
| 79 |
.wpsubs-sort-item--dragging, |
| 80 |
.wpsubs-sort-item--settling { |
| 81 |
transition: none; |
| 82 |
} |
| 83 |
} |
| 84 |
|
