packages/ui/src/utils/css/dropdown-motion.module.css - trunk - githubmirror/gutenberg

packages/ui/src/utils/css/dropdown-motion.module.css

61 строка2 KB

Marco Ciampini

UI: Disable instant overlay popup transitions (#79432)

23 июн 2026, 19:29

23 июн 2026, 19:29377c12e

@layer wp-ui {
	/*
	 * Motion configuration for dropdown-like popovers.
	 * Keep constants in sync with: packages/components/src/utils/dropdown-motion.ts
	 */

	@layer utilities, components, compositions, overrides;

	@layer utilities {
		.dropdown-motion {
			--wp-ui-dropdown-slide-distance: 4px;
			--wp-ui-dropdown-slide-duration: var(--wpds-motion-duration-md);
			--wp-ui-dropdown-slide-easing: var(--wpds-motion-easing-expressive);
			--wp-ui-dropdown-fade-duration: var(--wpds-motion-duration-sm);
			--wp-ui-dropdown-fade-easing: linear;

			@media not ( prefers-reduced-motion ) {
				transition-property: transform, opacity;
				transition-duration:
					var(--wp-ui-dropdown-slide-duration),
					var(--wp-ui-dropdown-fade-duration);
				transition-timing-function:
					var(--wp-ui-dropdown-slide-easing),
					var(--wp-ui-dropdown-fade-easing);
				will-change: transform, opacity;
			}

			&[data-instant] {
				transition: none;
			}

			opacity: 1;
			transform: translate(0);

			&[data-starting-style],
			&[data-ending-style] {
				opacity: 0;
			}

			&[data-side="bottom"][data-starting-style],
			&[data-side="bottom"][data-ending-style] {
				transform: translateY(calc(-1 * var(--wp-ui-dropdown-slide-distance)));
			}

			&[data-side="top"][data-starting-style],
			&[data-side="top"][data-ending-style] {
				transform: translateY(var(--wp-ui-dropdown-slide-distance));
			}

			&[data-side="left"][data-starting-style],
			&[data-side="left"][data-ending-style] {
				transform: translateX(var(--wp-ui-dropdown-slide-distance));
			}

			&[data-side="right"][data-starting-style],
			&[data-side="right"][data-ending-style] {
				transform: translateX(calc(-1 * var(--wp-ui-dropdown-slide-distance)));
			}
		}
	}
}