packages/grid/src/dashboard-grid/grid.module.css - trunk - githubmirror/gutenberg

packages/grid/src/dashboard-grid/grid.module.css
145 строк3 KB
Marco Ciampini
Theme: Remove elevation tokens (#80099)
10 июл 2026, 17:51
10 июл 2026, 17:51716c6e9
.grid {
	display: grid;
	gap: var(--wp-grid-gap, var(--wpds-dimension-gap-xl));
	position: relative;
}

/*
 * Functional frame for the drag-preview clone inside `<DragOverlay>`.
 * Always applied, including when the consumer passes a
 * `renderDragPreview` wrapper. The outer frame has no `transform` so
 * @dnd-kit’s drop translation matches the placeholder; scale lives on
 * `__lift` (see dnd-kit #398). Owns elevation, radius, cursor, and
 * pointer pass-through. Further chrome belongs to the consumer. Drag
 * the shadow strengthens while dragging so it reads above edit tiles.
 */
.drag-preview-frame {
	--_wp-grid-elevation-xs:
		0 1px 1px rgba(0, 0, 0, 0.03),
		0 1px 2px rgba(0, 0, 0, 0.02),
		0 3px 3px rgba(0, 0, 0, 0.02),
		0 4px 4px rgba(0, 0, 0, 0.01);
	--_wp-grid-elevation-md:
		0 2px 3px rgba(0, 0, 0, 0.05),
		0 4px 5px rgba(0, 0, 0, 0.04),
		0 12px 12px rgba(0, 0, 0, 0.03),
		0 16px 16px rgba(0, 0, 0, 0.02);

	height: 100%;
	border-radius: var(--wp-grid-drag-preview-radius, 0);
	cursor: grabbing;
	pointer-events: none;
	box-shadow: var(--_wp-grid-elevation-md);
}

.drag-preview-frame__lift {
	height: 100%;
	transform: scale(var(--wp-grid-drag-preview-scale, 1.05));
	transform-origin: center;
}

@media not (prefers-reduced-motion: reduce) {
	.drag-preview-frame {
		animation:
			wp-grid-drag-preview-shadow-enter
			var(--wpds-motion-duration-sm) var(--wpds-motion-easing-balanced) both;
	}

	.drag-preview-frame__lift {
		animation:
			wp-grid-drag-preview-scale-enter
			var(--wpds-motion-duration-sm) var(--wpds-motion-easing-balanced) both;
	}
}

@media not (prefers-reduced-motion: reduce) {
	@keyframes wp-grid-drag-preview-shadow-enter {
		from {
			box-shadow: var(--_wp-grid-elevation-xs);
		}

		to {
			box-shadow: var(--_wp-grid-elevation-md);
		}
	}

	@keyframes wp-grid-drag-preview-scale-enter {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(var(--wp-grid-drag-preview-scale, 1.05));
		}
	}
}

/*
 * Applied by @dnd-kit `DragOverlay` drop side-effects while the
 * default overlay transform runs; duration matches
 * `createDashboardDragDropAnimation` (200ms / md token). Use keyframed
 * exit (not transition) so scale does not snap when the enter animation
 * is replaced.
 */
@media not (prefers-reduced-motion: reduce) {
	.drag-preview-frame.dragPreviewFrameExiting {
		animation:
			wp-grid-drag-preview-shadow-exit
			var(--wpds-motion-duration-md) var(--wpds-motion-easing-balanced)
			forwards;
	}

	.drag-preview-frame.dragPreviewFrameExiting .drag-preview-frame__lift {
		animation:
			wp-grid-drag-preview-scale-exit
			var(--wpds-motion-duration-md) var(--wpds-motion-easing-balanced)
			forwards;
	}

	@keyframes wp-grid-drag-preview-shadow-exit {
		from {
			box-shadow: var(--_wp-grid-elevation-md);
		}

		to {
			box-shadow: var(--_wp-grid-elevation-xs);
		}
	}

	@keyframes wp-grid-drag-preview-scale-exit {
		from {
			transform: scale(var(--wp-grid-drag-preview-scale, 1.05));
		}

		to {
			transform: scale(1);
		}
	}
}

.drag-preview-frame.dragPreviewFrameExiting {
	box-shadow: var(--_wp-grid-elevation-xs);
}

.drag-preview-frame.dragPreviewFrameExiting .drag-preview-frame__lift {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.drag-preview-frame {
		box-shadow: var(--_wp-grid-elevation-md);
	}

	.drag-preview-frame__lift {
		transform: none;
	}

	.drag-preview-frame.dragPreviewFrameExiting {
		box-shadow: var(--_wp-grid-elevation-xs);
		transition: none;
	}

	.drag-preview-frame.dragPreviewFrameExiting .drag-preview-frame__lift {
		transition: none;
	}
}