packages/widget-dashboard/src/components/actions/actions.module.css - trunk - githubmirror/gutenberg

packages/widget-dashboard/src/components/actions/actions.module.css

54 строки1 KB

Damián Suárez

Widget Dashboard: reserve paint space for tile focus rings (#79990)

08 июл 2026, 14:29

08 июл 2026, 14:29bbd0c7a

.edit-actions-enter,
.edit-actions-exit {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	transform-origin: right center;
}

.edit-actions-divider {
	flex-shrink: 0;
	align-self: center;
	width: 1px;
	height: var(--wpds-dimension-size-2xs);
	background-color: var(--wpds-color-stroke-surface-neutral);
}

@media not ( prefers-reduced-motion ) {
	.edit-actions-enter,
	.edit-actions-exit {
		will-change: opacity, transform;
	}

	.edit-actions-enter {
		animation: actions-slide-in var(--wpds-motion-duration-md) var(--wpds-motion-easing-expressive) forwards;
	}

	.edit-actions-exit {
		animation: actions-fold-out var(--wpds-motion-duration-sm) var(--wpds-motion-easing-balanced) forwards;
	}

	@keyframes actions-slide-in {
		from {
			opacity: 0;
			transform: translateX(12px) scaleX(0.92);
		}

		to {
			opacity: 1;
			transform: translateX(0) scaleX(1);
		}
	}

	@keyframes actions-fold-out {
		from {
			opacity: 1;
			transform: translateX(0) scaleX(1);
		}

		to {
			opacity: 0;
			transform: translateX(12px) scaleX(0.92);
		}
	}
}