packages/widget-dashboard/src/components/widgets/widget-resize-handle.module.css - trunk - githubmirror/gutenberg

packages/widget-dashboard/src/components/widgets/widget-resize-handle.module.css
135 строк4 KB
Damián Suárez
Widget Dashboard: reserve paint space for tile focus rings (#79990)
08 июл 2026, 14:29
08 июл 2026, 14:29bbd0c7a
.handle {
	position: absolute;
	bottom: 0;
	inset-inline-end: 0;
	z-index: 1;
	box-sizing: border-box;
	padding: 0;
	background: transparent;
	/* Nudge painted affordance away from tile chrome; hit target stays flush. */
	--widget-resize-handle-visual-inset: var(--wpds-dimension-padding-xs);
	--widget-resize-handle-hover-scale: 1.18;
}

.handle:focus-visible {
	outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus);
	/* Offset the ring by an amount equal to its own width. */
	outline-offset: var(--wpds-border-width-focus);
	border-radius: var(--wpds-border-radius-sm);
}

.resizing {
	opacity: 0.72;
}

/*
 * Larger box = hit target; small `::after` = visual only (still uses
 * logical borders so RTL needs no mirroring).
 */
.handle-corner {
	width: var(--wpds-dimension-size-sm);
	height: var(--wpds-dimension-size-sm);
	cursor: nwse-resize;
}

.handle-corner::after {
	content: "";
	position: absolute;
	bottom: var(--widget-resize-handle-visual-inset);
	inset-inline-end: var(--widget-resize-handle-visual-inset);
	width: var(--wpds-dimension-size-4xs);
	height: var(--wpds-dimension-size-4xs);
	box-sizing: border-box;
	border-block-end:
		var(--wpds-border-width-sm) solid
		var(--wpds-color-foreground-interactive-brand);
	border-inline-end:
		var(--wpds-border-width-sm) solid
		var(--wpds-color-foreground-interactive-brand);
	border-block-start: none;
	border-inline-start: none;
	/* Elbow only: matches tile scale; arm ends stay square. */
	border-end-end-radius: var(--wpds-border-radius-md);
	transform: scale(1);
	transform-origin: 100% 100%;
}

[dir="rtl"] .handle-corner::after {
	transform-origin: 0% 100%;
}

.handle-corner.resizing::after,
.handle-corner:hover::after,
.handle-corner:focus-visible::after {
	transform: scale(var(--widget-resize-handle-hover-scale));
	border-block-end:
		var(--wpds-border-width-sm) solid
		var(--wpds-color-foreground-interactive-brand-active);
	border-inline-end:
		var(--wpds-border-width-sm) solid
		var(--wpds-color-foreground-interactive-brand-active);
}

.handle-horizontal {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wpds-dimension-size-sm);
	height: var(--wpds-dimension-size-lg);
	padding-inline-end: var(--widget-resize-handle-visual-inset);
	cursor: ew-resize;
	border: none;
}

@media not ( prefers-reduced-motion ) {
	.handle-corner::after {
		transition:
			transform var(--wpds-motion-duration-xs)
			var(--wpds-motion-easing-balanced),
			border-block-end-color var(--wpds-motion-duration-xs)
			var(--wpds-motion-easing-balanced),
			border-inline-end-color var(--wpds-motion-duration-xs)
			var(--wpds-motion-easing-balanced);
	}

	.handle-horizontal::after {
		transition:
			transform var(--wpds-motion-duration-xs)
			var(--wpds-motion-easing-balanced),
			background-color var(--wpds-motion-duration-xs)
			var(--wpds-motion-easing-balanced);
	}
}

.handle-horizontal::after {
	content: "";
	width: var(--wpds-border-width-sm);
	height: var(--wpds-dimension-size-3xs);
	background-color: var(--wpds-color-foreground-interactive-brand);
	transform: scale(1);
	transform-origin: 50% 100%;
}

.handle-horizontal.resizing::after,
.handle-horizontal:hover::after,
.handle-horizontal:focus-visible::after {
	transform: scale(var(--widget-resize-handle-hover-scale));
	background-color: var(--wpds-color-foreground-interactive-brand-active);
}

@media (forced-colors: active) {
	.handle-corner::after,
	.handle-corner.resizing::after,
	.handle-corner:hover::after,
	.handle-corner:focus-visible::after {
		border-block-end-color: Highlight;
		border-inline-end-color: Highlight;
	}

	.handle-horizontal::after,
	.handle-horizontal.resizing::after,
	.handle-horizontal:hover::after,
	.handle-horizontal:focus-visible::after {
		background-color: Highlight;
	}
}