packages/ui/src/form/primitives/input-layout/style.module.css - trunk - githubmirror/gutenberg

packages/ui/src/form/primitives/input-layout/style.module.css

86 строк3 KB

Shreya Shrivastava

Components, DataViews: Adopt --wpds-dimension-size-* tokens (#79093)

16 июн 2026, 18:09

16 июн 2026, 18:098ff27f2

@layer wp-ui {
	@layer utilities, components, compositions, overrides;

	@layer components {
		.input-layout {
			--wp-ui-input-layout-padding-inline: var(--wpds-dimension-padding-md);

			display: flex;
			height: var(--wpds-dimension-size-lg);
			background-color: var(--wpds-color-background-interactive-neutral-weak);
			border-width: var(--wpds-border-width-xs);
			border-style: solid;
			border-color: var(--wpds-color-stroke-interactive-neutral);
			border-radius: var(--wpds-border-radius-sm);
			font-family: var(--wpds-typography-font-family-body);
			font-size: max(var(--wpds-typography-font-size-md), 16px); /* avoid mobile zoom */
			line-height: 1;
			color: var(--wpds-color-foreground-interactive-neutral);

			@media (min-width: 600px) {
				font-size: var(--wpds-typography-font-size-md);
			}

			&.is-size-compact {
				--wp-ui-input-layout-padding-inline: var(--wpds-dimension-padding-sm);
				height: var(--wpds-dimension-size-md);
			}

			&.is-size-small {
				--wp-ui-input-layout-padding-inline: var(--wpds-dimension-padding-sm);
				height: var(--wpds-dimension-size-sm);
			}

			&.is-disabled,
			&:has([data-can-disable-input-layout][data-disabled]) {
				background-color: var(--wpds-color-background-interactive-neutral-weak-disabled);
				border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
				color: var(--wpds-color-foreground-interactive-neutral-disabled);

				@media (forced-colors: active) {
					border-color: GrayText;
					color: GrayText;
				}
			}

			&.is-borderless {
				border-color: transparent;
			}

			/* Don't show focus ring when the focus is in the prefix or suffix slots */
			&:has(.input-layout-slot:focus-within) {
				outline: none;
			}

			&:hover:not(.is-disabled, :has([data-can-disable-input-layout][data-disabled]), .is-borderless) {
				border-color: var(--wpds-color-stroke-interactive-neutral-active);
			}
		}

		.slot-wrapper {
			display: contents;
		}

		.input-layout-slot {
			display: flex;
			align-items: center;

			&.is-padding-minimal {
				--wp-ui-input-layout-prefix-padding-start:
					calc(var(--wp-ui-input-layout-padding-inline) -
					var(--wpds-dimension-padding-xs));
				--wp-ui-input-layout-suffix-padding-end:
					calc(var(--wp-ui-input-layout-padding-inline) -
					var(--wpds-dimension-padding-xs));
			}

			[data-slot-type="prefix"] & {
				padding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));
			}

			[data-slot-type="suffix"] & {
				padding-inline-end: var(--wp-ui-input-layout-suffix-padding-end, var(--wp-ui-input-layout-padding-inline));
			}
		}
	}
}