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

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

71 строка1 KB

Damián Suárez

Widget Dashboard: host-tunable tile spacing via public custom properties (#81352)

11 авг 2026, 11:38

11 авг 2026, 11:381a1b94c

/* Tile header row: identity leads, toolbar trails. */
.widget-header {
	display: flex;
	align-items: center;
	gap: var(--wpds-dimension-gap-sm);
}

.identity,
.toolbar {
	display: flex;
	align-items: center;
	height: var(--wpds-dimension-size-lg);
}

/*
 * The identity yields its width to the toolbar down to this floor: the icon,
 * a truncated slice of title, and the help.
 */
.identity {
	min-inline-size: 120px;
}

/* The row is one line tall, so the title truncates instead of wrapping. */
.title {
	min-inline-size: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.icon {
	display: inline-flex;
	color: var(--wpds-color-foreground-content-neutral);
}

.popover-popup {
	max-width: 300px;
}

.help {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wpds-color-foreground-content-neutral-weak);
	cursor: var(--wpds-cursor-control);
}

.link + .link {
	border-inline-start: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
	padding-inline-start: var(--wpds-dimension-gap-sm);
}

.toolbar {
	margin-inline-start: auto;
}

/* Floats over the tile; re-declares card padding outside Card.Root. */
.overlay {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 1;
	pointer-events: none;
	--wp-ui-card-padding: var(--wp-widget-dashboard-tile-padding, var(--wpds-dimension-padding-2xl));
}

.overlay .toolbar {
	pointer-events: auto;
}